brainy-table's Introduction

<brainy-table>

brainy-table is a Polymer 1.x data table element.

<iron-ajax auto url="demo/users.json" last-response="{{users}}"></iron-ajax>
<brainy-table items="[[users.data]]" page-size="5" details-enabled>
  <brainy-table-column name="First Name" filter-by="user.name.first" sort-by="user.name.first">
    <template>[[item.user.name.first]]</template>
  </brainy-table-column>
  <brainy-table-column name="Last Name" sort-by="user.name.last">
    <template>[[item.user.name.last]]</template>
  </brainy-table-column>
  <brainy-table-column name="Phone" sort-by="user.phone" align-right>
    <template>[[item.user.phone]]</template>
  </brainy-table-column>
  <brainy-table-column width="30px" align-right flex="0">
    <template>
      <template is="dom-if" if="[[!expanded]]">
        <iron-icon icon="icons:expand-more"></iron-icon>
      </template>
      <template is="dom-if" if="[[expanded]]">
        <iron-icon icon="icons:expand-less"></iron-icon>
      </template>
    </template>
  </brainy-table-column>
  <template is="row-detail">
    <div>[[item.user.location.street]], [[item.user.location.city]], [[item.user.location.state]]</div>
  </template>
  <div no-results>No records found</div>
</brainy-table>

Inspired by iron-data-table. Follows the guidelines of Material Design.

Features

Data filtering
Data sorting
Pagination
Template support for each column
Two-way binding support
Custom styling support for templates
Flex support for cells
Native Shadow DOM support
Column manipulation, resizing, hiding, reordering
Custom header templates
Row details
Disabling row details depending on item subproperty value
Horizontal scrolling shadows
"Drag-and-drop" scroll

Special use cases

Limited amount of data (for infinite scrolling, consider using iron-data-table instead)
Table shouldn't be explicitly sized (height depends on rows count)
Rows can include dropdown menus etc (no transform is used, so table does not create z-index trap)

Recommend Projects