material ui table horizontal scroll

Question

I'm struggling with horizontal scrollbar for my material-ui. Although I read the documentation and went through some topics here, I can't find how to fix my issue. The horizontal scrollbar never shows up.. Quite annoying

Here is the subset of my code :

App.js

     <div style={{ height: '100vh', overflow: 'auto', width: '600px' }}>
        <TableHeader headerlabels={headers} datarows={resu} />
     </div >

TableHeader.js

const HeaderTableCell = styled(TableCell)`
&&{
    background-color:#092e68;
    color:white;
    top:0;
    position:sticky;
}
`;

const CustomTableCell = styled(TableCell)`
&&{
    background-color:white;
    color:#092e68;
}
`;


// key, label
const TableHeader = props => {
    const { headerlabels, datarows } = props
    return (
        <Table>
            <TableHead >
                <TableRow key={uuid.v4()} >
                    {headerlabels.map((label) =>
                        (<HeaderTableCell {...props} key={label}>{label}</HeaderTableCell>))}
                </TableRow>
            </TableHead>
            <TableBody >
                {datarows.map((value, id) =>
                    (
                        <TableRow key={id} >
                            {headerlabels.map((label) =>
                                (<CustomTableCell {...props} key={label}>{value[label]}</CustomTableCell>))}
                        </TableRow>
                    )
                )}
            </TableBody >
        </Table>
    )
};

Ryan Cogswell · Accepted Answer · 2020-01-28 21:43:04Z

32

UPDATE At the time of my original answer, this was handled as indicated below (wrapping the Table in a Paper with overflowX: 'auto'), but the current demo instead handles this by wrapping the Table in a TableContainer which handles the overflowX: 'auto'.

If you look at the code for the Simple Table demo, you'll see that it handles this by wrapping the Table in a Paper with overflowX: 'auto'.

edited Jan 28, 2020 at 21:43

answered Dec 28, 2018 at 19:27

Ryan Cogswell

81.8k10 gold badges242 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jerome Over a year ago

already tested this before asking the question, but doesn't fix the issue

Ryan Cogswell Over a year ago

On my CodeSandbox I get a horizontal scrollbar. Can you post a CodeSandbox with a version of your code that shows the problem?

Jerome Over a year ago

I found the issue. Was nothing to do with my table component, but a styled NavBar on top of the windows put the mess...

Tazo leladze Over a year ago

@Jerome can you post a solution, i have a similar problem.

Jerome Over a year ago

Hi, difficult to give you the solution, as the issue was in formatting a DIV with width and height wrong values. This div was in a parent page and not in the table code. I would suggest you remove all your styling, except in the table component, that shoud work

|

Eugene Ihnatsyeu · Accepted Answer · 2024-03-25 11:07:11Z

2

For me just wrapping my <Table> with <TableContainer> (without any attributes) worked fine

answered Mar 25, 2024 at 11:07

Eugene Ihnatsyeu

1,63517 silver badges19 bronze badges

Collectives™ on Stack Overflow

material ui table horizontal scroll

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related