@primer/react 38.41.0 → 38.42.0-rc.23d625bd0

package/dist/DataTable/Table.js

@@ -2,6 +2,7 @@ import { c } from "../utils/react-compiler-runtime.js";
 import Text_default from "../Text/Text.js";
 import VisuallyHidden from "../_VisuallyHidden.js";
 import { ScrollableRegion } from "../ScrollableRegion/ScrollableRegion.js";
+import Checkbox from "../Checkbox/Checkbox.js";
 import { SkeletonText } from "../SkeletonText/SkeletonText.js";
 import { SortDirection } from "./sorting.js";
 import { useTableLayout } from "./useTable.js";
@@ -142,28 +143,32 @@ function TableBody(t0) {
 	return t2;
 }
 function TableHeader(t0) {
-	const $ = c(9);
+	const $ = c(12);
 	let align;
 	let children;
+	let className;
 	let rest;
 	if ($[0] !== t0) {
-		({align, children, ...rest} = t0);
+		({align, className, children, ...rest} = t0);
 		$[0] = t0;
 		$[1] = align;
 		$[2] = children;
-		$[3] = rest;
+		$[3] = className;
+		$[4] = rest;
 	} else {
 		align = $[1];
 		children = $[2];
-		rest = $[3];
+		className = $[3];
+		rest = $[4];
 	}
 	let t1;
-	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = clsx("TableHeader", Table_module_css_default.TableHeader);
-		$[4] = t1;
-	} else t1 = $[4];
+	if ($[5] !== className) {
+		t1 = clsx("TableHeader", className, Table_module_css_default.TableHeader);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[5] !== align || $[6] !== children || $[7] !== rest) {
+	if ($[7] !== align || $[8] !== children || $[9] !== rest || $[10] !== t1) {
 		t2 = /* @__PURE__ */ jsx("th", {
 			"data-component": "Table.Header",
 			...rest,
@@ -173,11 +178,12 @@ function TableHeader(t0) {
 			"data-cell-align": align,
 			children
 		});
-		$[5] = align;
-		$[6] = children;
-		$[7] = rest;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[7] = align;
+		$[8] = children;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
 	return t2;
 }
 function TableSortHeader(t0) {
@@ -267,6 +273,90 @@ function TableSortHeader(t0) {
 	} else t6 = $[23];
 	return t6;
 }
+function TableSelectionHeader(t0) {
+	const $ = c(25);
+	let ariaDescription;
+	let checkboxRef;
+	let className;
+	let disabled;
+	let onToggleSelect;
+	let rest;
+	let selection;
+	let t1;
+	if ($[0] !== t0) {
+		({selection, checkboxRef, className, disabled, onToggleSelect, "aria-label": t1, "aria-description": ariaDescription, ...rest} = t0);
+		$[0] = t0;
+		$[1] = ariaDescription;
+		$[2] = checkboxRef;
+		$[3] = className;
+		$[4] = disabled;
+		$[5] = onToggleSelect;
+		$[6] = rest;
+		$[7] = selection;
+		$[8] = t1;
+	} else {
+		ariaDescription = $[1];
+		checkboxRef = $[2];
+		className = $[3];
+		disabled = $[4];
+		onToggleSelect = $[5];
+		rest = $[6];
+		selection = $[7];
+		t1 = $[8];
+	}
+	const ariaLabel = t1 === void 0 ? "Select rows" : t1;
+	let t2;
+	if ($[9] !== className) {
+		t2 = clsx(className, Table_module_css_default.TableSelectionHeader);
+		$[9] = className;
+		$[10] = t2;
+	} else t2 = $[10];
+	const t3 = selection === "all";
+	const t4 = selection === "some";
+	let t5;
+	if ($[11] !== onToggleSelect) {
+		t5 = () => {
+			var _onToggleSelect;
+			return (_onToggleSelect = onToggleSelect) === null || _onToggleSelect === void 0 ? void 0 : _onToggleSelect();
+		};
+		$[11] = onToggleSelect;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== ariaDescription || $[14] !== ariaLabel || $[15] !== checkboxRef || $[16] !== disabled || $[17] !== t3 || $[18] !== t4 || $[19] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Checkbox, {
+			ref: checkboxRef,
+			checked: t3,
+			indeterminate: t4,
+			disabled,
+			onChange: t5,
+			"aria-label": ariaLabel,
+			"aria-description": ariaDescription
+		});
+		$[13] = ariaDescription;
+		$[14] = ariaLabel;
+		$[15] = checkboxRef;
+		$[16] = disabled;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== rest || $[22] !== t2 || $[23] !== t6) {
+		t7 = /* @__PURE__ */ jsx(TableHeader, {
+			...rest,
+			className: t2,
+			"data-component": "Table.SelectionHeader",
+			children: t6
+		});
+		$[21] = rest;
+		$[22] = t2;
+		$[23] = t6;
+		$[24] = t7;
+	} else t7 = $[24];
+	return t7;
+}
 function TableRow(t0) {
 	const $ = c(7);
 	let children;
@@ -366,6 +456,115 @@ function TableCell(t0) {
 	} else t3 = $[20];
 	return t3;
 }
+function TableRowSelection(t0) {
+	const $ = c(33);
+	let ariaLabelledBy;
+	let checkboxRef;
+	let className;
+	let disabled;
+	let headers;
+	let onToggleSelect;
+	let rest;
+	let selected;
+	let t1;
+	if ($[0] !== t0) {
+		({selected, checkboxRef, className, disabled, headers, onToggleSelect, "aria-label": t1, "aria-labelledby": ariaLabelledBy, ...rest} = t0);
+		$[0] = t0;
+		$[1] = ariaLabelledBy;
+		$[2] = checkboxRef;
+		$[3] = className;
+		$[4] = disabled;
+		$[5] = headers;
+		$[6] = onToggleSelect;
+		$[7] = rest;
+		$[8] = selected;
+		$[9] = t1;
+	} else {
+		ariaLabelledBy = $[1];
+		checkboxRef = $[2];
+		className = $[3];
+		disabled = $[4];
+		headers = $[5];
+		onToggleSelect = $[6];
+		rest = $[7];
+		selected = $[8];
+		t1 = $[9];
+	}
+	const ariaLabel = t1 === void 0 ? "Select row" : t1;
+	const actionLabelId = React.useId();
+	const group = useContext(TableGroupContext);
+	let t2;
+	if ($[10] !== (group === null || group === void 0 ? void 0 : group.headerId) || $[11] !== headers) {
+		t2 = [group === null || group === void 0 ? void 0 : group.headerId, headers].filter(Boolean).join(" ") || void 0;
+		$[10] = group === null || group === void 0 ? void 0 : group.headerId;
+		$[11] = headers;
+		$[12] = t2;
+	} else t2 = $[12];
+	const resolvedHeaders = t2;
+	let t3;
+	if ($[13] !== className) {
+		t3 = clsx(className, Table_module_css_default.TableCell, Table_module_css_default.TableRowSelection);
+		$[13] = className;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[15] !== actionLabelId || $[16] !== ariaLabelledBy) {
+		t4 = ariaLabelledBy ? /* @__PURE__ */ jsx(VisuallyHidden, {
+			id: actionLabelId,
+			children: "Select"
+		}) : null;
+		$[15] = actionLabelId;
+		$[16] = ariaLabelledBy;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== onToggleSelect) {
+		t5 = () => {
+			var _onToggleSelect2;
+			return (_onToggleSelect2 = onToggleSelect) === null || _onToggleSelect2 === void 0 ? void 0 : _onToggleSelect2();
+		};
+		$[18] = onToggleSelect;
+		$[19] = t5;
+	} else t5 = $[19];
+	const t6 = ariaLabelledBy ? void 0 : ariaLabel;
+	const t7 = ariaLabelledBy ? `${actionLabelId} ${ariaLabelledBy}` : void 0;
+	let t8;
+	if ($[20] !== checkboxRef || $[21] !== disabled || $[22] !== selected || $[23] !== t5 || $[24] !== t6 || $[25] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Checkbox, {
+			ref: checkboxRef,
+			checked: selected,
+			disabled,
+			onChange: t5,
+			"aria-label": t6,
+			"aria-labelledby": t7
+		});
+		$[20] = checkboxRef;
+		$[21] = disabled;
+		$[22] = selected;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+	} else t8 = $[26];
+	let t9;
+	if ($[27] !== resolvedHeaders || $[28] !== rest || $[29] !== t3 || $[30] !== t4 || $[31] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("td", {
+			...rest,
+			className: t3,
+			role: "cell",
+			headers: resolvedHeaders,
+			"data-component": "Table.RowSelection",
+			children: [t4, t8]
+		});
+		$[27] = resolvedHeaders;
+		$[28] = rest;
+		$[29] = t3;
+		$[30] = t4;
+		$[31] = t8;
+		$[32] = t9;
+	} else t9 = $[32];
+	return t9;
+}
 function TableCellPlaceholder(t0) {
 	const $ = c(2);
 	const { children } = t0;
@@ -585,4 +784,4 @@ function _temp(column, i) {
 	return /* @__PURE__ */ jsx(TableHeader, { children: typeof column.header === "string" ? column.header : column.header() }, i);
 }
 //#endregion
-export { Table, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableSkeleton, TableSortHeader, TableSubtitle, TableTitle };
+export { Table, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableRowSelection, TableSelectionHeader, TableSkeleton, TableSortHeader, TableSubtitle, TableTitle };

package/dist/DataTable/Table.module.css.js

@@ -1,4 +1,4 @@
-import "./Table-50e68700.css";
+import "./Table-6ee6a868.css";
 //#region src/DataTable/Table.module.css.js
 var Table_module_css_default = {
 	"TableContainer": "prc-DataTable-TableContainer-hn0p3",
@@ -16,6 +16,8 @@ var Table_module_css_default = {
 	"TableBody": "prc-DataTable-TableBody-QKQy2",
 	"TableCellSkeletonItem": "prc-DataTable-TableCellSkeletonItem-bGhwZ",
 	"TableCellSkeleton": "prc-DataTable-TableCellSkeleton-DMdM5",
+	"TableRowSelection": "prc-DataTable-TableRowSelection-HwyDU",
+	"TableSelectionHeader": "prc-DataTable-TableSelectionHeader-Op0cK",
 	"TableSortIcon": "prc-DataTable-TableSortIcon-wHvJw",
 	"TableSortIcon--ascending": "prc-DataTable-TableSortIcon--ascending-Lpx6z",
 	"TableSortIcon--descending": "prc-DataTable-TableSortIcon--descending-hHJGo",

package/dist/DataTable/index.d.ts

@@ -1,10 +1,10 @@
 import { SlotMarker } from "../utils/types/Slots.js";
 import { ObjectPaths } from "./utils.js";
-import { DataTableData, DataTableRowGroup, UniqueRow } from "./row.js";
+import { DataTableData, DataTableRowGroup, DataTableRowId, UniqueRow } from "./row.js";
 import { CellAlignment, Column, ColumnWidth, createColumnHelper } from "./column.js";
 import { DataTable, DataTableProps } from "./DataTable.js";
 import { ErrorDialog } from "./ErrorDialog.js";
-import { Table as Table$1, TableActions, TableActionsProps, TableBody, TableBodyProps, TableCell, TableCellPlaceholder, TableCellProps, TableContainer, TableContainerProps, TableDivider, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TableSkeleton, TableSkeletonProps, TableSubtitle, TableSubtitleProps, TableTitle, TableTitleProps } from "./Table.js";
+import { Table as Table$1, TableActions, TableActionsProps, TableBody, TableBodyProps, TableCell, TableCellPlaceholder, TableCellProps, TableContainer, TableContainerProps, TableDivider, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TableRowSelection, TableRowSelectionProps, TableSelectionHeader, TableSelectionHeaderProps, TableSkeleton, TableSkeletonProps, TableSubtitle, TableSubtitleProps, TableTitle, TableTitleProps } from "./Table.js";
 import { TableGroup, TableGroupProps } from "./TableGroup.js";
 import { Pagination } from "./Pagination.js";
 
@@ -20,11 +20,13 @@ declare const Table: typeof Table$1 & SlotMarker & {
   Body: typeof TableBody;
   Group: typeof TableGroup;
   Header: typeof TableHeader;
+  SelectionHeader: typeof TableSelectionHeader;
   Row: typeof TableRow;
+  RowSelection: typeof TableRowSelection;
   Cell: typeof TableCell;
   CellPlaceholder: typeof TableCellPlaceholder;
   Pagination: typeof Pagination;
   ErrorDialog: typeof ErrorDialog;
 };
 //#endregion
-export { type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, type ObjectPaths, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableSubtitleProps, type TableTitleProps, type UniqueRow, createColumnHelper };
+export { type CellAlignment, type Column, type ColumnWidth, DataTable, type DataTableData, type DataTableProps, type DataTableRowGroup, type DataTableRowId, type ObjectPaths, Table, type TableActionsProps, type TableBodyProps, type TableCellProps, type TableContainerProps, type TableGroupProps, type TableHeadProps, type TableHeaderProps, type TableProps, type TableRowProps, type TableRowSelectionProps, type TableSelectionHeaderProps, type TableSubtitleProps, type TableTitleProps, type UniqueRow, createColumnHelper };

package/dist/DataTable/index.js

@@ -1,4 +1,4 @@
-import { Table as Table$1, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableSkeleton, TableSubtitle, TableTitle } from "./Table.js";
+import { Table as Table$1, TableActions, TableBody, TableCell, TableCellPlaceholder, TableContainer, TableDivider, TableHead, TableHeader, TableRow, TableRowSelection, TableSelectionHeader, TableSkeleton, TableSubtitle, TableTitle } from "./Table.js";
 import { TableGroup } from "./TableGroup.js";
 import { DataTable } from "./DataTable.js";
 import { ErrorDialog } from "./ErrorDialog.js";
@@ -16,7 +16,9 @@ const Table = Object.assign(Table$1, {
 	Body: TableBody,
 	Group: TableGroup,
 	Header: TableHeader,
+	SelectionHeader: TableSelectionHeader,
 	Row: TableRow,
+	RowSelection: TableRowSelection,
 	Cell: TableCell,
 	CellPlaceholder: TableCellPlaceholder,
 	Pagination,

package/dist/DataTable/row.d.ts

@@ -1,6 +1,7 @@
 //#region src/DataTable/row.d.ts
+type DataTableRowId = string | number;
 interface UniqueRow {
-  id: string | number;
+  id: DataTableRowId;
 }
 interface DataTableRowGroup<Data extends UniqueRow> {
   /**
@@ -26,4 +27,4 @@ interface DataTableRowGroup<Data extends UniqueRow> {
  */
 type DataTableData<Data extends UniqueRow> = Array<Data | DataTableRowGroup<Data>>;
 //#endregion
-export { DataTableData, DataTableRowGroup, UniqueRow };
+export { DataTableData, DataTableRowGroup, DataTableRowId, UniqueRow };

package/dist/DataTable/useTable.js

@@ -1,24 +1,54 @@
 import { c } from "../utils/react-compiler-runtime.js";
+import { useControllableState } from "../hooks/useControllableState.js";
 import { DEFAULT_SORT_DIRECTION, SortDirection, strategies, transition } from "./sorting.js";
 import { useId, useState } from "react";
 //#region src/DataTable/useTable.ts
 function useTable(t0) {
-	const $ = c(29);
-	const { columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId } = t0;
+	const $ = c(61);
+	const { columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId, rowSelection: t1, selectedRows: controlledSelectedRows, defaultSelectedRows, onSelectionChange, isRowSelectable } = t0;
+	const rowSelection = t1 === void 0 ? false : t1;
 	const tableId = useId();
 	const [rowOrder, setRowOrder] = useState(data);
 	const [prevData, setPrevData] = useState(data);
 	const [prevColumns, setPrevColumns] = useState(columns);
-	let t1;
+	let t2;
 	if ($[0] !== columns || $[1] !== initialSortColumn || $[2] !== initialSortDirection) {
-		t1 = () => getInitialSortState(columns, initialSortColumn, initialSortDirection);
+		t2 = () => getInitialSortState(columns, initialSortColumn, initialSortDirection);
 		$[0] = columns;
 		$[1] = initialSortColumn;
 		$[2] = initialSortDirection;
-		$[3] = t1;
-	} else t1 = $[3];
-	const [sortByColumn, setSortByColumn] = useState(t1);
-	const { gridTemplateColumns } = useTableLayout(columns);
+		$[3] = t2;
+	} else t2 = $[3];
+	const [sortByColumn, setSortByColumn] = useState(t2);
+	let t3;
+	if ($[4] !== defaultSelectedRows) {
+		t3 = () => defaultSelectedRows !== null && defaultSelectedRows !== void 0 ? defaultSelectedRows : /* @__PURE__ */ new Set();
+		$[4] = defaultSelectedRows;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== onSelectionChange) {
+		t4 = (nextSelectedRows) => {
+			onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange({ selectedRows: new Set(nextSelectedRows) });
+		};
+		$[6] = onSelectionChange;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== controlledSelectedRows || $[9] !== t3 || $[10] !== t4) {
+		t5 = {
+			name: "DataTable selectedRows",
+			value: controlledSelectedRows,
+			defaultValue: t3,
+			onChange: t4
+		};
+		$[8] = controlledSelectedRows;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	const [selectedRows, setSelectedRows] = useControllableState(t5);
+	const { gridTemplateColumns } = useTableLayout(columns, rowSelection);
 	if (columns !== prevColumns) {
 		setPrevColumns(columns);
 		if (sortByColumn) {
@@ -29,20 +59,21 @@ function useTable(t0) {
 			})) setSortByColumn(null);
 		}
 	}
-	let t2;
-	if ($[4] !== rowOrder) {
-		t2 = rowOrder.some(isDataTableRowGroup);
-		$[4] = rowOrder;
-		$[5] = t2;
-	} else t2 = $[5];
-	const hasGroups = t2;
+	let t6;
+	if ($[12] !== rowOrder) {
+		t6 = rowOrder.some(isDataTableRowGroup);
+		$[12] = rowOrder;
+		$[13] = t6;
+	} else t6 = $[13];
+	const hasGroups = t6;
 	let bodies;
 	let headers;
 	let sortBy;
-	if ($[6] !== columns || $[7] !== data || $[8] !== externalSorting || $[9] !== getRowId || $[10] !== hasGroups || $[11] !== prevData || $[12] !== rowOrder || $[13] !== sortByColumn || $[14] !== tableId) {
-		let t3;
-		if ($[18] !== hasGroups || $[19] !== sortByColumn || $[20] !== tableId) {
-			t3 = (column_1, index) => {
+	let t7;
+	if ($[14] !== columns || $[15] !== data || $[16] !== externalSorting || $[17] !== getRowId || $[18] !== hasGroups || $[19] !== isRowSelectable || $[20] !== prevData || $[21] !== rowOrder || $[22] !== rowSelection || $[23] !== selectedRows || $[24] !== sortByColumn || $[25] !== tableId) {
+		let t8;
+		if ($[30] !== hasGroups || $[31] !== sortByColumn || $[32] !== tableId) {
+			t8 = (column_1, index) => {
 				var _column_1$id;
 				const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
 				if (id_0 === void 0) throw new Error("Expected either an `id` or `field` to be defined for a Column");
@@ -60,12 +91,12 @@ function useTable(t0) {
 					}
 				};
 			};
-			$[18] = hasGroups;
-			$[19] = sortByColumn;
-			$[20] = tableId;
-			$[21] = t3;
-		} else t3 = $[21];
-		headers = columns.map(t3);
+			$[30] = hasGroups;
+			$[31] = sortByColumn;
+			$[32] = tableId;
+			$[33] = t8;
+		} else t8 = $[33];
+		headers = columns.map(t8);
 		if (data !== prevData) {
 			setPrevData(data);
 			updateRowOrder(data, sortByColumn);
@@ -128,11 +159,17 @@ function useTable(t0) {
 			return sorted;
 		}
 		const createRow = function createRow(row_0, rowIndex) {
+			var _isRowSelectable;
 			const rowId = getRowId(row_0);
-			const rowHeaderIds = hasGroups ? headers.flatMap((header_2, index_0) => header_2.column.rowHeader ? [`${tableId}-row-${rowIndex}-header-${index_0}`] : []) : [];
+			const rowHeaderIds = hasGroups || rowSelection ? headers.flatMap((header_2, index_0) => header_2.column.rowHeader ? [`${tableId}-row-${rowIndex}-header-${index_0}`] : []) : [];
+			const selectable = rowSelection && ((_isRowSelectable = isRowSelectable === null || isRowSelectable === void 0 ? void 0 : isRowSelectable(row_0)) !== null && _isRowSelectable !== void 0 ? _isRowSelectable : true);
 			return {
 				type: "row",
 				id: `${rowId}`,
+				selectionId: rowId,
+				selectionLabelledBy: rowHeaderIds.length > 0 ? rowHeaderIds.join(" ") : void 0,
+				selected: selectable && selectedRows.has(rowId),
+				selectable,
 				getValue() {
 					return row_0;
 				},
@@ -142,7 +179,7 @@ function useTable(t0) {
 						const rowHeader = (_header_3$column$rowH = header_3.column.rowHeader) !== null && _header_3$column$rowH !== void 0 ? _header_3$column$rowH : false;
 						return {
 							id: `${rowId}:${header_3.id}`,
-							domId: hasGroups && rowHeader ? `${tableId}-row-${rowIndex}-header-${index_1}` : void 0,
+							domId: (hasGroups || rowSelection) && rowHeader ? `${tableId}-row-${rowIndex}-header-${index_1}` : void 0,
 							headers: hasGroups ? (rowHeader ? [header_3.domId] : [...rowHeaderIds, header_3.domId]).join(" ") : void 0,
 							column: header_3.column,
 							rowHeader,
@@ -184,44 +221,131 @@ function useTable(t0) {
 			rowIndex_0 = rowIndex_0 + 1;
 		}
 		if (body.rows.length > 0 || bodies.length === 0) bodies.push(body);
-		$[6] = columns;
-		$[7] = data;
-		$[8] = externalSorting;
-		$[9] = getRowId;
-		$[10] = hasGroups;
-		$[11] = prevData;
-		$[12] = rowOrder;
-		$[13] = sortByColumn;
-		$[14] = tableId;
-		$[15] = bodies;
-		$[16] = headers;
-		$[17] = sortBy;
+		t7 = bodies.flatMap(_temp).filter(_temp2);
+		$[14] = columns;
+		$[15] = data;
+		$[16] = externalSorting;
+		$[17] = getRowId;
+		$[18] = hasGroups;
+		$[19] = isRowSelectable;
+		$[20] = prevData;
+		$[21] = rowOrder;
+		$[22] = rowSelection;
+		$[23] = selectedRows;
+		$[24] = sortByColumn;
+		$[25] = tableId;
+		$[26] = bodies;
+		$[27] = headers;
+		$[28] = sortBy;
+		$[29] = t7;
 	} else {
-		bodies = $[15];
-		headers = $[16];
-		sortBy = $[17];
+		bodies = $[26];
+		headers = $[27];
+		sortBy = $[28];
+		t7 = $[29];
 	}
-	let t3;
-	if ($[22] !== sortBy) {
-		t3 = { sortBy };
-		$[22] = sortBy;
-		$[23] = t3;
-	} else t3 = $[23];
-	let t4;
-	if ($[24] !== bodies || $[25] !== gridTemplateColumns || $[26] !== headers || $[27] !== t3) {
-		t4 = {
+	const selectableRows = t7;
+	let t8;
+	if ($[34] !== selectableRows) {
+		t8 = new Set(selectableRows.filter(_temp3).map(_temp4));
+		$[34] = selectableRows;
+		$[35] = t8;
+	} else t8 = $[35];
+	const effectiveSelectedRows = t8;
+	const selectedCount = effectiveSelectedRows.size;
+	const selectableCount = selectableRows.length;
+	const allSelected = selectableCount > 0 && selectedCount === selectableCount;
+	const someSelected = selectedCount > 0 && !allSelected;
+	let t9;
+	if ($[36] !== selectedRows || $[37] !== setSelectedRows) {
+		t9 = function toggleRowSelection(row_5) {
+			if (!row_5.selectable) return;
+			const nextSelectedRows_0 = new Set(selectedRows);
+			if (nextSelectedRows_0.has(row_5.selectionId)) nextSelectedRows_0.delete(row_5.selectionId);
+			else nextSelectedRows_0.add(row_5.selectionId);
+			setSelectedRows(nextSelectedRows_0);
+		};
+		$[36] = selectedRows;
+		$[37] = setSelectedRows;
+		$[38] = t9;
+	} else t9 = $[38];
+	const toggleRowSelection = t9;
+	let t10;
+	if ($[39] !== allSelected || $[40] !== selectableRows || $[41] !== selectedRows || $[42] !== setSelectedRows) {
+		t10 = function toggleAllRows() {
+			if (selectableRows.length === 0) return;
+			const nextSelectedRows_1 = new Set(selectedRows);
+			for (const row_6 of selectableRows) if (allSelected) nextSelectedRows_1.delete(row_6.selectionId);
+			else nextSelectedRows_1.add(row_6.selectionId);
+			setSelectedRows(nextSelectedRows_1);
+		};
+		$[39] = allSelected;
+		$[40] = selectableRows;
+		$[41] = selectedRows;
+		$[42] = setSelectedRows;
+		$[43] = t10;
+	} else t10 = $[43];
+	const toggleAllRows = t10;
+	let t11;
+	if ($[44] !== sortBy || $[45] !== toggleAllRows || $[46] !== toggleRowSelection) {
+		t11 = {
+			sortBy,
+			toggleRowSelection,
+			toggleAllRows
+		};
+		$[44] = sortBy;
+		$[45] = toggleAllRows;
+		$[46] = toggleRowSelection;
+		$[47] = t11;
+	} else t11 = $[47];
+	const t12 = `${tableId}-selection-column`;
+	let t13;
+	if ($[48] !== allSelected || $[49] !== effectiveSelectedRows || $[50] !== selectableCount || $[51] !== selectedCount || $[52] !== someSelected || $[53] !== t12) {
+		t13 = {
+			headerId: t12,
+			selectedRows: effectiveSelectedRows,
+			allSelected,
+			someSelected,
+			selectableCount,
+			selectedCount
+		};
+		$[48] = allSelected;
+		$[49] = effectiveSelectedRows;
+		$[50] = selectableCount;
+		$[51] = selectedCount;
+		$[52] = someSelected;
+		$[53] = t12;
+		$[54] = t13;
+	} else t13 = $[54];
+	let t14;
+	if ($[55] !== bodies || $[56] !== gridTemplateColumns || $[57] !== headers || $[58] !== t11 || $[59] !== t13) {
+		t14 = {
 			headers,
-			actions: t3,
+			actions: t11,
+			selection: t13,
 			gridTemplateColumns,
 			bodies
 		};
-		$[24] = bodies;
-		$[25] = gridTemplateColumns;
-		$[26] = headers;
-		$[27] = t3;
-		$[28] = t4;
-	} else t4 = $[28];
-	return t4;
+		$[55] = bodies;
+		$[56] = gridTemplateColumns;
+		$[57] = headers;
+		$[58] = t11;
+		$[59] = t13;
+		$[60] = t14;
+	} else t14 = $[60];
+	return t14;
+}
+function _temp4(row_4) {
+	return row_4.selectionId;
+}
+function _temp3(row_3) {
+	return row_3.selected;
+}
+function _temp2(row_2) {
+	return row_2.selectable;
+}
+function _temp(body_0) {
+	return body_0.rows;
 }
 function isDataTableRowGroup(item) {
 	return "groupId" in item && "rows" in item && Array.isArray(item.rows);
@@ -265,8 +389,8 @@ function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
 	}
 	return null;
 }
-function useTableLayout(columns) {
-	return { gridTemplateColumns: getGridTemplateFromColumns(columns).join(" ") };
+function useTableLayout(columns, rowSelection = false) {
+	return { gridTemplateColumns: [...rowSelection ? ["min-content"] : [], ...getGridTemplateFromColumns(columns)].join(" ") };
 }
 function getGridTemplateFromColumns(columns) {
 	return columns.map((column) => {