Table

Table component is a simple component that displays data in a table format.

Design system docs Buiding blocks

Table structure can be created with the following elements: dap-ds-table, dap-ds-table-row, dap-ds-table-header and dap-ds-table-cell.

dap-ds-table is the main container element for the table. Accepts dap-ds-table-row elements. It can have a mobile attribute to transform the columns to rows on mobile devices.

dap-ds-table-row is the container element for the row. Accepts dap-ds-table-cell and dap-ds-table-header elements. It can have a mobile attribute to transform the columns to rows on mobile devices.

dap-ds-table-header is the container element for the header cell. It can have a noborder attribute to remove the border from the bottom of the cell.

dap-ds-table-cell is the container element for the data cell. It can have a noborder attribute to remove the border from the bottom of the cell.

Examples Simple table 
<dap-ds-table caption="Upcoming events">
    <dap-ds-table-row>
        <dap-ds-table-header>Date</dap-ds-table-header>
        <dap-ds-table-header>Event</dap-ds-table-header>
        <dap-ds-table-header>Venue</dap-ds-table-header>
    </dap-ds-table-row>
    <dap-ds-table-row>
        <dap-ds-table-cell>12 February</dap-ds-table-cell>
        <dap-ds-table-cell>The Obelisks</dap-ds-table-cell>
        <dap-ds-table-cell>Main Hall</dap-ds-table-cell>
    </dap-ds-table-row>
    <dap-ds-table-row>
        <dap-ds-table-cell>24 March</dap-ds-table-cell>
        <dap-ds-table-cell>Waltz with Strauss</dap-ds-table-cell>
        <dap-ds-table-cell>West Wing</dap-ds-table-cell>
    </dap-ds-table-row>
    <dap-ds-table-row>
        <dap-ds-table-cell>24 March</dap-ds-table-cell>
        <dap-ds-table-cell>The What</dap-ds-table-cell>
        <dap-ds-table-cell>Main Hall</dap-ds-table-cell>
    </dap-ds-table-row>
  </dap-ds-table>
Columns transformed to rows 
<dap-ds-table caption="Upcoming events">
      <dap-ds-table-row>
          <dap-ds-table-header>Date</dap-ds-table-header>
          <dap-ds-table-cell>12 February</dap-ds-table-cell>
          <dap-ds-table-cell>24 March</dap-ds-table-cell>
          <dap-ds-table-cell>14 April</dap-ds-table-cell>
      </dap-ds-table-row>
      <dap-ds-table-row>
          <dap-ds-table-header>Event</dap-ds-table-header>
          <dap-ds-table-cell>Waltz with Strauss</dap-ds-table-cell>
          <dap-ds-table-cell>The Obelisks</dap-ds-table-cell>
          <dap-ds-table-cell>The What</dap-ds-table-cell>
      </dap-ds-table-row>
      <dap-ds-table-row>
          <dap-ds-table-header noborder>Venue</dap-ds-table-header>
          <dap-ds-table-cell>Main Hall</dap-ds-table-cell>
          <dap-ds-table-cell>West Wing</dap-ds-table-cell>
          <dap-ds-table-cell>Main Hall</dap-ds-table-cell>
      </dap-ds-table-row>
  </dap-ds-table>
Preferred mobile design

For this kind of table design, you can use the mobile attribute on the table and row elements. This design is preferred for mobile devices.

<dap-ds-table mobile caption="Upcoming events">
      <dap-ds-table-row mobile>
          <dap-ds-table-header>Date</dap-ds-table-header>
          <dap-ds-table-cell>12 February</dap-ds-table-cell>
          <dap-ds-table-header>Event</dap-ds-table-header>
          <dap-ds-table-cell>Waltz with Strauss</dap-ds-table-cell>
          <dap-ds-table-header>Venue</dap-ds-table-header>
          <dap-ds-table-cell>Main Hall</dap-ds-table-cell>
      </dap-ds-table-row>
      <dap-ds-table-row mobile>
          <dap-ds-table-header>Date</dap-ds-table-header>
          <dap-ds-table-cell>24 March</dap-ds-table-cell>
          <dap-ds-table-header>Event</dap-ds-table-header>
          <dap-ds-table-cell>The Obelisks</dap-ds-table-cell>
          <dap-ds-table-header>Venue</dap-ds-table-header>
          <dap-ds-table-cell>West Wing</dap-ds-table-cell>
      </dap-ds-table-row>
      <dap-ds-table-row mobile>
          <dap-ds-table-header>Date</dap-ds-table-header>
          <dap-ds-table-cell>14 April</dap-ds-table-cell>
          <dap-ds-table-header>Event</dap-ds-table-header>
          <dap-ds-table-cell>The What</dap-ds-table-cell>
          <dap-ds-table-header>Venue</dap-ds-table-header>
          <dap-ds-table-cell>Main Hall</dap-ds-table-cell>
      </dap-ds-table-row>
  </dap-ds-table>
