freezing headers in the table component

[lovasoa]

Discussed in #682

^{Originally posted by alexisrc1 November 9, 2024}
It would be amazing for data analysis if there was a way to freeze columns and/or rows,so when tables become big it is easy to navigate them.
If you can add 2 two top-level parameters so we can indicate the numbers of rows / columns to freeze, for instance:

select
'table' as component,
2 as freeze_columns -- for freezing the first 2 columns of the table,
1 as freeze_rows -- for freezing the top row of the table (the row with columns names)
;
select
1 as a,
2 as b;
select
3 as a,
4 as b;

Thanks 😉

[lovasoa]

I just had a look at this. tabler has a built-in sticky header class, but it does not work with responsive tables.

https://tabler.io/docs/components/tables#table-with-sticky-header

Tables that can both scroll horizontally and have a sticky header are a pain in general

https://uxdesign.cc/position-stuck-96c9f55d9526

We may get to this eventually, but that would be a bigger effort than it seems.

[lovasoa]

A workaround in the mean time is to fix the height of tables to make them vertically scrollable by including the following custom css:

thead {
  position: sticky;
}

.table-responsive {
  max-height: 50vh;
}

[lovasoa]

And for horizontal scrolling:

th:first-child {
  position: sticky;
  left:0;
  z-index: 2;
}

td:first-child{
  position: sticky;
  left:0;
  background: var(--tblr-bg-surface-tertiary);
}

Screencast.From.2024-11-10.20-12-14.mp4

[alexisrc1]

thanks i'll try it out !