@lattice-php/lattice 0.2.0 → 0.4.0

package/dist/table/components/sort-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport { getSortDirectionLabel } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columnsByKey,\n  state,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  state: TableState;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {state.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm text-lt-muted-fg\"\n            />\n            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Clear ${label} sort`}\n              data-test={`clear-${sort.key}-sort`}\n              onClick={() => onClear(sort)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,SAAS,KAAK;GACpC,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,UAAU;MACV,cAAY,SAAS,MAAM;MAC3B,aAAW,SAAS,KAAK,IAAI;MAC7B,eAAe,QAAQ,IAAI;gBAE3B,oBAAC,MAAD;OAAM,MAAK;OAAI,WAAU;MAAmB,CAAA;KACtC,CAAA;IACJ;MAnBK,KAAK,GAmBV;EAEV,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { getSortDirectionLabel } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columnsByKey,\n  state,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  state: TableState;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {state.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm text-lt-muted-fg\"\n            />\n            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Clear ${label} sort`}\n              data-test={`clear-${sort.key}-sort`}\n              onClick={() => onClear(sort)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,SAAS,KAAK;GACpC,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,UAAU;MACV,cAAY,SAAS,MAAM;MAC3B,aAAW,SAAS,KAAK,IAAI;MAC7B,eAAe,QAAQ,IAAI;gBAE3B,oBAAC,MAAD;OAAM,MAAK;OAAI,WAAU;MAAmB,CAAA;KACtC,CAAA;IACJ;MAnBK,KAAK,GAmBV;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/table/components/table-action-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-action-node.js","names":[],"sources":["../../../resources/js/table/components/table-action-node.tsx"],"sourcesContent":["import type { Node } from \"@lattice/lattice/core/types\";\nimport ActionComponent from \"@lattice/lattice/action/components/action\";\nimport ActionGroupComponent from \"@lattice/lattice/action/components/action-group\";\nimport LinkComponent from \"@lattice/lattice/core/components/link\";\n\nexport function TableActionNode({ node }: { node: Node }) {\n  if (node.type === \"action\") {\n    return <ActionComponent node={node as Node<\"action\">}>{null}</ActionComponent>;\n  }\n\n  if (node.type === \"action.group\") {\n    return (\n      <ActionGroupComponent node={node as Node<\"action.group\">}>\n        {node.schema?.map((childNode, index) => (\n          <TableActionNode\n            key={childNode.key ?? childNode.id ?? `${childNode.type}-${index}`}\n            node={childNode}\n          />\n        )) ?? null}\n      </ActionGroupComponent>\n    );\n  }\n\n  if (node.type === \"link\") {\n    return <LinkComponent node={node as Node<\"link\">}>{null}</LinkComponent>;\n  }\n\n  return null;\n}\n"],"mappings":";;;;;AAKA,SAAgB,gBAAgB,EAAE,QAAwB;CACxD,IAAI,KAAK,SAAS,UAChB,OAAO,oBAAC,iBAAD;EAAuB;YAAyB;CAAsB,CAAA;CAG/E,IAAI,KAAK,SAAS,gBAChB,OACE,oBAAC,sBAAD;EAA4B;YACzB,KAAK,QAAQ,KAAK,WAAW,UAC5B,oBAAC,iBAAD,EAEE,MAAM,UACP,GAFM,UAAU,OAAO,UAAU,MAAM,GAAG,UAAU,KAAK,GAAG,OAE5D,CACF,KAAK;CACc,CAAA;CAI1B,IAAI,KAAK,SAAS,QAChB,OAAO,oBAAC,eAAD;EAAqB;YAAuB;CAAoB,CAAA;CAGzE,OAAO;AACT"}
+{"version":3,"file":"table-action-node.js","names":[],"sources":["../../../resources/js/table/components/table-action-node.tsx"],"sourcesContent":["import type { Node } from \"@lattice-php/lattice/core/types\";\nimport ActionComponent from \"@lattice-php/lattice/action/components/action\";\nimport ActionGroupComponent from \"@lattice-php/lattice/action/components/action-group\";\nimport LinkComponent from \"@lattice-php/lattice/core/components/link\";\n\nexport function TableActionNode({ node }: { node: Node }) {\n  if (node.type === \"action\") {\n    return <ActionComponent node={node as Node<\"action\">}>{null}</ActionComponent>;\n  }\n\n  if (node.type === \"action.group\") {\n    return (\n      <ActionGroupComponent node={node as Node<\"action.group\">}>\n        {node.schema?.map((childNode, index) => (\n          <TableActionNode\n            key={childNode.key ?? childNode.id ?? `${childNode.type}-${index}`}\n            node={childNode}\n          />\n        )) ?? null}\n      </ActionGroupComponent>\n    );\n  }\n\n  if (node.type === \"link\") {\n    return <LinkComponent node={node as Node<\"link\">}>{null}</LinkComponent>;\n  }\n\n  return null;\n}\n"],"mappings":";;;;;AAKA,SAAgB,gBAAgB,EAAE,QAAwB;CACxD,IAAI,KAAK,SAAS,UAChB,OAAO,oBAAC,iBAAD;EAAuB;YAAyB;CAAsB,CAAA;CAG/E,IAAI,KAAK,SAAS,gBAChB,OACE,oBAAC,sBAAD;EAA4B;YACzB,KAAK,QAAQ,KAAK,WAAW,UAC5B,oBAAC,iBAAD,EAEE,MAAM,UACP,GAFM,UAAU,OAAO,UAAU,MAAM,GAAG,UAAU,KAAK,GAAG,OAE5D,CACF,KAAK;CACc,CAAA;CAI1B,IAAI,KAAK,SAAS,QAChB,OAAO,oBAAC,eAAD;EAAqB;YAAuB;CAAoB,CAAA;CAGzE,OAAO;AACT"}

package/dist/table/components/table-cell.d.ts

@@ -2,4 +2,4 @@ import { TableColumn, TableRow } from '../types';
 export declare function ColumnCell({ column, row }: {
     column: TableColumn;
     row: TableRow;
-}): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+}): import("react").JSX.Element;

package/dist/table/components/table-cell.js

@@ -1,39 +1,29 @@
-import { useColumnRegistry } from "../../provider.js";
+import { useColumnRegistry } from "../../core/registry-context.js";
+import { columnCell } from "../registry.js";
 import { BadgeCell } from "./cells/badge-cell.js";
