I started a data table widget (https://github.com/jkruder/material-ui/tree/data-table). The docs have a table page with an interactive demo. It's definitely a bit rough but it demonstrates a decent amount of functionality.
I didn't do much in the way of sorting/filtering data yet; I'm leaning towards providing a configurable toolbar and let the user determine how to sort/filter the data. If the user is using some kind of re/flux pattern, the unsorted data is in a store and then the sorted/filtered data is most likely in a separate store.
I'm also considering extracting a majority of the logic into a 'template table' that provides callbacks/props for the header, footer, body, colgroups, etc and simply links everything together and provides the select/fixed header capability (maybe some other common functionality as well). If we decide to go the template route I would remove the Paper element so that the user can include a toolbar or some other UI widget.
Please let me know what ya'll think; I'm open to suggestions. If you have any questions about the implementation let me know!
Thanks!
jkruder
All 19 comments
might be worth it to look and see if we cant just style https://facebook.github.io/fixed-data-table/ to use material design.
daniellewissc
on 26 Mar 2015
Good call; there is a lot of functionality there. We would not have to create and maintain something similar. I'll take a look at skinning it.
jkruder
on 26 Mar 2015
This will be a very useful addition. :+1: to this.
mewben
on 24 Apr 2015
+1
afhammad
on 24 Apr 2015
+1
vicentedealencar
on 25 Apr 2015
Seems like there is some interest. I'll update my version of the table so folks can check it out.
jkruder
on 25 Apr 2015
+1
FoxxMD
on 27 May 2015
For those interested, please take a look at what I have so far: https://github.com/jkruder/material-ui/tree/data-table. It still needs a bit of clean up/refactoring but a bulk of the functionality is there. Is there anything missing that people would like to see? I envision multiple iterations of the data table to bring it in full/near compliance with the material design spec.
jkruder
on 28 May 2015
@jkruder looks good, pretty basic but will work for my needs. :) :+1:
marconi
on 14 Jun 2015
+1
travisfisher
on 17 Jun 2015
oh hell yeah :+1: thanks @jkruder
FoxxMD
on 7 Jul 2015
You're welcome! If you have any feature requests let us know!
jkruder
on 7 Jul 2015
but where is it?
above links seem to be broken
anyway, thank you
vicentedealencar
on 7 Jul 2015
@vicentedealencar https://github.com/callemall/material-ui/tree/master/src/table It's available in 0.9.2.
jkruder
on 7 Jul 2015
@vicentedealencar also at http://material-ui.com/#/components/table
FoxxMD
on 7 Jul 2015
is it possible currently to add a column for row actions (e.g. delete button to pop a modal, or an edit button to transition to a new route/view) using the current Table component?
mattgi
on 14 Jul 2015
@mattgi You should be able to. Just add an additional header column and then in your rowData set the column like
{content: myButtonOrModalOrComponent}
along with any other attributes like style. You'll probably need to stop the event so that clicking on a button/other component does not trigger a column click event.
jkruder
on 14 Jul 2015
I am confused - the links above seem broken.
It would be awesome if we can get something like https://github.com/daniel-nagy/md-data-table in react.
mrn3
on 8 Sep 2016
Looks like it's already been created:
https://github.com/andela-cdaniel/mui-data-table
grimunit
on 5 Dec 2016
Related issues
ghost
路
3Comments
iamzhouyi
路
3Comments
ericraffin
路
3Comments
finaiized
路
3Comments
zabojad
路
3Comments
Most helpful comment
I am confused - the links above seem broken.
It would be awesome if we can get something like https://github.com/daniel-nagy/md-data-table in react.