med-table
TypeScript icon, indicating that this package has built-in type declarations

2.0.16 • Public • Published

med-table

Wrapper over table of primeng library for Ministry of Health

NPM

npm version

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

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;
    });
  }
}

Package Sidebar

Install

npm i med-table

Weekly Downloads

105

Version

2.0.16

License

MIT

Unpacked Size

768 kB

Total Files

99

Last publish

Collaborators

  • dmytro_rybachek