I was looking at this example, and the question I have is for a sticky header. Example:

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

I was looking at this example, and the question I have is for a sticky header. Example: https://material-table./#/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
          }
        }}
      />
    )
  }
}

• javascript
• reactjs
• material-table

• What does it give you? Can you create a sandbox? – Domino987 Commented Mar 20, 2020 at 15:38
• 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 Commented Mar 20, 2020 at 16:00
• Yes I know, but what exactly do you want to achieve. – Domino987 Commented Mar 20, 2020 at 16:48
• Ahh, I want to achieve a stick header for the first row – Mark A Avila Commented Mar 20, 2020 at 16:49
• 1 Ah ok, because the link is a sticky column not row. That is not supported right now. – Domino987 Commented Mar 20, 2020 at 16:50

1 Answer 1

You need to set the maxBodyHeight property. Then, when the data exceeds this height, the table will bee 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 being 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
}