This element uses, as an initial foundation, the Google Material Design specification for data tables: Data Tables
However, the goal of the element is to support much richer data grid functionality, so there will be necessary deviations or extrapolations, as features that are not included in the specification are added to this element.
<radium-datagrid items="[[_myItems]]">
<template>
<radium-datagrid-row>
<radium-datagrid-column id="foo" header="Foo"><span>[[row.foo]]</span></radium-datagrid-column>
<radium-datagrid-column id="bar" header="Bar"><span>[[row.bar]]</span></radium-datagrid-column>
<radium-datagrid-column id="baz" header="Baz"><span>[[row.baz]]</span></radium-datagrid-column>
</radium-datagrid-row>
</template>
</radium-datagrid>
A row will be rendered for each item of the collection, and the row property will be available for the template of each column.
Column width, alignment, and grid line/color options. Column sorting also demonstrated.
Shows the various states of the grid initial, loading, loaded, and no records
Optional footer with paging controls.
Single selection and multi-selection examples (both cross-device and desktop specific).
Single selection and multi-selection examples (both cross-device and desktop specific), this time with a column of checkboxes
Simple infinite scroll example.
Toggle inputs on column headers to filter data.
MIT Licensed