'fixed columns with shadow in react mui datatable

Iam struck to create a two fixed column in left and one column in right with shadow in MUI data table, some one help me with this i tried in column options, but the border are disappear when i scroll,

  name: "EmployeeId",
  label: 'Employee Id',
  options: {
    filter: false,
    setCellProps: () => ({
      style: {
        whiteSpace: "nowrap",
        position: "sticky",
        left: 0,
        background: "white",
        zIndex: 100,
        border: "1px solid rgba(224,224,224,1)",
      }
    }),
    setCellHeaderProps: () => ({
      style: {
        whiteSpace: "nowrap",
        position: "sticky",
        left: 0,
        background: "white !important",
        zIndex: 101,
        color: '#283593',
        border: "1px solid rgba(224,224,224,1)",
      }
    })
  }
},```

else I need a data table with multifunction's like, column header with filter, fixed column, fixed header, column hide/show,

I tried MUI data-table but in that fixed two column in left is not working perfectly..



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source