search

nl-design-system / backlog

Central product backlog of the NL Design System.
European Union Public License 1.2
7 stars 1 forks source link

Table #39

Open usethetics opened 3 years ago

usethetics commented 3 years ago

Naam

Table

Link naar GitHub Discussion

Notities

Variations

Related components

Behaviour

usethetics commented 2 years ago

A first attempt to create a solid, all-encompassing table component resulted in a massive and complex component. To anticipate for all edge-cases a maximum amount of rows and columns have to be available in the table component which can then be enabled or disabled.

This led to a simpler approach for the time being. One which uses a Figma frame with intelligent auto-layout properties set instead. Adding a row or column automatically corrects the overall table layout.

Tokens are tied to each table header, row, and caption component to quickly apply different branding and visual styles.

Heading and data cell text can be set to align to end (right aligned in LTR languages) and headers have an option to be sortable (including hover, focus and click state (the latter can e.g. be useful to change the direction of a chevron icon)). Additionally an alternate row styling can be applied to table row cells.

Screenshot 2022-05-05 at 15 14 16

Table header options.

https://user-images.githubusercontent.com/248921/166929563-25205ba7-2ef0-46dd-b5f2-d9b93efd0eed.mov

Demo showcasing flexible behaviour for table frame in Figma.

https://user-images.githubusercontent.com/248921/166930624-fde0af40-b14d-46a6-a097-f0b9d5460e0e.mov

Interactive demo of sortable table header.

Robbert commented 2 weeks ago

Goldman Sachs design system had interessante pagina's over tables, nu alleen nog beschikbaar via the Internet Archive: