@seekalfred/primitives 0.7.4 → 0.8.0

package/dist/table/index.d.ts

@@ -1,2 +1,2 @@
-import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants } from "./table.js";
-export { type Column, type RowKey, Table, type TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants };
+import { Column, RowAttributes, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants } from "./table.js";
+export { type Column, type RowAttributes, type RowKey, Table, type TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants };

package/dist/table/index.js

@@ -1,2 +1,2 @@
-import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants } from "./table.js";
-export { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants };
+import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants } from "./table.js";
+export { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants };

package/dist/table/table.d.ts

@@ -122,6 +122,15 @@ export declare const tableExpandButtonVariants: (props?: import("class-variance-
  * reads as a heading of the rows that follow rather than as one of them.
  */
 export declare const tableGroupRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * A detail row (`renderExpandedRow`): one cell spanning the row, under the row it
+ * belongs to. Not interactive, so it takes no hover, focus or selection fill and
+ * no rule of its own: it reads as part of the row above, and the next row's rule
+ * closes it.
+ */
+export declare const tableDetailRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The cell of a detail row. The table's own inset, so the content is not flush against the edge. */
+export declare const tableDetailCellVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /**
  * The sort control of a column header in a plain table (`keyboardModel="table"`).
  *
@@ -132,7 +141,7 @@ export declare const tableGroupRowVariants: (props?: import("class-variance-auth
  */
 export declare const tableSortButtonVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const tableRowVariants: (props?: ({
-  variant?: "lined" | "plain" | null | undefined;
+  variant?: "plain" | "lined" | null | undefined;
   striped?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const tableCellVariants: (props?: ({
@@ -190,6 +199,17 @@ type Column$1<T, V = unknown> = {
     value: V;
     row: T;
     index: number;
+    /**
+     * Whether the row is in the table's expanded set (`expandedKeys`). True for a
+     * row opened onto sub-rows or onto a detail row (`renderExpandedRow`).
+     */
+    isExpanded: boolean;
+    /**
+     * Opens the row if it is closed and closes it if it is open, through the same
+     * set as `expandedKeys` / `onExpandedChange`. For a trigger of your own in a
+     * cell (a "History" button), which is how a detail row is opened.
+     */
+    toggleExpanded: () => void;
   }): ReactNode;
   /**
    * Value to string. Deliberately separate from `cell`: this is what CSV
@@ -221,7 +241,50 @@ type Column$1<T, V = unknown> = {
   numeric?: boolean;
   /** Opts this column into sorting. Off by default. */
   sortable?: boolean;
+  /**
+   * Makes this cell span the columns after it, per row: return how many columns
+   * the row's cell in this column covers (1 or nothing is the usual single
+   * cell). The cells it covers are not rendered, so `cell` renders for THIS
+   * column alone and its content is what fills the span ("No impressions yet"
+   * across clicks and CTR; "Not enough data" across five figure columns).
+   *
+   * The span is clamped to the columns that are left, so it can never run past
+   * the row. A row's span never touches the header, which keeps one cell per
+   * column, so columns stay named and sortable. It is ignored on the first
+   * column while `stickyFirstColumn` is on (the frozen pane stays one column
+   * wide) and on group rows (`isGroupRow`), whose first cell already spans the
+   * row.
+   *
+   * Method syntax, for the same reason as `cell`.
+   */
+  colSpan?(row: T): number | undefined;
+  /**
+   * Content after the header label that is NOT part of the sort control: an
+   * info icon with a tooltip, a help link. It sits beside the label, so on a
+   * sortable column clicking or pressing Enter or Space on it does not sort,
+   * and in a plain table (`keyboardModel="table"`) it is a sibling of the sort
+   * button rather than inside it. It must name itself (`aria-label`) and be at
+   * least 24px square, like any control. Not rendered with `headerHidden`.
+   */
+  headerAddon?: ReactNode;
+  /**
+   * Marks this column as the one to look at (the latest run, the current
+   * plan): its header and every cell wear the library's highlight tint and
+   * carry `data-highlighted`, and the header takes the stronger text colour.
+   * The tint is not the message, so the column should say why in its own
+   * content, as with `isRowHighlighted`. Off by default.
+   */
+  highlighted?: boolean;
 };
+/**
+ * What `getRowProps` may return: `data-*` attributes. Anything else is ignored.
+ *
+ * Not `aria-*`: React Aria's Row filters its props down to `data-*` and its own
+ * labelling, so an `aria-current` handed to a grid row is dropped with no error
+ * -- the same silent loss as `Column.width`. A type that allowed it would lie.
+ * Not `onClick` either -- see `onRowAction`.
+ */
+export type RowAttributes = { [K in `data-${string}`]?: string | number | boolean | undefined; };
 export interface TableProps<T> extends VariantProps<typeof tableRowVariants> {
   /** The rows to render. */
   data: readonly T[];
@@ -269,6 +332,22 @@ export interface TableProps<T> extends VariantProps<typeof tableRowVariants> {
   isRowHighlighted?: (row: T) => boolean;
   /** Extra classes per row, for styling that depends on row DATA. */
   rowClassName?: (row: T) => string;
+  /**
+   * Extra `data-*` attributes per row, for what depends on row DATA and has to
+   * reach the `<tr>`: a `data-testid`, a `data-name` for a script. Only `data-*`
+   * keys are read (React Aria's grid row drops any `aria-*`). The library's own
+   * attributes (`data-slot`, `data-highlighted`, `data-depth`, `data-flip`, the
+   * row id and the grid's own roles and states) are applied after yours and
+   * win a clash.
+   *
+   * There is deliberately no `onClick`. In the grid a row is a React Aria
+   * control and its press is `onRowAction`, which receives the row; in a plain
+   * table a row is not a control, so put the action in a cell.
+   *
+   * Applies to data rows, not to a detail row. Called on every render for every
+   * shown row, so keep it cheap.
+   */
+  getRowProps?: (row: T) => RowAttributes | undefined;
   /**
    * Rendered in place of the rows when `data` is empty.
    *
@@ -414,6 +493,25 @@ export interface TableProps<T> extends VariantProps<typeof tableRowVariants> {
    * render.
    */
   getSubRows?: (row: T) => readonly T[] | null | undefined;
+  /**
+   * A full-width row under a row, shown while the row is expanded: arbitrary
+   * content (a history, a log, a form) rather than more rows. Return nothing
+   * (null, undefined or false) for a row that has no detail.
+   *
+   * This is NOT `getSubRows`. Sub-rows are data rows with the table's own
+   * columns, selection and actions, drawn with a disclosure button; a detail row
+   * is one cell spanning every column, holds anything, is never selected,
+   * sorted, counted or acted on, and has no built-in button. Open it with a
+   * trigger of your own in a cell, using `toggleExpanded` and `isExpanded` from
+   * the `cell` context (give it `aria-expanded`), or with `defaultExpandedKeys`
+   * / `expandedKeys`. It uses the same expanded set as `getSubRows`, so a row
+   * with both opens both: the detail row comes first, directly under its row,
+   * then the sub-rows.
+   *
+   * Called only for expanded rows, never for collapsed ones. Still return elements
+   * rather than doing work here, as it runs on every render while a row is open.
+   */
+  renderExpandedRow?: (row: T) => ReactNode;
   /** The expanded rows, CONTROLLED: their `getRowId` values. */
   expandedKeys?: Iterable<RowKey>;
   /** The rows expanded at the start, when uncontrolled. Nothing is, by default. */

package/dist/table/table.js

@@ -6,7 +6,7 @@ import { useFlip } from "../lib/flip.js";
 import { Checkbox as Checkbox$1 } from "../checkbox/checkbox.js";
 import { Select as Select$1, SelectItem } from "../select/select.js";
 import { cva } from "class-variance-authority";
-import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Button, Cell, Column, Row, Table, TableBody, TableFooter, TableHeader } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
@@ -110,6 +110,34 @@ const CHEVRON_COLUMN_ID = "__table_row_action";
 const CHEVRON_CELL = "w-10 px-0 text-center";
 /** Reserved id for the checkbox column of a selectable table. */
 const SELECT_COLUMN_ID = "__table_row_select";
+/** Prefix of a detail row's id in the grid, so it cannot collide with a real row's. */
+const DETAIL_ROW_PREFIX = "__table_row_detail:";
+/** Only `data-*` gets through `getRowProps`: the rest belongs to the library or to `onRowAction`. */
+function rowAttributes(attributes) {
+	if (!attributes) return void 0;
+	const kept = {};
+	for (const [name, value] of Object.entries(attributes)) if (name.startsWith("data-")) kept[name] = value;
+	return kept;
+}
+/** Whether `renderExpandedRow` had anything to show. */
+const hasContent = (content) => content !== null && content !== void 0 && content !== false;
+/**
+* A header add-on's wrapper in the grid, where the header CELL is the sort
+* control. A press or Enter/Space on the add-on is not a request to sort, so
+* those stop here; focus, hover and every other key (the arrows that walk the
+* grid) pass.
+*/
+const stopSort = {
+	onPointerDown: (e) => e.stopPropagation(),
+	onMouseDown: (e) => e.stopPropagation(),
+	onClick: (e) => e.stopPropagation(),
+	onKeyDown: (e) => {
+		if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+	},
+	onKeyUp: (e) => {
+		if (e.key === "Enter" || e.key === " ") e.stopPropagation();
+	}
+};
 /** The checkbox column is as wide as its box needs, with the table's usual inset on its leading side. */
 const SELECT_CELL = "w-11 px-0 ps-(--density-row-pad-x)";
 /** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */
@@ -179,6 +207,8 @@ const tableColumnVariants = cva([
 	"px-(--density-row-pad-x) py-(--density-row-pad-y)",
 	"box-border align-middle text-sm font-semibold select-none",
 	"data-[sorted]:bg-foreground/3 data-[sorted]:text-foreground",
+	"data-[highlighted]:bg-primary-subtle data-[highlighted]:text-foreground",
+	"data-[highlighted]:data-[sorted]:bg-primary-subtle",
 	...FOCUS_RING,
 	"data-[allows-sorting]:cursor-pointer"
 ], {
@@ -237,6 +267,15 @@ const tableExpandButtonVariants = cva([
 */
 const tableGroupRowVariants = cva(["bg-header-fill hover:bg-header-fill", "[&>td]:text-sm [&>td]:font-semibold [&>td]:text-muted-foreground"]);
 /**
+* A detail row (`renderExpandedRow`): one cell spanning the row, under the row it
+* belongs to. Not interactive, so it takes no hover, focus or selection fill and
+* no rule of its own: it reads as part of the row above, and the next row's rule
+* closes it.
+*/
+const tableDetailRowVariants = cva(["box-border bg-muted"]);
+/** The cell of a detail row. The table's own inset, so the content is not flush against the edge. */
+const tableDetailCellVariants = cva(["px-(--density-row-pad-x) py-(--density-row-pad-y)", "box-border align-top"]);
+/**
 * The sort control of a column header in a plain table (`keyboardModel="table"`).
 *
 * In the grid the header cell is the control; in a plain table a cell cannot
@@ -279,6 +318,7 @@ const tableCellVariants = cva([
 	"px-(--density-row-pad-x) py-(--density-row-pad-y)",
 	"box-border align-middle wrap-anywhere",
 	"data-[sorted]:bg-foreground/3",
+	"data-[highlighted]:bg-primary-subtle data-[highlighted]:data-[sorted]:bg-primary-subtle",
 	...FOCUS_RING
 ], {
 	variants: {
@@ -584,7 +624,7 @@ function sortRows(level, columns, sort) {
 	const direction = sort.direction === "descending" ? -1 : 1;
 	return [...level].sort((a, b) => direction * compareKeys(sortKey(sorted, a), sortKey(sorted, b)));
 }
-const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionLabels, frame, headerType, headerFill, striped, totalRow, empty, minWidth, stickyFirstColumn, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, getSubRows, expandedKeys, defaultExpandedKeys, onExpandedChange, isGroupRow, density, headerHidden, keyboardModel, className, ...props }, ref) {
+const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionLabels, frame, headerType, headerFill, striped, totalRow, empty, minWidth, stickyFirstColumn, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, getSubRows, renderExpandedRow, getRowProps, expandedKeys, defaultExpandedKeys, onExpandedChange, isGroupRow, density, headerHidden, keyboardModel, className, ...props }, ref) {
 	const isControlled = sortDescriptor !== void 0;
 	const [uncontrolledSort, setUncontrolledSort] = useState(defaultSortDescriptor);
 	const activeSort = isControlled ? sortDescriptor : uncontrolledSort;
@@ -645,19 +685,23 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 	const walk = (level, depth) => {
 		for (const [index, row] of level.entries()) {
 			const subRows = subRowsOf(row);
-			const isExpanded = subRows.length > 0 && expanded.has(getRowId(row));
+			const key = getRowId(row);
+			const isExpanded = subRows.length > 0 && expanded.has(key);
+			const detail = renderExpandedRow && expanded.has(key) ? renderExpandedRow(row) : void 0;
 			shownRows.push({
 				row,
 				depth,
 				index,
 				hasSubRows: subRows.length > 0,
-				isExpanded
+				isExpanded,
+				detail: hasContent(detail) ? detail : void 0
 			});
 			if (isExpanded) walk(sortLevel(subRows), depth + 1);
 		}
 	};
 	walk(visibleRows, 0);
 	const idBase = useId();
+	const detailRowKeys = shownRows.filter((shown) => shown.detail !== void 0).map((shown) => `${DETAIL_ROW_PREFIX}${String(getRowId(shown.row))}`);
 	const plain = keyboardModel === "table";
 	const selectable = selectionMode === "multiple" && !plain;
 	const rowAction = plain ? void 0 : onRowAction;
@@ -734,6 +778,12 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 			children: label
 		}) : label;
 	};
+	const headerAddon = (column, grid) => column.headerAddon && !headerHidden ? /* @__PURE__ */ jsx("span", {
+		"data-slot": "table-column-addon",
+		className: "ms-1 inline-flex items-center align-middle",
+		...grid ? stopSort : void 0,
+		children: column.headerAddon
+	}) : null;
 	const changeSort = (descriptor) => {
 		if (!isControlled) setUncontrolledSort(descriptor);
 		setPage(1);
@@ -741,11 +791,33 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 	};
 	const cellContent = (column, row, index) => {
 		const value = column.accessor(row);
-		return column.cell ? column.cell({
+		if (!column.cell) return renderValue(column, value, row);
+		const key = getRowId(row);
+		return column.cell({
 			value,
 			row,
-			index
-		}) : renderValue(column, value, row);
+			index,
+			isExpanded: expanded.has(key),
+			toggleExpanded: () => toggleExpanded(key)
+		});
+	};
+	const cellsOf = (row, isGroup) => {
+		if (isGroup) return columns.slice(0, 1).map((column) => ({
+			column,
+			span: 1
+		}));
+		const cells = [];
+		for (let at = 0; at < columns.length;) {
+			const column = columns[at];
+			const asked = Math.floor(column.colSpan?.(row) ?? 1);
+			const span = stickyFirstColumn && at === 0 ? 1 : Number.isNaN(asked) ? 1 : Math.max(1, Math.min(asked, columns.length - at));
+			cells.push({
+				column,
+				span
+			});
+			at += span;
+		}
+		return cells;
 	};
 	const indentClass = (column) => expandable && column === columns[0] && "ps-[calc(var(--density-row-pad-x)+var(--table-row-depth)*--spacing(7))]";
 	const depthStyle = (column, depth) => expandable && column === columns[0] ? { "--table-row-depth": depth } : void 0;
@@ -798,14 +870,15 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 							className: cnAll(tableHeaderVariants({ headerFill })),
 							children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
 								const sorted = activeSort?.column === column.id ? activeSort.direction : void 0;
-								return /* @__PURE__ */ jsx("th", {
+								return /* @__PURE__ */ jsxs("th", {
 									scope: "col",
 									"data-slot": "table-column",
 									"data-sorted": sortedColumn === column.id || void 0,
+									"data-highlighted": column.highlighted || void 0,
 									"aria-sort": isSortable(column) ? sorted ?? "none" : void 0,
 									className: columnClass(column),
 									style: columnStyle(column),
-									children: isSortable(column) ? /* @__PURE__ */ jsx("button", {
+									children: [isSortable(column) ? /* @__PURE__ */ jsx("button", {
 										type: "button",
 										"data-slot": "table-sort-button",
 										className: cnAll(tableSortButtonVariants()),
@@ -814,7 +887,7 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 											direction: sorted === "ascending" ? "descending" : "ascending"
 										}),
 										children: headerLabel(column)
-									}) : headerLabel(column)
+									}) : headerLabel(column), headerAddon(column, false)]
 								}, column.id);
 							}) })
 						}),
@@ -827,9 +900,10 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 								const { row, depth, index } = shown;
 								const key = getRowId(row);
 								const isGroup = isGroupRow?.(row) ?? false;
-								const shownColumns = isGroup ? columns.slice(0, 1) : columns;
+								const cells = cellsOf(row, isGroup);
 								const labelId = `${idBase}-row-${String(position)}`;
-								return /* @__PURE__ */ jsx("tr", {
+								return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("tr", {
+									...rowAttributes(getRowProps?.(row)),
 									"data-slot": "table-row",
 									"data-flip": String(key),
 									"data-highlighted": isRowHighlighted?.(row) || void 0,
@@ -837,12 +911,13 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 									"data-open": shown.isExpanded || void 0,
 									"data-group": isGroup || void 0,
 									className: rowClass(row, isGroup),
-									children: shownColumns.map((column) => {
+									children: cells.map(({ column, span }) => {
 										const content = firstCellContent(column, cellContent(column, row, index), shown, labelId);
 										const cellProps = {
 											"data-slot": "table-cell",
 											"data-sorted": sortedColumn === column.id || void 0,
-											colSpan: isGroup ? columns.length : void 0,
+											"data-highlighted": column.highlighted || void 0,
+											colSpan: isGroup ? columns.length : span > 1 ? span : void 0,
 											style: depthStyle(column, depth)
 										};
 										return column === columns[0] ? /* @__PURE__ */ jsx("th", {
@@ -856,7 +931,17 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 											children: content
 										}, column.id);
 									})
-								}, String(key));
+								}), shown.detail === void 0 ? null : /* @__PURE__ */ jsx("tr", {
+									"data-slot": "table-detail-row",
+									"data-flip": `${String(key)}:detail`,
+									className: cnAll(tableDetailRowVariants()),
+									children: /* @__PURE__ */ jsx("td", {
+										"data-slot": "table-detail-cell",
+										colSpan: columns.length,
+										className: cnAll(tableDetailCellVariants()),
+										children: shown.detail
+									})
+								})] }, String(key));
 							})
 						}),
 						totalRow ? /* @__PURE__ */ jsx("tfoot", {
@@ -880,6 +965,7 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 					onSelectionChange: selectable ? commitSelection : void 0,
 					sortDescriptor: activeSort,
 					onSortChange: changeSort,
+					disabledKeys: detailRowKeys.length > 0 ? detailRowKeys : void 0,
 					onRowAction: rowAction ? (key) => {
 						const row = rowsByKey.get(key);
 						if (row !== void 0 && !isGroupRow?.(row)) rowAction(row);
@@ -905,15 +991,16 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 										})
 									})
 								}) : null,