+import { BooleanCell } from "./cells/boolean-cell.js";
 import { IconCell } from "./cells/icon-cell.js";
 import { ImageCell } from "./cells/image-cell.js";
+import { MoneyCell } from "./cells/money-cell.js";
+import { NumberCell } from "./cells/number-cell.js";
 import { TextCell } from "./cells/text-cell.js";
+import { StackCell } from "./cells/stack-cell.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/table-cell.tsx
+var builtinColumnCells = {
+	"column.badge": columnCell(BadgeCell),
+	"column.boolean": columnCell(BooleanCell),
+	"column.icon": columnCell(IconCell),
+	"column.image": columnCell(ImageCell),
+	"column.money": columnCell(MoneyCell),
+	"column.number": columnCell(NumberCell),
+	"column.stack": columnCell(StackCell),
+	"column.text": columnCell(TextCell)
+};
 function ColumnCell({ column, row }) {
-	const customRenderer = useColumnRegistry()[column.type];
-	if (customRenderer) return customRenderer({
-		column,
-		row,
-		value: row[column.key]
-	});
-	if (column.type === "stack") return /* @__PURE__ */ jsx("div", {
-		className: "grid gap-1",
-		children: (column.columns ?? []).map((stackedColumn) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(TextCell, {
-			column: stackedColumn,
-			row,
-			value: row[stackedColumn.key]
-		}) }, stackedColumn.key))
-	});
-	if (column.type === "badge") return /* @__PURE__ */ jsx(BadgeCell, {
-		column,
-		value: row[column.key]
-	});
-	if (column.type === "icon") return /* @__PURE__ */ jsx(IconCell, {
-		column,
-		value: row[column.key]
-	});
-	if (column.type === "image") return /* @__PURE__ */ jsx(ImageCell, {
-		column,
-		value: row[column.key]
-	});
-	return /* @__PURE__ */ jsx(TextCell, {
+	return /* @__PURE__ */ jsx(useColumnRegistry()[column.type] ?? builtinColumnCells[column.type] ?? builtinColumnCells["column.text"], {
 		column,
+		props: column.props ?? {},
 		row,
 		value: row[column.key]
 	});

package/dist/table/components/table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { useColumnRegistry } from \"../../provider\";\nimport type { TableColumn, TableRow } from \"../types\";\nimport { BadgeCell } from \"./cells/badge-cell\";\nimport { IconCell } from \"./cells/icon-cell\";\nimport { ImageCell } from \"./cells/image-cell\";\nimport { TextCell } from \"./cells/text-cell\";\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  const columnRegistry = useColumnRegistry();\n  const customRenderer = columnRegistry[column.type];\n\n  if (customRenderer) {\n    return customRenderer({ column, row, value: row[column.key] });\n  }\n\n  if (column.type === \"stack\") {\n    return (\n      <div className=\"grid gap-1\">\n        {(column.columns ?? []).map((stackedColumn) => (\n          <span key={stackedColumn.key}>\n            <TextCell column={stackedColumn} row={row} value={row[stackedColumn.key]} />\n          </span>\n        ))}\n      </div>\n    );\n  }\n\n  if (column.type === \"badge\") {\n    return <BadgeCell column={column} value={row[column.key]} />;\n  }\n\n  if (column.type === \"icon\") {\n    return <IconCell column={column} value={row[column.key]} />;\n  }\n\n  if (column.type === \"image\") {\n    return <ImageCell column={column} value={row[column.key]} />;\n  }\n\n  return <TextCell column={column} row={row} value={row[column.key]} />;\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAElF,MAAM,iBADiB,kBACA,EAAe,OAAO;CAE7C,IAAI,gBACF,OAAO,eAAe;EAAE;EAAQ;EAAK,OAAO,IAAI,OAAO;CAAK,CAAC;CAG/D,IAAI,OAAO,SAAS,SAClB,OACE,oBAAC,OAAD;EAAK,WAAU;aACX,OAAO,WAAW,CAAC,GAAG,KAAK,kBAC3B,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAD;GAAU,QAAQ;GAAoB;GAAK,OAAO,IAAI,cAAc;EAAO,CAAA,EACvE,GAFK,cAAc,GAEnB,CACP;CACE,CAAA;CAIT,IAAI,OAAO,SAAS,SAClB,OAAO,oBAAC,WAAD;EAAmB;EAAQ,OAAO,IAAI,OAAO;CAAO,CAAA;CAG7D,IAAI,OAAO,SAAS,QAClB,OAAO,oBAAC,UAAD;EAAkB;EAAQ,OAAO,IAAI,OAAO;CAAO,CAAA;CAG5D,IAAI,OAAO,SAAS,SAClB,OAAO,oBAAC,WAAD;EAAmB;EAAQ,OAAO,IAAI,OAAO;CAAO,CAAA;CAG7D,OAAO,oBAAC,UAAD;EAAkB;EAAa;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AACtE"}
+{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { useColumnRegistry } from \"../../provider\";\nimport { columnCell, type ColumnRegistry } from \"../registry\";\nimport type { TableColumn, TableRow } from \"../types\";\nimport { BadgeCell } from \"./cells/badge-cell\";\nimport { BooleanCell } from \"./cells/boolean-cell\";\nimport { IconCell } from \"./cells/icon-cell\";\nimport { ImageCell } from \"./cells/image-cell\";\nimport { MoneyCell } from \"./cells/money-cell\";\nimport { NumberCell } from \"./cells/number-cell\";\nimport { StackCell } from \"./cells/stack-cell\";\nimport { TextCell } from \"./cells/text-cell\";\n\n// Built-in cells live with the (lazy-loaded) table feature rather than the\n// eager registry, so they stay code-split. Consumer-registered columns are\n// merged on top and win on type collisions.\nconst builtinColumnCells: ColumnRegistry = {\n  \"column.badge\": columnCell(BadgeCell),\n  \"column.boolean\": columnCell(BooleanCell),\n  \"column.icon\": columnCell(IconCell),\n  \"column.image\": columnCell(ImageCell),\n  \"column.money\": columnCell(MoneyCell),\n  \"column.number\": columnCell(NumberCell),\n  \"column.stack\": columnCell(StackCell),\n  \"column.text\": columnCell(TextCell),\n};\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  const customCells = useColumnRegistry();\n  const Cell =\n    customCells[column.type] ??\n    builtinColumnCells[column.type] ??\n    builtinColumnCells[\"column.text\"];\n\n  return <Cell column={column} props={column.props ?? {}} row={row} value={row[column.key]} />;\n}\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,qBAAqC;CACzC,gBAAgB,WAAW,SAAS;CACpC,kBAAkB,WAAW,WAAW;CACxC,eAAe,WAAW,QAAQ;CAClC,gBAAgB,WAAW,SAAS;CACpC,gBAAgB,WAAW,SAAS;CACpC,iBAAiB,WAAW,UAAU;CACtC,gBAAgB,WAAW,SAAS;CACpC,eAAe,WAAW,QAAQ;AACpC;AAEA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAOlF,OAAO,oBANa,kBAElB,EAAY,OAAO,SACnB,mBAAmB,OAAO,SAC1B,mBAAmB,gBAEd;EAAc;EAAQ,OAAO,OAAO,SAAS,CAAC;EAAQ;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AAC7F"}

package/dist/table/components/table.js

@@ -1,12 +1,19 @@
+import { cn } from "../../lib/utils.js";
+import { nodeIdentity } from "../../core/test-id.js";
+import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
+import { useColumnResizing } from "../../core/use-column-resizing.js";
+import { alignJustifyItems, alignText } from "../align.js";
 import { getBulkActions } from "../bulk.js";
 import { flattenColumns, getRowActions, getRowKey } from "../payload.js";
-import { getColumnGridTemplate, getQueryParams, getVisiblePages } from "../query.js";
+import { getQueryParams, getTableSizingColumns, getTableUtilityTracks, getVisiblePages } from "../query.js";
 import { useTableSelection } from "../use-table-selection.js";
 import { useTable } from "../use-table.js";
+import { Checkbox } from "../../core/components/checkbox.js";
 import { BulkBar } from "./bulk-bar.js";
 import { ColumnFilterControl } from "./column-filter-control.js";
 import { ColumnHeader } from "./column-header.js";
+import { FilterBar, FilterMenu } from "./filter-bar.js";
 import { FilterStackBar } from "./filter-stack-bar.js";
 import { TablePagination } from "./pagination.js";
 import { SortBar } from "./sort-bar.js";
@@ -17,7 +24,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/table.tsx
 var TableComponent = ({ node }) => {
 	const { t } = useT("lattice");
-	const { columns, rows, pagination, state, filters, addFilter, updateFilter, removeFilter, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
+	const { columns, rows, pagination, state, filters, tableFilters, addFilter, updateFilter, removeFilter, replaceColumnFilters, setTableFilter, resetFilters, searchFilterOptions, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
 	const bulkActions = useMemo(() => getBulkActions(node.props?.bulkActions), [node.props?.bulkActions]);
 	const hasBulkActions = bulkActions.length > 0;
 	const rowEntries = useMemo(() => rows.map((row, index) => ({
@@ -39,171 +46,212 @@ var TableComponent = ({ node }) => {
 		clause,
 		index
 	}));
-	const gridTemplateColumns = useMemo(() => getColumnGridTemplate(columns, hasActions, hasBulkActions), [
-		columns,
-		hasActions,
-		hasBulkActions
-	]);
+	const filterDefinitions = useMemo(() => Array.isArray(node.props?.filters) ? node.props.filters : [], [node.props?.filters]);
+	const hasDedicatedFilters = filterDefinitions.length > 0;
+	const hasActiveFilters = filters.length > 0 || Object.keys(tableFilters).length > 0;
+	const hasTrailingUtility = hasActions || hasDedicatedFilters;
+	const sizingColumns = useMemo(() => getTableSizingColumns(columns), [columns]);
+	const utilityTracks = useMemo(() => getTableUtilityTracks(hasTrailingUtility, hasBulkActions), [hasTrailingUtility, hasBulkActions]);
+	const resizingEnabled = node.props?.resizableColumns === true;
+	const resizeStorageIdentity = nodeIdentity(node);
+	const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } = useColumnResizing({
+		columns: sizingColumns,
+		enabled: resizingEnabled,
+		leadingTracks: utilityTracks.leadingTracks,
+		showIndicator: node.props?.resizeIndicator === true,
+		storageKey: resizingEnabled && resizeStorageIdentity ? `lattice:table-columns:${resizeStorageIdentity}` : void 0,
+		trailingTracks: utilityTracks.trailingTracks
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-lattice-component": node.id,
-		className: "overflow-x-auto rounded-lt-sm border border-lt-border",
-		children: [
-			hasBulkActions && selection.active && /* @__PURE__ */ jsx(BulkBar, {
-				actions: bulkActions,
-				selectedKeys: selection.selectedKeys,
-				allMatching: selection.allMatching,
-				total: pagination.total,
-				query: getQueryParams(state),
-				canSelectAllMatching: selection.allVisibleSelected && !selection.allMatching && pagination.total !== void 0 && pagination.total > selection.selectedKeys.length,
-				onSelectAllMatching: selection.selectAllMatching,
-				onCompleted: selection.clear
-			}),
-			filters.length > 0 && /* @__PURE__ */ jsx(FilterStackBar, {
-				filters,
-				columnsByKey,
-				processing,
-				onRemove: removeFilter
-			}),
-			state.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
-				columnsByKey,
-				state,
-				processing,
-				onClear: clearSort
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-full text-sm",
-				role: "table",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "border-b border-lt-border bg-lt-muted/50",
-					role: "rowgroup",
+		className: "relative",
+		children: [hasOverrides && /* @__PURE__ */ jsx("button", {
+			"aria-label": t("a11y.resetColumnWidths", "Reset column widths"),
+			className: "absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex",
+			"data-test": "table-reset-columns",
+			onClick: resetColumns,
+			title: t("a11y.resetColumnWidths", "Reset column widths"),
+			type: "button",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "rotate-ccw",
+				className: "size-lt-icon-sm"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "overflow-x-auto rounded-lt-sm border border-lt-border",
+			children: [
+				hasDedicatedFilters && hasActiveFilters && /* @__PURE__ */ jsx(FilterBar, {
+					filters: filterDefinitions,
+					values: tableFilters,
+					processing,
+					hasActiveFilters,
+					onChange: setTableFilter,
+					onReset: resetFilters
+				}),
+				hasBulkActions && selection.active && /* @__PURE__ */ jsx(BulkBar, {
+					actions: bulkActions,
+					selectedKeys: selection.selectedKeys,
+					allMatching: selection.allMatching,
+					total: pagination.total ?? void 0,
+					query: getQueryParams(state),
+					canSelectAllMatching: selection.allVisibleSelected && !selection.allMatching && pagination.total != null && pagination.total > selection.selectedKeys.length,
+					onSelectAllMatching: selection.selectAllMatching,
+					onCompleted: selection.clear
+				}),
+				filters.length > 0 && /* @__PURE__ */ jsx(FilterStackBar, {
+					filters,
+					columnsByKey,
+					processing,
+					onRemove: removeFilter
+				}),
+				state.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
+					columnsByKey,
+					state,
+					processing,
+					onClear: clearSort
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-full text-base",
+					role: "table",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: "hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]",
-						role: "row",
-						style: { "--lattice-table-columns": gridTemplateColumns },
-						children: [
-							hasBulkActions && /* @__PURE__ */ jsx("div", {
-								className: "flex items-center px-4 py-3",
-								role: "columnheader",
-								children: /* @__PURE__ */ jsx("input", {
-									type: "checkbox",
-									"aria-label": t("a11y.selectAllRows", "Select all rows"),
-									"data-test": "select-all",
-									checked: selection.allSelected,
-									onChange: selection.toggleAll
-								})
-							}),
-							columns.map((column) => /* @__PURE__ */ jsx(ColumnHeader, {
-								column,
-								processing,
-								sort,
-								state
-							}, column.key)),
-							hasActions && /* @__PURE__ */ jsx("div", {
-								className: "px-4 py-3 text-right align-middle font-medium text-lt-muted-fg",
-								role: "columnheader",
-								children: /* @__PURE__ */ jsx("span", {
-									className: "sr-only",
-									children: node.props?.actionsLabel
-								})
-							})
-						]
-					}), hasFilters && /* @__PURE__ */ jsxs("div", {
-						className: "hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]",
-						role: "row",
-						style: { "--lattice-table-columns": gridTemplateColumns },
-						children: [
-							hasBulkActions && /* @__PURE__ */ jsx("div", {
-								className: "px-4 py-2",
-								role: "cell"
-							}),
-							columns.map((column) => /* @__PURE__ */ jsx("div", {
-								className: "min-w-0 px-2 py-2",
-								role: "cell",
-								children: column.filter?.enabled && /* @__PURE__ */ jsx(ColumnFilterControl, {
+						className: "border-b border-lt-border bg-lt-muted/50",
+						role: "rowgroup",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]",
+							role: "row",
+							style: { "--lattice-table-columns": gridTemplateColumns },
+							children: [
+								hasBulkActions && /* @__PURE__ */ jsx("div", {
+									className: "flex items-center px-4 py-3",
+									role: "columnheader",
+									children: /* @__PURE__ */ jsx(Checkbox, {
+										"aria-label": t("a11y.selectAllRows", "Select all rows"),
+										"data-test": "select-all",
+										checked: selection.allSelected,
+										onCheckedChange: () => selection.toggleAll()
+									})
+								}),
+								columns.map((column, index) => /* @__PURE__ */ jsx(ColumnHeader, {
 									column,
-									clauses: filterEntries.filter((entry) => entry.clause.field === column.key),
 									processing,
-									onAdd: addFilter,
-									onUpdate: updateFilter,
-									onRemove: removeFilter
+									resizeHandleProps: resizingEnabled ? getResizeHandleProps(sizingColumns[index]) : void 0,
+									sort,
+									state
+								}, column.key)),
+								hasTrailingUtility && /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center justify-end gap-2 px-4 py-2 align-middle font-semibold text-lt-fg",
+									role: "columnheader",
+									children: [hasDedicatedFilters && /* @__PURE__ */ jsx(FilterMenu, {
+										filters: filterDefinitions,
+										values: tableFilters,
+										processing,
+										onChange: setTableFilter,
+										onSearch: searchFilterOptions
+									}), hasActions && /* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: node.props?.actionsLabel
+									})]
 								})
-							}, column.key)),
-							hasActions && /* @__PURE__ */ jsx("div", {
-								className: "px-4 py-2",
-								role: "cell"
-							})
-						]
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					role: "rowgroup",
-					children: !hasLoaded ? /* @__PURE__ */ jsx("div", {
-						className: "p-4 text-lt-muted-fg",
-						role: "row",
-						children: /* @__PURE__ */ jsx("div", {
-							role: "cell",
-							children: t("table.loading", "Loading rows...")
-						})
-					}) : rowEntries.length === 0 ? /* @__PURE__ */ jsx("div", {
-						className: "p-8 text-center text-lt-muted-fg",
-						role: "row",
-						children: /* @__PURE__ */ jsx("div", {
-							role: "cell",
-							children: node.props?.emptyLabel
-						})
-					}) : rowEntries.map(({ row, actions, key }) => {
-						return /* @__PURE__ */ jsxs("div", {
-							className: `grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${striped ? "odd:bg-lt-muted/30" : ""}`,
+							]
+						}), hasFilters && /* @__PURE__ */ jsxs("div", {
+							className: "hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]",
 							role: "row",
 							style: { "--lattice-table-columns": gridTemplateColumns },
 							children: [
 								hasBulkActions && /* @__PURE__ */ jsx("div", {
-									className: "flex items-center p-4",
-									role: "cell",
-									children: /* @__PURE__ */ jsx("input", {
-										type: "checkbox",
-										"aria-label": t("a11y.selectRow", "Select row {{key}}", { key }),
-										"data-test": `select-row-${key}`,
-										checked: selection.isSelected(key),
-										onChange: () => selection.toggle(key)
-									})
+									className: "px-4 py-2",
+									role: "cell"
 								}),
-								columns.map((column) => /* @__PURE__ */ jsxs("div", {
-									className: "grid min-w-0 gap-1 p-4 align-middle",
+								columns.map((column) => /* @__PURE__ */ jsx("div", {
+									className: "min-w-0 px-2 py-2",
 									role: "cell",
-									children: [/* @__PURE__ */ jsx("span", {
-										"aria-hidden": "true",
-										className: "text-xs font-medium text-lt-muted-fg md:hidden",
-										children: column.label
-									}), /* @__PURE__ */ jsx("div", {
-										className: "min-w-0 truncate",
-										children: /* @__PURE__ */ jsx(ColumnCell, {
-											column,
-											row
-										})
-									})]
+									children: column.filter?.enabled && /* @__PURE__ */ jsx(ColumnFilterControl, {
+										column,
+										clauses: filterEntries.filter((entry) => entry.clause.field === column.key),
+										processing,
+										onAdd: addFilter,
+										onUpdate: updateFilter,
+										onRemove: removeFilter,
+										onReplace: replaceColumnFilters,
+										onSearch: (query) => searchFilterOptions(column.key, query)
+									})
 								}, column.key)),
-								actions.length > 0 && /* @__PURE__ */ jsx("div", {
-									className: "flex items-center justify-start gap-2 p-4 md:justify-end",
-									role: "cell",
-									children: actions.map((action, actionIndex) => /* @__PURE__ */ jsx(TableActionNode, { node: action }, action.key ?? action.id ?? actionIndex))
+								hasTrailingUtility && /* @__PURE__ */ jsx("div", {
+									className: "px-4 py-2",
+									role: "cell"
 								})
 							]
-						}, key);
-					})
-				})]
-			}),
-			hasLoaded && /* @__PURE__ */ jsx(TablePagination, {
-				pagination,
-				currentPage,
-				processing,
-				mode,
-				hasNextPage,
-				visiblePages,
-				infiniteLoaderRef,
-				onPage: goToPage,
-				onLoadMore: loadMore
-			})
-		]
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						role: "rowgroup",
+						children: !hasLoaded ? /* @__PURE__ */ jsx("div", {
+							className: "p-4 text-lt-muted-fg",
+							role: "row",
+							children: /* @__PURE__ */ jsx("div", {
+								role: "cell",
+								children: t("table.loading", "Loading rows...")
+							})
+						}) : rowEntries.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "p-8 text-center text-lt-muted-fg",
+							role: "row",
+							children: /* @__PURE__ */ jsx("div", {
+								role: "cell",
+								children: node.props?.emptyLabel
+							})
+						}) : rowEntries.map(({ row, actions, key }) => {
+							return /* @__PURE__ */ jsxs("div", {
+								className: `grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${striped ? "odd:bg-lt-muted/30" : ""}`,
+								role: "row",
+								style: { "--lattice-table-columns": gridTemplateColumns },
+								children: [
+									hasBulkActions && /* @__PURE__ */ jsx("div", {
+										className: "flex items-center p-4",
+										role: "cell",
+										children: /* @__PURE__ */ jsx(Checkbox, {
+											"aria-label": t("a11y.selectRow", "Select row {{key}}", { key }),
+											"data-test": `select-row-${key}`,
+											checked: selection.isSelected(key),
+											onCheckedChange: () => selection.toggle(key)
+										})
+									}),
+									columns.map((column) => /* @__PURE__ */ jsxs("div", {
+										className: cn("grid min-w-0 gap-1 overflow-hidden p-4 align-middle", alignText(column.align), alignJustifyItems(column.align)),
+										role: "cell",
+										children: [/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											className: "text-xs font-medium text-lt-muted-fg md:hidden",
+											children: column.label
+										}), /* @__PURE__ */ jsx("div", {
+											"data-slot": "table-cell-content",
+											className: "min-w-0 max-w-full overflow-hidden truncate",
+											children: /* @__PURE__ */ jsx(ColumnCell, {
+												column,
+												row
+											})
+										})]
+									}, column.key)),
+									hasTrailingUtility && /* @__PURE__ */ jsx("div", {
+										className: cn("items-center justify-start gap-2 p-4 md:justify-end", actions.length > 0 ? "flex" : "hidden md:flex"),
+										role: "cell",
+										children: actions.map((action, actionIndex) => /* @__PURE__ */ jsx(TableActionNode, { node: action }, action.key ?? action.id ?? actionIndex))
+									})
+								]
+							}, key);
+						})
+					})]
+				}),
+				hasLoaded && /* @__PURE__ */ jsx(TablePagination, {
+					pagination,
+					currentPage,
+					processing,
+					mode,
+					hasNextPage,
+					visiblePages,
+					infiniteLoaderRef,
+					onPage: goToPage,
+					onLoadMore: loadMore
+				})
+			]
+		})]
 	});
 };
 //#endregion

