Material-components-web: 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 :/.

[jfily]

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.

[nickkhan]

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

[CyborgSemon]

+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.

[talhaishtiaq]

Why you do like this

On Wed, 23 Jan 2019 at 7:49 PM, Bohdan Shulha [e-mail]
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.

[AndryHTC]

@kfranqueiro thank you very much for your reply.
Really, Vaadin implements material design, so I don't think is off topic...
What I mean is that it is a shame that after _years_ of development a lot of essential components are still in a pre-alpha status.

Come on... You are Google, not independent developers who use their free time. The Changelog is not as rich as expected, with very minimal changes to components that already work very well: you can not hide behind these justifications ...

Many people have invested time and resources to implement the MDC library, obtaining only an incomplete and fragmented design

[CyborgSemon]

@AndryHTC Don't be so harsh. Yes they may Google, but all good things take time.
Any large project always end up being more complex the more you get into it. And the dev team could easily just focus on making new components, but then this liberty wouldn't be as bug free and robust as it is today

Anyone knows that the more you get into a project, you discover things that you could have done better in the past, so you would want to change it now so it doesn't hang over you for the rest of the development process. Especially when it comes to infrastructure where the more you ignore it, the bigger the problem becomes. Which is part of the reason why there hasn't been much change in the past 2 months.

Firstly, we had Christmas break so the gap in development is understandable. Everyone needs a break after all. And secondly for the past month now the team has been working hard on moving the entire liberty over to TypeScript instead of regular Javascript which will have a number of great improvements down the line. This is something that will take along time to finish as @kfranqueiro has said on numerous occasions. You can check out the progress on that here and this is expected to take most, if not all of Q1 2019

Just because they are Google, doesn't mean that they can just throw a bunch of resources at a project and it comes out fine. Plus, they are doing this for free for everyone! If this was paid software, then I can kinda see where you are coming from. But it's not. So I don't think we can complain about how fast or how slow they work. The team will work at a pace that is right for them.

If you really want a data table that much @AndryHTC that you are prepared to ban mouth the dev team for it, then maybe you should either try to make it your self to see how hard it is, or use another material framework like Angular Material, Material Lite or even Materialize. There are a ton of great options that have all of the components ready to be used.

I just think that if anything, we should congratulate the Dev team for sticking with us and ensuring that all of our questions and issues get answered. I can say with confidence that this dev team has been the most engaged dev team that I have eve worked with when it comes to communicating with their community and listening / acting on feedback and suggestions.
So, well done MDC Web team. This resources truly is amazing. :tada::tada::tada:

[AndryHTC]

You should take off your dress of MDC developer, and feel more like an MDC user.

Keep in mind that I didn't say you are not doing anything, or that the components ARE neglected (also if... believe me, they seems. Talking with other developers that check components not so often, they asked me if the project is still under development or if was abandoned): this is the sensation of the users when year after year, wait for components that are always in a pre-alpha state..........

If you think how went with Material design Lite.... It's easy to understand that our disappointment are not the 2 months of slow development...

Sure, thank you for all your hard work... But again these are not a justification

Hope in next months all the preventive optimizations will bear fruit

---

