How to freeze first column in Fluent UI details list

Question

How can I freeze the first column only in Fluent UI Details list? Columns are more than 40 . Hence needs to be frozen so that horizontal scroll can be used.

Answer 1

There is no direct way. But you can do it with some css hack. It's pretty much self explanatory.

.ms-DetailsRow-cell:first-child, .ms-DetailsHeader-cell:first-child {
  position: sticky;
  inset: 0;  
  background-color: white;
  z-index: 1;
}