Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Table] Set table column width #1911

Closed
celiao opened this issue Oct 19, 2015 · 52 comments
Closed

[Table] Set table column width #1911

celiao opened this issue Oct 19, 2015 · 52 comments

Comments

@celiao
Copy link

@celiao celiao commented Oct 19, 2015

Is it possible to set the width of Table columns?

StackOverflow equivalent question: https://stackoverflow.com/questions/51216285/material-ui-v1-set-table-column-widths

@kamek-pf
Copy link

@kamek-pf kamek-pf commented Nov 6, 2015

Nothing quite special about this :

<TableCell style={{ width: '2rem' }}>
@maximus8891

This comment has been hidden.

@zikangyao
Copy link

@zikangyao zikangyao commented Mar 3, 2016

Is there any way to dynamically assign the width of col based on content ?

@sanfilippopablo

This comment has been hidden.

@qettnqs

This comment has been hidden.

@theseancronin
Copy link

@theseancronin theseancronin commented Jul 19, 2016

What I've been doing to set the widths of columns is for the

style, set table-layout to auto, as mentioned above, then I give widths in percentages to my columns. i.e. width 30% and width 70%. This would be a two-column layout example, with table header columns in first first column rather than in the header..

@thealmightyone

This comment has been hidden.

@qettnqs

This comment has been hidden.

@thealmightyone

This comment has been hidden.

@qettnqs

This comment was marked as off-topic.

@NZhuravlev

This comment has been hidden.

@henrycity

This comment has been hidden.

@thealmightyone

This comment has been hidden.

@henrycity

This comment has been hidden.

@thealmightyone

This comment has been hidden.

@damianobarbati

This comment has been hidden.

@arjan

This comment was marked as off-topic.

@musray

This comment has been hidden.

@sonaye

This comment has been hidden.

@devuxer

This comment has been hidden.

@devuxer

This comment was marked as off-topic.

@mbrookes

This comment has been hidden.

@devuxer

This comment has been hidden.

@mbrookes

This comment has been hidden.

@okanthony

This comment has been hidden.

@witm55

This comment has been hidden.

@kuzdogan
Copy link

@kuzdogan kuzdogan commented Aug 9, 2018

This is good to go in v1 or above

const styles = { 
  narrowCell: {
    'width': '150px',
  }
};

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Company Name</TableCell>
      <TableCell style={classes.narrowCell} numeric>Amount</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
  <TableRow>
    <TableCell> name 1 </TableCell>
    <TableCell style={classes.narrowCell}> $100 </TableCell>
  </TableRow>
  </TableBody>
</Table>

Can also give percentage widths, rest of the cells span equally

@kuzdogan

This comment has been hidden.

@pouriaMaleki
Copy link

@pouriaMaleki pouriaMaleki commented Sep 17, 2018

Applying this style somehow helped me:
I just sat different maxWidth for different cels in row but same in each column using inline styles.

const styles = (theme) => ({
  tableCell: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    maxWidth: '40px',
  },
});
@abhisheksoni27
Copy link

@abhisheksoni27 abhisheksoni27 commented Nov 2, 2018

None of the solutions posted above work. Why is this so difficult to achieve?

@emersonbottero
Copy link

@emersonbottero emersonbottero commented Nov 23, 2018

  <Table fixedHeader={false} style={{tableLayout: "auto" }}>
        <colgroup>
            <col width="250px" />
            <col />
            <col width="40px" />
            <col width="40px" />
        </colgroup>
        <TableHead>
          <TableRow>

the second collumn is flex

@devenovil
Copy link

@devenovil devenovil commented Feb 21, 2019

None of the solutions posted above work. Why is this so difficult to achieve?

Somehow i recognize why it's not work, because we only set width only forTableHead or TableBody! To make it 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 width seems 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

@pfftdammitchris

This comment has been hidden.

@Ericnr

This comment has been hidden.

@claytongulick

This comment has been hidden.

@pbassut

This comment has been hidden.

@yanivfranco

This comment has been hidden.

@crizant
Copy link

@crizant crizant commented Sep 27, 2019

@devenovil Instead of maxWidth, if you want to use %, you can use width like:

<TableCell style={{ width: '35%' }}>
  Table Data
</TableCell>
<TableCell>
  Another Table Data
