Table Layout and Alignment

[scurker]

One of the challenging aspects of Cauldron is it is difficult for Cauldron to make content decisions about tables because as a design system it is unaware of how components are displayed and the contents data within a table. However, Cauldron can provide various utilities and properties to consolidate on common alignments and sizing within tables to reduce the amount of one-off styles that are needed to implement a matching design.

Layout Properties

Since the contents of a table aren't known up front, it's necessary for the content author to provide the layout for a table and set alignment for each column of data.

To account for layouts of each column, the table should accept a new optional columns property that accepts an array of columns along with a layout="grid" property?:

interface Table {
  ...
  layout: 'grid'
  columns?: Array<Column>
}

Column Layouts

To provide for more consistent table layouts and alignments, a table should be able to specify how each column should be displayed:

interface Column {
  align: 'start' | 'center' | 'end'
  width?: 'auto' | 'min-content' | 'max-content' | `${number}` | `${number}%` | `${number}fr`
}

Each matching cell or header within the table should inherit the column alignment from the respective index of the column definition.

If a cell has a colspan property with a value greater than 1, the display value of that cell will need to be set to grid-column: span [number] and use the leading column index alignment value.

Tables normally have a display: table to as the display value of the table. To accommodate the above styles, the display value of the change will need to be changed to display: grid when layout is set to grid to allow for the layout to be customized. The column definitions can be passed down via a TableProvider to sub-components to allow for each cell or column to access it's associated layout.

Sizing

Each of the column sizing properties has the following behaviors:

• auto: Column will fill the amount of available space respective to other columns
• min-content: Column will shrink down to the size of its smallest column
• max-content: Column will grow up to the size of its largest column
• ${number}: Applies a fixed pixel width to the column's cells
• ${number}%: Applies a fixed percentage width to the column's cells
• ${number}fr: Applies a fractional unit width to the column's cells

Cell Layouts

An individual cell can override the default column alignment:

interface TableCell {
  ...
  align?: 'start' | 'center' | 'end'
}

If a header cell a colspan property with a value greater than 1, the display value of that cell will need to be set to grid-column: span [number].

If a cell has a rowspan property with a value greater than 1, the display value of that cell will need to be set to grid-row: span [number].