Responsive Table - Vertical Scroll and Pinned Top Row

[trueberryless]

What version of starlight are you using?

0.9.1

What is your idea?

Currently, tables, which are more landscaped, look a little bit squeezed on mobile devices because starlight doesn't allow the table to be wider than the screen. However, I think it would look nicer and easier to use if the table is allowed to be wider and you can scroll within the table vertically.

If you cannot imagine, what design exactly I mean, please try open this table on a smartphone to see the vertical scrolling: https://docs.google.com/document/d/1W8wC5eEiDKFn_TO3j7WCVP85l7OZ3ino1gk4AEU-IL0/edit?usp=sharing

If I think even further, it would be nice if the top row would be sticky, so you don't loose overview on any devices (when the table is very long / high).

If this is a issue for Astro directly, please tell me. I can create a issue in the Astro repo as well and to link this issue here...

Why is this feature necessary?

This feature would make tables more convenient to use, especially on mobile devices.

Do you have examples of this feature in other projects?

• Google Docs (Example here)

Participation

• I am willing to submit a pull request for this issue.

[trueberryless]

This is how tables currently look on mobile if they are too wide:

In comparison to how good they look on my computer:

[delucis]

https://github.com/zachleat/table-saw could be interesting here — not the same as your suggestion, but another interesting approach to responsive tables and would be trivial to create a component for in userland:

1. Install the dependency:

   npm install @zachleat/table-saw

2. Create an Astro component:

   ---
   // src/components/ResponsiveTable.astro
   ---
   <table-saw>
     <slot />
   </table-saw>
   
   <script>
   import '@zachleat/table-saw';
   </script>

3. Use it in MDX files:

   import ResponsiveTable from '../../components/ResponsiveTable.astro';
   
   <ResponsiveTable>
   
   | My Table | With Too Much Content |
   |----------|-----------------------|
   | Content  | Content               |
   
   </ResponsiveTable>

[trueberryless]

That's a very good idea! Should I test this out an create a PR for the integration or should this stay a community plugin (everyone who wants to use the package can use it)?