CODEWITHSUNDEEP
reactjsmui-datatable
Israel Zebulon
Israel Zebulon

Reputation: 262

Mui-datatables fixed column on scroll - (left or right)

How to fix the column on the screen during the scroll? Using the Mui-datatables library, like datatables on doc. doc

In the mui-datatables there is a fixedSelectColumn property, but I was unable to select the column or configure the scroll.

My options :

 const options = {
        filter: true,
        filterType: 'multiselect',
        textLabels : TextLabels,
        responsive: 'scroll',
        fixedHeader: true,
        tableBodyHeight: '100%',
        selectableRows: false,
        fixedSelectColumn: true,


    };

Upvotes: 1

Views: 10053

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

The fixedSelectColumn prop is for the "selection" elements, i.e., the check boxes. I don't think the MUI-Datatables, as of this writing has props like this feature that you have linked pertaining to the jQuery datatables.

However, upon looking at this source code, we can see that some of the "fixed" columns utilize the CSS position: sticky property. So, one way to implement fixed columns is to style the cells & header cells as such:

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

  ...

Edit React MUI-DataTables Fixed Column

Upvotes: 4

Related Questions