@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/table/components/sort-bar.d.ts

@@ -1,6 +1,6 @@
 import { TableColumn, TableSort, TableState } from '../types';
-export declare function SortBar({ columns, state, processing, onClear, }: {
-    columns: TableColumn[];
+export declare function SortBar({ columnsByKey, state, processing, onClear, }: {
+    columnsByKey: Map<string, TableColumn>;
     state: TableState;
     processing: boolean;
     onClear: (sort: TableSort) => void;

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

@@ -1,13 +1,13 @@
-import { getSortColumn, getSortDirectionLabel } from "../query.js";
+import { Icon } from "../../icons/sprite.js";
+import { getSortDirectionLabel } from "../query.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, X } from "lucide-react";
 //#region resources/js/table/components/sort-bar.tsx
-function SortBar({ columns, state, processing, onClear }) {
+function SortBar({ columnsByKey, state, processing, onClear }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm",
 		children: state.sorts.map((sort, index) => {
-			const label = getSortColumn(columns, sort)?.label ?? sort.key;
-			const Chevron = sort.direction === "desc" ? ArrowDown : ArrowUp;
+			const label = columnsByKey.get(sort.key)?.label ?? sort.key;
+			const arrow = sort.direction === "desc" ? "arrow-down" : "arrow-up";
 			return /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex items-center gap-1.5",
 				children: [
@@ -15,10 +15,12 @@ function SortBar({ columns, state, processing, onClear }) {
 						className: "font-medium",
 						children: `${index + 1}. ${label}`
 					}),
-					/* @__PURE__ */ jsx(Chevron, {
+					/* @__PURE__ */ jsx(Icon, {
+						name: arrow,
 						role: "img",
+						"aria-hidden": false,
 						"aria-label": getSortDirectionLabel(sort.direction),
-						className: "size-3.5 text-lt-muted-fg"
+						className: "size-lt-icon-sm text-lt-muted-fg"
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -27,9 +29,9 @@ function SortBar({ columns, state, processing, onClear }) {
 						"aria-label": `Clear ${label} sort`,
 						"data-test": `clear-${sort.key}-sort`,
 						onClick: () => onClear(sort),
-						children: /* @__PURE__ */ jsx(X, {
-							"aria-hidden": "true",
-							className: "size-3.5"
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "x",
+							className: "size-lt-icon-sm"
 						})
 					})
 				]

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 { ArrowDown, ArrowUp, X } from \"lucide-react\";\nimport { getSortColumn, getSortDirectionLabel } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columns,\n  state,\n  processing,\n  onClear,\n}: {\n  columns: 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 = getSortColumn(columns, sort);\n        const label = column?.label ?? sort.key;\n        const Chevron = sort.direction === \"desc\" ? ArrowDown : ArrowUp;\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            <Chevron\n              role=\"img\"\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-3.5 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              <X aria-hidden=\"true\" className=\"size-3.5\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,SACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,cAAc,SAAS,IACxB,GAAQ,SAAS,KAAK;GACpC,MAAM,UAAU,KAAK,cAAc,SAAS,YAAY;GAExD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,SAAD;MACE,MAAK;MACL,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,GAAD;OAAG,eAAY;OAAO,WAAU;MAAY,CAAA;KACtC,CAAA;IACJ;MAjBK,KAAK,GAiBV;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 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.d.ts

@@ -1,4 +1,4 @@
-import { Node } from '../../../../core/types';
+import { Node } from '../../core/types';
 export declare function TableActionNode({ node }: {
     node: Node;
 }): import("react").JSX.Element | null;

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

@@ -10,7 +10,7 @@ function TableActionNode({ node }) {
 	});
 	if (node.type === "action.group") return /* @__PURE__ */ jsx(ActionGroupComponent, {
 		node,
-		children: node.children?.map((childNode, index) => /* @__PURE__ */ jsx(TableActionNode, { node: childNode }, childNode.key ?? childNode.id ?? `${childNode.type}-${index}`)) ?? null
+		children: node.schema?.map((childNode, index) => /* @__PURE__ */ jsx(TableActionNode, { node: childNode }, childNode.key ?? childNode.id ?? `${childNode.type}-${index}`)) ?? null
 	});
 	if (node.type === "link") return /* @__PURE__ */ jsx(LinkComponent, {
 		node,

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.children?.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,UAAU,KAAK,WAAW,UAC9B,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.js

@@ -1,62 +1,33 @@
-import { copyToClipboard } from "../../clipboard/index.js";
-import { formatCell, resolveLink } from "../format.js";
-import { useEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Copy } from "lucide-react";
+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 }) {
-	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))
-	});
-	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]
 	});
 }
-function TextCell({ column, row, value }) {
-	const text = formatCell(value, column);
-	const [copied, setCopied] = useState(false);
-	const href = resolveLink(column, row, value);
-	const content = href ? /* @__PURE__ */ jsx("a", {
-		className: "underline underline-offset-2",
-		href,
-		rel: column.link?.external ? "noreferrer" : void 0,
-		target: column.link?.external ? "_blank" : void 0,
-		children: text
-	}) : text;
-	useEffect(() => {
-		if (!copied) return;
-		const timeout = window.setTimeout(() => setCopied(false), 1500);
-		return () => window.clearTimeout(timeout);
-	}, [copied]);
-	function handleCopy() {
-		copyToClipboard(text);
-		setCopied(true);
-	}
-	if (!column.copyable) return content;
-	return /* @__PURE__ */ jsxs("span", {
-		className: "inline-flex items-center gap-2",
-		children: [/* @__PURE__ */ jsx("span", { children: content }), /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs",
-			"aria-label": `${copied ? "Copied" : "Copy"} ${column.label}`,
-			onClick: handleCopy,
-			children: [copied ? /* @__PURE__ */ jsx(Check, {
-				"aria-hidden": "true",
-				className: "size-3"
-			}) : /* @__PURE__ */ jsx(Copy, {
-				"aria-hidden": "true",
-				className: "size-3"
-			}), copied ? "Copied" : "Copy"]
-		})]
-	});
-}
 //#endregion
 export { ColumnCell };
 

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 { copyToClipboard } from \"@lattice/lattice/clipboard\";\nimport { Check, Copy } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../format\";\nimport type { TableColumn, TableRow } from \"../types\";\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\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  return <TextCell column={column} row={row} value={row[column.key]} />;\n}\n\nfunction TextCell({ column, row, value }: { column: TableColumn; row: TableRow; value: unknown }) {\n  const text = formatCell(value, column);\n  const [copied, setCopied] = useState(false);\n  const href = resolveLink(column, row, value);\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={column.link?.external ? \"noreferrer\" : undefined}\n      target={column.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(text);\n    setCopied(true);\n  }\n\n  if (!column.copyable) {\n    return content;\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span>{content}</span>\n      <button\n        type=\"button\"\n        className=\"inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs\"\n        aria-label={`${copied ? \"Copied\" : \"Copy\"} ${column.label}`}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <Check aria-hidden=\"true\" className=\"size-3\" />\n        ) : (\n          <Copy aria-hidden=\"true\" className=\"size-3\" />\n        )}\n        {copied ? \"Copied\" : \"Copy\"}\n      </button>\n    </span>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAClF,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,OAAO,oBAAC,UAAD;EAAkB;EAAa;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AACtE;AAEA,SAAS,SAAS,EAAE,QAAQ,KAAK,SAAiE;CAChG,MAAM,OAAO,WAAW,OAAO,MAAM;CACrC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,OAAO,MAAM,WAAW,eAAe,KAAA;EAC5C,QAAQ,OAAO,MAAM,WAAW,WAAW,KAAA;YAE1C;CACA,CAAA,IAEH;CAGF,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,IAAI;EACzB,UAAU,IAAI;CAChB;CAEA,IAAI,CAAC,OAAO,UACV,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,GACrB,qBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,cAAY,GAAG,SAAS,WAAW,OAAO,GAAG,OAAO;GACpD,SAAS;aAJX,CAMG,SACC,oBAAC,OAAD;IAAO,eAAY;IAAO,WAAU;GAAU,CAAA,IAE9C,oBAAC,MAAD;IAAM,eAAY;IAAO,WAAU;GAAU,CAAA,GAE9C,SAAS,WAAW,MACf;IACJ;;AAEV"}
+{"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.d.ts

@@ -1,3 +1,7 @@
-import { RendererComponent } from '../../../../core/types';
-declare const TableComponent: RendererComponent<"table">;
+import { ReactNode } from 'react';
+import { TableNode } from '../types';
+declare const TableComponent: ({ node }: {
+    children?: ReactNode;
+    node: TableNode;
+}) => import("react").JSX.Element;
 export default TableComponent;

package/dist/table/components/table.js

@@ -1,28 +1,39 @@
+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 { getRowActions, getRowKey } from "../payload.js";
-import { getColumnGridTemplate, getQueryParams, getVisiblePages } from "../query.js";
+import { flattenColumns, getRowActions, getRowKey } from "../payload.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 } from "./filter-bar.js";
 import { FilterStackBar } from "./filter-stack-bar.js";
 import { TablePagination } from "./pagination.js";
 import { SortBar } from "./sort-bar.js";
 import { TableActionNode } from "./table-action-node.js";
 import { ColumnCell } from "./table-cell.js";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/table.tsx
 var TableComponent = ({ node }) => {
-	const { columns, rows, pagination, state, filters, addFilter, updateFilter, removeFilter, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
-	const bulkActions = getBulkActions(node.props?.bulkActions);
+	const { t } = useT("lattice");
+	const { columns, rows, pagination, state, filters, tableFilters, addFilter, updateFilter, removeFilter, 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 = rows.map((row, index) => ({
+	const rowEntries = useMemo(() => rows.map((row, index) => ({
 		row,
 		actions: getRowActions(row),
 		key: getRowKey(row, index)
-	}));
+	})), [rows]);
 	const selection = useTableSelection(rowEntries.map((entry) => entry.key));
+	const columnsByKey = useMemo(() => new Map(flattenColumns(columns).map((column) => [column.key, column])), [columns]);
 	const currentPage = pagination.currentPage ?? state.page;
 	const lastPage = pagination.lastPage ?? currentPage;
 	const mode = pagination.mode ?? "table";
@@ -35,152 +46,203 @@ var TableComponent = ({ node }) => {
 		clause,
 		index
 	}));
-	const gridTemplateColumns = getColumnGridTemplate(columns, hasActions, hasBulkActions);
+	const filterDefinitions = useMemo(() => Array.isArray(node.props?.filters) ? node.props.filters : [], [node.props?.filters]);
+	const hasActiveFilters = filters.length > 0 || Object.keys(tableFilters).length > 0;
+	const sizingColumns = useMemo(() => getTableSizingColumns(columns), [columns]);
+	const utilityTracks = useMemo(() => getTableUtilityTracks(hasActions, hasBulkActions), [hasActions, 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,
-				columns,
-				processing,
-				onRemove: removeFilter
-			}),
-			state.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
-				columns,
-				state,
-				processing,
-				onClear: clearSort
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "w-max 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: [
+				filterDefinitions.length > 0 && /* @__PURE__ */ jsx(FilterBar, {
+					filters: filterDefinitions,
+					values: tableFilters,
+					processing,
+					hasActiveFilters,
+					onChange: setTableFilter,
+					onReset: resetFilters,
+					onSearch: searchFilterOptions
+				}),
+				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-sm",
+					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": "Select all rows",
-									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: "Actions"
-							})
-						]
-					}), 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: "px-4 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)),
+								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
+									})
 								})
-							}, 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: "Loading rows..."
-						})
-					}) : 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": `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 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(ColumnCell, {
+									children: column.filter?.enabled && /* @__PURE__ */ jsx(ColumnFilterControl, {
 										column,
-										row
-									})]
+										clauses: filterEntries.filter((entry) => entry.clause.field === column.key),
+										processing,
+										onAdd: addFilter,
+										onUpdate: updateFilter,
+										onRemove: removeFilter,
+										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))
+								hasActions && /* @__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 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", {
+											className: "min-w-0 truncate",
+											children: /* @__PURE__ */ jsx(ColumnCell, {
+												column,
+												row
+											})
+										})]
+									}, 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))
+									})
+								]
+							}, key);
+						})
+					})]
+				}),
+				hasLoaded && /* @__PURE__ */ jsx(TablePagination, {
+					pagination,
+					currentPage,
+					processing,
+					mode,
+					hasNextPage,
+					visiblePages,
+					infiniteLoaderRef,
+					onPage: goToPage,
+					onLoadMore: loadMore
+				})
+			]
+		})]
 	});
 };
 //#endregion