Reactjs 物料表反应。如何使表格标题和标题具有粘性

是否可以使物料表中的表格标题、搜索字段、全局操作图标和列标题保持粘性

我曾尝试将headerStyle添加到选项中，但没有效果（无论如何，这只会影响列标题，而不会影响表标题等）

有人知道怎么做吗

我希望有一个“粘性标题”选项存在，但如果有，我就看不见了！ 我原以为粘性标题是表的一个相当常见的用例

这是使用材质表的基本代码：

import React from 'react';
import MaterialTable from 'material-table';

export default function MaterialTableDemo() {
  const [state, setState] = React.useState({
    columns: [
      { title: 'Name', field: 'name' },
      { title: 'Surname', field: 'surname' },
      { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      {
        title: 'Birth Place',
        field: 'birthCity',
        lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
      },
    ],
    data: [
      { name: 'Mehmet', surname: 'Baran', birthYear: 1987,     
birthCity: 63 },
      {
        name: 'Zerya Betül',
        surname: 'Baran',
        birthYear: 2017,
        birthCity: 34,
      },
    ],
  });

      return (
<MaterialTable
  title="Editable Example"
  columns={state.columns}
  data={state.data}
  editable={{
    onRowAdd: (newData) =>
      new Promise((resolve) => {
        setTimeout(() => {
          resolve();
          setState((prevState) => {
            const data = [...prevState.data];
            data.push(newData);
            return { ...prevState, data };
          });
        }, 600);
      }),
    onRowUpdate: (newData, oldData) =>
      new Promise((resolve) => {
        setTimeout(() => {
          resolve();
          if (oldData) {
            setState((prevState) => {
              const data = [...prevState.data];
              data[data.indexOf(oldData)] = newData;
              return { ...prevState, data };
            });
          }
        }, 600);
      }),
    onRowDelete: (oldData) =>
      new Promise((resolve) => {
        setTimeout(() => {
          resolve();
          setState((prevState) => {
            const data = [...prevState.data];
            data.splice(data.indexOf(oldData), 1);
            return { ...prevState, data };
          });
        }, 600);
      }),
  }}
/>

从“React”导入React；
从“物料表”导入物料表；
导出默认函数MaterialTableDemo（）{
常量[状态，设置状态]=React.useState({
栏目：[
{title:'Name'，field:'Name'}，
{标题：'姓'，字段：'姓'}，
{title:'Birth Year'，字段：'Birth Year'，键入：'numeric'}，
{
标题：“出生地”，
字段：“出生地”，
查找：{34:'İstanbul'，63:'Şanlıurfa'}，
},
],
数据：[
{姓名：'Mehmet'，姓氏：'Baran'，出生年份：1987年，
出生地：63}，
{
姓名：“Zerya Betül”，
姓：“巴兰”，
出生年份：2017年，
出生城市：34，
},
],
});
返回(
新承诺（（决议）=>{
设置超时（（）=>{
解决（）；
设置状态（（prevState）=>{
const data=[…prevState.data]；
data.push（newData）；
返回{…prevState，data}；
});
}, 600);
}),
onRowUpdate：（新数据、旧数据）=>
新承诺（（决议）=>{
设置超时（（）=>{
解决（）；
如果（旧数据）{
设置状态（（prevState）=>{
const data=[…prevState.data]；
数据[data.indexOf（oldData）]=新数据；
返回{…prevState，data}；
});
}
}, 600);
}),
onRowDelete：（旧数据）=>
新承诺（（决议）=>{
设置超时（（）=>{
解决（）；
设置状态（（prevState）=>{
const data=[…prevState.data]；
数据拼接（数据索引OF（旧数据），1）；
返回{…prevState，data}；
});
}, 600);
}),
}}
/>

))； }

---

`

我终于明白了：

我必须将这些添加到材质表选项中。这意味着提前知道你想要的桌子的高度。我

  options={{
          headerStyle: { position: 'sticky', top: 0 },
          maxBodyHeight: 500,
      }}

然后，根据分页设置，有必要将其添加到材质表中：

  components={{
        Container: props => (
          <div style={{height: 500}}>
           {props.children} 
          </div>
        ),
      }}

组件={{
容器：道具=>(
{props.children}
),
}}

能否提供在线演示？还是完整代码？嗨，keikai，我在问题中添加了一些代码。基本上，我只是在使用上面的material table演示代码，但在我的应用程序中，我还制作了一个版本，使用了我自己的一些数据和选项，如无分页和无搜索字段。

  components={{
        Container: props => (
          <div style={{height: 500}}>
           {props.children} 
          </div>
        ),
      }}