</TableCell>
@benjaminaaron
Copy link

@benjaminaaron benjaminaaron commented Oct 15, 2019

For me it worked to set the width only for the cells in the header: <TableCell width={props.colWidths[index] + '%'}>, this results in the columns for the entire table behaving as expected.

benjaminaaron added a commit to FuturICT2/FIN4Xplorer that referenced this issue Oct 15, 2019
Posted my solution to setting the column width here: mui-org/material-ui#1911 (comment)
@smcalilly
Copy link

@smcalilly smcalilly commented Oct 17, 2019

I set the column widths with the percentage and it sort of works, but for some reason, it adds a phantom column on the far right. Via inspecting the element, it appears to add a "TableStubCell" element to the table. I have no idea where that came from.

I've had similar issues with other MUI tables, and my work-arounds are never that great. Would be cool if y'all opened up this issue and fixed it...clearly other folks are struggling with it too.

edit: the TableStubCell came from the dx-react-grid-material-ui npm package, so sorry for pointing fingers!

@aprilmintacpineda
Copy link

@aprilmintacpineda aprilmintacpineda commented Jan 24, 2020

My solution is to do

<Table>
  <TableHeader>
    <TableRow>
      <TableCell>
        <Box width="200px">
          User Fullname
        </Box>
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>

But would be nice if we could just do

<Table>
  <TableHeader>
    <TableRow>
      <TableCell width="200px">
        User Fullname
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        April Mintac Pineda
      </TableCell>
      {/* ...rest of the columns */}
    </TableRow>
    {/* ...rest of the rows */}
  </TableBody>
</Table>
@nazrulcsebd
Copy link

@nazrulcsebd nazrulcsebd commented Mar 19, 2020

This works for me with the version "@material-ui/core": "4.9.0"

    <TableContainer className={classes.container}>
              <Table className={classes.table} stickyHeader size="small">
                <TableHead>
                  <TableRow>
                    <TableCell width="30%">User Name</TableCell>
                    <TableCell width="20%">Designation</TableCell>
                    <TableCell width="10%">Nid</TableCell>
                    <TableCell width="20%">Email</TableCell>
                    <TableCell width="10%">Mobile</TableCell>
                    <TableCell width="10%">Gender</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {props.isGridLoading && (
                    <TableRow>
                      <TableCell colSpan={6}>
                        <LoadingGridSpinner open={props.isGridLoading} />
                      </TableCell>
                    </TableRow>
                  )}
    
                  {props.profileObj.lists &&
                    props.profileObj.lists.map(row => (
                      <TableRow key={row.userProfileId} hover={true}>
                        <TableCell width="30%">
                          {row.userName}
                        </TableCell>
                        <TableCell width="20%">{row.designation}</TableCell>
                        <TableCell width="10%">{row.nid}</TableCell>
                        <TableCell width="20%">{row.email}</TableCell>
                        <TableCell width="10%">{row.mobile}</TableCell>
                        <TableCell width="10%">{row.gender}</TableCell>
                      </TableRow>
                    ))}
                </TableBody>
              </Table>
@ydax

This comment has been hidden.

@binajmen

This comment has been hidden.

@Kristiyan96

This comment has been hidden.

@guifeliper

This comment has been hidden.

@AdityaAnand1
Copy link

@AdityaAnand1 AdityaAnand1 commented Jun 6, 2020

Does anyone know a way to let the table scroll in x direction if there are too many columns? I'm only able to make this happen by giving minWidth=something hardcoded (which is not great for unknown number of columns)

It seems like fixedHeader={false} style={{width: "auto", tableLayout: "auto"}} are ignored in the latest version.

Any ideas?

@repetitioestmaterstudiorum

This comment has been hidden.

@aprilmintacpineda

This comment has been hidden.

@aprilmintacpineda
Copy link

@aprilmintacpineda aprilmintacpineda commented Aug 13, 2020

@oliviertassinari I did not convert the existing code to native <table> element.

This example works by setting width of all columns
https://codesandbox.io/s/fragrant-framework-oy6uz?file=/src/App.js

@fsarter

This comment has been hidden.

@mui-org mui-org deleted a comment from otroboe Feb 6, 2021
@mui-org mui-org deleted a comment from cmacritchie Feb 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet