MUI 5 - create table with material ui Grid component

usernath1 0
Viewed 37

So I created a global table component for my project with the Grid component of Material UI v5. the reason for my choice is because modifying the border and border radius for the table row and footer is full of problems and it's hard to give some styles to the table element (or MUI Table component)

So far I have created a simple table with MUI Grid and now I have got 2 questions:

1- how can I make the height of the grid items of every table row equal to each other??

2- how can I add a scroll bar to a container of my grid table when the screen size is less than for example 500px?

here is what I made so far:

codesandbox

material-ui html-table reactjs css html
1 Answers

Not exactly a direct answer to your questions, but I think you are currently digging the rabbit hole.

  • If you need a proper table component, use DataGrid.
  • If you need a proper table component, but with more control (layout, etc) , use Table.
  • If you need a layout that behaves like a native HTML table, just use the native table itself and add CSS as you need.

the reason for my choice is because modifying the border and border radius for the table row and footer is full of problems and it's hard to give some styles to the table element

It doesn't make too much sense for a layout component like this to have a border radius defined for each row or whatever you want to do. Instead, this is likely something you will do.

<td>
  <Card borderRadius={10} />
<td>

As for "full of problems", you can define styles at the table cell level, what are the problems you are referring to?

Matthew Kwong0
Related