CODEWITHSUNDEEP
cssreactjsmaterial-ui
etayluz
etayluz

Reputation: 16416

Material UI: Give TableBody a max height and make it vertically scrollable

Using Material UI, I want the TableBody of my Table to have a max height of 500px. If there are any rows that cannot fit within the height of the TableBody then the TableBody should vertically scroll while the TableHead locks in place (frozen).

enter image description here

Here is my code:

import React from "react";
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

const data = ["1", "1","1","1","1","1","1","1","1","1","1","1","1","1"];

class Demo extends React.Component {
  render() {
    return (
      <div>
        <Table>
          <TableHead>
            <TableRow style={{ 'backgroundColor': '#f5f5f5', "height": '35px' }}>
              <TableCell>Column 1</TableCell>
              <TableCell>Column 2</TableCell>
              <TableCell></TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map(n => {
              return (
                <TableRow key={n}>
                  <TableCell>{n}</TableCell>
                  <TableCell>{n}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    );
  }
}

export default Demo;

Working example: https://codesandbox.io/s/y03vmkkkqj

How can this be done in Material UI?

Please fork from my example and provide link to a working solution.

Upvotes: 20

Views: 48637

Answers (3)

Freddy
Freddy

Reputation: 2382

You can use stickyHeader prop in Table component and give maxHeight to TableContainer.

<TableContainer style={{ maxHeight: 150 }}>
  <Table stickyHeader>
    <TableHead>
      <TableRow style={{ 'backgroundColor': '#f5f5f5', "height": '35px' }}>
        <TableCell>Column 1</TableCell>
        <TableCell>Column 2</TableCell>
        <TableCell></TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {data.map(n => {
        return (
          <TableRow key={n}>
            <TableCell>{n}</TableCell>
            <TableCell>{n}</TableCell>
          </TableRow>
        );
      })}
    </TableBody>
  </Table>
</TableContainer>

Here is the official demo from material-ui docs.

Upvotes: 32

Stephen Way
Stephen Way

Reputation: 678

Had to pull the table head out from the main table to allow the body to scroll, but here's what I ended up doing. Some CSS was necessary to make the body scrollable.

https://codesandbox.io/s/8kw39m1278

Upvotes: 7

ocespedes
ocespedes

Reputation: 1303

I've made the table scrollable by setting the max-height for it's parent div, but for the fixed table header it depends on your columns and the styling has issues with the material-ui i haven't checked more but you can further investigate that here:

Fixed headers: https://codepen.io/tjvantoll/pen/JEKIu, http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm

CodeSandBox: https://codesandbox.io/s/x92qwnko

Upvotes: 0

Related Questions