Hacker News Reader

Comment by LinguaBrowse | Hacker News Reader

I'll give you sticky headers on one axis, but am still waiting for the day that CSS supports them on both axes: https://github.com/w3c/csswg-drafts/issues/8286

View on HN

One of the most challenging things I have done was when I got contracted to make both column and header sticky. Easy enough with a standard table, but this was in some wild VueJS extended third party library dynamic table with generated CSS as JS. It took me ages just to unravel where all the different CSS and JS actually came from and then I had to work around via overriding JS class functions and generated CSS etc.

I felt really bad for the client because of how long it took. It also made me really careful with deciding on libraries when in Vue/React codebases. It's a very self-inflicted wound to require that much effort to do such a simple task. It's a table dangit, a HTML primitive, why am I like three JS classes deep and importing CSS as JSON?

We design said they wanted row expansion. Then buttons in some cells based on rules open modals.

Other cells have hover tooltips. And we need sort. Must have sort. And one of the table columns has editable values. But the edited value doesn’t affect the sort. It should affect the filter though. Did I mention we need filters? Also I need two sticky columns unless the user is a BobRole, then they should have 3 sticky columns and shouldn’t see column 9.

The table will have 50,000 rows with pagination. Pagination must respect the sort and filter obviously.

That's where ecosystems really matter. These kinds of use cases are well solved in places like C# desktop toolkits, where stable conditions allow ecosystems to build up and companies willing to drop thousands on licenses for UI toolkits inject plenty of cash. The javascript ecosystem on the other hand is so cash-strapped, frequently disrupted, and splintered across frameworks that libraries rarely reach the maturity necessary for complex situations. Even virtual scrolling is a rarity. So everyone just develops what they need in-house, and the next project has to start from scratch.

That is an interesting perspective, I had never considered the JS ecosystem to be cash strapped but I see what you mean. Aside from big institutions supporting some of the leading frameworks there is a limited amount of paid products and an expectation that things be open sourced. JS has a lot of man hours in its ecosystem but they are into thousands of individual projects, not holistic frameworks.

Huh? I know of at least three table frameworks with sticky rows & headers (MUI X and AG Grid, Ant.design).

And there are more virtual-list libraries than I can count my.

Oh gosh I forgot about the row expansion and sort, and infinite load coupled with the sort in my case. Slightly better because the user just got flicked to the top of the table if they sorted anything.

I've been watching the issue that spawned this one for maybe 8 years now. It's by far my biggest annoyance about the CSS spec. Sometimes you just need a gigantic data table, and you want that to be sticky top and overflow-x auto. Sorry, too bad, you have to pick one of these.

Reply on news.ycombinator.com