<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