med-table

Wrapper over table of primeng library for Ministry of Health

Dependencies

$ npm i @angular/cdk primeng primeflex primeicons

Styles

node_modules/primeicons/primeicons.css
node_modules/primeflex/primeflex.css
node_modules/primeng/resources/primeng.min.css

Installation

NPM

$ npm i med-table

YARN

$ yarn add med-table

Register the component

Global

import { MedTableModule } from 'med-table';

imports: [
  MedTableModule,
]

med-table properties

| Name                | Type                                                                            | Required | Description | | :--- | :--- | :--- | :--- | | data | Object[] | true | Table data | | config | MedTableColumnConfig [] | true | Columns config | | loading | Boolean | false | Show loading data process Default: false | | settings | MedTableSettings | false | Default |

Usage

Table usage

<med-table
  [data]="data"
  [loading]="loading"
  [config]="config"
  [settings]="settings"
></med-table>

Templates

Table is a template driven component with named templates such as header and body that we've used so far. Templates grant a great level of customization and flexibility where you have total control over the presentation while table handles the features such as paging, sorting, filtering and more. This speeds up development without sacrificing flexibility. Here is the full list of available templates.

| Name | Description | |:-----------------|:-----------------------------------------------------| | caption | Caption content upper the table | | paginator | Custom content for the left section of the paginator | | tableHead | Custom content for the table data head cell | | tableData | Custom content for the table data cell | | rowExpansion | A row can be expanded to display additional content |

<med-table [data]="data" [loading]="loading" [config]="config">
  <ng-template mTemplate="toolbar">
    <nav>
      <a href="link">Home</a>
    </nav>
  </ng-template>

  <ng-template mTemplate="tableHead" let-column>
    {{ column.label }}
  </ng-template>
  
  <ng-template mTemplate="tableData" let-data>
    {{ data }}
  </ng-template>
  
  <ng-template mTemplate="paginator">
    <button>Click</button>
  </ng-template>
</med-table>

Custom column

tableData template properties:

| Name | Default | Description | | :--- | :--- | :--- | | data | true | Data of the data cell | | item | false | Object from the table row | | config | false | Object from the table column |

<med-table [data]="data" [loading]="loading" [config]="config">
  <ng-template mTemplate="tableData" let-data let-item="item" let-config="config">
    <ng-container [ngSwitch]="config.key">
      <ng-container *ngSwitchCase="'name'" >
        <a routerLink="/link">{{ data }}</a>
        <button type="button">Отримано</button>
      </ng-container>

      <span *ngSwitchCase="'status.name'" class="final-status">
        {{ data }}
      </span>
    </ng-container>
  </ng-template>
</med-table>

Edit

Cell editing provides a rapid and user friendly way to manipulate data.

MedUpdateEvent

import { MedTableColumnConfig, FIELD_TYPES, MedUpdateEvent } from 'med-table';

interface DataType {
    ...
}

@Component({
  selector: 'app-root',
  template: `
    <med-table
      [data]="data"
      [loading]="loading"
      [config]="tableConfig"
      (updateRow)="onUpdateRow($event)"
    ></med-table>
  `
})
export class AppComponent {
  data: DataType[] = [...];
  tableConfig: MedTableColumnConfig[] = [
    {
      key: 'key',
      label: 'Label',
      editorType: FIELD_TYPES.TEXT,
    },
    ...
  ];

  onUpdateRow(event: MedUpdateEvent<DataType>) {
      ...
  }
}

Editor field types

Link

export enum FIELD_TYPES {
  TEXT = 'text',
  NUMBER = 'number',
  TEXTAREA = 'textarea',
  MASK = 'mask',
  DATE = 'date',
  CHECKBOX = 'checkbox',
  SELECT = 'select', // should set MedTableService.setSelectData
  AUTOCOMPLETE = 'AUTOCOMPLETE', // should set MedTableService.setDatalist
}

If you use FIELD_TYPES.SELECT, you need to set the data for the selected parameters with MedTableService.setSelectData(data: MedSelectOption, key: string).

key param must to be as same as key fields in MedTableColumnConfig

import { MedTableService, MedSelectOption } from 'med-table';

...

constructor(private medTableService: MedTableService) {
  const data: MedSelectOption<any> = [...];
  const key: string = 'key';
  medTableService.setSelectData(data, key);
}

Server side sort, filter and pagination

• MedUpdateTableEvent
• MedTableSettings

import {
  MedTableSettings,
  MedTableService,
  MedTableColumnConfig, 
  MedUpdateTableEvent, 
} from 'med-table';

interface DataType {
  ...
}

@Component({
  selector: 'app-root',
  template: `
    <med-table
      [data]="data"
      [loading]="loading"
      [config]="tableConfig"
      [settings]="tableSettings"
      (updateTable)="getData($event)"
    ></med-table>
  `
})
export class AppComponent {
  constructor(private api: ApiService, private tableService: MedTableService) {
  }

  loading = false;
  data: DataType[] = [];
  tableSettings: MedTableSettings = {
    lazy: true,
    rows: 25,
    totalRecords: 0,
  };
  tableConfig: MedTableColumnConfig[] = [
    {
      key: 'key',
      label: 'Label',
    },
    ...
  ];

  getData(event: MedUpdateTableEvent) {
    this.loading = true;

    this.api.getData(event).subscribe(({data, filterSelectData}) => {
      this.tableSettings.totalRecords = data.length;
      this.data = data;

      this.tableSettings.setFilterSelectData(filterSelectData, 'key'); // set data for filter select by key param
      this.loading = false;
    });
  }
}