New table component (design guide)

[joycexjiang]

Ticket:

https://viam.atlassian.net/browse/APP-6953
Desire for a table "component", even if only mostly for layout.

Context

• Creating custom classes using <ul /> instead of <table > due to problems when embedding HTML in table cells (less hidden behavior in HTML elements itself, simpler default CSS with accessibility)
• theme.ts is only used for extending Tailwind's default theme settings and not to handle custom CSS class definitions. plugins.ts is modified to add the table-related classes to ensure these styles are applied globally and available for scalability
• Future implementation: add onSorted hook for sortable tables

NEXT TO DO: Add a design guide to design.viam.com (APP-7487)

[nathartman]

following up from my comment in design sync--

I don't love truncating columns at a max-width as the max state because it means we could be cutting off information without giving the user a way to access it, which seems potentially really frustrating. IMO a better approach is using horizontal scroll for the entire table. This seems like the standard established approach for table design.

Horizontally scrolling tables can definitely be really annoying to use, but I think there are other things we can do as follow-ups to make wide/dense data tables more user-friendly, such as...

• Adding an option to "freeze" the first key identifying columns, to preserve the context while the user is scrolling (here's a super thorough article on table design patterns-- jump to "Column management" section)
• Combining related info in columns to cut nonessential columns
• Eventually support drag resizing or column customization

Including some examples of horizontal scroll for wide tables in practice, as requested in design sync:

• Notion (great design reference for tables IMO):
  https://github.com/user-attachments/assets/5b9be44f-a0c1-4bff-ae2f-657a27b3cad6
• Jira
  https://github.com/user-attachments/assets/3d197b01-54c5-4ae1-98fa-833e5c864368
• Supabase
  https://github.com/user-attachments/assets/29b9745e-b3f6-4604-a584-31906de6e7be

(btw, this shouldn't be blocking your PR or anything, Joyce. just sharing my thoughts here as requested in today's sync so we can discuss as a team eventually!)

[micheal-parks]

+1 on doing horizontal scroll for tables 👍 there's no perfect solution but this is one that is common and robust