Return to Sky UI homepage

Comparison Table - React

View on FigmaView on GitHub
import { Table } from '@sky-uk/ui-core';

The Table component provides a means of displaying multiple configurable cells of tabular data.

Note: The pagination component is displayed as required. A combination of the number of columns and the display size will dictate this.

Note: All Image components require the $aspectRatio prop to be applied in order to allow the Table to correctly calculate the dimensions of the cells.

Props

Comparison Table

PropTypeDefaultDescription
$columnFillsarrayundefined

An array of background colours to be applied to each column. Disabled if $comparisonTable is true

$comparisonTablebooleanfalse

When true applies a border to the first column, making it stick when scrolled horizontally.

$hideRowHeadersbooleanfalse

When true, visually hides the Row.Header for each row. For accessibility reasons the Row.Header is still required on each row.

$keyLinesbooleanfalseWhen true applies a keyline between each row.
$maxRowsnumberundefinedWhen defined, limits the number of rows initially shown and displays a toggle button
$stickyTopnumber0The point at which the Table.Header sticks at the top of the table.
$themestringundefinedThe theme of the comparison column border as a Sky gradient

Table.Row

PropTypeDefaultDescription
$hideHeaderbooleanundefined

Hides an individual Row.Header. For accessibility reasons the Row.Header is still required.

$columnFills

$columnsFills is an array property that applies a background color to specific columns within the </Table> component. Each index in the array corresponds to a column, with color values determining the background color and null preserving the default styling. The row header is excluded from this styling, as it is not intended to be coloured

$hideRowHeaders

$hideRowHeaders is a boolean property that, when enabled, visually hides the row header in the </Table> component. The Row Headers are still required to be in the DOM for accessibility reasons. This can be useful when row headers don't need to be displayed, but their information still needs to be accessed by assistive tech.

$keyLines

$keyLines is a boolean property that, when enabled, adds a keyline between each row in the </Table> component. This helps visually separate rows for improved readability and structure.

$hideHeader

$hideHeader is a boolean property that, when enabled on a </Table.Row>, hides the header for that specific row. This allows for more flexible table layouts where individual rows can omit their headers as needed. For example below we can see how we can apply it to the first for items in the row array.

Subcomponents

SubcomponentDescription
Table.HeaderContainer for a row of column header cells
Table.HeaderCellIndividual column header cells containing header information for each column
Table.CollapsedHeaderOptional container for a row of column header cells. Replaces the Table.Header on scroll
Table.RowContainer for a row of cells
Table.RowHeaderHeader cell for the following row
Table.RowCellIndividual cells
Table.GroupGroups multiple rows into an accordion
Table.SwitchTable configuration switch

Variants

Collapsed Header Table

The below example shows how to use an alternative header row:

Row Group Table

The below example shows a table with row groups:

A Group can take two props

PropDescription
titleThe button title
closedThe initial state of the accordion

Callbacks

onSwitchChange

The onSwitchChange callback will return the state of the switch as a boolean.

onMoreToggle

The onMoreToggle callback will return the collapsed state of the table as a boolean.

System Modifiers

The Table component accepts props applied using the following system modifiers:

The HeaderCell and RowCell subcomponents also accepts props applied using the following system modifiers:

Translatable Fields

The Table supports translation of the following fields:

TranslationDescription
table.roleDescriptionControls the roleDescription. (See MDN)
table.paginationTitle.labelControls the descriptive text for the pagination label
table.previous.labelControls the descriptive text for the previous button action
table.next.labelControls the descriptive text for the next button action
table.switchOn.labelControls the descriptive text for the switch on label action
table.switchOff.labelControls the descriptive text for the switch off label action
table.switchTitle.labelControls the text for the switch action
table.showMore.labelControls the text for the show more action
table.showLess.labelControls the text for the show less action

For more on translatable fields, view the useTranslation docs here: useTranslation