0.1.7 • Published 4 years ago
etools-table v0.1.7
\<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