ngx-mariem-datatable/README.md

Advanced table extension with sorting, filtering, paging and more... for Angular apps

# ngx-mariem-datatable

Advanced table extension with sorting, filtering, paging and more... for Angular apps

## Usage

```
import { NgxMariemDatatableModule } from 'ngx-mariem-datatable';

```

```
@NgModule({
  declarations: [],
  imports: [
     NgxMariemDatatableModule
  ]
})

```

After importing the DatatableModule in your module:

### HTML Code

```
 <ngx-mariem-datatable
       (onActionClicked)="onActionClicked($event)"
       [Actions]="actions"
       [datatable]="datatable"
       [displayedColomn]="displayedColomn"
 >
 </ngx-mariem-datatable>
```

### Typescript code

A step by step series of examples that tell you how to get a development env running

Say what the step will be

```
import { datatable_action, datatable_displayedColomn } from 'ngx-mariem-datatable/lib/datatable.model';
```

```
  actions: datatable_action[] = [
    {
      value: "Editer",
      childrens:[
        {
          type: "edit", #the type just to identify the action on click action
          iconClass: "chevron_right"
        }
      ]
    }
  ]
```

And

```
 displayedColomn: datatable_displayedColomn[] = [
    {
      data: "id",
      value: "Id",
      type: "text",
      search: true,
      sort: true
    },
    {
      data: "name",
      value: "Nom",
      type: "text",
      search: true,
      sort: true
    },
    {
      data: "description",
      value: "Description",
      type: "text",
      search: true,
      sort: true
    }
  ]

datatable : any[] = [
   {
    id:1,
    name:"user name",
    description : "exemple description"
   },
   {
    id:2,
    name:"user",
    description : "exemple description 2"
   }
]
```

## DOCUMENTATION

Explain how to run the automated tests for this system

### Genaral functionalities

#### Inputs

| Input                 | Type                        | Description                                                                                                                 |
| --------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| datatable             | array of objects            | List should be displayed                                                                                                    |
| displayedColomn       | datatable_displayedColomn[] | cols description                                                                                                            |
| Actions               | datatable_action[]          | List of actions buttons                                                                                                     |
| hideTheader           | boolean                     | use it to hide table header,false by default                                                                                |
| searchvalue           | string                      | Value to search in datatable                                                                                                |
| textalign             | 'left','right' or 'center'  | set text alignment in table,'left' by default                                                                               |
| nothingToShowMessage  | string                      | "Pas de résultats" by default                                                                                               |
| checkboxes            | boolean                     | allow to show checkboxes select on the left ,false by default. If true datatable items should contain id & selected columns |
| checkboxesMultiselect | boolean                     | allow to select multiples rows ,true by default                                                                             |

#### Outputs

| Output          | Description                     |
| --------------- | ------------------------------- |
| datatableChange | emit datatable updated          |
| onRowClicked    | when row clicked emit row data  |
| onActionClicked | emit action clicked information |

### Pagination

| Input        | Type    | Description                                        |
| ------------ | ------- | -------------------------------------------------- |
| pagination   | boolean | to enable or desable pagination, true by default   |
| itemsPerPage | number  | 10 by default                                      |
| maxSize      | number  | limit number for page links in pager, 5 by default |

### datatable_displayedColomn model description

```
datatable_displayedColomn {
  data: string ;
  template?: TemplateRef<any>;
  value: string;
  type: "text" | "checkbox" | "date" | "icon" | "customTemplate" =
    "text";
  search: boolean = false;
  sort: boolean = false;
  sorted?: boolean;
  extraData?: any;
}
```

### datatable_action model description

```
datatable_action {
  // attribut to show
  value: any;
  // list of actions in that groupe
  childrens: action[];
}
```

### action model description

```
action {
  // action description name
  type: string;
  // class name contains icon action
  iconClass: string;
  //to disable click on action
  disabledAttribut?: string;
}
```