3.0.0-rc.2 • Published 2 years ago

@unicef-polymer/etools-table v3.0.0-rc.2

Weekly downloads
88
License
Apache-2.0
Repository
github
Last release
2 years ago

\<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 propertyDescription
captiontable caption
dateFormatdate format to be used for columns of type EtoolsTableColumnType.Date, by default is 'D MMM YYYY'
actionsLabelif 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
showEditdisplay edit icon in the last column, on click will fire event edit-item
showDeletedisplay delete icon in the last column, on click will fire event delete-item
showCopydisplay copy icon in the last column, on click will fire event copy-item
showViewdisplay view icon in the last column, on click will fire event view-item
columnsarray of EtoolsTableColumn, see below the properties
itemsarray of objects to be used for populating the table
paginatorof type EtoolsPaginator, not required, will fire event paginator-change
getChildRowTemplateof type Function, if specified, will be called for each row with data item as param and the result will be displayed below normal row
setRowActionsVisibilityof 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
customDataa 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
extraCSSproperty of type LitElement css for adding custom styles

EtoolsTableColumn

Custom propertyDescription
labelcolumn header label
nameproperty name from item object
typeof type EtoolsTableColumnType (Text, Date, Link, Number, Checkbox, Custom)
sortof type EtoolsTableColumnSort (Asc, Desc)
link_tmplused 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
isExternalLinkused by columns of Link type to specify if url is external,
capitalizefirst letter uppercase
placeholderplaceholder to be used in case of missing data
customMethodbind custom method which will return cell output for more flexibility

EtoolsPaginator

Custom propertyDescription
pagecurrent page
page_sizenumber of records on the page
total_pagesnumber of available pages
countnumber of total records
visible_rangerange of displayed records

Styling

Custom propertyDescriptionDefault
--expand-icon-colorexpand 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 matchResult
1.2.3match
1.2.3-prematch
1.2.3+buildmatch
1.2.3-pre+buildmatch
v1.2.3-pre+buildmatch
1.2no 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