Usage
Datatables are for typed datasets and default to table tokens. Override only what needs to differ from tables.
Start with these tokens when customizing datatables:
--datatable-spacing-top and --datatable-spacing-bottom for vertical rhythm
--datatable-header-background and --datatable-header-font-weight for headers
--datatable-row-striped and --datatable-row-hover for scanability
--datatable-cell-padding and --datatable-cell-font-size for density
--datatable-border-width and --datatable-border-color for framing
--datatable-caption-* and --datatable-notes-* for supporting text
Tokens
Layout Tokens
Control breakout width behavior for datatables.
| Token | Description | Default Value |
|---|
--datatable-max-width | Maximum width for datatables | var(--table-max-width) |
--datatable-max-width-mobile | Maximum width on mobile (640px) | var(--table-max-width-mobile) |
--datatable-max-width-print | Maximum width in print | var(--table-max-width-print) |
Spacing Tokens
Control vertical separation and layout spacing for datatables.
| Token | Description | Default Value |
|---|
--datatable-spacing-top | Top margin (automatic responsive scaling) | var(--table-spacing-top) |
--datatable-spacing-bottom | Bottom margin (automatic responsive scaling) | var(--table-spacing-bottom) |
--datatable-caption-spacing-bottom | Gap between caption and table | var(--table-caption-spacing-bottom) |
Caption Layout and Typography Tokens
Layout and typography styling for datatable captions (inherits from caption and label tokens).
| Token | Description | Default Value |
|---|
--datatable-caption-font-family | Font family for captions | var(--table-caption-font-family) |
--datatable-caption-font-size | Font size for captions | var(--table-caption-font-size) |
--datatable-caption-color | Text color (automatic dark mode) | var(--table-caption-color) |
--datatable-caption-line-height | Line height for caption text | var(--table-caption-line-height) |
--datatable-caption-align | Text alignment (left, center, right, justify) | var(--table-caption-align) |
--datatable-caption-max-width | Maximum width for caption text | var(--table-caption-max-width) |
--datatable-label-font-weight | Font weight for datatable labels | var(--table-label-font-weight) |
--datatable-label-font-style | Font style for datatable labels | var(--table-label-font-style) |
--datatable-label-color | Text color for datatable labels | var(--table-label-color) |
Notes Tokens
Styling for datatable notes and annotations.
| Token | Description | Default Value |
|---|
--datatable-notes-font-family | Font family for notes text | var(--table-notes-font-family) |
--datatable-notes-font-size | Font size for notes text | var(--table-notes-font-size) |
--datatable-notes-color | Text color for notes | var(--table-notes-color) |
--datatable-notes-spacing-top | Gap between table and notes | var(--table-notes-spacing-top) |
--datatable-notes-line-height | Line height for notes text | var(--table-notes-line-height) |
--datatable-notes-align | Text alignment for notes | var(--table-notes-align) |
Datatable Container Tokens
Border and corner styling for the datatable container.
| Token | Description | Default Value |
|---|
--datatable-border-radius | Corner rounding | var(--table-border-radius) |
--datatable-border-width | Outer border width | var(--table-border-width) |
--datatable-border-width-print | Outer border width for print | var(--table-border-width-print) |
--datatable-border-color | Outer border color | var(--table-border-color) |
--datatable-border-style | Outer border style | var(--table-border-style) |
Row and Column Border Tokens
| Token | Description | Default Value |
|---|
--datatable-row-border-width | Row separator width | var(--table-row-border-width) |
--datatable-row-border-width-print | Row separator width for print | var(--table-row-border-width-print) |
--datatable-row-border-color | Row separator color | var(--table-row-border-color) |
--datatable-row-border-style | Row separator style | var(--table-row-border-style) |
--datatable-column-border-width | Column separator width | var(--table-column-border-width) |
--datatable-column-border-width-print | Column separator width for print | var(--table-column-border-width-print) |
--datatable-column-border-color | Column separator color | var(--table-column-border-color) |
--datatable-column-border-style | Column separator style | var(--table-column-border-style) |
Visual styling for datatable headers.
| Token | Description | Default Value |
|---|
--datatable-header-background | Background color for headers | var(--table-header-background) |
--datatable-header-background-dark | Background color for dark mode | var(--table-header-background-dark) |
--datatable-header-background-print | Background color for print | var(--table-header-background-print) |
--datatable-header-font-weight | Font weight for header text | var(--table-header-font-weight) |
Row Styling Tokens
Interactive and striping behavior for datatable rows.
| Token | Description | Default Value |
|---|
--datatable-row-hover | Background color on hover | var(--table-row-hover) |
--datatable-row-hover-dark | Hover background color for dark mode | var(--table-row-hover-dark) |
--datatable-row-striped | Background color for even rows | var(--table-row-striped) |
--datatable-row-striped-dark | Striped background for dark mode | var(--table-row-striped-dark) |
--datatable-row-striped-print | Striped background for print (transparent saves ink) | var(--table-row-striped-print) |
Cell Styling Tokens
Typography and spacing for datatable cells.
| Token | Description | Default Value |
|---|
--datatable-cell-font-family | Font family for cell text | var(--table-cell-font-family) |
--datatable-cell-font-size | Font size for cell text | var(--table-cell-font-size) |
--datatable-cell-line-height | Line height for cell text | var(--table-cell-line-height) |
--datatable-cell-line-height-mobile | Line height on mobile | var(--table-cell-line-height-mobile) |
--datatable-cell-line-height-print | Line height for print | var(--table-cell-line-height-print) |
--datatable-cell-padding | Cell padding | var(--table-cell-padding) |
--datatable-cell-padding-mobile | Cell padding on mobile | var(--table-cell-padding-mobile) |
--datatable-cell-padding-print | Reduced padding for print | var(--table-cell-padding-print) |
Examples
Default Datatables
Standard datatable styling with automatic responsive spacing and dark mode support:
:root {
/* No design token overrides */
}
| Species | Count | Density |
|---|
| Arripis trutta | 123 | 4.56 |
| Odax pullus | 789 | 0.12 |
| Haliotis iris | 34 | 5.6 |
Compact Datatables
Compact layout with reduced spacing for datatables with many rows:
:root {
--datatable-spacing-top: var(--space-4);
--datatable-spacing-bottom: var(--space-4);
--datatable-cell-padding: var(--space-2);
--datatable-caption-spacing-bottom: var(--space-2);
}
| ID | Timestamp | Event | User | Status |
|---|
| 1001 | 09:15:23 | Login | alice | Success |
| 1002 | 09:16:45 | Upload | bob | Success |
| 1003 | 09:17:12 | Delete | alice | Failed |
| 1004 | 09:18:03 | Export | charlie | Success |
| 1005 | 09:19:34 | Login | diana | Success |
| 1006 | 09:20:11 | Update | bob | Success |
| 1007 | 09:21:47 | Delete | alice | Success |
| 1008 | 09:22:15 | Login | eva | Success |
Scientific Datatables
Enhanced spacing and typography for research data with numerical precision:
:root {
--datatable-spacing-top: calc(var(--content-spacing) * 2);
--datatable-spacing-bottom: calc(var(--content-spacing) * 2);
--datatable-caption-spacing-bottom: var(--content-spacing);
--datatable-caption-align: justify;
--datatable-caption-line-height: var(--line-height-md);
}
Table 1: Summary of experimental measurements showing treatment effects across three independent trials. Values represent mean ± standard deviation with significance levels indicated.
| Treatment | Trial 1 | Trial 2 | Trial 3 | p-value |
|---|
| Control | 12.3±2.1 | 11.8±1.9 | 12.6±2.3 | — |
| Drug A | 18.7±3.2 | 19.1±2.8 | 18.3±3.5 | < 0.001 |
| Drug B | 15.4±2.6 | 16.2±2.4 | 15.8±2.9 | < 0.01 |
Datatables with Multi-Paragraph Captions
Datatables supporting longer, detailed captions with multiple paragraphs:
:root {
--datatable-caption-line-height: var(--line-height-md);
--datatable-caption-spacing-bottom: var(--space-6);
}
Table 2: Performance metrics across three benchmark datasets. Execution time measured in milliseconds on standardized hardware.
All tests were conducted with identical parameters and repeated 100 times. The values shown represent median execution time with 95% confidence intervals.
| Algorithm | Dataset A | Dataset B | Dataset C |
|---|
| Method 1 | 23±2 ms | 45±4 ms | 67±5 ms |
| Method 2 | 18±1 ms | 38±3 ms | 55±4 ms |
| Method 3 | 31±3 ms | 52±5 ms | 78±6 ms |
Datatables with Notes
Datatables with annotations and additional context below the data:
:root {
--datatable-notes-spacing-top: var(--space-4);
--datatable-notes-font-size: var(--font-size-xs);
}
Table 3: Population statistics by region for 2023-2024.
| Region | Population | Growth | Density |
|---|
| North | 2,450,000 | 1.2% | 145/km² |
| South | 1,875,000 | 2.8% | 98/km² |
| East | 3,120,000 | 0.9% | 201/km² |
| West | 1,650,000 | 1.5% | 87/km² |
Tips
Token inheritance: Datatable tokens default to table tokens, so override only the pieces you want to distinguish from presentation tables.
Headers and striping: Use --datatable-header-background and --datatable-row-striped (with -dark variants) to improve scanability.
Row interactions: Set --datatable-row-hover to add or remove hover feedback without custom CSS.
Captions and notes: Use --datatable-caption-* and --datatable-notes-* to match the shared caption/label system.
