carbon-addons-iot-react icon indicating copy to clipboard operation
carbon-addons-iot-react copied to clipboard

Data table implementation for Angular

Open ninja511 opened this issue 4 years ago • 1 comments

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  

ninja511 avatar Apr 13 '21 16:04 ninja511

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 TableRow class. With a real TableRow it becomes reasonable to nest rows just by passing in data and another child TableRow.
    • This will also easily allow nested tables or other content
    • The TableRow class 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-row should behave like tr, ai-td should behave like td.

cal-smith avatar May 21 '21 19:05 cal-smith