Question

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

我试图弄清楚是否可以将名称保持在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属性。然后，当数据超过此高度时，表格将变为带有粘性标题的可滚动页面。

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

奖金：对于粘性第一列，there is this functionality。

通过此方法将tableLayout设置为fixed。没有列变得一团糟，我无法将其设置回自动。因此，在创建了columns数组之后，我给第一列添加了一些样式：

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

物料表反应中的StickyHeader

1 个答案: