React Redux Material-ui - Making a table with editable cells

Question

I am fairly new to material-ui, I assume my question may have a simple answer but I just wanted to get some feedback. What I would like to do is render a table with only column headers (populated from data stored in a database). At this point there should be no rows. Ideally I would then like to have a clickable button that can add a row (with the same number of cells as column headers) which data can then be entered in to and saved to the database. I assume I can add the onCellClick attribute to make it possible to enter data into the cells of the material-ui table, but my big question is what would be the best way to generate the rows? Previously I did something similar to this by just pushing an object into an empty array, but I would like to know if there is a cleaner way to do this? Especially considering that one of the main reasons I decided to build this with React and Redux was to try and avoid doing something like this!

Anyway thanks for your time, if you could show me an example of a better way I might do this then that would be very much appreciated!

Answer 1

You can do this using Material-UI's Table tag by populating the cells of the table with components that are editable (drop downs, text fields, etc.). However, I've stopped using it for larger data sets because it was not performant. Instead, I use ReactDataGrid. It's a little bit tricky to get the CSS right to look good with Material-UI but it's much more performant. I populate the cells in ReactDataGrid with Material-UI components just as you can with Material-UI's Table.