Material-ui: How to make the cell of table fix

[slim-hmidi]

I create a table like Table wich contains
CheckBox Name LastName.
When I translate from one page to another I find that the headers Name and LastName translate from one page to another due to the length of their strings.
I added a style for TableCell :

width: 40%

But this doesn't solve the problem. How can I fix the headers columns to not translate from one page to another due the length of strings?

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.16 |
| React | 15.6.2 |
| browser | Chrome |
| etc | |

[oliviertassinari]

I'm not sure I can help with this question. It sounds like a broader question with CSS and the HTML table element, not Material-UI specifically.

Please submit support requests and questions to StackOverflow using the tag material-ui. StackOverflow is better suited for this kind of support. The issue tracker is for bug reports and feature discussions. See also our CONTRIBUTING guidelines.

[slim-hmidi]

@oliviertassinari I guess that the option fixedHeader could resolve the problem but it is not supported for Material UI v 1.0.0-beta.16

[oliviertassinari]

Is this a duplicate of #6625 then?

[slim-hmidi]

yes it is

[jordangotbaum]

Figured out a hack to solve this problem. It seems essentially impossible to set the width via the standard classs; it will always be auto based on interior content. In order to deal with this I made the element within the table cell component a styled span:
<TableCell><span style={{ whiteSpace: nowrap', overflow: 'hidden', width: '150px', display: 'block' }}>{content}</span></TableCell>

[davalapar]

Using className:

const styles = theme => ({
  tableCell: {
    whiteSpace: 'nowrap',
  },
});

//...

<TableCell className={classes.tableCell} numeric>
  { payout.payable_amount }
</TableCell>

[devenovil]

None of the solutions posted above work.

We should define minWidth and maxWidth bot on TableCell in TableHead and TableBody, here the example

<Table>
    <TableHead>
        <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:'200px', maxWidth:'200px'}}>{content}</TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
            <TableRow>
            <TableCell column='data1' style={{minWidth:100, maxWidth:100}}>{content}</TableCell>
            <TableCell column='data2' style={{minWidth:200, maxWidth:200}}>{content}</TableCell>
            </TableRow>
    </TableBody>
</Table>

As you can see, we can use both value for style by integer and string. But for string, it's only work if you defined it by px, if you use percentage, like minWidth:'25%', it's not gonna work, i already try it.

Why do i use both of minWidth and maxWidth? Not width? Because I already try it, if you want to make your column with fixed width, you must use minWidth and maxWidth instead of width. I didn't know why, but widthseems not work to solve this problem.

Note : _Both of TableCell in TableHead and TableBody that contain same data, must have same style!_

I hope this code help you guys, cheers

[danhtn]

Try with below CSS:

.MuiTable-root { .MuiTableCell-root { min-width: 120px; max-width: 120px; .MuiIconButton-root { padding: 0px; // Style for action buttons } } }

[nebojsanb]

As I needed some level of responsiveness, the idea of fixing the width didn't really work for me.

I added this as well:

        root: {
            display: 'flex',
            alignItems: 'center',
            [theme.breakpoints.up('xs')]: {
                width: '150px',
            },
            [theme.breakpoints.up('sm')]: {
                width: '220px',
            },
            [theme.breakpoints.up('md')]: {
                width: '320px',
            },
            [theme.breakpoints.up('lg')]: {
                width: '500px',
            },
            [theme.breakpoints.up('xl')]: {
                width: '500px',
            },
        },

and then

<TableCell>
       <span className={classes.root}>
              <Typography noWrap>... 

Any better ideas on how to make it responsive?