Freeze first or first two columns

[saching6]

Is there a way to freeze columns (first column or first two columns) which stay in place as we do a horizontal scroll on the table?

Environment

Tech	Version
Material-UI	^5.10.9
MUI-datatables	^4.2.2
React	^17.0.1
browser	Chrome/Safari
etc

[anishkumar23-01]

in column options, display:false or none

[saching6]

The display flag controls whether the columns is shown in the "View Columns" filter menu. I am looking for a property where we can make a column fixed similar to the fixed header property or the select column like the checkboxes. I want to freeze/fix the first column (column right after the select column) so it stays in place as we scroll right.

[helen-tan]

Found a way to freeze columns here: https://stackoverflow.com/questions/63679686/mui-datatables-fixed-column-on-scroll-left-or-right

It uses the column props setCellProps and setCellHeaderProps to freeze the column headers and the cells under it with position: "sticky".

const columns = [
  {
    name: "Name",
    options: {
      filter: true,
      setCellProps: () => ({
        style: {
          whiteSpace: "nowrap",
          position: "sticky",
          left: "0",
          background: "white",
          zIndex: 100
        }
      }),
      setCellHeaderProps: () => ({
        style: {
          whiteSpace: "nowrap",
          position: "sticky",
          left: 0,
          background: "white",
          zIndex: 101
        }
      })
    }
  },

  ...