Demo and API docs

<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)