Investigate making Data Table component

[traviskaufman]

Spec reference: https://material.io/go/design-data-tables

Copied from https://github.com/google/material-design-lite/issues/4504

[rj33]

I realise not everything can get first-release priority, but it would be nice if the components that already exist in MDL could be given priority over newer components, as it would make migrating from MDL to MDC much less painful for those who are making extensive use of the full set of MDL components, but are keen to move on to MDC as soon as possible.

[sgomes]

Thanks for the info, @rj33! Since we are reimplementing everything from scratch, we prioritised components a bit differently, based on what we expected demand for them to be. Unfortunately, data table is pretty far down that list, although our priorities could always change.

If you want to migrate to MDC-Web in the meantime (event though it's still in alpha), you might have some luck extracting and isolating mdl-data-table from MDL, since it doesn't depend on a lot of other components.

[rj33]

Thanks @sgomes, I'll give the mdl-data-table extraction idea a go.

[koutsenko]

Please add the "fixed header" feature, to make data scrolling with visible headers possible. Thanks.

[Garbee]

@koutsenko position: sticky on the current header should work just fine and you can get it in the current table for MDL. Just a little bit of custom code will do the trick for that one in modern browsers.

[koutsenko]

@Garbee I use react-mdl, because MDL v1 hasn't framework bindings itself. So when I modified my JSX to something like you suggested

  buildHeader: function(headings) {
    return headings.map(function(heading, index) {
      return <TableHeader position="sticky" name={index.toString()} key={Date.now() + '_' + index}>{heading}</TableHeader>; 
    });
  }, 

But I got JS error Warning: Unknown proppositionon <th> tag. Remove this prop from the element.

Moreother, react-mdl DataTable isn't scrollable by itself . It means that I need to wrap entire DataTable into scrollable div. I tried to fix position by css hacks, but it's very unstable solution. MDL v2 was announced with framework compatibility feature, it means no need for wrappers such as react-mdl. That's why I'm asking here.

[Garbee]

You don't set it as an attribute. It is a style, which also needs some other rules to get working right. As far as I am aware, sticky positioning will work without the Element needing to scroll on its own. I understand why you're asking here and that is OK. I am simply informing you that you can get it now with a little amount of custom styles.

[koutsenko]

@Garbee it's almost unsupported feature and needs a JS polyfill, but it may be better than my already tried css hacks. I'll try to test it. Thanks for the idea.

@traviskaufman There is no any information about scrolling in specs, does it means that only paging should be implemented? Regardless of "sticky" test results, i'd want to leave "Fixed table header with scrollable body" here as a feature request... Seems it's can be simple when table is composed by div elements instead of monolitic table/th/tr/td elements...

[Garbee]

Let's make sure in this version to make general text and numeric a modifier. That way it is more natural to most people to have left-aligned text by default. Ref: Issue 5020 on MDL

[victorhooi]

Is there an update on this component?

Any idea on ETA?

[traviskaufman]

The best place to track progress in within our public Pivotal Tracker. Simply search for the GH issue URL and you should find the story. Where the story is determines when we'll work on it. Data Table is still pretty low priority right now. If someone is interested in working on it, please comment on this issues before submitting a Pull Request so we can work with you on the best way to implement it. Thanks! 😄

[djensen47]

I'm interested in working on it. What do I need to know?

[mikaturk]

It's been a couple of months but does anyone have any kind of ETA?

[djensen47]

If someone is interested in working on it, please comment on this issues before submitting a Pull Request so we can work with you on the best way to implement it. Thanks!

🙋‍♂️ 👋 Hi, I'm still willing to work on this feature. Looking at tracker, it looks this project, as a whole, won't be complete for 12+ months. I'm sure you'd be happy with any help you can get. 😄

[traviskaufman]

Hey @djensen47,

Sorry for the delayed response! We certainly appreciate all the help we can get 😄 thanks for offering!

If you are interested in working on this, the best place to start would be to look at our contributing docs for our development process. After that, you'll want to look at our authoring components guide. Because you'd be working on a core component, then entire document would apply.

For all components we require an Eng Outline before we'd be willing to look at a PR. This is so we have a general idea of how you'll be architecting the code, and what a public API would look like.

I'm usually on our discord channel during the day, so I'm happy to chat more in person on there, or if you run into any issues while implementing this.

[djensen47]

Sounds good. I'll start looking at the docs this week.

[jonathanperis]

Sounds good. I'll start looking at the docs this week.

Nice! I'm really looking foward at this component. Such necessary to make enterprise web applications with this framework. :smile:

[mikaturk]

Looking forward to seeing this happen, thanks a lot 😀

[djensen47]

Thanks ... we'll see though. There's quite a bit overhead to do this, which is actually great because it ensures a high quality component, but it might take me a lot more time than I originally anticipated.

[traviskaufman]

That's precisely why we ask for the docs upfront! We want to ensure that all of our contributors (including ourselves) know exactly what they're getting into before diving straight into the implementation 😄 Before we did the eng outlines, we'd have very inconvenient, very lengthy discussions on PRs about basic design choices and whether or not certain requirements like Dark Mode and RTL were thought through. The goal of the eng outlines and the authoring components info is to alleviate that, so I appreciate you understanding that it's all for a good cause and not just for us to be bureaucratic 😉

[aaronhudon]

@rj33 please pass along your results for extracting the MDL data table for the rest of us

[rj33]

@aaronhudon I've deferred work on MDC until they get closer to a 1.0 release. I'm still planning to move from MDL to MDC, and if there is no datatable by then, I'll work on an extraction, but given the time lines, it looks like others may get to it before I do.

[vladkras]

I took .mdl-data-table section from https://getmdl.io/material.css and it seems to be working

[Avamander]

I'll just combine both of the frameworks to resolve the lack of components in either :/.

[futurliberta]

I've done something that may help : https://codepen.io/jfily/pen/OzqmdV

[iFaxity]

I've created a functional version of this with the help of the Material Guidelines. Only the basic table, no fancy pagination or anything like that. However the visual prototype is lacking some JS code.

Eng Outline Doc: https://docs.google.com/document/d/1VBvpigoHAfEFLNqLV4YKCXPSe059qOZT8Q0W9yjv-O8/edit?usp=sharing

[farahabdi]

How on earth is this component not yet done? it's been 18 months...

[iFaxity]

@farahabdi As far as i know there needs to be an actual Outline doc before implementation is even considered, which traviskaufman has asked in this very issue to do. As well as the whole material.io page is in progress of a remake. There are also other components waiting to be made and most have also waited for quite a time. But these are just my assumptions as i'm quite new here.

[abheist]

Please add "Fixed column" feature too. 🥇 :)