Importing 
import { DapDSTable } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSTableReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
rolestring'grid'
mobilebooleanfalseIf the table has mobile design
captionstring''The caption of the table
Slots
NameDescription
(default)The default slot. Accepts `dap-ds-table-row` elements.
Events

No custom events available.

CSS Parts

No CSS parts available.

CSS Custom Properties
Property NameDescription
--dds-table-border-widthWidth of the table border. Default: var(--dds-border-width-base, 1px)
--dds-table-border-colorColor of the table border. Default: var(--dds-border-neutral-subtle)
--dds-table-border-radiusBorder radius of the table. Default: var(--dds-radius-small, 4px)
--dds-table-row-divider-colorColor of the divider between rows in mobile view. Default: var(--dds-border-neutral-subtle)
Components Table cell <dap-ds-table-cell/> Attributes
PropertyTypeDefaultDescription
lastbooleanIf the cell is the last one.
rolestring'cell'The html role of the cell
Slots
NameDescription
(default)The default slot.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main cell container.
CSS Custom Properties
Property NameDescription
--dds-table-cell-padding-blockPadding for the top and bottom of the cell. Default: var(--dds-spacing-200)
--dds-table-cell-padding-inline-startPadding for the start (left in LTR) of the cell. Default: var(--dds-spacing-500)
--dds-table-cell-padding-inline-endPadding for the end (right in LTR) of the cell. Default: var(--dds-spacing-500)
--dds-table-cell-border-widthWidth of the cell's bottom border. Default: var(--dds-border-width-base)
--dds-table-cell-border-colorColor of the cell's bottom border. Default: var(--dds-border-neutral-subtle)
--dds-table-cell-text-colorText color of the cell. Default: var(--dds-text-neutral-base)
--dds-table-cell-line-heightLine height of the cell text. Default: 1.5
--dds-table-cell-text-alignText alignment in the cell. Default: left
Table header <dap-ds-table-header/> Attributes
PropertyTypeDefaultDescription
lastbooleanIf the header cell is the last one.
rolestring'columnheader'The html role of the header cell
Slots
NameDescription
(default)The default slot.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main header cell container.
CSS Custom Properties
Property NameDescription
--dds-table-header-padding-blockPadding for the top and bottom of the header cell.
--dds-table-header-padding-inline-startPadding for the start (left in LTR) of the header cell.
--dds-table-header-padding-inline-endPadding for the end (right in LTR) of the header cell.
--dds-table-header-border-widthWidth of the header cell's bottom border.
--dds-table-header-border-colorColor of the header cell's bottom border.
--dds-table-header-text-colorText color of the header cell.
--dds-table-header-font-weightFont weight of the header cell text.
--dds-table-header-line-heightLine height of the header cell text.
Table row <dap-ds-table-row/> Attributes
PropertyTypeDefaultDescription
rolestring'row'The html role of the row
mobilebooleanfalseIf the row is mobile design
Slots
NameDescription
(default)The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements.
Events

No custom events available.

CSS Parts

No CSS parts available.

CSS Custom Properties
Property NameDescription
--dds-table-row-padding-rightPadding right for the last table header, defaults to var(--dds-spacing-500)
--dds-table-row-padding-topPadding top for table headers in mobile view, defaults to var(--dds-spacing-400)
--dds-table-row-padding-bottomPadding bottom for the last table cell in mobile view, defaults to var(--dds-spacing-400)
--dds-table-row-border-colorBorder color for table cells and headers, defaults to transparent