| # | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +Heading | +
|---|---|---|---|---|---|---|---|---|---|
| 1 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
| 2 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
| 3 | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +Cell | +
+
+ ...
+
+ `} />
+
+### Breakpoint specific
+
+Use `.table-responsive{-xs|-sm|-md|-lg|-xl|-2xl|3xl}` as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
+
+**These tables may appear broken until their responsive styles apply at specific viewport widths.**
+
+
+
+ Resize window to see differences:
+ {getData('breakpoints').map((breakpoint) => {
+ return (
+
+
+
+
+ Boosted responsive table for {breakpoint.abbr} breakpoint and under
+
+
+ #
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+
+
+
+
+ 1
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+ 2
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+ 3
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+ Cell
+
+
+
+
+
+ )
+ })}
+
+ `
+
+ ...
+
+ `)} />
+
+
+## Row selection
+
+### With checkboxes
+
+For the row selection purpose with checkboxes, you should use [standalone checkboxes]([[docsref:/components/checkbox#standalone]]) with `.visually-hidden` labels describing their use.
+
+The first cell of the header should contain a checkbox to select or deselect all rows. When some rows - but not all - are selected, the header checkbox should be in an [indeterminate state]([[docsref:/components/checkbox#indeterminate]]).
+
+To visually indicate a row is selected, you'll need to apply a `data-bs-theme="dark"` attribute on the `` element (some additional styles will be applied too). This can be done by JavaScript, see the example below. If you want to manually apply the same styles to rows or even cells, you can use the class `.table-active` with `data-bs-theme="dark"` on ` ` or `` elements.
+
+Note that the width of columns containing checkboxes will automatically adjust to the largest cell, and the click area will be extended to the full width of the cell.
+
+
+ OUDS Web table with row selection
+
+
+
+
+
+ Heading
+ Heading
+ Heading
+
+
+
+
+
+
+
+ Cell
+ Cell
+ Cell
+
+
+
+
+
+ This is a much longer section of text that demonstrates what happens when text wraps within a cell in a table
+ Cell
+ Cell
+
+
+
+
+
+ Cell
+ Cell
+ Cell
+
+
+ `} />
+
+To manage checkboxes states and active styles (i.e. select/deselect all rows, update header checkbox state, and update `data-bs-theme` on selected row), here is an example of JavaScript code:
+
+ OUDS Web table with radio buttons
+
+
+ Select
+ Heading
+ Heading
+ Heading
+
+
+
+
+
+
+
+ This is a much longer section of text that demonstrates what happens when text wraps within a cell in a table
+ Cell
+ Cell
+
+
+
+
+
+ Cell
+ Cell
+ Cell
+
+
+
+
+
+ Cell
+ Cell
+ Cell
+
+
+ `} />
+
+To manage radio buttons active state (i.e. update `data-bs-theme` on the selected row), here is an example of JavaScript code:
+` and ` ` elements.
+- For vertical alignment, use the `.align-middle` class on the ` ` elements. Some components inside cells may require additional alignment (possibly via a utility class).
+
+
+ OUDS Web table with components and icons
+
+
+ Heading
+ Heading
+ Heading
+ Heading
+ Activated
+
+
+
+
+
+ Cell
+
+ This is a much longer section of text that demonstrates what happens when text wraps within a cell in a table
+
+
+
+ Maintenance
+
+
+
+
+
+ Warning
+
+
+
+
+
+
+
+
+ })
Cell
+
+ Cell
+
+
+
+ Running
+
+
+
+
+
+ OK
+
+
+
+
+
+
+
+
+ Cell
+
+ Cell
+
+
+
+ Error
+
+
+
+
+
+ Error
+
+
+
+
+
+
+
+ `} />
+
+
+### Row height and alignment
+
+To align vertically and preserve the row height, use the `.align-middle` class on the `` elements and `.table-cell-component` on `` elements containing components that could cause vertical overflow.
+
+
+ OUDS Web table with components and icons preserving the row height
+
+
+ Heading
+ Heading
+ Heading
+ Heading
+ Activated
+
+
+
+
+
+ Cell
+
+ This is a much longer section of text that demonstrates what happens when text wraps within a cell in a table
+
+
+
+ Maintenance
+
+
+
+
+
+ Warning
+
+
+
+
+
+
+
+
+ Cell
+
+ Cell
+
+
+
+ Running
+
+
+
+
+
+ OK
+
+
+
+
+
+
+
+
+ Cell
+
+ Cell
+
+
+
+ Error
+
+
+
+
+
+ Error
+
+
+
+
+
+
+
+ `} />
+
diff --git a/site/src/types/auto-import.d.ts b/site/src/types/auto-import.d.ts
index 0900b48a37..a211e9349a 100644
--- a/site/src/types/auto-import.d.ts
+++ b/site/src/types/auto-import.d.ts
@@ -16,6 +16,7 @@ export declare global {
export const ColorTable: typeof import('@shortcodes/ColorTable.astro').default
export const ComponentCard: typeof import('@shortcodes/ComponentCard.astro').default
export const DeprecatedIn: typeof import('@shortcodes/DeprecatedIn.astro').default
+ export const Details: typeof import('@shortcodes/Details.astro').default
export const EnableBtnCloseTooltip: typeof import('@shortcodes/EnableBtnCloseTooltip.astro').default
export const Example: typeof import('@shortcodes/Example.astro').default
export const JsDismiss: typeof import('@shortcodes/JsDismiss.astro').default