-								columns.map((column) => /* @__PURE__ */ jsx(Column, {
+								columns.map((column) => /* @__PURE__ */ jsxs(Column, {
 									id: column.id,
 									isRowHeader: column === columns[0],
 									allowsSorting: isSortable(column),
 									"data-slot": "table-column",
 									"data-sorted": sortedColumn === column.id || void 0,
+									"data-highlighted": column.highlighted || void 0,
 									className: columnClass(column),
 									style: columnStyle(column),
-									children: headerLabel(column)
+									children: [headerLabel(column), headerAddon(column, true)]
 								}, column.id)),
 								rowAction ? /* @__PURE__ */ jsx(Column, {
 									id: CHEVRON_COLUMN_ID,
@@ -934,9 +1021,10 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 								const { row, depth, index } = shown;
 								const key = getRowId(row);
 								const isGroup = isGroupRow?.(row) ?? false;
-								const shownColumns = isGroup ? columns.slice(0, 1) : columns;
+								const cells = cellsOf(row, isGroup);
 								const labelId = `${idBase}-row-${String(position)}`;
-								return /* @__PURE__ */ jsxs(Row, {
+								return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Row, {
+									...rowAttributes(getRowProps?.(row)),
 									id: key,
 									"data-slot": "table-row",
 									"data-flip": String(key),
@@ -954,10 +1042,11 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 												"aria-label": selectionLabels?.selectRow
 											})
 										}) : null,
-										shownColumns.map((column) => /* @__PURE__ */ jsx(Cell, {
+										cells.map(({ column, span }) => /* @__PURE__ */ jsx(Cell, {
 											"data-slot": "table-cell",
 											"data-sorted": sortedColumn === column.id || void 0,
-											colSpan: isGroup ? columns.length + (rowAction ? 1 : 0) : void 0,
+											"data-highlighted": column.highlighted || void 0,
+											colSpan: isGroup ? columns.length + (rowAction ? 1 : 0) : span > 1 ? span : void 0,
 											className: cnAll(cellClass(column, "body"), indentClass(column)),
 											style: depthStyle(column, depth),
 											children: firstCellContent(column, cellContent(column, row, index), shown, labelId)
@@ -968,7 +1057,18 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 											children: /* @__PURE__ */ jsx(RowChevronGlyph, {})
 										}) : null
 									]
-								}, String(key));
+								}), shown.detail === void 0 ? null : /* @__PURE__ */ jsx(Row, {
+									id: `${DETAIL_ROW_PREFIX}${String(key)}`,
+									"data-slot": "table-detail-row",
+									"data-flip": `${String(key)}:detail`,
+									className: cnAll(tableDetailRowVariants()),
+									children: /* @__PURE__ */ jsx(Cell, {
+										"data-slot": "table-detail-cell",
+										colSpan: columns.length + (selectable ? 1 : 0) + (rowAction ? 1 : 0),
+										className: cnAll(tableDetailCellVariants()),
+										children: shown.detail
+									})
+								})] }, String(key));
 							})
 						}),
 						totalRow ? /* @__PURE__ */ jsx(TableFooter, {
@@ -1065,6 +1165,6 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 	});
 });
 //#endregion
-export { Table$1 as Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants };
+export { Table$1 as Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableDetailCellVariants, tableDetailRowVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableStickyCellVariants, tableVariants };
 
 //# sourceMappingURL=table.js.map