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

javascript reactjs material-ui react-table
Uciebila picture Uciebila · Nov 21, 2018 · Viewed 19.6k times · Source

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.

Answer

Senthil picture Senthil · Nov 21, 2018

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}>

Related questions

MUI customize button color?

I am struggling to modify button colors in MUI next (v1). How would I set muitheme to behave similarity to bootstrap, so I could just use "btn-danger" for red, "btn-success" for green... ? I tried with custom className but it doesn't …

Read More
Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop

I'm trying to add a snackBar in order to display a message whenever a user signIn or not. SnackBar.jsx: import React from "react"; import PropTypes from "prop-types"; import classNames from "classnames"; import CheckCircleIcon from "@material-ui/icons/CheckCircle"; import ErrorIcon …

Read More
How get data from material-ui TextField, DropDownMenu components?

I create form, I have several TextField, DropDownMenu material-ui components included, question is how I can collect all data from all TextFields, DropDownMenus in one obj and sent it on server. For TextField it has TextField.getValue() Returns the value …

Read More