@unicef-polymer/etools-table v3.0.0-rc.2

\<etools-table>

LitElement based data table UI

Usage

<etools-table
  .columns="${this.listColumns}"
  .items="${this.listData}"
  .paginator="${this.paginator}"
  @paginator-change="${this.paginatorChange}"
  @sort-change="${this.sortChange}"
>
</etools-table>

@property({type: Array})
        listColumns: EtoolsTableColumn[] = [
          {
            label: 'Reference No.',
            name: 'reference_number',
            link_tmpl: `${ROOT_PATH}items/:id/details`,
            type: EtoolsTableColumnType.Link
          },
          {
            label: 'Created Date',
            name: 'created_date',
            type: EtoolsTableColumnType.Date,
            sort: EtoolsTableColumnSort.Desc
          },
          {
            label: 'Partner Org',
            name: 'partner_name',
            type: EtoolsTableColumnType.Text,
            sort: EtoolsTableColumnSort.Asc
          },
          {
            label: 'Status',
            name: 'status',
            type: EtoolsTableColumnType.Text,
            capitalize: true
          },
          {
            label: 'Assessor',
            name: 'assessor',
            type: EtoolsTableColumnType.Text
          },
          {
            label: 'Priority',
            name: 'high_priority',
            type: EtoolsTableColumnType.Custom,
            customMethod: (item: any) => {return item.high_priority ? 'High' : '';}
          }
        ];

        paginatorChange(e: CustomEvent) {
          const newPaginator = {...e.detail};
          this.paginator = newPaginator;
          this.updateUrlListQueryParams();
        }

        sortChange(e: CustomEvent) {
          this.sort = getSortFields(e.detail);
          this.updateUrlListQueryParams();
        }

EtoolsTable

EtoolsTableColumn

EtoolsPaginator

Styling

Install

TODO: create npm package

$ npm i --save @unicef-polymer/etools-table

Circle CI

Package will be automatically published after tag push. Tag name must correspond SemVer (Semantic Versioning) rules.
Examples:

You can see more details here