Skip to content

Latest commit

 

History

History
139 lines (118 loc) · 7.97 KB

README.md

File metadata and controls

139 lines (118 loc) · 7.97 KB
Raw

<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