CODEWITHSUNDEEP
cssreactjsmaterial-ui
Galivan
Galivan

Reputation: 5328

Material UI v1 - set table column widths

I want to set column widths on a Material UI table using css (not inside react using "classes"). But I don't understand how the column widths are controlled. I try to set widths on the TH columns but it doesn't work.

See example: Material ui table example (See style.css)

I don't understand how the table column widths are controlled on the "Simple Table" on the Material UI table: Simple table (you can see that the first column is wider than the others. How?)

So how does it work, and how can I modify the settings?

Upvotes: 34

Views: 90398

Answers (7)

fsarter
fsarter

Reputation: 942

My solution is wrapping TableCell content with Box component and set the Box's style, from my github comment:https://github.com/mui-org/material-ui/issues/1911#issuecomment-759935300

...
const useStyles = makeStyles((theme: Theme) => createStyles({
  ...
  longTextStyle: {
    wordWrap: 'break-word',
    maxWidth: 1000,
  },
  ...
}));
...
<TableCell>
  <Box className={classes.longTextStyle}>
    {longText}
  </Box>
</TableCell>
...

Upvotes: 2

patrik kings
patrik kings

Reputation: 467

setting the width using percentages works just fine.

            <TableHead>
              <TableRow>
                {columns.map((column) => (
                  <TableCell
                    key={column.id}
                    align={column.align}
                    width="10%"
                  >
                    {column.label}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>

Upvotes: 14

Anoush Hakobyan
Anoush Hakobyan

Reputation: 1296

To give width to each column, colspan is better solution than fixing the width, it will make table responsive depending on screen/grid size. So you can put colSpan={4} for example on column components. And to fix column width within the colspan table-layout: fixed style will help. So the table will be responsive but with the fixed width for columns.

Upvotes: 5

Vidro3
Vidro3

Reputation: 234

The solution that worked for me was using tableLayout: 'fixed' as well as fixed pixel value widths for the columns.

the colgroup option did not work.

Upvotes: 5

lowcrawler
lowcrawler

Reputation: 7549

I had success with the following:

<Table>
<colgroup>
    <col width="10%" />
    <col width="10%" />
    <col width="60%" />
    <col width="10%" />
    <col width="10%" />
</colgroup>
<TableHead>....
    ... yada yada...
</Table>

Or, more specifically, given an array of widths colWidths:

<Table key={this.props.key + "_table"} className={classes.table}>
    <colgroup>
        {this.props.colWidths.map((colWidth, i) => <col key={"colWidth_"+i} width={colWidth}/>)}
    </colgroup>
    <TableHead>
        <TableRow>
            {tableHeaders}
        </TableRow>
    </TableHead>
    <TableBody>
        {tableRows}
    </TableBody>
</Table>

Upvotes: 15

Pirate4
Pirate4

Reputation: 619

Try using colgroup, worked for me in Material-UI V1

<Table>
   <colgroup>
      <col style={{width:'10%'}}/>
      <col style={{width:'20%'}}/>
      <col style={{width:'70%'}}/>
   </colgroup>
   <TableHead>
      <TableRow>
         <TableCell>Head1</TableCell>
         <TableCell>Head2</TableCell>
         <TableCell>Head3</TableCell>
      </TableRow>
   </TableHead>
   <TableBody>
      <TableRow>
         <TableCell>Data1</TableCell>
         <TableCell>Data2</TableCell>
         <TableCell>Data3</TableCell>
      </TableRow>
   </TableBody>
</Table>

Upvotes: 59

CodeSpent
CodeSpent

Reputation: 1904

It seems a bit more difficult than my first assumption without creating a sort of domino effect based on how the table components are based, however I did find this discussion which has many looking to do the same thing with many different methods. I'd sort through there and just see what works best for your particular use case (without seeing your code I don't know what would be safest to recommend).

As well, if we inspect on the table you gave an example of we can get a decent idea (a bit confusing at first glance) how they achieved this.

table first child 70% example

I'd blindly recommend something like <Table fixedHeader={false} style={{ width: "auto", tableLayout: "auto" }}> to allow your table to size dynamically based on the content rather than keeping equal sizing.

Hope this at least helps point you in the right direction! Please let me know if not.

Upvotes: 1

Related Questions