[Feature Request] Vertical table or responsive table design for small screen devices

[ChaserZ98]

Is your feature request related to a problem? Please describe.

The current table component does not adapt well on the situation where you have plenty columns of data in a small screen. It is difficult for users to have a full view of one single row of data in a device with small screen. Such bad experience also happens when a column requires much more height than other columns to display. For example, an image column with other short text columns.

Describe the solution you'd like

Add an isVertical attribute to Table props to change table from displaying rows of data to columns of data. And if isHeaderSticky is passed, the header should be sticky to the horizontal scroll instead of vertical scroll.

<Table aria-label="Example empty table" isVertical>
  <TableHeader>
    <TableColumn>Column 1</TableColumn>
    <TableColumn>Column 2</TableColumn>
    <TableColumn>Column 3</TableColumn>
  </TableHeader>
</Table>

An expected behavior would be as the following image shows.

Describe alternatives you've considered

Another alternative would be something like table-with-header-cells-in-the-first-column-only. But I doubt if it fits the current design logic of Table component in NextUI.

Screenshots or Videos

No response

[linear[bot]]

ENG-1405 [Feature Request] Vertical table or responsive table design for small screen devices

[qwertyroop]

I will be working on this kindly assign me this.

[wingkwong]

@qwertyroop please discuss your plan with the team in discord first. You may ping me at discord (same id).