CODEWITHSUNDEEP
javascriptreactjsmaterial-uireact-table
Uciebila
Uciebila

Reputation: 511

How to change Table Cell width in Material-ui React table

I've made a table in react using the demos posted on their page, this works fine but I was wondering how to change the width/padding of the different columns.

I've tried manually setting the width in each cell like this:

<TableCell style={{ width: "10%" }}> Number </TableCell>

As well as using a const style then referring to it, but neither work. Does anyone have any ideas? I would really hate to have to use a scroll function when the cells are so padded its ridiculous. Thanks in advance!

EDIT The above code actually works, but the change is small making it unnoticeable - changing the width to 1px still leaves a huge space between the cells. Might be a padding issue? I've tried setting padding to 0 in a few ways but nothing happens.

Upvotes: 8

Views: 40666

Answers (3)

kirti aruja
kirti aruja

Reputation: 1

I also had some issues, and finding a solution landed on this page but didn't work the given suggestions for me. so i have added any tag <div style={{width:300}}> <p style={{width:300}}> inside <Tablecell> like this and it worked.

<TableCell><p style={{width: 300}}>{row.address}</p></TableCell>

hope this works for others also

Upvotes: 0

Uciebila
Uciebila

Reputation: 511

I stated in the question that width and padding were not working to achieve the smaller space between the columns, but if both used together and tried out with different numbers, they can work to make the space much smaller (For my case, 1px width, and 20px padding worked perfectly). So, the code provided in the question works, "padding: 20px" simply needed to be added for it to take effect.

Setting Max Width can also be useful as it makes a fix width for all cells

Upvotes: 2

Senthil
Senthil

Reputation: 2246

See here i have added a example for first column to have a custom width and wrap the content with custom CSS:

https://codesandbox.io/s/xv9orx4zrw

Add a constant value like the below and refer it in the column 

const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };

Then in TD refer like this 

<CustomTableCell style={customColumnStyle}>

Upvotes: 6

Related Questions