Skip to content

OWOX/brainy-table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status Bower version Published on webcomponents.org

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)