[djensen47]

@iFaxity It looks like you put some great effort into the outline doc. Have you heard anything from the team about it? If not, maybe you need to @ reply some folks so they know it's there?

[thiagovilla]

Is there anything we can do to speed this up?

[iFaxity]

@djensen Ok doing that now. @acdvorak @traviskaufman @lynnjepsen . I hope i'm not being annoying tho so if i was sorry.

If there is no answer i can maybe post a repo myself so the people who want to try out an early version can do that.

@yabhis I'll look into fixed columns but for now it seems that native tables doesn't like to make fixed tabs. I would want that feature too. Otherwise making a div version instead of table can maybe be done.

[djensen47]

@iFaxity It might take about 5 business days to get a response but if you don't hear anything by then, I think your own repo would be great! I think it was @acdvorak that recommended putting "contrib" in the name of the component if you create your own.

[Garbee]

The primary concern I have with the suggestion is how much of the checkbox logic is put into data table directly. One lesson we learned in MDL that was originally intended to come forward into MCW was only handling style with data tables. Then letting developers build the exact logic they need around checkbox handling on their own. This reduces the abstraction needed internally and provides a more robust experience for developers.

[kfranqueiro]

As someone who has experience trying to maintain a library that did only data grid things for several years, I agree wholeheartedly with @Garbee. Data Tables haven't been kicked off with engineering yet and they're not in the immediate roadmap, but I think our primary goal for them within MDC Web will be in providing styles to accomplish layouts.

