StickyHeader in Material-Table React

Question

I was looking at this example, and the question I have is for a sticky header. Example: https://material-table.com/#/docs/features/fixed-columns

I was trying to figure out to see if I can get the header that has Name up to BirthPlace to be stick, so that when I create the scroll bar, it will stay there. I tried everything, but it keeps giving me different results. Any help would be great

class BasicFixedColumns extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    }
  }

  render() {
    return (
      <MaterialTable
        title="Basic Fixed Columns Preview"
        columns={[
          { title: 'Name', field: 'name', width: 150 },
          { title: 'Surname', field: 'surname', width: 150 },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric', width: 150 },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
            width: 150
          },
          { title: 'Name', field: 'name', width: 150 },
          { title: 'Surname', field: 'surname', width: 150 },
          { title: 'Birth Year', field: 'birthYear', type: 'numeric', width: 150 },
          {
            title: 'Birth Place',
            field: 'birthCity',
            lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
            width: 150
          },
        ]}
        data={[
          { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
        ]}        
        options={{
          fixedColumns: {
            left: 2,
            right: 1
          }
        }}
      />
    )
  }
}

On the website if you scroll down to the example, there is show code, which works as an ide. It's callled Basic Fixed Columns Example and there is a <> on the right side of the example, you can click on it and you can edit the code from there, it will render any changes you made — Mark A Avila, Mar 20 '20 at 16:00
Ah ok, because the link is a sticky column not row. That is not supported right now. — Domino987, Mar 20 '20 at 16:50

Steve · Answer 1 · 2020-05-22T14:47:31.437

You need to set the maxBodyHeight property. Then, when the data exceeds this height, the table will become scrollable with a sticky header.

<MaterialTable
    options={{
        paging: false,
        maxBodyHeight: '300px',
    }}
    columns={columns}
    data={data}
/>

Bonus: For a sticky first column, there is this functionality.

By using this it sets the tableLayout to fixed. I couldn't set it back to auto without the columns becoming a mess. So after creating my columns array I gave the first column some styling:

columns[0].cellStyle = {
    backgroundColor: '#007eff',
    color: '#FFF',
    position: 'sticky',
    left: 0
}

For people visiting this question you can check this https://github.com/mbrn/material-table/issues/780#issuecomment-512876433 — rainversion_3, Apr 06 '21 at 18:43

StickyHeader in Material-Table React

1 Answers1