3 ms·

This sounds interesting to me. One of the struggles with sticky table headers is supporting automatic column widths. How does your portal trick support that? Cu

• stephen 4y ago
  We only use `position: sticky` for the first row of the table, but then stack everything else in a separate div, so something like: - parent div -- 1st child div, everything that is "stickied" to the top of the screen (really a tree of react components like the header + filters + table actions) -- 2nd child div, the table itself with a single position: sticky header row The portal trick/approach is that technically the table is rendered by some leaf-ish component in the 1st child's component tree, but once the leaf components knows "hey I'm the leaf", it uses a portal to push it's content to the 2nd top-level child, which gets it stuck below everything in the 1st child. It sounds kind of elaborate, but it lets everything in the top div get correctly dynamically sized without any hard-coded offset hacks.