From: Simon [e-mail]
Sent: Wednesday, February 6, 2019 11:30:59 PM
To: material-components/material-components-web
Cc: AndryHTC; Mention
Subject: Re: [material-components/material-components-web] Investigate making Data Table component (#57)

@AndryHTChttps://github.com/AndryHTC Don't be so harsh. Yes they may Google, but all good things take time.
Any large project always end up being more complex the more you get into it. And the dev team could easily just focus on making new components, but then this liberty wouldn't be as bug free and robust as it is today

Anyone knows that the more you get into a project, you discover things that you could have done better in the past, so you would want to change it now so it doesn't hang over you for the rest of the development process. Especially when it comes to infrastructure where the more you ignore it, the bigger the problem becomes. Which is part of the reason why there hasn't been much change in the past 2 months.

Firstly, we had Christmas break so the gap in development is understandable. Everyone needs a break after all. And secondly for the past month now the team has been working hard on moving the entire liberty over to TypeScript instead of regular Javascript which will have a number of great improvements down the line. This is something that will take along time to finish as @kfranqueirohttps://github.com/kfranqueiro has said on numerous occasions. You can check out the progress on that herehttps://github.com/material-components/material-components-web/milestone/17 and this is expected to take most, if not all of Q1 2019

Just because they are Google, doesn't mean that they can just throw a bunch of resources at a project and it comes out fine. Plus, they are doing this for free for everyone! If this was paid software, then I can kinda see where you are coming from. But it's not. So I don't think we can complain about how fast or how slow they work. The team will work at a pace that is right for them.

If you really want a data table that much @AndryHTChttps://github.com/AndryHTC that you are prepared to ban mouth the dev team for it, then maybe you should either try to make it your self to see how hard it is, or use another material framework like Angular Materialhttps://material.angular.io/, Material Litehttps://getmdl.io/ or even Materializehttps://materializecss.com/. There are a ton of great options that have all of the components ready to be used.

I just think that if anything, we should congratulate the Dev team for sticking with us and ensuring that all of our questions and issues get answered. I can say with confidence that this dev team has been the most engaged dev team that I have eve worked with when it comes to communicating with their community and listening / acting on feedback and suggestions.
So, well done MDC Web team. This resources truly is amazing. 🎉🎉🎉

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/material-components/material-components-web/issues/57#issuecomment-461214245, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AcgtRN0M_o8a-7wo6kykntVC-QYjL6Unks5vK1ejgaJpZM4LEv2Z.

[kfranqueiro]

While I appreciate everyone's passion, I'd like to again ask that we try to keep the thread on-topic, and reiterate that I'm very much pressing for us to fulfill data tables during Q2 2019.

[vguleaev]

I wanted to create my personal project with MDC but decided to use Angular Material because of lack of Data tables components.. that's sad, hope you implement it soon

[iFaxity]

I gotta be honest. If there is so much outcry for a data table component. Then read the material guidelines and do an implementation yourselves. Or see how other material frameworks did it

It's not too hard. Especially because you only need CSS, otherwise just use Materialize or another open source version. There is at least one for every big framework.

Plus this repo is not very highly prioritized by Google or its employees because they probably have better stuff to do than making free stuff for other lazy developers.

It's very easy to just complain, a lot easier to find another solution. And don't worry, official implementation will probably arrive in the future. Until then, figure out a solution that works for you at the moment.

[TriteGeist]

Christian,

This is Googles design specification, their attitude towards other
libraries that implement Material shows you just how much they think about
other developers implementations of Material and how inadequate they are.

Also Google is getting free promotion of their design philosophy when
people use their library. So it's not like they get nothing when people
adopt their library.

Google has more than enough resources to get this done. And your response
and Google's response has left a very bad taste in my mouth. If Google
doesn't want to do the leg work on their own library, why even make it in
the first place?

• Jordan

On Sat, Mar 2, 2019 at 6:51 AM Christian Norrman [e-mail]
wrote:

I gotta be honest. If there is so much outcry for a data table component.
Then read the material guidelines and do an implementation yourselves.

It's not too hard. Especially because you only need CSS, otherwise just
use Materialize or another open source version. There is at least one for
every big framework.

Plus this repo is not very highly prioritized by Google or its employees
because they probably have better stuff to do than making free stuff for
other lazy developers.

It's very easy just complaining, a lot easier to find another solution.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/material-components/material-components-web/issues/57#issuecomment-468927191,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AINGecjGECtNM36HrMYy-O9jd0rALjOoks5vSo_9gaJpZM4LEv2Z
.

[kfranqueiro]

As previously stated, this component is in our Q2 plan. Since this thread is continuing to digress into non-constructive comments, I'm locking the conversation to contributors.