<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

Custom property | Description ---------------------|------------------- caption | table caption dateFormat | date format to be used for columns of type EtoolsTableColumnType.Date, by default is 'D MMM YYYY' actionsLabel | if showEdit or showDelete is true at the end of the table it is added and extra column for actions, this property will set the column caption showEdit | display edit icon in the last column, on click will fire event edit-item showDelete | display delete icon in the last column, on click will fire event delete-item showCopy | display copy icon in the last column, on click will fire event copy-item columns | array of EtoolsTableColumn, see below the properties items | array of objects to be used for populating the table paginator | of type EtoolsPaginator, not required, will fire event paginator-change

EtoolsTableColumn

Custom property | Description ---------------------|------------------- label| column header label name | property name from item object type | column type: EtoolsTableColumnType (Text, Date, Link, Number, Checkbox, Custom) sort | colum sort: EtoolsTableColumnSort (Asc, Desc) link_tmpl | used only for EtoolsTableColumnType.Link to specify url template (route with a single param), ex: ${ROOT_PATH}assessments/:id/details, id will be replaced with item object id property isExternalLink | used by columns of Link type to specify if url is external, capitalize | capitalize first letter placeholder | placeholder to be used in case of missing data customMethod | bind custom method which will return cell output for more flexibility

EtoolsPaginator

Custom property | Description ---------------------|------------------- page | page_size | total_pages | count | visible_range |

Install

TODO: create npm package

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