Implement data table component

[dfreedm]

I'm submitting a:

• [ ] bug report
• [x] feature request

[PaulHMason]

Awesome :)

Just some comments on this. The Material Design guidelines for data tables are a bit light and don't really cater for line of business type applications, where you need to support for fairly large data sets (scrolling). Things like fixed headers and columns, detail rows, as well as virtualization are pretty much as must.

The article below covers data table requirements quite well. https://uxdesign.cc/design-better-data-tables-4ecc99d23356

[JosefJezek]

Here is cool vaadin grid for inspiration... https://vaadin.com/components/vaadin-grid

[kamarajuPrathi]

Love to see these features 1.Custom Cell Renderer 2.Custom Column Header 3.Option or pagination/infinite scrolling 4.Always Virtualized 5.Sticky Columns /rows(optional) 6.Filtering as part of table (optional) 7.Sorting 8.Column/row Reordering (Drag and drop) 9.expandled row and column 10.Custom Row Sizes 11.Show and Hide columns

12. Export and import data 13.Group by a column property 14.Custom Footer Render 15.Custom loading Indicator 16.Action Buttons/icons (Delete,copy on select of a row) 17.Row highlight 18.themes

[jrivera-A2G]

Hello, any idea when the missing components will be available ??? Many of the community are excited

[evangelosdaniil]

Hello everybody, happy new year 🥳 Do we have any update on this component? We are waiting eagerly 🙈

[jrivera-A2G]

Hi everyone, any news about that??? We need it as soon as possible ! This in advance

[PaulHMason]

Hi everyone, any news about that??? We need it as soon as possible ! This in advance

I'm pretty sure it will only provide the Material Design features and won't be a full featured data table. It's not terribly difficult to create a basic Material Design style table, and there's always the Vaadin grid if you want a full featured grid.

[MarcSkovMadsen]

Any news on this?

[evangelosdaniil]

@PaulHMason, of course, there is the option to use Vaadin, but the whole point is to use the MWC components. It's a pity that MWC is not an important project for Google.

[jrivera-A2G]

I agree with @evangelosdaniil . It is assumed that the value proposition of web components and for which several of us have based our projects on LitElements is due to the promise of a roadmap that was made since 2020 with the web components that are yet to be developed.

[christophe-g]

Re-posting - without hate - a couple of comments I wrote 5 month ago (https://github.com/material-components/material-components-web-components/pull/1852) as it still seems relevant, esp. the lack of visibility for devs courageous(?) enough to put faith in mwc-components at an early stage.

---

Thanks a lot for the detailed answer, truly appreciated !

Beyond the specifics of this PR, I think it illustrates a series of concerns I was not sure where/how to state. So, I'll do it here, not without thanking the devs who are putting tremendous amount of quality in the code base.

1. It is difficult for me (us ?) to know where the library is heading and what is happening behind the scene. I am de-facto left with proxy indicators at hands (like pace of development, type of PR being merged, milestones being pushed back) to guess what is happening. For the time being, they leave me intrigued.

Would it make sense to post some type of high-level outline of medium term vision / problems encountered / area of work / what to expect in next releases ... It would be interesting to know a bit more about thinking behind theming options, envisioned long-term relationship with MDC foundation... It would also be kind of reassuring. For instance, discussion in #1121 was helpful. Smth in the spirit of https://github.com/Polymer/lit-html/issues/1182 would be fantastic.

2. I understand the rationale behind "This repo is for extending the base layer with Web Components, and is not intended to be a complete replacement of MDC" (#223). I hope this is not on the expenses of loosing lit-element clarity and expressiveness and investing a large portion of the efforts just keeping in sync with upstream.

3. This is partially a consequence of 2 and potentially a costly one: it's hard to contribute! Except for very minor changes, it is often not clear where to intervene as the dependencies/multi-plexing with the base layer forces to digest multiple layers of overhead.

I came to select this library because of the pleasant experience playing with / extending / contributing to other lit-based components (also because of very good experience with using Polymer elements). It wish it could be more of the same here.

As a consequence I end up, like in the old times, with a series of fragile override for doing things the library does not yet care of.

[ais-one]

Re-posting - without hate - a couple of comments I wrote 5 month ago (#1852) as it still seems relevant, esp. the lack of visibility for devs courageous(?) enough to put faith in mwc-components at an early stage.

Thanks a lot for the detailed answer, truly appreciated !

Beyond the specifics of this PR, I think it illustrates a series of concerns I was not sure where/how to state. So, I'll do it here, not without thanking the devs who are putting tremendous amount of quality in the code base.

1. It is difficult for me (us ?) to know where the library is heading and what is happening behind the scene. I am de-facto left with proxy indicators at hands (like pace of development, type of PR being merged, milestones being pushed back) to guess what is happening. For the time being, they leave me intrigued.

Would it make sense to post some type of high-level outline of medium term vision / problems encountered / area of work / what to expect in next releases ... It would be interesting to know a bit more about thinking behind theming options, envisioned long-term relationship with MDC foundation... It would also be kind of reassuring. For instance, discussion in #1121 was helpful. Smth in the spirit of lit/lit#1182 would be fantastic.

1. I understand the rationale behind "This repo is for extending the base layer with Web Components, and is not intended to be a complete replacement of MDC" (material-components-web vs material-components-web-components #223). I hope this is not on the expenses of loosing lit-element clarity and expressiveness and investing a large portion of the efforts just keeping in sync with upstream.
2. This is partially a consequence of 2 and potentially a costly one: it's hard to contribute! Except for very minor changes, it is often not clear where to intervene as the dependencies/multi-plexing with the base layer forces to digest multiple layers of overhead.

I came to select this library because of the pleasant experience playing with / extending / contributing to other lit-based components (also because of very good experience with using Polymer elements). It wish it could be more of the same here.

As a consequence I end up, like in the old times, with a series of fragile override for doing things the library does not yet care of.

Things moving so slowly here are possibly a testament to what you have stated...

I would like to add that sometimes the updates also breaks things.

For now I prefer web components that is built using vanilla JS.

Or create a web component based on a css library like muicss or bulma.

If something is not available then to build from scratch. Its harder to start with but good to learn something that is the basis of all such libraries/frameworks... Javascript itself.

[vierlijner]

Love to see these features 1.Custom Cell Renderer 2.Custom Column Header 3.Option or pagination/infinite scrolling 4.Always Virtualized 5.Sticky Columns /rows(optional) 6.Filtering as part of table (optional) 7.Sorting 8.Column/row Reordering (Drag and drop) 9.expandled row and column 10.Custom Row Sizes 11.Show and Hide columns 12. Export and import data 13.Group by a column property 14.Custom Footer Render 15.Custom loading Indicator 16.Action Buttons/icons (Delete,copy on select of a row) 17.Row highlight 18.themes

And flip a table, so instead of row based it will be column based.

A B C
1 2 3 A 1 4 7 4 5 6 => B 2 5 8 7 8 9 C 3 6 9

[maicol07]

In the meantime (waiting for the official component), I've implemented a M3 table webcomponent, combining the old MDC Table and M3 tokens. You can try it here: Data Table - Docs (Github repo)

M2 version is also available, although it is deprecated: Data Table - Standard ⋅ Storybook (chromatic.com)