<etools-data-table>

Etools data table UI

Usage

<etools-data-table-header
  id="listHeader"
  label="[[visibleRange.0]]-[[visibleRange.1]] of [[totalResults]] results to show"
>
  <etools-data-table-column class="col-2" field="number" sortable> Reference # </etools-data-table-column>
  <etools-data-table-column class="col-4" field="partner_name" sortable> Government Partner </etools-data-table-column>
  <etools-data-table-column class="flex-c" field="created_at"> Years </etools-data-table-column>
</etools-data-table-header>

<template id="rows" is="dom-repeat" items="[[governments]]" as="entry">
  <etools-data-table-row details-opened="[[detailsOpened]]">
    <div slot="row-data">
      <span class="col-data"> [[entry.number]] </span>
      <span class="col-data"> [[entry.partner_name]] </span>
      <span class="col-data"> [[entry.years]] </span>
    </div>
    <div slot="row-data-details">
      <div class="row-details-content">
        <span class="rdc-title">Unicef Focal Point</span>
        <span>[[entry.unicef_focal_point_names]]</span>
      </div>
      <div class="row-details-content">
        <span class="rdc-title">Sectors</span>
        <span>[[entry.sectors]]</span>
      </div>
    </div>
  </etools-data-table-row>
</template>

<etools-data-table-footer
  page-size="[[pageSize]]"
  page-number="[[pageNumber]]"
  total-results="[[totalResults]]"
  visible-range="{{visibleRange}}"
  on-page-size-changed="_pageSizeSelected"
  on-page-number-changed="_pageNumberChanged"
>
</etools-data-table-footer>

Styling

| Custom property | Description | Default | | ------------------------------------------------------------ | --------------------------------------------- | --------------------- | | --list-primary-color | Color of links and button texts | #40c4ff | | --list-secondary-color | Color of dropdown selected element background | #ffffff | | --list-divider-color | Color of borders and dividers | #9D9D9D | | --list-bg-color | Primary background color | #ffffff | | --list-second-bg-color | Background on hover and of details box | #eeeeee | | --list-text-color | Primary text color | #2b2b2b | | --list-secondary-text-color | Text color for the titles | #757575 | | --list-icon-color | Icon color | #2b2b2b | | --list-icon-hover-color | Icon hover color | rgba(0, 0, 0, 0.87) | | --list-disabled-icon-color | Disabled icon color | rgba(0, 0, 0, 0.64) | | etools-data-table-row::part(edt-list-row-collapse-wrapper) | Row collapsible details shadow part | {} | | etools-data-table-row::part(edt-list-row-wrapper) | Row wrapper shadow part | {} | | etools-data-table-row::part(edt-icon-wrapper) | Icon wrapper shadow part | {} | | etools-data-table-header::part(edt-data-table-header) | Data table header shadow part | {} | | etools-data-table-header::part(edt-header-title) | Header title shadow part | {} | | etools-data-table-header::part(edt-header-columns) | Header columns shadow part | {} | | etools-data-table-column::part(edt-list-column-label) | List columns shadow part | {} | | --list-row-wrapper-padding-inline | Start-End padding | 0 24px |

Install

TODO: create npm package

$ npm i --save @unicef-polymer/etools-data-table

Preview element locally

Install needed dependencies by running: $ npm install. Make sure you have the Polymer CLI installed. Then run $ polymer serve to serve your element application locally.

Update demo interface: $ polymer analyze demo/index.html > analysis.json

Linting the code

Install local npm packages (run npm install) Then just run the linting task

$ npm run lint

Running Tests

TODO: improve and add more tests

$ polymer test

Circle CI

Package will be automatically published after tag push (git tag 1.2.3 , git push --tags). Tag name must correspond to 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