CSS for data display (description lists and tables)

[stefanrufer]

What problem does this feature solve?

Currently the description lists are not documented at all and for tables only one option for the styling is available.

What does the proposed API look like?

The data display and table designs will not be implemented as components as they can be built with standard HTML tags using the SIX styling. The design as pre-defined by the branding team.

Goal: Get a documentation how to do data display and tables with the correct styling. If necessary the CSS of the web components has to be extended.

For the data display there are two flavors that should be shown:

• "standard" spacing (36 pt with 14pt font, ca. 8pt padding top and bottom) and in a "dense" spacing (28 pt, 14pt font and ca. 4pt padding top and bottom)

For the table documentation there are various designs that should be shown:

• striped / separation with lines
• "standard" spacing (36 pt with 14pt font, ca. 8pt padding top and bottom) and in a "dense" spacing (28 pt, 14pt font and ca. 4pt padding top and bottom)

(refer to the design guidelines for details)

[pennal]

I would like to open up a discussion on possibly challenging the decision of not creating a set of components.

The current implementation (by using the styling helpers) is in fact the most flexible one, as it does in fact allow any team to choose the tables they prefer and the ones that are most compatible with the framework they are using.

At the same time, this introduces a non unified approach to tables, and if the library chosen for it does not allow full customisation, a small difference in the UI.

The idea I have been thinking about would be to provide a data-table component. The data table is a fully data-driven table that requires the user to define the columns, and provide the data as a separate argument. This could look something like:

// Example for angular

// HTML
<six-data-table [headers]="headers" [data]="data"/>

// TS
const data = [
  {
    id: 1,
    first: 'John',
    last: 'Doe',
    age: 21
  },
]

const headers = [
  { title: 'First Name', key: 'first' },
  { title: 'Last Name', key: 'last' }
  { title: 'Age', key: 'age' }
]

The user is only worried about specifying the structure of the table, and the data itself. Everything else, including possibly the paginator can then be handled behind the scenes and created for the user without requiring any manual intervention.

There are some caveats to this:

1. The value shown is taken 1:1 from the JSON payload. We would then need to provide some way to change the value that is injected
2. Customisation: Let's say the user has an age field, and it needs to set a badge when less than 18 years old. This approach does not allow for injecting custom HTML content, although something could be done again in the headers array
3. Compatibility in different frameworks: Vue supports multiple slots with the same name, but angular does not. Would the workaround described in 2 be enough?

If we need to coverthe above points, the headers could look something like:

const headers = [
  { title: 'First Name', key: 'name.first' },
  { title: 'Last Name', key: 'name.last' },
  { title: 'Age', key: 'age', content: (value) => {
    if (value< 18) {
     return `<six-badge type="danger">{value}</six-badge>
    }
    return value
  }
]

As I said, this is just an idea that still requires a lot of experimentation and testing, but I wanted to throw it out there as a starting point for a possible discussion.

This idea is inspired by TanStack tables: https://tanstack.com/table/latest/docs/framework/vue/examples/basic and Vuetify Data Tables: vuetifyjs.com/en/components/data-tables/basics/#keys-and-values

What do you think @stefanrufer @colinscz @JoelLeupp @rspy (sorry if I forgot someone)