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'

Attributes

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

Slots

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

Events

No custom events available.

CSS Parts

No CSS parts available.

Components

Table cell

<dap-ds-table-cell/>

Attributes

Property	Type	Default	Description
`last`	`boolean`		If the cell is the last one.
`role`	`string`	`'gridcell'`	The html role of the cell

Slots

Name	Description
`(default)`	The default slot.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main cell container.

Table header

<dap-ds-table-header/>

Attributes

Property	Type	Default	Description
`last`	`boolean`		If the header cell is the last one.
`role`	`string`	`'columnheader'`	The html role of the header cell

Slots

Name	Description
`(default)`	The default slot.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main header cell container.

Table row

<dap-ds-table-row/>

Attributes

Property	Type	Default	Description
`role`	`string`	`'row'`	The html role of the row
`mobile`	`boolean`	`false`	If the row is mobile design

Slots

Name	Description
`(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.