Material-Table React. How to make the table Title and Header sticky

Question

Is it possible to make the table title, search field, global actions icons and column headers in the Material-Table sticky?

I've tried adding headerStyle to options and that has no effect (anyway that would only affect column headers and not the table title etc)

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

Has anyone got any ideas how to do it?

I was hoping a 'sticky header' option existed but if it does I cannot see it! I would have thought a sticky header is a fairly common use case for tables.

This is the basic code to use a Material Table:

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 figured it out in the end:

I had to add the these to the Material Table options. It means knowing in advance the height that you want your table to be. I

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

and then also this was necessary to add to the Material Table depending on pagination setting:

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