Best Practices Tailwind CSS Mobile Responsive Tables
Hey everonye, I am trying to build a mobile responsive table and was wondering if there are any thoughts or best practices on how to build mobile friendly tables.
I am having three ideas for now:
1) Tailwind
media queries with hideen state. In the cell render function I will simply hide or display the cell rendering. E.g. since I am mapping I will hide all the columns, but the first one and push all values into a custom format that displays on mobile.
2) Use column visibility with hooks: I thought that I could also use hooks to toggle the showing of different columns on or off. I could then define a new "mobile" column in any way I want and render it as needed.
Any trade-offs or things ppl thought about when implementing this?2 Replies
xenial-black•3y ago
Hi @felixv did you arrive at any conclusion on the best route forward here? 🙂
adverse-sapphireOP•3y ago
@Deleted User sorry for the late reply. Yes so I am doing option 1. I created a
TableCell component. This one has a mobile prop and then I just blend out all the other columns and jsut show one of type display.