3.0.0-rc.2 • Published 2 years ago
@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
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 |
showView | display view icon in the last column, on click will fire event view-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 |
getChildRowTemplate | of type Function, if specified, will be called for each row with data item as param and the result will be displayed below normal row |
setRowActionsVisibility | of type Function, if specified, will be called for each row with data item as param and the result will be used as settings for actions display |
customData | a convenient way to pass data from the page to the Column customMethod , this object will be the third param after data item and column key |
extraCSS | property of type LitElement css for adding custom styles |
EtoolsTableColumn
Custom property | Description |
---|---|
label | column header label |
name | property name from item object |
type | of type EtoolsTableColumnType (Text , Date , Link , Number , Checkbox , Custom ) |
sort | of type 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 | first letter uppercase |
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 | current page |
page_size | number of records on the page |
total_pages | number of available pages |
count | number of total records |
visible_range | range of displayed records |
Styling
Custom property | Description | Default |
---|---|---|
--expand-icon-color | expand icon arrow color | --primary-color |
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:
Version match | Result |
---|---|
1.2.3 | match |
1.2.3-pre | match |
1.2.3+build | match |
1.2.3-pre+build | match |
v1.2.3-pre+build | match |
1.2 | no match |
You can see more details here
3.0.0-rc.2
2 years ago
3.0.0-rc.1
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.4.2-rc1
2 years ago
1.4.2-rc2
2 years ago
1.4.1
2 years ago
1.4.0
2 years ago
1.4.1-rc.1
2 years ago
1.3.3-ec.1
3 years ago
1.3.3
3 years ago
1.3.1-rc.1
3 years ago
1.3.3-rc.1
3 years ago
1.3.2
3 years ago
1.3.1
3 years ago
1.3.0
4 years ago
1.2.2
4 years ago
1.2.1
4 years ago
1.2.0
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.1-rc.4
4 years ago
1.1.1-rc.3
4 years ago
1.1.1-rc.2
4 years ago
1.1.1-rc.1
4 years ago
1.1.0
5 years ago
1.1.0-rc.2
5 years ago
1.1.0-rc.1
5 years ago
1.0.9
5 years ago
0.1.8
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.1-rc.4
5 years ago
1.0.0-rc.4
6 years ago
1.0.2-rc.3
6 years ago
1.0.1-rc.3
6 years ago
1.0.1-rc.2
6 years ago
1.0.1-rc.1
6 years ago
1.0.0-rc.1
6 years ago