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

Posted 2023-02-22

【中文标题】材料表反应。如何使表格标题和标题具有粘性

【英文标题】：Material-Table React. How to make the table Title and Header sticky

【发布时间】：2020-07-18 09:02:37

【问题描述】：

是否可以让 Material-Table 中的表格标题、搜索字段、全局操作图标和列标题具有粘性？

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

options=
        headerStyle:  position: 'sticky',
        paging: false,
        search: false,
    

有人知道怎么做吗？

我希望存在“粘性标题”选项，但如果存在，我将看不到它！ 我会认为粘性标题是表格的一个相当常见的用例。

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

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);
      ),
  
/>

); `

【问题讨论】：

你能提供一个在线演示吗？还是完整代码？

嗨@keikai 我已经在问题中添加了一些代码。本质上我只是使用上面的材料表演示代码，但在我的应用程序中，我还制作了一个使用我自己的一些数据和选项的版本，例如没有分页和没有搜索字段。

【参考方案1】：

我终于想通了：

我必须将这些添加到材料表选项中。这意味着提前知道您希望桌子的高度。我

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

然后根据分页设置添加到材料表中也是必要的：

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