Developing features in JavaScript for Data Tables could quickly balloon in complexity (moreso when they're combined), especially given potential use cases such as lazy loading, which not only requires some sort of API for interacting with data, but also complicates features that some consumers probably want, such as selecting all items. MDC Web should aim to provide a baseline that has a realistic chance of benefiting everyone without getting in anyone's way.

[iFaxity]

Yeah that was an issue I came across making the component & outline doc. I started making only the styles because I needed it in an internal Vue project. So the JS implementation is something I thought of for a while. However the component doesn't need the JS to work basically. If any more advanced table management is needed then it's not too hard to do it alone. Either way data tables are only used in a context of viewing data in a nice way and is not used in many apps and websites. Maybe the interactions and JS should be left to the programmers.

[iFaxity]

Ok so i just created a repository as per @djensen47 recommendation for the data table component styles i've made. As you know its not finished and when the material.io page changed some time ago the spec changed a bit for the data table component. So i've made some changes but they are not final. For now there are only styles because for now i think the interactions should be dependent on the developer as the usage of the component varies. I've only used it for hobby projects but it takes not a lot of code to get the checkboxes & selection working.

The repo is https://github.com/iFaxity/mdc-data-table And please don't use this in production code. However feel free to fork or such to add or change code.

[Veryfaraj]

Faraj

[jonathanperis]

Hello guys,

Did you give up creating the component? He has been withdrawn from the milestones recently. Please do not give up! It is an important component for development for desktop / web applications with corporate appeal

[kfranqueiro]

The milestone removal was an artifact due to cleaning up old milestones in github that have been unused, since we use Pivotal's backlog.

This is not currently on the overall Material roadmap, though I would like to propose it be added to the roadmap sometime soon given how many people seem to want it. The first/latest major addition to the roadmap has been dialog which is also under heavy demand to be updated against the latest spec, but once that is done I'd like to try to pitch this one in there.

[ghost]

yes please i want it too.

[jamesmfriedman]

For anyone using React, and anyone needing it, here is a port / refactor of the one from MDL that plays nicely with theming and other components from mat-web. https://jamesmfriedman.github.io/rmwc/data-tables

[MrSimmmons]

+1 this would be really handy

[emri99]

@kfranqueiro Can we expect this component to be implement in a near future ? Can you advise us an alternative in the mean time ?

We really need such component for desktop/web app.

[TaaviE]

It's been three years, it'd be really nice if I could migrate.

[bohdan-shulha]

The Captain's Journal

Record #737081

It is Jan 23, 2019 now. Human race still trying to implement material design tables, but they are too hard for them. Humans stick to sending cars to Mars and vegetables to Moon.

[talhaishtiaque]

Why you do like this

On Wed, 23 Jan 2019 at 7:49 PM, Bohdan Shulha notifications@github.com wrote:

The Captain's Journal

Record #737081

It is Jan 23, 2019 now. Human race still tries to implement material design tables, but they are to hard for them. Humans stick to sending cars to Mars and vegetables to Moon.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/material-components/material-components-web/issues/57#issuecomment-456828960, or mute the thread https://github.com/notifications/unsubscribe-auth/ACbBoUWI5Rf8ZO6VH-zBNdaN-9maTbU-ks5vGHZ8gaJpZM4LEv2Z .

[AndryHTC]

This is crazy... Also this components seems to be neglected. ALL HERE SEEMS TO BE NEGLECTED

I'm not starting other projects with MDC anymore; I think I will start to use Vaadin components or something else ( Do anyone knows a complete web component library? Vaadin looks amazing)......... And for older project, I resign myself: they will remain with an inconsistent design, due to an unreliable roadmap...

[s-aska]

I am using Vuetify, sometimes I want a library not dependent on Vue, I welcome any information.

[kfranqueiro]

Firstly, to address the notion of components being neglected: we are actively adding features and improvements to this repository month by month, as seen in our changelog. However, as with any project, there are far more numerous things we could work on than resources actually allow.

That being said, we are aware that data tables remain possibly the most-requested component in the community, despite it failing to appear in the higher level roadmap, and we definitely want to get to it soon. We are currently in the middle of two major projects that encompass the entire repository during Q1, but I want to push hard for data tables in Q2.

We've also received interest from a couple of parties in terms of possible contributions that I intend to follow up on at that point. One potential source is James Friedman's RMWC, which wraps MDC Web for React and also includes data tables implemented with close attention to the spec.

I would kindly ask that we refrain from veering completely off the topic of this issue (and even this repository) into other UI libraries, especially those that don't implement Material Design (e.g. Vaadin looks to be an extremely loose interpretation at best). There are certainly alternatives if your goal is simply to find a comprehensive UI library regardless of what design it follows, but there are probably more fitting places to discuss that outside of an issue related to one specific component for MDC Web in particular.