Tables

[bsradcliffe]

I'd love to see Lion tackle tabular data. Tables have such a huge use case for many enterprise apps with functionality like searching, sorting, filtering. Something similar to this.

[jorenbroekema]

Agreed! I was just talking with @MathieuPuech about this and that we should probably start by making a list of requirements of a.. let's call it @lion/data-table as a working name for now?

Basics:

• Pass items (prop name not set in stone of course) to the table which is essentially the data/state of the table before any handling happens. A JS Array of objects would make sense to me, where 1 item corresponds to 1 "row". Are there fundamentally different approaches that we could consider?
• Somehow, process items but allow some "handler" or "renderer" API to change how a property value is rendered.
• Supply table headers based on the item properties. Could be its own property on the table, also a JS Array?

Table-wide features,:

• Sorting
  • Imperatively with JS?
  • Through clicking the header, to sort by that property, toggle sort-direction from incrementing/decrementing
• Filtering
• Searching (probably uses filtering, but with an end-user API)

These features could perhaps be abstracted into a handler layer that happens before rendering layer but does not mutate the original data/state (items).

Footer features:

• Pagination

Keep in mind with features we should probably stick to only the most common / generic ones and leave implementers/subclassers to add their own opinionated ones. For example, CRUD actions like deleting rows, adding new items through the UI, I would consider to be quite opinionated. Some people would pop up a confim dialog before deleting, for adding new item you'd need some kind of form, etc. etc. we can of course create demos showing examples.

These are the requirements that come to mind after reading about:

• WAI ARIA data grid pattern very important also when looking at accessibility
• stampino, see demo: https://webcomponents.dev/edit/O5PomcpR4esn1mdUryDP/src/index.stories.js
• lit-datatable
• vuetify data-tables

In terms of API, and this is obviously going beyond just "requirements" but I still want to give my 2 cents, I really like lit-datatable and vuetify data-tables.

The API seems straight forward to me, I'm combining a bit the vuetifyjs and lit-datatable APIs here:

<lion-data-table
  .items=[{ name: 'foo', value: 15 }] 
  .headers=[{ text: 'Foo', value: 'name' }, { text: 'Amount', value: 'value' }]
>
  <lion-data-table-column
    property="name" 
    .html=${(val, prop) => html`<lion-button>${prop}: ${val}</lion-button>`}
  ></lion-data-table-column>
</lion-data-table>

I believe it has the right amount of declarative styled API, but also allow more complex things by changing the renderer (.html property, taken from lit-datatable's API) with JS.

I also believe it is an API that is fitting pretty well to lion, which is my main gripe with stampino which uses <template>s and some other tools like polymer expressions and incremental dom, I find that we should probably just use lit which we use in lion and kinda already does this job really well.

So at this moment, in my opinion the lit-datatable is quite excellent in terms of API and I think we could take that approach, and there's a few things for vuetifyjs that I do prefer. I also think vuetifyjs does some other things really well that I think we should take inspiration from: mainly their dynamic slots feature to customize things about the data table seems really useful if we were to adopt such an equivalent in our data table.

[jorenbroekema]

@MathieuPuech wouldn't that be the case for any Lion component? External Web Components will always have a rendering method that you don't really control as a user of this component, but for interoperability this is not necessary.

[MathieuPuech]

for other Lion Component like dialog, the slot content are not rendered by lit-html but with the framework used (vanilla html, vue, react, angular). We have the same discussion for lion-steps renders for example

[MathieuPuech]

I don't know if we need to have the column custom element, we could directly attach to the main custom element the rows and columns:
https://webcomponents.dev/edit/TkjmONyBlEdxFzAQ16Yt/

[MathieuPuech]

I did some test to make a react version of it:
https://codesandbox.io/s/test-lit-datatable-react-c288p?file=/src/App.js

With this, the render can be done by the parent framework without needing lit-html

It could be the same for vue or angular.

[MathieuPuech]

to avoid having multiple Virtual DOM in react, we could use React Portals like that:

https://codesandbox.io/s/test-lit-datatable-react-forked-j8dd2?file=/src/App.js