Material-table: Fixed Columns

[francesco-clementi]

Is there a way to fix the position of the first column in a table with over 40 columns?

[dnn5b]

Created a PR for this feature. What do you think about it?

[francesco-clementi]

Hi dnn5b,
actually I was looking for another kind of fixed columns.

As shown in the attachment, I'd like to fixed the column when I use the stick on the down.

I'd like that when I'm scrolling right I can be able to still see the first columns.

[ShevaShen]

I was able to fix the first column (action column) by applying some CSS.

const useStyles = makeStyles({
  stickyActionsColumn: {
    '& table:first-child': {
      '& tr': {
        '& td:first-child, th:first-child': {
          backgroundColor: '#f5f5f5',
          position: 'sticky',
          left: 0,
          zIndex: 999
        },
        '& th:first-child': {
          zIndex: 9999
        }
      }
    }
  }
})

[francesco-clementi]

Hi @ShevaShen ,
thanks for your support, but I'm a beginner in styling.

I'm not using hooks in react, but I'm using material-table in a class component.
My first column "action" is not custom, but it's from the editable feature of material-table "https://material-table.com/#/docs/features/editable".

Please could you help me to integrate your solution in mine?

Thanks

[ShevaShen]

@francesco-clementi-bip here is the sass snippet. Place the table component inside <div className="table-container"></div>

.table-container {
  table:first-child {
    tr {
      td:first-child, th:first-child {
        background-color: '#f5f5f5';
        position: 'sticky';
        left: 0;
        z-index: 999;
      }
      th:first-child {
        z-index: 9999;
      }
    }
  }
}

[didopop3]

@ShevaShen I tried your method it's working. Thank you very much! I suppose fixed head can apply for the same thing :)

[francesco-clementi]

@ShevaShen thanks sheva, your help is really appreciated,.
I managed to fixed the header of the actions column.
Could it be possibile to fix not only the header, but the whole column?

[ShevaShen]

@francesco-clementi-bip if you apply the style to the parent div of the table, this should fix the whole first column

[codenamethanos]

https://material-table.com/#/docs/features/fixed-columns
Seems to be solved?

[ShevaShen]

right, saw it in the new release https://github.com/mbrn/material-table/issues/43

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.