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

); } `

Hi @keikai I've added some code to the question. Essentially I am just using the material table demo code as above, but in my app I have also made a version that uses some of my own data and options like no paging and no search field. — RIck
– RIck, Commented Apr 7, 2020 at 14:24

RIck · Accepted Answer · 2020-04-14 13:01:43Z

5

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

answered Apr 14, 2020 at 13:01

RIck

4411 gold badge4 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related