# MUK TABLE

## Usage

```html
<lib-muk-table [columns]="columns" [data]="data?.items" [hasNext]="data?.hasNext" [hasPrevious]="data?.hasPrevious" [length]="data?.totalItems" [pageIndex]="data?.index" [pageSize]="data?.size" [menuList]="menuOptionsList">
  <div actions>
    <dynamic-buttons [buttons]="actionsButtons"></dynamic-buttons>
  </div>
  <div searchCriteria>
    <app-dynamic-forms (onSubmit)="search($event)" [buttons]="buttons" [fields]="filterFields"></app-dynamic-forms>
  </div>
  <ng-template #rowActions let-item="item">
    <dynamic-buttons [buttons]="rowActionsButtons" [item]="item"> </dynamic-buttons>
  </ng-template>
</lib-muk-table>
```

```typescript
import { Component } from "@angular/core";
import { IMenu } from "ngx-mui-kit/components/muk-menu";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  data = {
    items: [
      { name: "John", surname: "Doe", age: 30 },
      { name: "Jane", surname: "Doe", age: 25 },
      { name: "Jack", surname: "Doe", age: 20 },
    ],
    hasNext: false,
    hasPrevious: false,
    length: 3,
    index: 0,
    size: 10,
  };

  columns = [
    { name: "name", label: "Name" },
    { name: "surname", label: "Surname" },
    { name: "age", label: "Age" },
    { name: "Actions_1", type: COLUMN.dots_actions },
  ];
  menuOptionsList: IMenu[] = [
    {
      title: "Edit",
      iconName: "edit",
      onClick: () => {
        console.log("test");
      },
    },
    { title: "View", iconName: "visibility" },
    { title: "Link to partner" },
  ];
}
```

### Properties

| Name        | Type                             | Description                                                                                 |
| ----------- | -------------------------------- | ------------------------------------------------------------------------------------------- |
| data        | unknown[]                        | Data to display. Each object property will be mapped to a column.                           |
| columns     | IColumn[]                        | List of columns to display. Each column must have a `name`, `type` and `propName` property. |
| pageSize    | number                           | Number of rows to display per page.                                                         |
| pageIndex   | number                           | Current page number.                                                                        |
| Size        | number                           | Total number of rows in page.                                                               |
| hasNext     | boolean                          | Whether there is a next page.                                                               |
| hasPrevious | boolean                          | Whether there is a previous page.                                                           |
| length      | number                           | Total number of rows.                                                                       |
| content     | Record<string, TemplateRef<any>> | Content to display. peer row according to column name                                       |

### Templates

| Name           | Type                          | Description                              |
| -------------- | ----------------------------- | ---------------------------------------- |
| rowActions     | TemplateRef<{item: unknown;}> | Template to display row actions.         |
| searchCriteria | TemplateRef<unknown>          | Template to display search criteria.     |
| actions        | TemplateRef<unknown>          | Template to display actions. above table |