@lattice-php/lattice 0.1.0 → 0.2.0

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 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"}

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,5 +1,6 @@
+import { useT } from "../../i18n/instance.js";
 import { getBulkActions } from "../bulk.js";
-import { getRowActions, getRowKey } from "../payload.js";
+import { flattenColumns, getRowActions, getRowKey } from "../payload.js";
 import { getColumnGridTemplate, getQueryParams, getVisiblePages } from "../query.js";
 import { useTableSelection } from "../use-table-selection.js";
 import { useTable } from "../use-table.js";
@@ -11,18 +12,21 @@ 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 { t } = useT("lattice");
 	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 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,7 +39,11 @@ var TableComponent = ({ node }) => {
 		clause,
 		index
 	}));
-	const gridTemplateColumns = getColumnGridTemplate(columns, hasActions, hasBulkActions);
+	const gridTemplateColumns = useMemo(() => getColumnGridTemplate(columns, hasActions, hasBulkActions), [
+		columns,
+		hasActions,
+		hasBulkActions
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-lattice-component": node.id,
 		className: "overflow-x-auto rounded-lt-sm border border-lt-border",
@@ -52,18 +60,18 @@ var TableComponent = ({ node }) => {
 			}),
 			filters.length > 0 && /* @__PURE__ */ jsx(FilterStackBar, {
 				filters,
-				columns,
+				columnsByKey,
 				processing,
 				onRemove: removeFilter
 			}),
 			state.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
-				columns,
+				columnsByKey,
 				state,
 				processing,
 				onClear: clearSort
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "w-max min-w-full text-sm",
+				className: "min-w-full text-sm",
 				role: "table",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "border-b border-lt-border bg-lt-muted/50",
@@ -78,7 +86,8 @@ var TableComponent = ({ node }) => {
 								role: "columnheader",
 								children: /* @__PURE__ */ jsx("input", {
 									type: "checkbox",
-									"aria-label": "Select all rows",
+									"aria-label": t("a11y.selectAllRows", "Select all rows"),
+									"data-test": "select-all",
 									checked: selection.allSelected,
 									onChange: selection.toggleAll
 								})
@@ -92,7 +101,10 @@ var TableComponent = ({ node }) => {
 							hasActions && /* @__PURE__ */ jsx("div", {
 								className: "px-4 py-3 text-right align-middle font-medium text-lt-muted-fg",
 								role: "columnheader",
-								children: "Actions"
+								children: /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: node.props?.actionsLabel
+								})
 							})
 						]
 					}), hasFilters && /* @__PURE__ */ jsxs("div", {
@@ -105,7 +117,7 @@ var TableComponent = ({ node }) => {
 								role: "cell"
 							}),
 							columns.map((column) => /* @__PURE__ */ jsx("div", {
-								className: "px-4 py-2",
+								className: "min-w-0 px-2 py-2",
 								role: "cell",
 								children: column.filter?.enabled && /* @__PURE__ */ jsx(ColumnFilterControl, {
 									column,
@@ -129,7 +141,14 @@ var TableComponent = ({ node }) => {
 						role: "row",
 						children: /* @__PURE__ */ jsx("div", {
 							role: "cell",
-							children: "Loading rows..."
+							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", {
@@ -142,21 +161,25 @@ var TableComponent = ({ node }) => {
 									role: "cell",
 									children: /* @__PURE__ */ jsx("input", {
 										type: "checkbox",
-										"aria-label": `Select row ${key}`,
+										"aria-label": t("a11y.selectRow", "Select row {{key}}", { key }),
+										"data-test": `select-row-${key}`,
 										checked: selection.isSelected(key),
 										onChange: () => selection.toggle(key)
 									})
 								}),
 								columns.map((column) => /* @__PURE__ */ jsxs("div", {
-									className: "grid gap-1 p-4 align-middle",
+									className: "grid min-w-0 gap-1 p-4 align-middle",
 									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, {
-										column,
-										row
+									}), /* @__PURE__ */ jsx("div", {
+										className: "min-w-0 truncate",
+										children: /* @__PURE__ */ jsx(ColumnCell, {
+											column,
+											row
+										})
 									})]
 								}, column.key)),
 								actions.length > 0 && /* @__PURE__ */ jsx("div", {

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 { RendererComponent } from \"@lattice/lattice/core/types\";\nimport { getBulkActions } from \"../bulk\";\nimport { 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: RendererComponent<\"table\"> = ({ node }) => {\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 = getBulkActions(node.props?.bulkActions);\n  const hasBulkActions = bulkActions.length > 0;\n  const rowEntries = rows.map((row, index) => ({\n    row,\n    actions: getRowActions(row),\n    key: getRowKey(row, index),\n  }));\n  const selection = useTableSelection(rowEntries.map((entry) => entry.key));\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 = getColumnGridTemplate(columns, hasActions, hasBulkActions);\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          columns={columns}\n          processing={processing}\n          onRemove={removeFilter}\n        />\n      )}\n      {state.sorts.length > 0 && (\n        <SortBar columns={columns} state={state} processing={processing} onClear={clearSort} />\n      )}\n      <div className=\"w-max 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=\"Select all rows\"\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                Actions\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=\"px-4 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\">Loading rows...</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={`Select row ${key}`}\n                        checked={selection.isSelected(key)}\n                        onChange={() => selection.toggle(key)}\n                      />\n                    </div>\n                  )}\n                  {columns.map((column) => (\n                    <div key={column.key} className=\"grid gap-1 p-4 align-middle\" role=\"cell\">\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                      <ColumnCell column={column} row={row} />\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/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":";;;;;;;;;;;;;;;;;AAiBA,IAAM,kBAAkB,EAAE,WAAsD;CAC9E,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,EACJ,SACA,MACA,YACA,OACA,SACA,WACA,cACA,cACA,YACA,WACA,mBACA,MACA,WACA,UACA,aACE,SAAS,IAAI;CAEjB,MAAM,cAAc,cACZ,eAAe,KAAK,OAAO,WAAW,GAC5C,CAAC,KAAK,OAAO,WAAW,CAC1B;CACA,MAAM,iBAAiB,YAAY,SAAS;CAC5C,MAAM,aAAa,cAEf,KAAK,KAAK,KAAK,WAAW;EAAE;EAAK,SAAS,cAAc,GAAG;EAAG,KAAK,UAAU,KAAK,KAAK;CAAE,EAAE,GAC7F,CAAC,IAAI,CACP;CACA,MAAM,YAAY,kBAAkB,WAAW,KAAK,UAAU,MAAM,GAAG,CAAC;CAExE,MAAM,eAAe,cACb,IAAI,IAAI,eAAe,OAAO,EAAE,KAAK,WAAW,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,GAC3E,CAAC,OAAO,CACV;CACA,MAAM,cAAc,WAAW,eAAe,MAAM;CACpD,MAAM,WAAW,WAAW,YAAY;CACxC,MAAM,OAAO,WAAW,QAAQ;CAChC,MAAM,eAAe,gBAAgB,aAAa,QAAQ;CAC1D,MAAM,cAAc,WAAW,WAAW,cAAc;CACxD,MAAM,aAAa,WAAW,MAAM,UAAU,MAAM,QAAQ,SAAS,CAAC;CACtE,MAAM,UAAU,KAAK,OAAO,YAAY;CACxC,MAAM,aAAa,QAAQ,MAAM,WAAW,OAAO,QAAQ,OAAO;CAClE,MAAM,gBAAgB,QAAQ,KAAK,QAAQ,WAAW;EAAE;EAAQ;CAAM,EAAE;CACxE,MAAM,sBAAsB,cACpB,sBAAsB,SAAS,YAAY,cAAc,GAC/D;EAAC;EAAS;EAAY;CAAc,CACtC;CAEA,OACE,qBAAC,OAAD;EACE,0BAAwB,KAAK;EAC7B,WAAU;YAFZ;GAIG,kBAAkB,UAAU,UAC3B,oBAAC,SAAD;IACE,SAAS;IACT,cAAc,UAAU;IACxB,aAAa,UAAU;IACvB,OAAO,WAAW;IAClB,OAAO,eAAe,KAAK;IAC3B,sBACE,UAAU,sBACV,CAAC,UAAU,eACX,WAAW,UAAU,KAAA,KACrB,WAAW,QAAQ,UAAU,aAAa;IAE5C,qBAAqB,UAAU;IAC/B,aAAa,UAAU;GACxB,CAAA;GAEF,QAAQ,SAAS,KAChB,oBAAC,gBAAD;IACW;IACK;IACF;IACZ,UAAU;GACX,CAAA;GAEF,MAAM,MAAM,SAAS,KACpB,oBAAC,SAAD;IACgB;IACP;IACK;IACZ,SAAS;GACV,CAAA;GAEH,qBAAC,OAAD;IAAK,WAAU;IAAqB,MAAK;cAAzC,CACE,qBAAC,OAAD;KAAK,WAAU;KAA2C,MAAK;eAA/D,CACE,qBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,OAAO,EAAE,2BAA2B,oBAAoB;gBAH1D;OAKG,kBACC,oBAAC,OAAD;QAAK,WAAU;QAA8B,MAAK;kBAChD,oBAAC,SAAD;SACE,MAAK;SACL,cAAY,EAAE,sBAAsB,iBAAiB;SACrD,aAAU;SACV,SAAS,UAAU;SACnB,UAAU,UAAU;QACrB,CAAA;OACE,CAAA;OAEN,QAAQ,KAAK,WACZ,oBAAC,cAAD;QACU;QAEI;QACN;QACC;OACR,GAJM,OAAO,GAIb,CACF;OACA,cACC,oBAAC,OAAD;QACE,WAAU;QACV,MAAK;kBAEL,oBAAC,QAAD;SAAM,WAAU;mBAAW,KAAK,OAAO;QAAmB,CAAA;OACvD,CAAA;MAEJ;SACJ,cACC,qBAAC,OAAD;MACE,WAAU;MACV,MAAK;MACL,OAAO,EAAE,2BAA2B,oBAAoB;gBAH1D;OAKG,kBAAkB,oBAAC,OAAD;QAAK,WAAU;QAAY,MAAK;OAAQ,CAAA;OAC1D,QAAQ,KAAK,WACZ,oBAAC,OAAD;QAAsB,WAAU;QAAoB,MAAK;kBACtD,OAAO,QAAQ,WACd,oBAAC,qBAAD;SACU;SACR,SAAS,cAAc,QAAQ,UAAU,MAAM,OAAO,UAAU,OAAO,GAAG;SAC9D;SACZ,OAAO;SACP,UAAU;SACV,UAAU;QACX,CAAA;OAEA,GAXK,OAAO,GAWZ,CACN;OACA,cAAc,oBAAC,OAAD;QAAK,WAAU;QAAY,MAAK;OAAQ,CAAA;MACpD;OAEJ;QACL,oBAAC,OAAD;KAAK,MAAK;eACP,CAAC,YACA,oBAAC,OAAD;MAAK,WAAU;MAAuB,MAAK;gBACzC,oBAAC,OAAD;OAAK,MAAK;iBAAQ,EAAE,iBAAiB,iBAAiB;MAAO,CAAA;KAC1D,CAAA,IACH,WAAW,WAAW,IACxB,oBAAC,OAAD;MAAK,WAAU;MAAmC,MAAK;gBACrD,oBAAC,OAAD;OAAK,MAAK;iBAAQ,KAAK,OAAO;MAAgB,CAAA;KAC3C,CAAA,IAEL,WAAW,KAAK,EAAE,KAAK,SAAS,UAAU;MACxC,OACE,qBAAC,OAAD;OAEE,WAAW,0GACT,UAAU,uBAAuB;OAEnC,MAAK;OACL,OAAO,EAAE,2BAA2B,oBAAoB;iBAN1D;QAQG,kBACC,oBAAC,OAAD;SAAK,WAAU;SAAwB,MAAK;mBAC1C,oBAAC,SAAD;UACE,MAAK;UACL,cAAY,EAAE,kBAAkB,sBAAsB,EAAE,IAAI,CAAC;UAC7D,aAAW,cAAc;UACzB,SAAS,UAAU,WAAW,GAAG;UACjC,gBAAgB,UAAU,OAAO,GAAG;SACrC,CAAA;QACE,CAAA;QAEN,QAAQ,KAAK,WACZ,qBAAC,OAAD;SAEE,WAAU;SACV,MAAK;mBAHP,CAKE,oBAAC,QAAD;UACE,eAAY;UACZ,WAAU;oBAET,OAAO;SACJ,CAAA,GACN,oBAAC,OAAD;UAAK,WAAU;oBACb,oBAAC,YAAD;WAAoB;WAAa;UAAM,CAAA;SACpC,CAAA,CACF;WAbE,OAAO,GAaT,CACN;QACA,QAAQ,SAAS,KAChB,oBAAC,OAAD;SACE,WAAU;SACV,MAAK;mBAEJ,QAAQ,KAAK,QAAQ,gBACpB,oBAAC,iBAAD,EAEE,MAAM,OACP,GAFM,OAAO,OAAO,OAAO,MAAM,WAEjC,CACF;QACE,CAAA;OAEJ;SAhDE,GAgDF;KAET,CAAC;IAEA,CAAA,CACF;;GACJ,aACC,oBAAC,iBAAD;IACc;IACC;IACD;IACN;IACO;IACC;IACK;IACnB,QAAQ;IACR,YAAY;GACb,CAAA;EAEA;;AAET"}

package/dist/table/format.js

@@ -1,7 +1,8 @@
 //#region resources/js/table/format.ts
 function formatCell(value, column) {
 	if (value === null || value === void 0) return "";
-	if (column?.date) return formatDate(value, column.date.format ?? null);
+	const date = (column?.props)?.date;
+	if (date) return formatDate(value, date.format ?? null);
 	if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
 	return JSON.stringify(value);
 }
@@ -27,8 +28,9 @@ function formatDate(value, format) {
 	return format.replace(/[YymndjHGis]/g, (token) => replacements[token] ?? token);
 }
 function resolveLink(column, row, value) {
-	if (!column.link) return null;
-	const href = column.link.href ?? String(value ?? "");
+	const link = column.props?.link;
+	if (!link) return null;
+	const href = link.href ?? String(value ?? "");
 	if (href === "") return null;
 	return href.replace(/\{([^}]+)\}/g, (_, key) => {
 		if (key === "value") return encodeURIComponent(String(value ?? ""));

package/dist/table/format.js.map

@@ -1 +1 @@
-{"version":3,"file":"format.js","names":[],"sources":["../../resources/js/table/format.ts"],"sourcesContent":["import type { TableColumn, TableRow } from \"./types\";\n\nexport function formatCell(value: unknown, column?: TableColumn): string {\n  if (value === null || value === undefined) {\n    return \"\";\n  }\n\n  if (column?.date) {\n    return formatDate(value, column.date.format ?? null);\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\" || typeof value === \"boolean\") {\n    return String(value);\n  }\n\n  return JSON.stringify(value);\n}\n\nfunction formatDate(value: unknown, format: string | null): string {\n  const date = new Date(String(value));\n\n  if (Number.isNaN(date.getTime())) {\n    return formatCell(value);\n  }\n\n  if (!format) {\n    return new Intl.DateTimeFormat(undefined, {\n      dateStyle: \"medium\",\n      timeStyle: \"short\",\n    }).format(date);\n  }\n\n  const replacements: Record<string, string> = {\n    Y: String(date.getFullYear()),\n    y: String(date.getFullYear()).slice(-2),\n    m: String(date.getMonth() + 1).padStart(2, \"0\"),\n    n: String(date.getMonth() + 1),\n    d: String(date.getDate()).padStart(2, \"0\"),\n    j: String(date.getDate()),\n    H: String(date.getHours()).padStart(2, \"0\"),\n    G: String(date.getHours()),\n    i: String(date.getMinutes()).padStart(2, \"0\"),\n    s: String(date.getSeconds()).padStart(2, \"0\"),\n  };\n\n  return format.replace(/[YymndjHGis]/g, (token) => replacements[token] ?? token);\n}\n\nexport function resolveLink(column: TableColumn, row: TableRow, value: unknown): string | null {\n  if (!column.link) {\n    return null;\n  }\n\n  const href = column.link.href ?? String(value ?? \"\");\n\n  if (href === \"\") {\n    return null;\n  }\n\n  return href.replace(/\\{([^}]+)\\}/g, (_, key: string) => {\n    if (key === \"value\") {\n      return encodeURIComponent(String(value ?? \"\"));\n    }\n\n    return encodeURIComponent(String(row[key] ?? \"\"));\n  });\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAAgB,QAA8B;CACvE,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO;CAGT,IAAI,QAAQ,MACV,OAAO,WAAW,OAAO,OAAO,KAAK,UAAU,IAAI;CAGrD,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,YAAY,OAAO,UAAU,WAC7E,OAAO,OAAO,KAAK;CAGrB,OAAO,KAAK,UAAU,KAAK;AAC7B;AAEA,SAAS,WAAW,OAAgB,QAA+B;CACjE,MAAM,OAAO,IAAI,KAAK,OAAO,KAAK,CAAC;CAEnC,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B,OAAO,WAAW,KAAK;CAGzB,IAAI,CAAC,QACH,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;EACxC,WAAW;EACX,WAAW;CACb,CAAC,EAAE,OAAO,IAAI;CAGhB,MAAM,eAAuC;EAC3C,GAAG,OAAO,KAAK,YAAY,CAAC;EAC5B,GAAG,OAAO,KAAK,YAAY,CAAC,EAAE,MAAM,EAAE;EACtC,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;EAC9C,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC;EAC7B,GAAG,OAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;EACzC,GAAG,OAAO,KAAK,QAAQ,CAAC;EACxB,GAAG,OAAO,KAAK,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;EAC1C,GAAG,OAAO,KAAK,SAAS,CAAC;EACzB,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;EAC5C,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;CAC9C;CAEA,OAAO,OAAO,QAAQ,kBAAkB,UAAU,aAAa,UAAU,KAAK;AAChF;AAEA,SAAgB,YAAY,QAAqB,KAAe,OAA+B;CAC7F,IAAI,CAAC,OAAO,MACV,OAAO;CAGT,MAAM,OAAO,OAAO,KAAK,QAAQ,OAAO,SAAS,EAAE;CAEnD,IAAI,SAAS,IACX,OAAO;CAGT,OAAO,KAAK,QAAQ,iBAAiB,GAAG,QAAgB;EACtD,IAAI,QAAQ,SACV,OAAO,mBAAmB,OAAO,SAAS,EAAE,CAAC;EAG/C,OAAO,mBAAmB,OAAO,IAAI,QAAQ,EAAE,CAAC;CAClD,CAAC;AACH"}
+{"version":3,"file":"format.js","names":[],"sources":["../../resources/js/table/format.ts"],"sourcesContent":["import type { TextColumnProps } from \"@lattice/lattice/types/generated\";\nimport type { TableColumn, TableRow } from \"./types\";\n\nexport function formatCell(value: unknown, column?: TableColumn): string {\n  if (value === null || value === undefined) {\n    return \"\";\n  }\n\n  const date = (column?.props as TextColumnProps | null)?.date;\n\n  if (date) {\n    return formatDate(value, date.format ?? null);\n  }\n\n  if (typeof value === \"string\" || typeof value === \"number\" || typeof value === \"boolean\") {\n    return String(value);\n  }\n\n  return JSON.stringify(value);\n}\n\nfunction formatDate(value: unknown, format: string | null): string {\n  const date = new Date(String(value));\n\n  if (Number.isNaN(date.getTime())) {\n    return formatCell(value);\n  }\n\n  if (!format) {\n    return new Intl.DateTimeFormat(undefined, {\n      dateStyle: \"medium\",\n      timeStyle: \"short\",\n    }).format(date);\n  }\n\n  const replacements: Record<string, string> = {\n    Y: String(date.getFullYear()),\n    y: String(date.getFullYear()).slice(-2),\n    m: String(date.getMonth() + 1).padStart(2, \"0\"),\n    n: String(date.getMonth() + 1),\n    d: String(date.getDate()).padStart(2, \"0\"),\n    j: String(date.getDate()),\n    H: String(date.getHours()).padStart(2, \"0\"),\n    G: String(date.getHours()),\n    i: String(date.getMinutes()).padStart(2, \"0\"),\n    s: String(date.getSeconds()).padStart(2, \"0\"),\n  };\n\n  return format.replace(/[YymndjHGis]/g, (token) => replacements[token] ?? token);\n}\n\nexport function resolveLink(column: TableColumn, row: TableRow, value: unknown): string | null {\n  const link = (column.props as TextColumnProps | null)?.link;\n\n  if (!link) {\n    return null;\n  }\n\n  const href = link.href ?? String(value ?? \"\");\n\n  if (href === \"\") {\n    return null;\n  }\n\n  return href.replace(/\\{([^}]+)\\}/g, (_, key: string) => {\n    if (key === \"value\") {\n      return encodeURIComponent(String(value ?? \"\"));\n    }\n\n    return encodeURIComponent(String(row[key] ?? \"\"));\n  });\n}\n"],"mappings":";AAGA,SAAgB,WAAW,OAAgB,QAA8B;CACvE,IAAI,UAAU,QAAQ,UAAU,KAAA,GAC9B,OAAO;CAGT,MAAM,QAAQ,QAAQ,QAAkC;CAExD,IAAI,MACF,OAAO,WAAW,OAAO,KAAK,UAAU,IAAI;CAG9C,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,YAAY,OAAO,UAAU,WAC7E,OAAO,OAAO,KAAK;CAGrB,OAAO,KAAK,UAAU,KAAK;AAC7B;AAEA,SAAS,WAAW,OAAgB,QAA+B;CACjE,MAAM,OAAO,IAAI,KAAK,OAAO,KAAK,CAAC;CAEnC,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,GAC7B,OAAO,WAAW,KAAK;CAGzB,IAAI,CAAC,QACH,OAAO,IAAI,KAAK,eAAe,KAAA,GAAW;EACxC,WAAW;EACX,WAAW;CACb,CAAC,EAAE,OAAO,IAAI;CAGhB,MAAM,eAAuC;EAC3C,GAAG,OAAO,KAAK,YAAY,CAAC;EAC5B,GAAG,OAAO,KAAK,YAAY,CAAC,EAAE,MAAM,EAAE;EACtC,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG;EAC9C,GAAG,OAAO,KAAK,SAAS,IAAI,CAAC;EAC7B,GAAG,OAAO,KAAK,QAAQ,CAAC,EAAE,SAAS,GAAG,GAAG;EACzC,GAAG,OAAO,KAAK,QAAQ,CAAC;EACxB,GAAG,OAAO,KAAK,SAAS,CAAC,EAAE,SAAS,GAAG,GAAG;EAC1C,GAAG,OAAO,KAAK,SAAS,CAAC;EACzB,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;EAC5C,GAAG,OAAO,KAAK,WAAW,CAAC,EAAE,SAAS,GAAG,GAAG;CAC9C;CAEA,OAAO,OAAO,QAAQ,kBAAkB,UAAU,aAAa,UAAU,KAAK;AAChF;AAEA,SAAgB,YAAY,QAAqB,KAAe,OAA+B;CAC7F,MAAM,OAAQ,OAAO,OAAkC;CAEvD,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,OAAO,KAAK,QAAQ,OAAO,SAAS,EAAE;CAE5C,IAAI,SAAS,IACX,OAAO;CAGT,OAAO,KAAK,QAAQ,iBAAiB,GAAG,QAAgB;EACtD,IAAI,QAAQ,SACV,OAAO,mBAAmB,OAAO,SAAS,EAAE,CAAC;EAG/C,OAAO,mBAAmB,OAAO,IAAI,QAAQ,EAAE,CAAC;CAClD,CAAC;AACH"}

package/dist/table/index.d.ts

@@ -1 +1 @@
-export declare const tableComponents: import('../../../core/registry').Plugin;
+export declare const tableComponents: import('../core/registry').Plugin;

package/dist/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/table/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice/lattice/core/registry\";\n\nexport const tableComponents = createPlugin({\n  components: {\n    table: lazyComponent(() => import(\"./components/table\")),\n  },\n  name: \"lattice/table\",\n});\n"],"mappings":";;AAEA,IAAa,kBAAkB,aAAa;CAC1C,YAAY,EACV,OAAO,oBAAoB,OAAO,wBAAqB,EACzD;CACA,MAAM;AACR,CAAC"}
+{"version":3,"file":"index.js","names":[],"sources":["../../resources/js/table/index.ts"],"sourcesContent":["import { createPlugin, lazyComponent } from \"@lattice/lattice/core/registry\";\nimport type { RendererComponentModule } from \"@lattice/lattice/core/types\";\n\nexport const tableComponents = createPlugin({\n  components: {\n    // The table renders an enriched TableNode (rows/pagination/state the server\n    // hydrates onto it); the registry erases per-component node types here.\n    table: lazyComponent(\n      () => import(\"./components/table\") as unknown as Promise<RendererComponentModule<\"table\">>,\n    ),\n  },\n  name: \"lattice/table\",\n});\n"],"mappings":";;AAGA,IAAa,kBAAkB,aAAa;CAC1C,YAAY,EAGV,OAAO,oBACC,OAAO,wBACf,EACF;CACA,MAAM;AACR,CAAC"}

package/dist/table/payload.d.ts

@@ -1,4 +1,4 @@
-import { Node } from '../../../core/types';
+import { Node } from '../core/types';
 import { TableColumn, TablePagination, TableRow, TableState } from './types';
 export declare function getColumns(value: unknown): TableColumn[];
 export declare function getRows(value: unknown): TableRow[];

package/dist/table/query.d.ts

@@ -1,6 +1,5 @@
 import { TableColumn, TableSort, TableState } from './types';
 export declare function getColumnSort(state: TableState, column: TableColumn): TableSort | undefined;
-export declare function getSortColumn(columns: TableColumn[], sort: TableSort): TableColumn | undefined;
 export declare function getColumnAriaSort(sort: TableSort | undefined): "ascending" | "descending" | undefined;
 export declare function buildEndpoint(endpoint: string, state: TableState): string;
 export declare function getQueryParams(state: TableState): Record<string, unknown>;

package/dist/table/query.js

@@ -1,11 +1,8 @@
-import { flattenColumns } from "./payload.js";
+import { translate } from "../i18n/instance.js";
 //#region resources/js/table/query.ts
 function getColumnSort(state, column) {
 	return state.sorts.find((currentSort) => currentSort.key === column.key);
 }
-function getSortColumn(columns, sort) {
-	return flattenColumns(columns).find((column) => column.key === sort.key);
-}
 function getColumnAriaSort(sort) {
 	if (sort?.direction === "asc") return "ascending";
 	if (sort?.direction === "desc") return "descending";
@@ -40,6 +37,8 @@ var operatorLabels = {
 	gte: "≥",
 	lt: "<",
 	lte: "≤",
+	in: "in",
+	not_in: "not in",
 	before: "before",
 	after: "after",
 	empty: "is empty",
@@ -47,7 +46,7 @@ var operatorLabels = {
 };
 var VALUELESS_FILTER_OPERATORS = new Set(["empty", "filled"]);
 function operatorLabel(operator) {
-	return operatorLabels[operator] ?? operator;
+	return translate("lattice", `operators.${operator}`, operatorLabels[operator] ?? operator);
 }
 function getSortDirectionLabel(direction) {
 	return direction === "desc" ? "descending" : "ascending";
@@ -72,12 +71,12 @@ function getVisiblePages(currentPage, lastPage) {
 	return Array.from({ length: 5 }, (_, index) => start + index);
 }
 function getColumnGridTemplate(columns, hasActions, hasSelection) {
-	const tracks = columns.map((column) => column.type === "stack" ? "minmax(16rem, 2fr)" : "minmax(9rem, 1fr)");
-	if (hasActions) tracks.push("max-content");
-	if (hasSelection) tracks.unshift("max-content");
+	const tracks = columns.map((column) => column.type === "stack" ? "minmax(13rem, 2fr)" : "minmax(7rem, 1fr)");
+	if (hasActions) tracks.push("10rem");
+	if (hasSelection) tracks.unshift("3rem");
 	return tracks.join(" ");
 }
 //#endregion
-export { VALUELESS_FILTER_OPERATORS, buildEndpoint, getColumnAriaSort, getColumnGridTemplate, getColumnSort, getQueryParams, getSortColumn, getSortDirectionLabel, getVisiblePages, nextSort, operatorLabel };
+export { VALUELESS_FILTER_OPERATORS, buildEndpoint, getColumnAriaSort, getColumnGridTemplate, getColumnSort, getQueryParams, getSortDirectionLabel, getVisiblePages, nextSort, operatorLabel };
 
 //# sourceMappingURL=query.js.map

package/dist/table/query.js.map

@@ -1 +1 @@
-{"version":3,"file":"query.js","names":[],"sources":["../../resources/js/table/query.ts"],"sourcesContent":["import { flattenColumns } from \"./payload\";\nimport type { TableColumn, TableSort, TableState } from \"./types\";\n\nexport function getColumnSort(state: TableState, column: TableColumn): TableSort | undefined {\n  return state.sorts.find((currentSort) => currentSort.key === column.key);\n}\n\nexport function getSortColumn(columns: TableColumn[], sort: TableSort): TableColumn | undefined {\n  return flattenColumns(columns).find((column) => column.key === sort.key);\n}\n\nexport function getColumnAriaSort(\n  sort: TableSort | undefined,\n): \"ascending\" | \"descending\" | undefined {\n  if (sort?.direction === \"asc\") {\n    return \"ascending\";\n  }\n\n  if (sort?.direction === \"desc\") {\n    return \"descending\";\n  }\n\n  return undefined;\n}\n\nexport function buildEndpoint(endpoint: string, state: TableState): string {\n  const url = new URL(endpoint, window.location.origin);\n\n  if (state.filters.length > 0) {\n    url.searchParams.set(\"filter\", serializeFilters(state));\n  }\n\n  if (state.sorts.length > 0) {\n    url.searchParams.set(\"sort\", serializeSorts(state));\n  }\n\n  url.searchParams.set(\"page\", String(state.page));\n  url.searchParams.set(\"per_page\", String(state.perPage));\n\n  return `${url.pathname}${url.search}`;\n}\n\nexport function getQueryParams(state: TableState): Record<string, unknown> {\n  const params: Record<string, unknown> = {};\n\n  if (state.filters.length > 0) {\n    params.filter = serializeFilters(state);\n  }\n\n  if (state.sorts.length > 0) {\n    params.sort = serializeSorts(state);\n  }\n\n  return params;\n}\n\nfunction serializeFilters(state: TableState): string {\n  return state.filters\n    .map((clause) => `${clause.field}:${clause.operator}:${encodeURIComponent(clause.value)}`)\n    .join(\",\");\n}\n\nfunction serializeSorts(state: TableState): string {\n  return state.sorts\n    .map((sort) => (sort.direction === \"desc\" ? `-${sort.key}` : sort.key))\n    .join(\",\");\n}\n\nconst operatorLabels: Record<string, string> = {\n  contains: \"contains\",\n  starts_with: \"starts with\",\n  ends_with: \"ends with\",\n  eq: \"equals\",\n  neq: \"not equals\",\n  gt: \">\",\n  gte: \"≥\",\n  lt: \"<\",\n  lte: \"≤\",\n  before: \"before\",\n  after: \"after\",\n  empty: \"is empty\",\n  filled: \"is not empty\",\n};\n\n// Operators that filter on presence alone and carry no value input.\nexport const VALUELESS_FILTER_OPERATORS = new Set<string>([\"empty\", \"filled\"]);\n\nexport function operatorLabel(operator: string): string {\n  return operatorLabels[operator] ?? operator;\n}\n\nexport function getSortDirectionLabel(direction: string): string {\n  return direction === \"desc\" ? \"descending\" : \"ascending\";\n}\n\nexport function nextSort(sorts: TableSort[], column: TableColumn): TableSort[] {\n  if (!column.sortable) {\n    return sorts;\n  }\n\n  const currentSort = sorts.find((sort) => sort.key === column.key);\n  const remainingSorts = sorts.filter((sort) => sort.key !== column.key);\n\n  if (!currentSort) {\n    return [...sorts, { key: column.key, direction: \"asc\" }];\n  }\n\n  if (currentSort.direction === \"asc\") {\n    return [...remainingSorts, { key: column.key, direction: \"desc\" }];\n  }\n\n  return remainingSorts;\n}\n\nexport function getVisiblePages(currentPage: number, lastPage: number): number[] {\n  if (lastPage <= 5) {\n    return Array.from({ length: lastPage }, (_, index) => index + 1);\n  }\n\n  const start = Math.max(1, Math.min(currentPage - 2, lastPage - 4));\n\n  return Array.from({ length: 5 }, (_, index) => start + index);\n}\n\nexport function getColumnGridTemplate(\n  columns: TableColumn[],\n  hasActions: boolean,\n  hasSelection: boolean,\n): string {\n  const tracks: string[] = columns.map((column) =>\n    column.type === \"stack\" ? \"minmax(16rem, 2fr)\" : \"minmax(9rem, 1fr)\",\n  );\n\n  if (hasActions) {\n    tracks.push(\"max-content\");\n  }\n\n  if (hasSelection) {\n    tracks.unshift(\"max-content\");\n  }\n\n  return tracks.join(\" \");\n}\n"],"mappings":";;AAGA,SAAgB,cAAc,OAAmB,QAA4C;CAC3F,OAAO,MAAM,MAAM,MAAM,gBAAgB,YAAY,QAAQ,OAAO,GAAG;AACzE;AAEA,SAAgB,cAAc,SAAwB,MAA0C;CAC9F,OAAO,eAAe,OAAO,EAAE,MAAM,WAAW,OAAO,QAAQ,KAAK,GAAG;AACzE;AAEA,SAAgB,kBACd,MACwC;CACxC,IAAI,MAAM,cAAc,OACtB,OAAO;CAGT,IAAI,MAAM,cAAc,QACtB,OAAO;AAIX;AAEA,SAAgB,cAAc,UAAkB,OAA2B;CACzE,MAAM,MAAM,IAAI,IAAI,UAAU,OAAO,SAAS,MAAM;CAEpD,IAAI,MAAM,QAAQ,SAAS,GACzB,IAAI,aAAa,IAAI,UAAU,iBAAiB,KAAK,CAAC;CAGxD,IAAI,MAAM,MAAM,SAAS,GACvB,IAAI,aAAa,IAAI,QAAQ,eAAe,KAAK,CAAC;CAGpD,IAAI,aAAa,IAAI,QAAQ,OAAO,MAAM,IAAI,CAAC;CAC/C,IAAI,aAAa,IAAI,YAAY,OAAO,MAAM,OAAO,CAAC;CAEtD,OAAO,GAAG,IAAI,WAAW,IAAI;AAC/B;AAEA,SAAgB,eAAe,OAA4C;CACzE,MAAM,SAAkC,CAAC;CAEzC,IAAI,MAAM,QAAQ,SAAS,GACzB,OAAO,SAAS,iBAAiB,KAAK;CAGxC,IAAI,MAAM,MAAM,SAAS,GACvB,OAAO,OAAO,eAAe,KAAK;CAGpC,OAAO;AACT;AAEA,SAAS,iBAAiB,OAA2B;CACnD,OAAO,MAAM,QACV,KAAK,WAAW,GAAG,OAAO,MAAM,GAAG,OAAO,SAAS,GAAG,mBAAmB,OAAO,KAAK,GAAG,EACxF,KAAK,GAAG;AACb;AAEA,SAAS,eAAe,OAA2B;CACjD,OAAO,MAAM,MACV,KAAK,SAAU,KAAK,cAAc,SAAS,IAAI,KAAK,QAAQ,KAAK,GAAI,EACrE,KAAK,GAAG;AACb;AAEA,IAAM,iBAAyC;CAC7C,UAAU;CACV,aAAa;CACb,WAAW;CACX,IAAI;CACJ,KAAK;CACL,IAAI;CACJ,KAAK;CACL,IAAI;CACJ,KAAK;CACL,QAAQ;CACR,OAAO;CACP,OAAO;CACP,QAAQ;AACV;AAGA,IAAa,6BAA6B,IAAI,IAAY,CAAC,SAAS,QAAQ,CAAC;AAE7E,SAAgB,cAAc,UAA0B;CACtD,OAAO,eAAe,aAAa;AACrC;AAEA,SAAgB,sBAAsB,WAA2B;CAC/D,OAAO,cAAc,SAAS,eAAe;AAC/C;AAEA,SAAgB,SAAS,OAAoB,QAAkC;CAC7E,IAAI,CAAC,OAAO,UACV,OAAO;CAGT,MAAM,cAAc,MAAM,MAAM,SAAS,KAAK,QAAQ,OAAO,GAAG;CAChE,MAAM,iBAAiB,MAAM,QAAQ,SAAS,KAAK,QAAQ,OAAO,GAAG;CAErE,IAAI,CAAC,aACH,OAAO,CAAC,GAAG,OAAO;EAAE,KAAK,OAAO;EAAK,WAAW;CAAM,CAAC;CAGzD,IAAI,YAAY,cAAc,OAC5B,OAAO,CAAC,GAAG,gBAAgB;EAAE,KAAK,OAAO;EAAK,WAAW;CAAO,CAAC;CAGnE,OAAO;AACT;AAEA,SAAgB,gBAAgB,aAAqB,UAA4B;CAC/E,IAAI,YAAY,GACd,OAAO,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UAAU,QAAQ,CAAC;CAGjE,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,GAAG,WAAW,CAAC,CAAC;CAEjE,OAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAAU,QAAQ,KAAK;AAC9D;AAEA,SAAgB,sBACd,SACA,YACA,cACQ;CACR,MAAM,SAAmB,QAAQ,KAAK,WACpC,OAAO,SAAS,UAAU,uBAAuB,mBACnD;CAEA,IAAI,YACF,OAAO,KAAK,aAAa;CAG3B,IAAI,cACF,OAAO,QAAQ,aAAa;CAG9B,OAAO,OAAO,KAAK,GAAG;AACxB"}
+{"version":3,"file":"query.js","names":[],"sources":["../../resources/js/table/query.ts"],"sourcesContent":["import { translate } from \"@lattice/lattice/i18n\";\nimport type { TableColumn, TableSort, TableState } from \"./types\";\n\nexport function getColumnSort(state: TableState, column: TableColumn): TableSort | undefined {\n  return state.sorts.find((currentSort) => currentSort.key === column.key);\n}\n\nexport function getColumnAriaSort(\n  sort: TableSort | undefined,\n): \"ascending\" | \"descending\" | undefined {\n  if (sort?.direction === \"asc\") {\n    return \"ascending\";\n  }\n\n  if (sort?.direction === \"desc\") {\n    return \"descending\";\n  }\n\n  return undefined;\n}\n\nexport function buildEndpoint(endpoint: string, state: TableState): string {\n  const url = new URL(endpoint, window.location.origin);\n\n  if (state.filters.length > 0) {\n    url.searchParams.set(\"filter\", serializeFilters(state));\n  }\n\n  if (state.sorts.length > 0) {\n    url.searchParams.set(\"sort\", serializeSorts(state));\n  }\n\n  url.searchParams.set(\"page\", String(state.page));\n  url.searchParams.set(\"per_page\", String(state.perPage));\n\n  return `${url.pathname}${url.search}`;\n}\n\nexport function getQueryParams(state: TableState): Record<string, unknown> {\n  const params: Record<string, unknown> = {};\n\n  if (state.filters.length > 0) {\n    params.filter = serializeFilters(state);\n  }\n\n  if (state.sorts.length > 0) {\n    params.sort = serializeSorts(state);\n  }\n\n  return params;\n}\n\nfunction serializeFilters(state: TableState): string {\n  return state.filters\n    .map((clause) => `${clause.field}:${clause.operator}:${encodeURIComponent(clause.value)}`)\n    .join(\",\");\n}\n\nfunction serializeSorts(state: TableState): string {\n  return state.sorts\n    .map((sort) => (sort.direction === \"desc\" ? `-${sort.key}` : sort.key))\n    .join(\",\");\n}\n\nconst operatorLabels: Record<string, string> = {\n  contains: \"contains\",\n  starts_with: \"starts with\",\n  ends_with: \"ends with\",\n  eq: \"equals\",\n  neq: \"not equals\",\n  gt: \">\",\n  gte: \"≥\",\n  lt: \"<\",\n  lte: \"≤\",\n  in: \"in\",\n  not_in: \"not in\",\n  before: \"before\",\n  after: \"after\",\n  empty: \"is empty\",\n  filled: \"is not empty\",\n};\n\nexport const VALUELESS_FILTER_OPERATORS = new Set<string>([\"empty\", \"filled\"]);\n\nexport function operatorLabel(operator: string): string {\n  return translate(\"lattice\", `operators.${operator}`, operatorLabels[operator] ?? operator);\n}\n\nexport function getSortDirectionLabel(direction: string): string {\n  return direction === \"desc\" ? \"descending\" : \"ascending\";\n}\n\nexport function nextSort(sorts: TableSort[], column: TableColumn): TableSort[] {\n  if (!column.sortable) {\n    return sorts;\n  }\n\n  const currentSort = sorts.find((sort) => sort.key === column.key);\n  const remainingSorts = sorts.filter((sort) => sort.key !== column.key);\n\n  if (!currentSort) {\n    return [...sorts, { key: column.key, direction: \"asc\" }];\n  }\n\n  if (currentSort.direction === \"asc\") {\n    return [...remainingSorts, { key: column.key, direction: \"desc\" }];\n  }\n\n  return remainingSorts;\n}\n\nexport function getVisiblePages(currentPage: number, lastPage: number): number[] {\n  if (lastPage <= 5) {\n    return Array.from({ length: lastPage }, (_, index) => index + 1);\n  }\n\n  const start = Math.max(1, Math.min(currentPage - 2, lastPage - 4));\n\n  return Array.from({ length: 5 }, (_, index) => start + index);\n}\n\nexport function getColumnGridTemplate(\n  columns: TableColumn[],\n  hasActions: boolean,\n  hasSelection: boolean,\n): string {\n  const tracks: string[] = columns.map((column) =>\n    column.type === \"stack\" ? \"minmax(13rem, 2fr)\" : \"minmax(7rem, 1fr)\",\n  );\n\n  // Selection and action tracks use fixed widths, not max-content: the header,\n  // filter, and body rows are independent grids, so a content-sized track would\n  // resolve to a different width in each one, changing the free space left for\n  // the 1fr columns and drifting them out of alignment across rows.\n  if (hasActions) {\n    tracks.push(\"10rem\");\n  }\n\n  if (hasSelection) {\n    tracks.unshift(\"3rem\");\n  }\n\n  return tracks.join(\" \");\n}\n"],"mappings":"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"}

package/dist/table/types.d.ts

@@ -1,31 +1,14 @@
-import { ControlType, FilterOperator, PaginationType, TableSort } from '../../../generated/types';
-export type { TableSort };
-export type TableColumn = {
-    columns?: TableColumn[];
-    key: string;
-    label: string;
-    type?: "stack" | "text";
-    sortable?: boolean;
-    filter?: {
-        enabled?: boolean;
-        type?: ControlType;
-        operators?: FilterOperator[];
-        defaultOperator?: FilterOperator;
-    };
-    date?: {
-        format?: string | null;
-    };
-    copyable?: boolean;
-    link?: {
-        href?: string | null;
-        external?: boolean;
-    };
-};
+import { ActionNode, ColumnData, ColumnFilter, ColumnPropsMap, ColumnType, FilterClause as WireFilterClause, Op, PaginationType, Table, TableSort } from '../types/generated';
+export type { ColumnData, ColumnFilter, ColumnType, TableSort };
+export type TableColumn = ColumnData;
 export type TableRow = Record<string, unknown>;
-export type FilterClause = {
-    field: string;
-    operator: FilterOperator;
-    value: string;
+/**
+ * The wire types `operator` as a free string (validated server-side); on the
+ * client a clause always carries a known Op, built from a column's
+ * allowed operators.
+ */
+export type FilterClause = Omit<WireFilterClause, "operator"> & {
+    operator: Op;
 };
 export type TableState = {
     filters: FilterClause[];
@@ -49,19 +32,32 @@ export type TableResponse = {
     pagination?: TablePagination;
     state?: Partial<TableState>;
 };
-declare module '../../../core/types' {
-    interface ComponentProps {
-        table: {
-            bulkActions?: Array<Record<string, unknown>>;
-            columns?: TableColumn[];
-            data?: TableRow[];
-            endpoint?: string;
-            ref?: string;
-            lazy?: boolean;
-            layout?: string;
-            striped?: boolean;
-            pagination?: Record<string, unknown>;
-            state?: Record<string, unknown>;
-        };
-    }
+/**
+ * The table node as it reaches the client: the generated wire props plus the
+ * rows, pagination, and state the server hydrates onto it for the initial render.
+ */
+export type TableNodeProps = Partial<Omit<Table, "bulkActions">> & {
+    bulkActions?: ActionNode[];
+    data?: TableRow[];
+    pagination?: TablePagination;
+    state?: Partial<TableState>;
+};
+export type TableNode = {
+    type: "table";
+    id?: string;
+    key?: string;
+    props?: TableNodeProps;
+};
+/**
+ * Augmentable map of column `type` string → props. Consumer apps extend it via
+ * `declare module "@lattice-php/lattice"` so their custom columns gain strong
+ * prop types; the entries are generated by `php artisan lattice:typescript`.
+ */
+export interface ColumnProps {
 }
+type BuiltInColumnPropsOf<TType extends string> = TType extends keyof ColumnPropsMap ? ColumnPropsMap[TType] : never;
+/**
+ * Resolves a column `type` to its props: consumer augmentations (`ColumnProps`)
+ * first, then the generated built-ins, then a loose bag.
+ */
+export type ColumnPropsOf<TType extends string> = TType extends keyof ColumnProps ? ColumnProps[TType] : [BuiltInColumnPropsOf<TType>] extends [never] ? Record<string, unknown> | undefined : BuiltInColumnPropsOf<TType>;

package/dist/table/use-table.d.ts

@@ -1,7 +1,6 @@
-import { Node } from '../../../core/types';
-import { FilterClause, TableColumn, TableSort, TableState } from './types';
-export declare function useTable(node: Node<"table">): {
-    columns: TableColumn[];
+import { FilterClause, TableColumn, TableNode, TableSort, TableState } from './types';
+export declare function useTable(node: TableNode): {
+    columns: import('./types').ColumnData[];
     rows: import('./types').TableRow[];
     pagination: import('./types').TablePagination;
     state: TableState;

package/dist/table/use-table.js

@@ -5,7 +5,7 @@ import { buildEndpoint, nextSort } from "./query.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region resources/js/table/use-table.ts
 function useTable(node) {
-	const columns = getColumns(node.props?.columns);
+	const columns = useMemo(() => getColumns(node.props?.columns), [node.props?.columns]);
 	const endpoint = typeof node.props?.endpoint === "string" ? node.props.endpoint : null;
 	const componentRef = typeof node.props?.ref === "string" ? node.props.ref : "";
 	const isLazy = node.props?.lazy === true;
@@ -13,7 +13,6 @@ function useTable(node) {
 	const [rows, setRows] = useState(() => getRows(node.props?.data));
 	const [pagination, setPagination] = useState(() => getPagination(node.props?.pagination));
 	const [state, setState] = useState(initialState);
-	const [filters, setFilters] = useState(initialState.filters);
 	const [processing, setProcessing] = useState(isLazy);
 	const [hasLoaded, setHasLoaded] = useState(!isLazy);
 	const infiniteLoaderRef = useRef(null);
@@ -32,7 +31,6 @@ function useTable(node) {
 			setRows((currentRows) => append ? [...currentRows, ...resultRows] : resultRows);
 			setPagination(getPagination(result.pagination));
 			setState(resultState);
-			setFilters(resultState.filters);
 			setHasLoaded(true);
 		} finally {
 			setProcessing(false);
@@ -52,32 +50,23 @@ function useTable(node) {
 			sorts: state.sorts.filter((currentSort) => currentSort.key !== sort.key)
 		});
 	}
-	function addFilter(clause) {
-		const next = [...filters, clause];
-		setFilters(next);
-		load({
+	function applyFilters(next) {
+		const nextState = {
 			...state,
 			filters: next,
 			page: 1
-		});
+		};
+		setState(nextState);
+		load(nextState);
+	}
+	function addFilter(clause) {
+		applyFilters([...state.filters, clause]);
 	}
 	function updateFilter(index, clause) {
-		const next = filters.map((current, position) => position === index ? clause : current);
-		setFilters(next);
-		load({
-			...state,
-			filters: next,
-			page: 1
-		});
+		applyFilters(state.filters.map((current, position) => position === index ? clause : current));
 	}
 	function removeFilter(index) {
-		const next = filters.filter((_, current) => current !== index);
-		setFilters(next);
-		load({
-			...state,
-			filters: next,
-			page: 1
-		});
+		applyFilters(state.filters.filter((_, current) => current !== index));
 	}
 	function goToPage(page) {
 		load({
@@ -138,7 +127,7 @@ function useTable(node) {
 		rows,
 		pagination,
 		state,
-		filters,
+		filters: state.filters,
 		addFilter,
 		updateFilter,
 		removeFilter,

package/dist/table/use-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.js","names":[],"sources":["../../resources/js/table/use-table.ts"],"sourcesContent":["import { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport type { Node } from \"@lattice/lattice/core/types\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice/lattice/events/event-names\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { getColumns, getPagination, getRows, getState } from \"./payload\";\nimport { buildEndpoint, nextSort } from \"./query\";\nimport type { FilterClause, TableColumn, TableResponse, TableSort, TableState } from \"./types\";\n\nexport function useTable(node: Node<\"table\">) {\n  const columns = getColumns(node.props?.columns);\n  const endpoint = typeof node.props?.endpoint === \"string\" ? node.props.endpoint : null;\n  const componentRef = typeof node.props?.ref === \"string\" ? node.props.ref : \"\";\n  const isLazy = node.props?.lazy === true;\n  const initialState = useMemo(() => getState(node.props?.state), [node.props?.state]);\n  const [rows, setRows] = useState(() => getRows(node.props?.data));\n  const [pagination, setPagination] = useState(() => getPagination(node.props?.pagination));\n  const [state, setState] = useState(initialState);\n  const [filters, setFilters] = useState(initialState.filters);\n  const [processing, setProcessing] = useState(isLazy);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const infiniteLoaderRef = useRef<HTMLDivElement | null>(null);\n  const currentPage = pagination.currentPage ?? state.page;\n  const isInfinite = (pagination.mode ?? \"table\") === \"infinite\";\n\n  const load = useCallback(\n    async (nextState: TableState, append = false): Promise<void> => {\n      if (!endpoint) {\n        return;\n      }\n\n      setProcessing(true);\n\n      try {\n        const response = await fetch(buildEndpoint(endpoint, nextState), {\n          headers: {\n            Accept: \"application/json\",\n            ...withRefHeader(componentRef),\n          },\n        });\n        const result = (await response.json()) as TableResponse;\n        const resultState = getState(result.state);\n        const resultRows = getRows(result.data);\n\n        setRows((currentRows) => (append ? [...currentRows, ...resultRows] : resultRows));\n        setPagination(getPagination(result.pagination));\n        setState(resultState);\n        setFilters(resultState.filters);\n        setHasLoaded(true);\n      } finally {\n        setProcessing(false);\n      }\n    },\n    [endpoint, componentRef],\n  );\n\n  function sort(column: TableColumn): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: nextSort(state.sorts, column),\n    });\n  }\n\n  function clearSort(sort: TableSort): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: state.sorts.filter((currentSort) => currentSort.key !== sort.key),\n    });\n  }\n\n  function addFilter(clause: FilterClause): void {\n    const next = [...filters, clause];\n\n    setFilters(next);\n    void load({\n      ...state,\n      filters: next,\n      page: 1,\n    });\n  }\n\n  function updateFilter(index: number, clause: FilterClause): void {\n    const next = filters.map((current, position) => (position === index ? clause : current));\n\n    setFilters(next);\n    void load({\n      ...state,\n      filters: next,\n      page: 1,\n    });\n  }\n\n  function removeFilter(index: number): void {\n    const next = filters.filter((_, current) => current !== index);\n\n    setFilters(next);\n    void load({\n      ...state,\n      filters: next,\n      page: 1,\n    });\n  }\n\n  function goToPage(page: number): void {\n    void load({\n      ...state,\n      page,\n    });\n  }\n\n  const loadMore = useCallback((): void => {\n    if (processing || !pagination.hasMore) {\n      return;\n    }\n\n    void load(\n      {\n        ...state,\n        page: pagination.nextPage ?? currentPage + 1,\n      },\n      true,\n    );\n  }, [currentPage, load, pagination.hasMore, pagination.nextPage, processing, state]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load(state);\n  }, [hasLoaded, isLazy, load, state]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load(state);\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id, state]);\n\n  useEffect(() => {\n    if (\n      !isInfinite ||\n      !pagination.hasMore ||\n      processing ||\n      !infiniteLoaderRef.current ||\n      typeof IntersectionObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          loadMore();\n        }\n      },\n      {\n        rootMargin: \"240px\",\n      },\n    );\n\n    observer.observe(infiniteLoaderRef.current);\n\n    return () => observer.disconnect();\n  }, [isInfinite, loadMore, pagination.hasMore, processing]);\n\n  return {\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  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-table.js","names":[],"sources":["../../resources/js/table/use-table.ts"],"sourcesContent":["import { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice/lattice/events/event-names\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { getColumns, getPagination, getRows, getState } from \"./payload\";\nimport { buildEndpoint, nextSort } from \"./query\";\nimport type {\n  FilterClause,\n  TableColumn,\n  TableNode,\n  TableResponse,\n  TableSort,\n  TableState,\n} from \"./types\";\n\nexport function useTable(node: TableNode) {\n  const columns = useMemo(() => getColumns(node.props?.columns), [node.props?.columns]);\n  const endpoint = typeof node.props?.endpoint === \"string\" ? node.props.endpoint : null;\n  const componentRef = typeof node.props?.ref === \"string\" ? node.props.ref : \"\";\n  const isLazy = node.props?.lazy === true;\n  const initialState = useMemo(() => getState(node.props?.state), [node.props?.state]);\n  const [rows, setRows] = useState(() => getRows(node.props?.data));\n  const [pagination, setPagination] = useState(() => getPagination(node.props?.pagination));\n  const [state, setState] = useState(initialState);\n  const [processing, setProcessing] = useState(isLazy);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const infiniteLoaderRef = useRef<HTMLDivElement | null>(null);\n  const currentPage = pagination.currentPage ?? state.page;\n  const isInfinite = (pagination.mode ?? \"table\") === \"infinite\";\n\n  const load = useCallback(\n    async (nextState: TableState, append = false): Promise<void> => {\n      if (!endpoint) {\n        return;\n      }\n\n      setProcessing(true);\n\n      try {\n        const response = await fetch(buildEndpoint(endpoint, nextState), {\n          headers: {\n            Accept: \"application/json\",\n            ...withRefHeader(componentRef),\n          },\n        });\n        const result = (await response.json()) as TableResponse;\n        const resultState = getState(result.state);\n        const resultRows = getRows(result.data);\n\n        setRows((currentRows) => (append ? [...currentRows, ...resultRows] : resultRows));\n        setPagination(getPagination(result.pagination));\n        setState(resultState);\n        setHasLoaded(true);\n      } finally {\n        setProcessing(false);\n      }\n    },\n    [endpoint, componentRef],\n  );\n\n  function sort(column: TableColumn): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: nextSort(state.sorts, column),\n    });\n  }\n\n  function clearSort(sort: TableSort): void {\n    void load({\n      ...state,\n      page: 1,\n      sorts: state.sorts.filter((currentSort) => currentSort.key !== sort.key),\n    });\n  }\n\n  function applyFilters(next: FilterClause[]): void {\n    const nextState = { ...state, filters: next, page: 1 };\n\n    setState(nextState);\n    void load(nextState);\n  }\n\n  function addFilter(clause: FilterClause): void {\n    applyFilters([...state.filters, clause]);\n  }\n\n  function updateFilter(index: number, clause: FilterClause): void {\n    applyFilters(state.filters.map((current, position) => (position === index ? clause : current)));\n  }\n\n  function removeFilter(index: number): void {\n    applyFilters(state.filters.filter((_, current) => current !== index));\n  }\n\n  function goToPage(page: number): void {\n    void load({\n      ...state,\n      page,\n    });\n  }\n\n  const loadMore = useCallback((): void => {\n    if (processing || !pagination.hasMore) {\n      return;\n    }\n\n    void load(\n      {\n        ...state,\n        page: pagination.nextPage ?? currentPage + 1,\n      },\n      true,\n    );\n  }, [currentPage, load, pagination.hasMore, pagination.nextPage, processing, state]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load(state);\n  }, [hasLoaded, isLazy, load, state]);\n\n  useEffect(() => {\n    function reload(event: Event): void {\n      const detail = (event as ReloadComponentEvent).detail;\n\n      if (detail?.component !== node.id) {\n        return;\n      }\n\n      void load(state);\n    }\n\n    window.addEventListener(LATTICE_EVENT.reloadComponent, reload);\n\n    return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);\n  }, [load, node.id, state]);\n\n  useEffect(() => {\n    if (\n      !isInfinite ||\n      !pagination.hasMore ||\n      processing ||\n      !infiniteLoaderRef.current ||\n      typeof IntersectionObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          loadMore();\n        }\n      },\n      {\n        rootMargin: \"240px\",\n      },\n    );\n\n    observer.observe(infiniteLoaderRef.current);\n\n    return () => observer.disconnect();\n  }, [isInfinite, loadMore, pagination.hasMore, processing]);\n\n  return {\n    columns,\n    rows,\n    pagination,\n    state,\n    filters: state.filters,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  };\n}\n"],"mappings":"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"}