package/dist/table/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":[],"sources":["../../../resources/js/table/components/table.tsx"],"sourcesContent":["import { type ReactNode, useMemo } from \"react\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport type { TableNode } from \"../types\";\nimport { getBulkActions } from \"../bulk\";\nimport { flattenColumns, getRowActions, getRowKey } from \"../payload\";\nimport { getColumnGridTemplate, getQueryParams, getVisiblePages } from \"../query\";\nimport { useTable } from \"../use-table\";\nimport { useTableSelection } from \"../use-table-selection\";\nimport { BulkBar } from \"./bulk-bar\";\nimport { ColumnFilterControl } from \"./column-filter-control\";\nimport { ColumnHeader } from \"./column-header\";\nimport { FilterStackBar } from \"./filter-stack-bar\";\nimport { TablePagination } from \"./pagination\";\nimport { SortBar } from \"./sort-bar\";\nimport { TableActionNode } from \"./table-action-node\";\nimport { ColumnCell } from \"./table-cell\";\n\nconst TableComponent = ({ node }: { children?: ReactNode; node: TableNode }) => {\n  const { t } = useT(\"lattice\");\n  const {\n    columns,\n    rows,\n    pagination,\n    state,\n    filters,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  } = useTable(node);\n\n  const bulkActions = useMemo(\n    () => getBulkActions(node.props?.bulkActions),\n    [node.props?.bulkActions],\n  );\n  const hasBulkActions = bulkActions.length > 0;\n  const rowEntries = useMemo(\n    () =>\n      rows.map((row, index) => ({ row, actions: getRowActions(row), key: getRowKey(row, index) })),\n    [rows],\n  );\n  const selection = useTableSelection(rowEntries.map((entry) => entry.key));\n\n  const columnsByKey = useMemo(\n    () => new Map(flattenColumns(columns).map((column) => [column.key, column])),\n    [columns],\n  );\n  const currentPage = pagination.currentPage ?? state.page;\n  const lastPage = pagination.lastPage ?? currentPage;\n  const mode = pagination.mode ?? \"table\";\n  const visiblePages = getVisiblePages(currentPage, lastPage);\n  const hasNextPage = pagination.hasMore ?? currentPage < lastPage;\n  const hasActions = rowEntries.some((entry) => entry.actions.length > 0);\n  const striped = node.props?.striped === true;\n  const hasFilters = columns.some((column) => column.filter?.enabled);\n  const filterEntries = filters.map((clause, index) => ({ clause, index }));\n  const gridTemplateColumns = useMemo(\n    () => getColumnGridTemplate(columns, hasActions, hasBulkActions),\n    [columns, hasActions, hasBulkActions],\n  );\n\n  return (\n    <div\n      data-lattice-component={node.id}\n      className=\"overflow-x-auto rounded-lt-sm border border-lt-border\"\n    >\n      {hasBulkActions && selection.active && (\n        <BulkBar\n          actions={bulkActions}\n          selectedKeys={selection.selectedKeys}\n          allMatching={selection.allMatching}\n          total={pagination.total}\n          query={getQueryParams(state)}\n          canSelectAllMatching={\n            selection.allVisibleSelected &&\n            !selection.allMatching &&\n            pagination.total !== undefined &&\n            pagination.total > selection.selectedKeys.length\n          }\n          onSelectAllMatching={selection.selectAllMatching}\n          onCompleted={selection.clear}\n        />\n      )}\n      {filters.length > 0 && (\n        <FilterStackBar\n          filters={filters}\n          columnsByKey={columnsByKey}\n          processing={processing}\n          onRemove={removeFilter}\n        />\n      )}\n      {state.sorts.length > 0 && (\n        <SortBar\n          columnsByKey={columnsByKey}\n          state={state}\n          processing={processing}\n          onClear={clearSort}\n        />\n      )}\n      <div className=\"min-w-full text-sm\" role=\"table\">\n        <div className=\"border-b border-lt-border bg-lt-muted/50\" role=\"rowgroup\">\n          <div\n            className=\"hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]\"\n            role=\"row\"\n            style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n          >\n            {hasBulkActions && (\n              <div className=\"flex items-center px-4 py-3\" role=\"columnheader\">\n                <input\n                  type=\"checkbox\"\n                  aria-label={t(\"a11y.selectAllRows\", \"Select all rows\")}\n                  data-test=\"select-all\"\n                  checked={selection.allSelected}\n                  onChange={selection.toggleAll}\n                />\n              </div>\n            )}\n            {columns.map((column) => (\n              <ColumnHeader\n                column={column}\n                key={column.key}\n                processing={processing}\n                sort={sort}\n                state={state}\n              />\n            ))}\n            {hasActions && (\n              <div\n                className=\"px-4 py-3 text-right align-middle font-medium text-lt-muted-fg\"\n                role=\"columnheader\"\n              >\n                <span className=\"sr-only\">{node.props?.actionsLabel}</span>\n              </div>\n            )}\n          </div>\n          {hasFilters && (\n            <div\n              className=\"hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]\"\n              role=\"row\"\n              style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n            >\n              {hasBulkActions && <div className=\"px-4 py-2\" role=\"cell\" />}\n              {columns.map((column) => (\n                <div key={column.key} className=\"min-w-0 px-2 py-2\" role=\"cell\">\n                  {column.filter?.enabled && (\n                    <ColumnFilterControl\n                      column={column}\n                      clauses={filterEntries.filter((entry) => entry.clause.field === column.key)}\n                      processing={processing}\n                      onAdd={addFilter}\n                      onUpdate={updateFilter}\n                      onRemove={removeFilter}\n                    />\n                  )}\n                </div>\n              ))}\n              {hasActions && <div className=\"px-4 py-2\" role=\"cell\" />}\n            </div>\n          )}\n        </div>\n        <div role=\"rowgroup\">\n          {!hasLoaded ? (\n            <div className=\"p-4 text-lt-muted-fg\" role=\"row\">\n              <div role=\"cell\">{t(\"table.loading\", \"Loading rows...\")}</div>\n            </div>\n          ) : rowEntries.length === 0 ? (\n            <div className=\"p-8 text-center text-lt-muted-fg\" role=\"row\">\n              <div role=\"cell\">{node.props?.emptyLabel}</div>\n            </div>\n          ) : (\n            rowEntries.map(({ row, actions, key }) => {\n              return (\n                <div\n                  key={key}\n                  className={`grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${\n                    striped ? \"odd:bg-lt-muted/30\" : \"\"\n                  }`}\n                  role=\"row\"\n                  style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n                >\n                  {hasBulkActions && (\n                    <div className=\"flex items-center p-4\" role=\"cell\">\n                      <input\n                        type=\"checkbox\"\n                        aria-label={t(\"a11y.selectRow\", \"Select row {{key}}\", { key })}\n                        data-test={`select-row-${key}`}\n                        checked={selection.isSelected(key)}\n                        onChange={() => selection.toggle(key)}\n                      />\n                    </div>\n                  )}\n                  {columns.map((column) => (\n                    <div\n                      key={column.key}\n                      className=\"grid min-w-0 gap-1 p-4 align-middle\"\n                      role=\"cell\"\n                    >\n                      <span\n                        aria-hidden=\"true\"\n                        className=\"text-xs font-medium text-lt-muted-fg md:hidden\"\n                      >\n                        {column.label}\n                      </span>\n                      <div className=\"min-w-0 truncate\">\n                        <ColumnCell column={column} row={row} />\n                      </div>\n                    </div>\n                  ))}\n                  {actions.length > 0 && (\n                    <div\n                      className=\"flex items-center justify-start gap-2 p-4 md:justify-end\"\n                      role=\"cell\"\n                    >\n                      {actions.map((action, actionIndex) => (\n                        <TableActionNode\n                          key={action.key ?? action.id ?? actionIndex}\n                          node={action}\n                        />\n                      ))}\n                    </div>\n                  )}\n                </div>\n              );\n            })\n          )}\n        </div>\n      </div>\n      {hasLoaded && (\n        <TablePagination\n          pagination={pagination}\n          currentPage={currentPage}\n          processing={processing}\n          mode={mode}\n          hasNextPage={hasNextPage}\n          visiblePages={visiblePages}\n          infiniteLoaderRef={infiniteLoaderRef}\n          onPage={goToPage}\n          onLoadMore={loadMore}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default TableComponent;\n"],"mappings":"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"}
+{"version":3,"file":"table.js","names":[],"sources":["../../../resources/js/table/components/table.tsx"],"sourcesContent":["import { type ReactNode, useMemo } from \"react\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useColumnResizing } from \"@lattice-php/lattice/core/use-column-resizing\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { Checkbox } from \"@lattice-php/lattice/core/components/checkbox\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { alignJustifyItems, alignText } from \"../align\";\nimport type { TableNode } from \"../types\";\nimport { getBulkActions } from \"../bulk\";\nimport { flattenColumns, getRowActions, getRowKey } from \"../payload\";\nimport {\n  getQueryParams,\n  getTableSizingColumns,\n  getTableUtilityTracks,\n  getVisiblePages,\n} from \"../query\";\nimport { useTable } from \"../use-table\";\nimport { useTableSelection } from \"../use-table-selection\";\nimport { BulkBar } from \"./bulk-bar\";\nimport { ColumnFilterControl } from \"./column-filter-control\";\nimport { ColumnHeader } from \"./column-header\";\nimport { FilterBar, FilterMenu } from \"./filter-bar\";\nimport { FilterStackBar } from \"./filter-stack-bar\";\nimport { TablePagination } from \"./pagination\";\nimport { SortBar } from \"./sort-bar\";\nimport { TableActionNode } from \"./table-action-node\";\nimport { ColumnCell } from \"./table-cell\";\n\nconst TableComponent = ({ node }: { children?: ReactNode; node: TableNode }) => {\n  const { t } = useT(\"lattice\");\n  const {\n    columns,\n    rows,\n    pagination,\n    state,\n    filters,\n    tableFilters,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    replaceColumnFilters,\n    setTableFilter,\n    resetFilters,\n    searchFilterOptions,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  } = useTable(node);\n\n  const bulkActions = useMemo(\n    () => getBulkActions(node.props?.bulkActions),\n    [node.props?.bulkActions],\n  );\n  const hasBulkActions = bulkActions.length > 0;\n  const rowEntries = useMemo(\n    () =>\n      rows.map((row, index) => ({ row, actions: getRowActions(row), key: getRowKey(row, index) })),\n    [rows],\n  );\n  const selection = useTableSelection(rowEntries.map((entry) => entry.key));\n\n  const columnsByKey = useMemo(\n    () => new Map(flattenColumns(columns).map((column) => [column.key, column])),\n    [columns],\n  );\n  const currentPage = pagination.currentPage ?? state.page;\n  const lastPage = pagination.lastPage ?? currentPage;\n  const mode = pagination.mode ?? \"table\";\n  const visiblePages = getVisiblePages(currentPage, lastPage);\n  const hasNextPage = pagination.hasMore ?? currentPage < lastPage;\n  const hasActions = rowEntries.some((entry) => entry.actions.length > 0);\n  const striped = node.props?.striped === true;\n  const hasFilters = columns.some((column) => column.filter?.enabled);\n  const filterEntries = filters.map((clause, index) => ({ clause, index }));\n  const filterDefinitions = useMemo(\n    () => (Array.isArray(node.props?.filters) ? node.props.filters : []),\n    [node.props?.filters],\n  );\n  const hasDedicatedFilters = filterDefinitions.length > 0;\n  const hasActiveFilters = filters.length > 0 || Object.keys(tableFilters).length > 0;\n  const hasTrailingUtility = hasActions || hasDedicatedFilters;\n  const sizingColumns = useMemo(() => getTableSizingColumns(columns), [columns]);\n  const utilityTracks = useMemo(\n    () => getTableUtilityTracks(hasTrailingUtility, hasBulkActions),\n    [hasTrailingUtility, hasBulkActions],\n  );\n  const resizingEnabled = node.props?.resizableColumns === true;\n  const resizeStorageIdentity = nodeIdentity(node);\n  const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } =\n    useColumnResizing({\n      columns: sizingColumns,\n      enabled: resizingEnabled,\n      leadingTracks: utilityTracks.leadingTracks,\n      showIndicator: node.props?.resizeIndicator === true,\n      storageKey:\n        resizingEnabled && resizeStorageIdentity\n          ? `lattice:table-columns:${resizeStorageIdentity}`\n          : undefined,\n      trailingTracks: utilityTracks.trailingTracks,\n    });\n\n  return (\n    <div data-lattice-component={node.id} className=\"relative\">\n      {hasOverrides && (\n        <button\n          aria-label={t(\"a11y.resetColumnWidths\", \"Reset column widths\")}\n          className=\"absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex\"\n          data-test=\"table-reset-columns\"\n          onClick={resetColumns}\n          title={t(\"a11y.resetColumnWidths\", \"Reset column widths\")}\n          type=\"button\"\n        >\n          <Icon name=\"rotate-ccw\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n      <div className=\"overflow-x-auto rounded-lt-sm border border-lt-border\">\n        {hasDedicatedFilters && hasActiveFilters && (\n          <FilterBar\n            filters={filterDefinitions}\n            values={tableFilters}\n            processing={processing}\n            hasActiveFilters={hasActiveFilters}\n            onChange={setTableFilter}\n            onReset={resetFilters}\n          />\n        )}\n        {hasBulkActions && selection.active && (\n          <BulkBar\n            actions={bulkActions}\n            selectedKeys={selection.selectedKeys}\n            allMatching={selection.allMatching}\n            total={pagination.total ?? undefined}\n            query={getQueryParams(state)}\n            canSelectAllMatching={\n              selection.allVisibleSelected &&\n              !selection.allMatching &&\n              pagination.total != null &&\n              pagination.total > selection.selectedKeys.length\n            }\n            onSelectAllMatching={selection.selectAllMatching}\n            onCompleted={selection.clear}\n          />\n        )}\n        {filters.length > 0 && (\n          <FilterStackBar\n            filters={filters}\n            columnsByKey={columnsByKey}\n            processing={processing}\n            onRemove={removeFilter}\n          />\n        )}\n        {state.sorts.length > 0 && (\n          <SortBar\n            columnsByKey={columnsByKey}\n            state={state}\n            processing={processing}\n            onClear={clearSort}\n          />\n        )}\n        <div className=\"min-w-full text-base\" role=\"table\">\n          <div className=\"border-b border-lt-border bg-lt-muted/50\" role=\"rowgroup\">\n            <div\n              className=\"hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]\"\n              role=\"row\"\n              style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n            >\n              {hasBulkActions && (\n                <div className=\"flex items-center px-4 py-3\" role=\"columnheader\">\n                  <Checkbox\n                    aria-label={t(\"a11y.selectAllRows\", \"Select all rows\")}\n                    data-test=\"select-all\"\n                    checked={selection.allSelected}\n                    onCheckedChange={() => selection.toggleAll()}\n                  />\n                </div>\n              )}\n              {columns.map((column, index) => (\n                <ColumnHeader\n                  column={column}\n                  key={column.key}\n                  processing={processing}\n                  resizeHandleProps={\n                    resizingEnabled ? getResizeHandleProps(sizingColumns[index]) : undefined\n                  }\n                  sort={sort}\n                  state={state}\n                />\n              ))}\n              {hasTrailingUtility && (\n                <div\n                  className=\"flex items-center justify-end gap-2 px-4 py-2 align-middle font-semibold text-lt-fg\"\n                  role=\"columnheader\"\n                >\n                  {hasDedicatedFilters && (\n                    <FilterMenu\n                      filters={filterDefinitions}\n                      values={tableFilters}\n                      processing={processing}\n                      onChange={setTableFilter}\n                      onSearch={searchFilterOptions}\n                    />\n                  )}\n                  {hasActions && <span className=\"sr-only\">{node.props?.actionsLabel}</span>}\n                </div>\n              )}\n            </div>\n            {hasFilters && (\n              <div\n                className=\"hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]\"\n                role=\"row\"\n                style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n              >\n                {hasBulkActions && <div className=\"px-4 py-2\" role=\"cell\" />}\n                {columns.map((column) => (\n                  <div key={column.key} className=\"min-w-0 px-2 py-2\" role=\"cell\">\n                    {column.filter?.enabled && (\n                      <ColumnFilterControl\n                        column={column}\n                        clauses={filterEntries.filter((entry) => entry.clause.field === column.key)}\n                        processing={processing}\n                        onAdd={addFilter}\n                        onUpdate={updateFilter}\n                        onRemove={removeFilter}\n                        onReplace={replaceColumnFilters}\n                        onSearch={(query) => searchFilterOptions(column.key, query)}\n                      />\n                    )}\n                  </div>\n                ))}\n                {hasTrailingUtility && <div className=\"px-4 py-2\" role=\"cell\" />}\n              </div>\n            )}\n          </div>\n          <div role=\"rowgroup\">\n            {!hasLoaded ? (\n              <div className=\"p-4 text-lt-muted-fg\" role=\"row\">\n                <div role=\"cell\">{t(\"table.loading\", \"Loading rows...\")}</div>\n              </div>\n            ) : rowEntries.length === 0 ? (\n              <div className=\"p-8 text-center text-lt-muted-fg\" role=\"row\">\n                <div role=\"cell\">{node.props?.emptyLabel}</div>\n              </div>\n            ) : (\n              rowEntries.map(({ row, actions, key }) => {\n                return (\n                  <div\n                    key={key}\n                    className={`grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${\n                      striped ? \"odd:bg-lt-muted/30\" : \"\"\n                    }`}\n                    role=\"row\"\n                    style={{ \"--lattice-table-columns\": gridTemplateColumns } as never}\n                  >\n                    {hasBulkActions && (\n                      <div className=\"flex items-center p-4\" role=\"cell\">\n                        <Checkbox\n                          aria-label={t(\"a11y.selectRow\", \"Select row {{key}}\", { key })}\n                          data-test={`select-row-${key}`}\n                          checked={selection.isSelected(key)}\n                          onCheckedChange={() => selection.toggle(key)}\n                        />\n                      </div>\n                    )}\n                    {columns.map((column) => (\n                      <div\n                        key={column.key}\n                        className={cn(\n                          \"grid min-w-0 gap-1 overflow-hidden p-4 align-middle\",\n                          alignText(column.align),\n                          alignJustifyItems(column.align),\n                        )}\n                        role=\"cell\"\n                      >\n                        <span\n                          aria-hidden=\"true\"\n                          className=\"text-xs font-medium text-lt-muted-fg md:hidden\"\n                        >\n                          {column.label}\n                        </span>\n                        <div\n                          data-slot=\"table-cell-content\"\n                          className=\"min-w-0 max-w-full overflow-hidden truncate\"\n                        >\n                          <ColumnCell column={column} row={row} />\n                        </div>\n                      </div>\n                    ))}\n                    {hasTrailingUtility && (\n                      <div\n                        className={cn(\n                          \"items-center justify-start gap-2 p-4 md:justify-end\",\n                          actions.length > 0 ? \"flex\" : \"hidden md:flex\",\n                        )}\n                        role=\"cell\"\n                      >\n                        {actions.map((action, actionIndex) => (\n                          <TableActionNode\n                            key={action.key ?? action.id ?? actionIndex}\n                            node={action}\n                          />\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                );\n              })\n            )}\n          </div>\n        </div>\n        {hasLoaded && (\n          <TablePagination\n            pagination={pagination}\n            currentPage={currentPage}\n            processing={processing}\n            mode={mode}\n            hasNextPage={hasNextPage}\n            visiblePages={visiblePages}\n            infiniteLoaderRef={infiniteLoaderRef}\n            onPage={goToPage}\n            onLoadMore={loadMore}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default TableComponent;\n"],"mappings":"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"}

