具有动态高度的React Material-Ui粘性表标题 [英] React Material-Ui Sticky Table Header with Dynamic Height

问题描述

我正在使用Material-UI框架来显示表.我想使用粘性标头；但是，我不想在桌子上设置高度，因为我希望它随页面滚动.除非我在TableContainer上设置高度，否则以下代码段不会粘贴标题.

参考: https://css-tricks.com/dealing-with-overflow-and-position-sticky/

I am using the Material-UI framework for React to display a table. I would like to use a sticky header; however, I do not want to set a height on my table, as I'd like it to scroll with the page. The following snippet does not stick the header unless I set a height on the TableContainer.

https://codesandbox.io/s/winter-firefly-5wlx2?file=/src/App.js

import React from "react";
import {
  TableContainer,
  Table,
  TableHead,
  TableRow,
  TableCell
} from "@material-ui/core";
import "./styles.css";

export default function App() {
  return (
    <TableContainer>
      <Table stickyHeader>
        <TableHead>
          <TableRow>
            <TableCell>Value</TableCell>
          </TableRow>
        </TableHead>
        {
          Array(100).fill("Test").map((e) => <TableRow><TableCell>{e}</TableCell></TableRow>)
        }
      </Table>
    </TableContainer>
  );
}

解决方案

Get rid of the TableContainer overflow-x: auto and it should work

const useStyles = makeStyles({
  customTableContainer: {
    overflowX: "initial"
  }
})

export default function App() {
  const classes = useStyles();
  return (
    <TableContainer classes={{root: classes.customTableContainer}}>
      <Table stickyHeader>
      
      ...

Reference: https://css-tricks.com/dealing-with-overflow-and-position-sticky/

这篇关于具有动态高度的React Material-Ui粘性表标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！