8 ms·

I recently tried to design a table that had a sticky header row AND a sticky first column. I couldn't figure out a way that worked well on both desktop and mob

I recently tried to design a table that had a sticky header row AND a sticky first column. I couldn't figure out a way that worked well on both desktop and mobile. All the solutions I found were janky in one form or another. Anyone have good tips for this?

Silhouette 6y ago
I'm afraid I have no tip to offer, but I can empathise because we've run into the same problem and we too are still looking for a good solution. I think tables just don't sit well in HTML. We are trying to force a 2D structure where useful operations might be based on either dimension into a flattened hierarchical structure where one dimension must take priority, and that is awkward. The attempt to work around this by introducing colgroup and col elements never really went anywhere either. So for now, we resort to tricks like artificial DOM structures and pretend margins/padding and manual positioning, the same kind of hackery that we used to use for page layouts until tools like flexbox and grid were introduced. What we really need, IMHO, is a similarly comprehensive set of dedicated table selectors and styling options in CSS. There have been proposals like the nth-col pseudo-class and the || column combinator, which look like useful ideas, but again these haven't really gone anywhere so far. There might be some value in allowing tables to be styled as row-major or column-major (a similar idea to flex-direction) and then basing other styling around the major and minor axes rather than relying on rows/children and columns specifically.
SirWart 6y ago
The most successful I’ve been at this is clever uses of position: sticky. You have to fall back to absolute positioning and scrolling the fixed headers in JS on browsers that aren’t as advanced in their position: sticky support though.
- sixQuarks 6y ago
  I figured it out without using JavaScript. The trick is to use a <th> on the first child of each tr, which becomes the sticky left column. Position sticky works on th’s. It’s not ideal, but this works on about 95% of all browsers.
seanwilson 6y ago
Maybe see how the library from https://www.ag-grid.com/ https://www.ag-grid.com/ does it or just use their library. If you check how many open bugs most JS grid/table projects have, it's clear implementing a robust grid with many features is really hard. I've used ag-grid for projects before and can recommend it (works with all major UI frameworks).
divbzero 6y ago
This sounds tough. A common solution, which qualifies as “janky”, is to render sticky rows in a <div> element, completely separate from the <table> itself. If I remember correctly, DataTables [1] takes this approach for its sticky headers. React Table [2] takes a similar approach, and actually abandons <table> altogether by using <div> elements for table body, rows, and cells. [1]: https://www.datatables.net https://www.datatables.net [2]: https://react-table.js.org https://react-table.js.org I haven’t seen many solutions for sticky columns, but the least bad solution might also be a “janky” separate <div>.
- capableweb 6y ago
  The implementation here would decide if this is "janky" or not as in web-dev circles, "janky" specifically refers to stuttering, lag, juddering and such, not in general something that is "hacky" (poor or ad-hoc solution). So if it's performant, it's not "janky" (again, in web-dev circles) but it could still be a "hacky" implementation, even without any jank. It's also different from "robust", so something can be not-janky but also not-robust.

Silhouette 6y ago

I'm afraid I have no tip to offer, but I can empathise because we've run into the same problem and we too are still looking for a good solution. I think tables just don't sit well in HTML. We are trying to force a 2D structure where useful operations might be based on either dimension into a flattened hierarchical structure where one dimension must take priority, and that is awkward. The attempt to work around this by introducing colgroup and col elements never really went anywhere either. So for now, we resort to tricks like artificial DOM structures and pretend margins/padding and manual positioning, the same kind of hackery that we used to use for page layouts until tools like flexbox and grid were introduced. What we really need, IMHO, is a similarly comprehensive set of dedicated table selectors and styling options in CSS. There have been proposals like the nth-col pseudo-class and the || column combinator, which look like useful ideas, but again these haven't really gone anywhere so far. There might be some value in allowing tables to be styled as row-major or column-major (a similar idea to flex-direction) and then basing other styling around the major and minor axes rather than relying on rows/children and columns specifically.

SirWart 6y ago

The most successful I’ve been at this is clever uses of position: sticky. You have to fall back to absolute positioning and scrolling the fixed headers in JS on browsers that aren’t as advanced in their position: sticky support though.

sixQuarks 6y ago
I figured it out without using JavaScript. The trick is to use a <th> on the first child of each tr, which becomes the sticky left column. Position sticky works on th’s. It’s not ideal, but this works on about 95% of all browsers.

seanwilson 6y ago

Maybe see how the library from https://www.ag-grid.com/ https://www.ag-grid.com/ does it or just use their library. If you check how many open bugs most JS grid/table projects have, it's clear implementing a robust grid with many features is really hard. I've used ag-grid for projects before and can recommend it (works with all major UI frameworks).

divbzero 6y ago

This sounds tough. A common solution, which qualifies as “janky”, is to render sticky rows in a <div> element, completely separate from the <table> itself. If I remember correctly, DataTables [1] takes this approach for its sticky headers. React Table [2] takes a similar approach, and actually abandons <table> altogether by using <div> elements for table body, rows, and cells. [1]: https://www.datatables.net https://www.datatables.net [2]: https://react-table.js.org https://react-table.js.org I haven’t seen many solutions for sticky columns, but the least bad solution might also be a “janky” separate <div>.

capableweb 6y ago
The implementation here would decide if this is "janky" or not as in web-dev circles, "janky" specifically refers to stuttering, lag, juddering and such, not in general something that is "hacky" (poor or ad-hoc solution). So if it's performant, it's not "janky" (again, in web-dev circles) but it could still be a "hacky" implementation, even without any jank. It's also different from "robust", so something can be not-janky but also not-robust.