package/dist/table/filter-values.d.ts

@@ -0,0 +1,13 @@
+import { FilterData, Option } from '../types/generated';
+/**
+ * Whether a table-filter value should clear the filter rather than apply it —
+ * an empty string, empty list, or an object whose every member is empty.
+ */
+export declare function isEmptyFilterValue(value: unknown): boolean;
+export declare function isActiveFilterValue(value: unknown): boolean;
+/**
+ * Read a string entry from a filter's loose `props` bag, falling back when the
+ * key is absent or not a string.
+ */
+export declare function stringProp(filter: FilterData, key: string, fallback: string): string;
+export declare function filterOptions(filter: FilterData): Option[];

package/dist/table/filter-values.js

@@ -0,0 +1,30 @@
+//#region resources/js/table/filter-values.ts
+/**
+* Whether a table-filter value should clear the filter rather than apply it —
+* an empty string, empty list, or an object whose every member is empty.
+*/
+function isEmptyFilterValue(value) {
+	if (value == null || value === "") return true;
+	if (Array.isArray(value)) return value.length === 0;
+	if (typeof value === "object") return Object.values(value).every((member) => member == null || member === "");
+	return false;
+}
+function isActiveFilterValue(value) {
+	return !isEmptyFilterValue(value);
+}
+/**
+* Read a string entry from a filter's loose `props` bag, falling back when the
+* key is absent or not a string.
+*/
+function stringProp(filter, key, fallback) {
+	const value = filter.props[key];
+	return typeof value === "string" ? value : fallback;
+}
+function filterOptions(filter) {
+	const value = filter.props.options;
+	return Array.isArray(value) ? value : [];
+}
+//#endregion
+export { filterOptions, isActiveFilterValue, isEmptyFilterValue, stringProp };
+
+//# sourceMappingURL=filter-values.js.map