Data Table Element

[jkruder]

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!

[daniellewissc]

might be worth it to look and see if we cant just style https://facebook.github.io/fixed-data-table/ to use material design.

[jkruder]

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.

[mewben]

This will be a very useful addition. 👍 to this.

[afhammad]

+1

[vicentedealencar]

+1

[jkruder]

Seems like there is some interest. I'll update my version of the table so folks can check it out.

[FoxxMD]

+1

[jkruder]

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.

[marconi]

@jkruder looks good, pretty basic but will work for my needs. :) 👍

[travisfisher]

+1

[FoxxMD]

oh hell yeah 👍 thanks @jkruder

[jkruder]

You're welcome! If you have any feature requests let us know!

[vicentedealencar]

but where is it?

above links seem to be broken

anyway, thank you

[jkruder]

@vicentedealencar https://github.com/callemall/material-ui/tree/master/src/table It's available in 0.9.2.

[FoxxMD]

@vicentedealencar also at http://material-ui.com/#/components/table

[mattgi]

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?

[jkruder]

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

[mrn3]

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.

[grimunit]

Looks like it's already been created:
https://github.com/andela-cdaniel/mui-data-table