Progressive enhancement for interactive data tables

[coarse sigil]

Is there a good way to do an interactive table in Remix that upgrades nicely on hydration, but has a good DX?
I love how forms... I mean Forms in Remix have both excellent UX and DX. I'm not sure how to do something similar with tables that:

• allow clicking on a row to select it, then clicking action buttons below the row to operate on the selected row(s)
• update the UI based on the row selection (right now I have a dropdown that populates with compatible options based on the selected row's data)

Right now, I'm thinking of duplicating all the buttons-below-the-table as buttons in each row to take that action on the row. Not sure about the "update some other UI based on the selected row", or how to have a row selectable on click before JS arrives. Only thing that comes to mind is having all cell contents wrapped in anchor tags, which is kinda gross 😦

[ripe grail]

I feel that these sort of interactions should just use React and state client side.

[coarse sigil]

I think I may be limited to that. I'm just hoping to push as much for "fully-functional even before hydration" as possible

perhaps I could have a checkbox in the first column of each row, and once hydration happens, then clicking anywhere in the row will also toggle that row's checkbox

then a simple form around the table, with form action buttons below the table would probably still work - hidden fields and all that per-row

as for updating other bits of UI on the page when a row is selected (like filtering the options in a select), that's definitely JS-land

I may have to think through specific use cases as they arise, but the idea of a checkbox for the selected row may be a good foundation for lots of what I may want to have happen