DÁP Design System - Table webcomponent

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>
      <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>
        <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>
        <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'

Slots

Name	Description
`(default)`	The default slot. Accepts `dap-ds-table-row` elements.

Attributes

Property	Type	Default	Description
`mobile`	`boolean`	`false`	If the table is mobile design.
`role`	`string`	`'grid'`

Events

No custom events available.

CSS Parts

No CSS parts available.