Material-Table React 中的 StickyHeader

Question

我正在看这个例子，我的问题是粘性标题。例子： https: //material-table.com/#/docs/features/fixed-columns

\n\n

我试图弄清楚是否可以将名称高达 BirthPlace 的标题粘贴下来，这样当我创建滚动条时，它就会保留在那里。我尝试了一切，但它总是给我不同的结果。任何帮助都会很棒

\n\n

class BasicFixedColumns extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n    }\n  }\n\n  render() {\n    return (\n      <MaterialTable\n        title="Basic Fixed Columns Preview"\n        columns={[\n          { title: \'Name\', field: \'name\', width: 150 },\n          { title: \'Surname\', field: \'surname\', width: 150 },\n          { title: \'Birth Year\', field: \'birthYear\', type: \'numeric\', width: 150 },\n          {\n            title: \'Birth Place\',\n            field: \'birthCity\',\n            lookup: { 34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\' },\n            width: 150\n          },\n          { title: \'Name\', field: \'name\', width: 150 },\n          { title: \'Surname\', field: \'surname\', width: 150 },\n          { title: \'Birth Year\', field: \'birthYear\', type: \'numeric\', width: 150 },\n          {\n            title: \'Birth Place\',\n            field: \'birthCity\',\n            lookup: { 34: \'\xc4\xb0stanbul\', 63: \'\xc5\x9eanl\xc4\xb1urfa\' },\n            width: 150\n          },\n        ]}\n        data={[\n          { name: \'Mehmet\', surname: \'Baran\', birthYear: 1987, birthCity: 63 },\n          { name: \'Zerya Bet\xc3\xbcl\', surname: \'Baran\', birthYear: 2017, birthCity: 34 },\n        ]}        \n        options={{\n          fixedColumns: {\n            left: 2,\n            right: 1\n          }\n        }}\n      />\n    )\n  }\n}\n

\n

Answer 1

您需要设置该maxBodyHeight属性。然后，当数据超过此高度时，表格将变得可滚动，并带有粘性标题。

<MaterialTable
    options={{
        paging: false,
        maxBodyHeight: '300px',
    }}
    columns={columns}
    data={data}
/>

奖励：对于粘性第一列，有此功能。

通过使用它，它将 tableLayout 设置为固定。我无法将其设置回自动，否则列会变得混乱。因此，在创建列数组后，我给了第一列一些样式：

columns[0].cellStyle = {
    backgroundColor: '#007eff',
    color: '#FFF',
    position: 'sticky',
    left: 0
}