`<Table>` implement all the features!
sebald opened this issue · 4 comments
Description
Our current <Table> component is very basic, when it comes to layouting and its behavior. Since we actually render a <table> there is not much room for customization, which makes it impossible to implement some of the newer designs. This is due to the fact that the intention of this component was to just display data.
Proposal
Adjust the implementation in such a way that it can support he following feature:
-
Align based on Column Types (#2363)
It must be possible to align columns depending on their contents. For example numeric values (including money) should be aligned right. There should not be an alignment prop but rather a "type" prop or similar. How values are aligned should be owned by the component. -
Show default Sort Indicator (#2364)
When a table is initially sorted, we should show the indicator. This makes it also more clear for users that they actually can sort the table. -
Collapse Table (#2596)
In order to make tables better for smaller screen we want them to collapse (overflow) at a certain width. We do not want to have them scroll the whole page horizontally though -
Customize Layout (#2611)
Some layouts don't work with the behavior of HTML tables since it will distribute the space for itself. We need to be able to customized columns widths. -
Pagination
When a table has a lot of data, there need to be some kind to separate and limit count of the the displayed data. -
Sticky Header
-
Improve visibility of compact rows
-
Dedicated Actions cell
Alternative to Tables:
ListView React-Spectrum
- more complex
- better for interactions
Align based on Column Types (#2363)
Additionally to what the description above already mentions, Column Types that contain numbers should automatically use Tabular Figures, instead of Proportional Figures (font-variant-numeric: tabular-nums).
https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures
This issue is stale because it has been open 120 days with no activity. Remove stale label or comment or this will be closed in 5 days.
all in jira