Реакция таблицы материалов. Как сделать заголовок таблицы и заголовок липкими

Question

Возможно ли сделать заголовок таблицы, поле поиска, значки глобальных действий и заголовки столбцов в Material-Table закрепленными?

Я пытался добавить headerStyle к параметрам, и это не имеет никакого эффекта (во всяком случае, это будет влиять только на заголовки столбцов, а не на заголовок таблицы и т. д. c)

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

У кого-нибудь есть идеи, как это сделать?

Я надеялся, что существует опция «липкий заголовок» но если это так, я не вижу этого! Я бы подумал, что липкий заголовок - довольно распространенный вариант использования таблиц.

Это базовый c код для использования таблицы материалов:

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

); } `

Answer 1

В конце концов я понял:

Я должен был добавить их в параметры таблицы материалов. Это означает, что вы заранее знаете высоту, которой вы хотите, чтобы ваш стол. I

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

, а затем также это необходимо было добавить в таблицу материалов в зависимости от настройки нумерации страниц:

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