UI improvement (epic): Refactor tables to grids across areas for more responsive and flexible design

[cdrage]

Epic domain

Unfortunately we're starting to run into limitations of the tailwindcss table feature:

• Unable to adjust width of columns (see: Column widths should not change with state #506 issue)
• Only two settings for table (auto and manual)
  *. Not responsive design (information gets cut off) when viewing as a smaller screen

As an epic, we should refactor using tables for grids instead which will enable us to:

• Add sorting on each column
• Be able to adjust the width of each column
• More responsive design when doing smaller / larger screens

More research will need to be done if this can be accomplished by either using a grid layout or some form of plugin / added dependancy to fill the limitations of using tailwindcss tables.

Issue breakdown:

• feat: table component #4545 (adds ability to sort and proportional columns)
• Move Volumes page to table component #4839 Apply component to Volumes page (including column width, initial sorting)
• Move Images page to table component #4840 Apply component to Images page (including column width, initial sorting)
• Move Pods page to table component #4842 Apply component to Pods page (including column width, initial sorting)
• Move Containers to table component #4843 Apply component to Containers page (including column width, initial sorting)
• Ability to adjust column width

Additional context

No response

[nichjones1]

@deboer-tim are the items in this epic part of the table work that you are working on?

[deboer-tim]

Yes. The table component issue #4545 will add ability to sort tables (the first issue above), but we still need other child issues of this epic to use the component for all pages and provide comparators to make each column sortable.

The table component will also provide more responsive design (e.g. columns can be fixed or proportional width), which also need to be applied to each screen).

So: one issue per page (Pods, Containers, etc) to apply the table component, column width, and sorting. I mostly have Volumes and Images done so those should be soon.

Being able to adjust column width is not covered yet, that will need to be a separate issue, but hopefully can be done once for all tables after the rest is done.

I added a section to the description with this breakdown.