paper-datatable-api.html

<link rel="import" href="../polymer/polymer-element.html">

<link rel="import" href="paper-datatable-api-shared-styles.html">
<link rel="import" href="paper-datatable-api-th-content.html">
<link rel="import" href="paper-datatable-api-footer.html">
<link rel="import" href="paper-datatable-api-icons.html">

<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-input/iron-input.html">

<link rel="import" href="../paper-checkbox/paper-checkbox.html">

<link rel="import" href="../app-localize-behavior/app-localize-behavior.html">

<!--

`paper-datatable-api` is a material design implementation of a data table.

    <link rel="import" href="bower_components/paper-datatable-api/dist/paper-datatable-api-column.html">
    <link rel="import" href="bower_components/paper-datatable-api/dist/paper-datatable-api.html">
    <iron-ajax auto url="data.json" last-response="{{data}}"></iron-ajax>

    <paper-datatable-api data="[[data]]">
      <paper-datatable-api-column header="Fruit" draggable-column property="fruit">
        <template>
          <span>{{value}}</span>
        </template>
      </paper-datatable-api-column>
      <paper-datatable-api-column header="Color" property="color">
        <template>
          <span>{{value}}</span>
        </template>
      </paper-datatable-api-column>
    </paper-datatable-api>

### Features

- [Follows the guideline of Material Design](https://material.google.com/components/data-tables.html#)
- Hide/Show columns
- Choose which columns can be hidden or shown
- Sort
- Pagination
- Checkboxes to select or manipulate data
- Keep the selected data throught the pages
- Filter a column
- Ability to filter columns
- Drag and drop column

### Styling

The following custom properties and mixins are available for styling:

Custom property                                   | Description                                    | Default
--------------------------------------------------|------------------------------------------------|-------------
`--paper-datatable-api-checked-checkbox-color`    | Define color of checked checkbox               | `--primary-color`
`--paper-datatable-api-unchecked-checkbox-color`  | Define color of unchecked checkbox             | `--primary-color`
`--paper-datatable-api-tr-selected-background`    | Define color of the selected tr                | `--paper-grey-100`
`--paper-datatable-api-tr-even-background-color`  | Define color of the even trs                   | `none`
`--paper-datatable-api-tr-odd-background-color`   | Define color of the odd trs                    | `none`
`--paper-datatable-api-table`                     | Mixin applied to the table element             | `{}`
`--paper-datatable-api-header`                    | Mixin applied to the columns header            | `{}`
`--paper-datatable-api-tr-hover-background-color` | Define color of the tr background hover        | `none`
`--paper-datatable-api-header-sorted`             | Mixin applied to the sorted columns header     | `{}`
`--paper-datatable-api-custom-td`                 | Mixin applied to the custom style td           | `{}`
`--paper-datatable-api-checkbox`                  | Mixin applied to the paper-checkbox            | `{}`
`--paper-datatable-api-horizontal-padding`        | Mixin applied to the horizontal padding        | `26px`
`--paper-datatable-api-min-width-input-filter`    | Min width of the filter input                  | `120px`

@element paper-datatable-api
@demo demo/index.html
-->
<dom-module id="paper-datatable-api">
  <template>
    <style include="paper-datatable-api-shared-styles"></style>
    <style include="iron-flex iron-flex-alignment"></style>

    <table>
      <thead class$="[[_generateClass(filters)]]">
        <tr>
          <template is="dom-repeat" items="[[_columns]]" as="column" index-as="index">
            <template is="dom-if" if="[[selectable]]" restamp>
              <template is="dom-if" if="[[equals(index, checkboxColumnPosition)]]" restamp>
                <th class="selectable">
                  <div>
                    <template is="dom-if" if="[[allowTheSelectionOfAllTheElements]]" restamp>
                      <paper-checkbox on-change="_selectAllCheckbox"></paper-checkbox>
                    </template>
                  </div>
                </th>
              </template>
            </template>
            <th class$="[[_generateClass(column.filter)]] pgTh [[_addCustomTdClass(column.tdCustomStyle)]]" data-column="[[column]]"
              property$="[[column.property]]" style$="display: [[_getThDisplayStyle(column.hidden)]];">
              <paper-datatable-api-th-content column="[[column]]" position-sort-icon="[[positionSortIcon]]" date-format="[[dateFormat]]"
                sort-direction$="[[column.sortDirection]]" on-input-change-th-content="_handleInputChange"
                on-date-input-change-th-content="_handleDateChange" language="[[language]]"
                sorted$="[[column.sorted]]" sortable$="[[column.sortable]]" on-filter-th-content="_handleFilter"
                on-sort-th-content="_handleSort">
              </paper-datatable-api-th-content>
            </th>
          </template>
        </tr>
      </thead>

      <tbody class$="[[_generateClass(filters)]]">
      </tbody>
    </table>

    <template is="dom-if" if="[[paginate]]" restamp>
      <paper-datatable-api-footer resources="[[resources]]" language="[[language]]" footer-position="[[footerPosition]]"
        available-size="[[availableSize]]" total-pages="[[totalPages]]" total-elements="[[totalElements]]"
        old-page="[[oldPage]]" size="{{size}}" page="{{page}}">
      </paper-datatable-api-footer>
    </template>

  </template>
  <script src="paper-datatable-api.js"></script>
</dom-module>