carbon-addons-iot-react
carbon-addons-iot-react copied to clipboard
Data table implementation for Angular
Implementation of the Data table component for Angular - needed by OMS team: https://pages.github.ibm.com/ai-applications/design/components/datatable/overview
- [ ] General guidelines (ALL)
- [x] Column alignment (ALL)
- [ ] Column customization
- [ ] Column selection
- [x] Column reordering
- [ ] Pinned column
- [ ] Horizontal scrolling
- [ ] Column resizing
- [x] Empty states (ALL)
- [ ] Expandable rows
- [ ] Simple expandable rows
- [ ] Complex expandable rows
- [ ] Child rows with different column headers
- [ ] Filtering
- [x] Filter flyout
- [x] Filter pane
- [ ] Filter summary
- [ ] Group column headers (ALL)
- [ ] Data table row and batch actions
- [ ] Inline actions
- [ ] Horizontal scrolling
- [ ] Batch actions
- [ ] Batch actions overflow
- [ ] Scrolling
- [ ] Pinned columns
Table enhancements
The existing table component was not built to accommodate a lot of the use cases we are encountering today. It's still sufficient for simple tabular data, but it struggles to handle pinned rows/columns, data grid interactions, nested rows, multi-level headers ...
To fix that I propose:
- An entirely new table model. The current model relies fairly heavily on Angular properly detecting changes in nested objects, instead we should use Observables to expose the data to the table.
- A proper
TableRowclass. With a realTableRowit becomes reasonable to nest rows just by passing in data and another childTableRow.- This will also easily allow nested tables or other content
- The
TableRowclass should track it's expanded/collapsed/selected state and expose it as an Observable. Then the parent model can collect these events and re-broadcast them at the top level
- The table component should expose a service to itself and child components to facilitate communication of state between components, and potentially synchronize a11y` attributes
- The model/service should have knowledge of how headers and cells are related, such that the appropriate a11y attributes can be added without additional work. Ideally the model should also facilitate data grid style navigation and
tabindexing. - It should be possible to style the host elements such that no additional elements are needed to create the layout. i.e.
ai-rowshould behave liketr,ai-tdshould behave liketd.