Question

在Material-UI@v0.xx.x中，有表高度和固定表头的道具，但不幸的是，它们似乎没有在Material-UI @ next中实现。是否有一种解决方法，以便使用Material-UI @ next实现相同的目标？

我尝试使用该版本切换到v0.19.1并重建了我的表组件，但这给我留下了一个关于多选（https://github.com/callemall/material-ui/issues/5964）的新bug。

有关如何解决这两个问题的任何建议吗？

Answer 1

您是否尝试过在标题 TableCell 组件中添加位置：“粘性”？

我不确定它是否可以与您的材料UI版本一起使用，但就我而言（v3.0.2）CSS类如下所示：

header: {
    background-color: '#fff',
    position: 'sticky',
    top: 0,
},

然后只需申请每个TableCell：

<TableCell
   className={header}>
   {yourLabel}
</TableCell>

Answer 2

如果您使用的是当前版本的Material UI（v4.5.1），则只需将this demo的stickyHeader属性添加到表中即可。

<Table stickyHeader>
  ...
</Table>

Answer 3

材料UI粘性标头不适用于长表和大量数据，因此您需要删除所有粘性类并将这些自定义CSS放入代码中，您的表标头将变为粘性。

.tableFixHeader {
  overflow-y: auto;
  max-height: 600px;
}

.tableFixHeader thead th {
  position: sticky;
  top: 0px;
  z-index: 1;
}

/* Just common table stuff. Really. */
table {
  border-collapse: collapse;
  width: 100%;
  overflow: unset !important;
  position: relative;
}

thead th {
  background: $ultra-light-grey !important;
  box-shadow: 1px 0px 0px 1px $silver;
}

table th .css-yk16xz-control {
  background: transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<TableContainer className="tableFixHeader" >
                <Table
                    className=""
                    id=""
                    size={dense ? 'small' : 'medium'}
                >
                <TableHead>
            <TableRow>
            <TableCell>
            .......
            </TableCell>
            </TableRow>
             <TableBody>
             ........
             </TableBody>
        </TableHead>
        </Table>
            </TableContainer>

修复了Material-UI @ next中的表格标题和高度（v1.0.0-beta.8）

3 个答案: