javascript - Material-Table React 中的 StickyHeader

Question

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

我试图弄清楚是否可以将 Name 到 BirthPlace 的标题粘贴起来，这样当我创建滚动条时，它就会留在那里。我尝试了所有方法，但它一直给我不同的结果。任何帮助都会很棒

class BasicFixedColumns extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    }
  }

  render() {
    return (
      <MaterialTable
        title="Basic Fixed Columns Preview"
        columns={[
          { title: 'Name', field: 'name', width: 150 },
          { title: 'Surname', field: 'surname', width: 150 },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric', width: 150 },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
            width: 150
          },
          { title: 'Name', field: 'name', width: 150 },
          { title: 'Surname', field: 'surname', width: 150 },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric', width: 150 },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
            width: 150
          },
        ]}
        data={[
          { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        ]}        
        options={{
          fixedColumns: {
            left: 2,
            right: 1
          }
        }}
      />
    )
  }
}

Answer 1

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

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

奖金 :对于粘性第一列，there is this functionality .

通过使用它，它将 tableLayout 设置为固定。如果列变得一团糟，我无法将其设置回自动。所以在创建我的列数组后，我给了第一列一些样式:

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