Пользовательский интерфейс материала: установите для TableBody максимальную высоту и сделайте ее вертикально прокручиваемой

Question

Используя пользовательский интерфейс материала, я хочу, чтобы TableBody моего стола имел максимальную высоту 500 пикселей. Если есть какие-либо строки, которые не могут поместиться в пределах высоты TableBody, то TableBody должен прокручиваться вертикально, пока TableHead фиксируется на месте (заморожено).

Вот мой код:

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;

Рабочий пример: https://codesandbox.io/s/y03vmkkkqj

Как это можно сделать в интерфейсе материалов?

Пожалуйста, ответьте на мой пример и предоставьте ссылку на рабочее решение.

Answer 1

Пришлось вытянуть головку стола из основного стола, чтобы позволить телу прокручиваться, но вот что я в итоге и сделал. Некоторый CSS был необходим, чтобы сделать тело прокручиваемым.

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

Answer 2

Я сделал таблицу прокручиваемой, установив max-height для его родительского div, но для фиксированного заголовка таблицы это зависит от ваших столбцов, и у стиля есть проблемы с материалом - я не проверял больше, но вы можно далее исследовать это здесь:

Фиксированные заголовки: https://codepen.io/tjvantoll/pen/JEKIu, http://maxdesign.com.au/jobs/sample-fixed-thead/index.htm

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