Table component is a simple component that displays data in a table format.
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.
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.
import { DapDSTable } from 'dap-design-system'
import { DapDSTableReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSTable } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
role | string | 'grid' | |
mobile | boolean | false | If the table has mobile design |
caption | string | '' | The caption of the table |
| Name | Description |
|---|---|
(default) | The default slot. Accepts `dap-ds-table-row` elements. |
No custom events available.
No CSS parts available.
| Property Name | Description |
|---|---|
--dds-table-border-width | Width of the table border. Default: var(--dds-border-width-base, 1px) |
--dds-table-border-color | Color of the table border. Default: var(--dds-border-neutral-subtle) |
--dds-table-border-radius | Border radius of the table. Default: var(--dds-radius-small, 4px) |
--dds-table-row-divider-color | Color of the divider between rows in mobile view. Default: var(--dds-border-neutral-subtle) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-table
style="--dds-table-border-width: value; --dds-table-border-color: value;">
Table
</dap-ds-table>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-table {
--dds-table-border-width: value;
--dds-table-border-color: value;
--dds-table-border-radius: value;
}
<dap-ds-table class="my-custom-dap-ds-table">
Table
</dap-ds-table>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-table {
--dds-table-border-width: value;
--dds-table-border-color: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
| Property | Type | Default | Description |
|---|---|---|---|
last | boolean | If the cell is the last one. | |
role | string | 'cell' | The html role of the cell |
| Name | Description |
|---|---|
(default) | The default slot. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main cell container. |
| Property Name | Description |
|---|---|
--dds-table-cell-padding-block | Padding for the top and bottom of the cell. Default: var(--dds-spacing-200) |
--dds-table-cell-padding-inline-start | Padding for the start (left in LTR) of the cell. Default: var(--dds-spacing-500) |
--dds-table-cell-padding-inline-end | Padding for the end (right in LTR) of the cell. Default: var(--dds-spacing-500) |
--dds-table-cell-border-width | Width of the cell's bottom border. Default: var(--dds-border-width-base) |
--dds-table-cell-border-color | Color of the cell's bottom border. Default: var(--dds-border-neutral-subtle) |
--dds-table-cell-text-color | Text color of the cell. Default: var(--dds-text-neutral-base) |
--dds-table-cell-line-height | Line height of the cell text. Default: 1.5 |
--dds-table-cell-text-align | Text alignment in the cell. Default: left |
| Property | Type | Default | Description |
|---|---|---|---|
last | boolean | If the header cell is the last one. | |
role | string | 'columnheader' | The html role of the header cell |
| Name | Description |
|---|---|
(default) | The default slot. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main header cell container. |
| Property Name | Description |
|---|---|
--dds-table-header-padding-block | Padding for the top and bottom of the header cell. |
--dds-table-header-padding-inline-start | Padding for the start (left in LTR) of the header cell. |
--dds-table-header-padding-inline-end | Padding for the end (right in LTR) of the header cell. |
--dds-table-header-border-width | Width of the header cell's bottom border. |
--dds-table-header-border-color | Color of the header cell's bottom border. |
--dds-table-header-text-color | Text color of the header cell. |
--dds-table-header-font-weight | Font weight of the header cell text. |
--dds-table-header-line-height | Line height of the header cell text. |
| Property | Type | Default | Description |
|---|---|---|---|
role | string | 'row' | The html role of the row |
mobile | boolean | false | If the row is mobile design |
| Name | Description |
|---|---|
(default) | The default slot. Accepts `dap-ds-table-cell` and `dap-ds-table-header` elements. |
No custom events available.
No CSS parts available.
| Property Name | Description |
|---|---|
--dds-table-row-padding-right | Padding right for the last table header, defaults to var(--dds-spacing-500) |
--dds-table-row-padding-top | Padding top for table headers in mobile view, defaults to var(--dds-spacing-400) |
--dds-table-row-padding-bottom | Padding bottom for the last table cell in mobile view, defaults to var(--dds-spacing-400) |
--dds-table-row-border-color | Border color for table cells and headers, defaults to transparent |
