@lattice-php/lattice 0.18.0 → 0.20.0

package/dist/table/components/table.js

@@ -1,13 +1,15 @@
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
+import { Renderer } from "../../core/renderer.js";
 import { useT } from "../../i18n/instance.js";
 import { nodeIdentity } from "../../core/test-id.js";
 import { useColumnResizing } from "../../core/hooks/use-column-resizing.js";
 import { Checkbox } from "../../ui/checkbox.js";
 import { useColumnVisibility } from "../hooks/use-column-visibility.js";
+import { useExpandedRows } from "../hooks/use-expanded-rows.js";
 import { alignJustifyItems, alignText } from "../lib/align.js";
 import { getBulkActions } from "../lib/bulk.js";
-import { getRowActions, getRowKey } from "../lib/payload.js";
+import { getRowActions, getRowDetail, getRowKey } from "../lib/payload.js";
 import { getQueryParams, getTableSizingColumns, getTableUtilityTracks, getVisiblePages } from "../lib/query.js";
 import { useTable } from "../hooks/use-table.js";
 import { useTableSelection } from "../hooks/use-table-selection.js";
@@ -18,29 +20,33 @@ import { ColumnVisibilityMenu } from "./column-visibility-menu.js";
 import { FilterBar, FilterMenu } from "./filter-bar.js";
 import { TablePagination } from "./pagination.js";
 import { SortBar } from "./sort-bar.js";
+import { TableSearch } from "./table-search.js";
 import { TableActionNode } from "./table-action-node.js";
 import { ColumnCell } from "./table-cell.js";
-import { useMemo } from "react";
+import { Fragment, 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, tableFilters, addFilter, updateFilter, removeFilter, replaceColumnFilters, setTableFilter, resetFilters, searchFilterOptions, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
+	const { columns, rows, pagination, query, filters, tableFilters, search, addFilter, updateFilter, removeFilter, replaceColumnFilters, setTableFilter, resetFilters, setSearch, searchFilterOptions, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
 	const bulkActions = useMemo(() => getBulkActions(node.props?.bulkActions), [node.props?.bulkActions]);
 	const hasBulkActions = bulkActions.length > 0;
 	const rowEntries = useMemo(() => rows.map((row, index) => ({
 		row,
 		actions: getRowActions(row),
+		detail: getRowDetail(row),
 		key: getRowKey(row, index)
 	})), [rows]);
 	const selection = useTableSelection(rowEntries.map((entry) => entry.key));
+	const { isExpanded, toggle: toggleRow } = useExpandedRows();
+	const hasExpandable = rowEntries.some((entry) => entry.detail != null);
 	const columnsByKey = useMemo(() => new Map(columns.map((column) => [column.key, column])), [columns]);
 	const visibilityIdentity = nodeIdentity(node);
 	const { hasToggleableColumns, hasHidden, isVisible, resetVisibility, setColumnVisible, toggleableColumns, visibleColumns } = useColumnVisibility({
 		columns,
 		storageKey: visibilityIdentity ? `lattice:table-column-visibility:${visibilityIdentity}` : void 0
 	});
-	const currentPage = pagination.currentPage ?? state.page;
+	const currentPage = pagination.currentPage ?? query.page;
 	const lastPage = pagination.lastPage ?? currentPage;
 	const mode = pagination.mode ?? "table";
 	const visiblePages = getVisiblePages(currentPage, lastPage);
@@ -56,7 +62,11 @@ var TableComponent = ({ node }) => {
 	const hasDedicatedFilters = filterDefinitions.length > 0;
 	const hasTrailingUtility = hasActions || hasDedicatedFilters || hasToggleableColumns;
 	const sizingColumns = useMemo(() => getTableSizingColumns(visibleColumns), [visibleColumns]);
-	const utilityTracks = useMemo(() => getTableUtilityTracks(hasTrailingUtility, hasBulkActions), [hasTrailingUtility, hasBulkActions]);
+	const utilityTracks = useMemo(() => getTableUtilityTracks(hasTrailingUtility, hasBulkActions, hasExpandable), [
+		hasTrailingUtility,
+		hasBulkActions,
+		hasExpandable
+	]);
 	const resizingEnabled = node.props?.resizableColumns === true;
 	const resizeStorageIdentity = nodeIdentity(node);
 	const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resizeRootRef, resetColumns } = useColumnResizing({
@@ -72,11 +82,11 @@ var TableComponent = ({ node }) => {
 		"data-lattice-component": node.id,
 		className: "relative",
 		children: [hasOverrides && /* @__PURE__ */ jsx("button", {
-			"aria-label": t("table.resetColumnWidths", "Reset column widths"),
+			"aria-label": t("table.reset-column-widths", "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("table.resetColumnWidths", "Reset column widths"),
+			title: t("table.reset-column-widths", "Reset column widths"),
 			type: "button",
 			children: /* @__PURE__ */ jsx(Icon, {
 				name: "rotate-ccw",
@@ -86,10 +96,18 @@ var TableComponent = ({ node }) => {
 			"data-slot": "table-scroll",
 			className: "overflow-x-auto rounded-lt-sm border border-lt-border",
 			children: [
+				node.props?.searchable && /* @__PURE__ */ jsx("div", {
+					"data-slot": "table-toolbar",
+					className: "flex items-center gap-2 border-b border-lt-border px-4 py-2",
+					children: /* @__PURE__ */ jsx(TableSearch, {
+						value: search,
+						onSearch: setSearch
+					})
+				}),
 				/* @__PURE__ */ jsx(FilterBar, {
 					clauses: filters,
 					columnsByKey,
-					indicators: state.tableFilterIndicators,
+					indicators: query.tableFilterIndicators,
 					processing,
 					onRemoveClause: removeFilter,
 					onChange: setTableFilter,
@@ -100,14 +118,14 @@ var TableComponent = ({ node }) => {
 					selectedKeys: selection.selectedKeys,
 					allMatching: selection.allMatching,
 					total: pagination.total ?? void 0,
-					query: getQueryParams(state),
+					query: getQueryParams(query),
 					canSelectAllMatching: selection.allVisibleSelected && !selection.allMatching && pagination.total != null && pagination.total > selection.selectedKeys.length,
 					onSelectAllMatching: selection.selectAllMatching,
 					onCompleted: selection.clear
 				}),
-				state.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
+				query.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
 					columnsByKey,
-					state,
+					query,
 					processing,
 					onClear: clearSort
 				}),
@@ -124,11 +142,16 @@ var TableComponent = ({ node }) => {
 							className: "hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]",
 							role: "row",
 							children: [
+								hasExpandable && /* @__PURE__ */ jsx("div", {
+									className: "px-2 py-3",
+									role: "columnheader",
+									"aria-hidden": "true"
+								}),
 								hasBulkActions && /* @__PURE__ */ jsx("div", {
 									className: "flex items-center px-4 py-3",
 									role: "columnheader",
 									children: /* @__PURE__ */ jsx(Checkbox, {
-										"aria-label": t("table.selectAllRows", "Select all rows"),
+										"aria-label": t("table.select-all-rows", "Select all rows"),
 										"data-test": "select-all",
 										checked: selection.allSelected,
 										onCheckedChange: () => selection.toggleAll()
@@ -139,7 +162,7 @@ var TableComponent = ({ node }) => {
 									processing,
 									resizeHandleProps: resizingEnabled ? getResizeHandleProps(sizingColumns[index]) : void 0,
 									sort,
-									state
+									query
 								}, column.key)),
 								hasTrailingUtility && /* @__PURE__ */ jsxs("div", {
 									className: "flex items-center justify-end gap-2 px-4 py-2 align-middle font-semibold text-lt-fg",
@@ -163,7 +186,7 @@ var TableComponent = ({ node }) => {
 										}),
 										hasActions && /* @__PURE__ */ jsx("span", {
 											className: "sr-only",
-											children: node.props?.actionsLabel
+											children: node.props?.actionsLabel ?? t("table.actions", "Actions")
 										})
 									]
 								})
@@ -172,6 +195,10 @@ var TableComponent = ({ node }) => {
 							className: "hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]",
 							role: "row",
 							children: [
+								hasExpandable && /* @__PURE__ */ jsx("div", {
+									className: "px-2 py-2",
+									role: "cell"
+								}),
 								hasBulkActions && /* @__PURE__ */ jsx("div", {
 									className: "px-4 py-2",
 									role: "cell"
@@ -211,19 +238,39 @@ var TableComponent = ({ node }) => {
 							role: "row",
 							children: /* @__PURE__ */ jsx("div", {
 								role: "cell",
-								children: node.props?.emptyLabel
+								children: node.props?.emptyLabel ?? t("table.empty", "No results")
 							})
-						}) : rowEntries.map(({ row, actions, key }) => {
-							return /* @__PURE__ */ jsxs("div", {
+						}) : rowEntries.map(({ row, actions, detail, key }) => {
+							const expanded = detail != null && isExpanded(key);
+							const detailId = `${nodeIdentity(node) ?? "table"}-row-detail-${key}`;
+							return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 								"data-slot": "table-row",
 								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",
 								children: [
+									hasExpandable && /* @__PURE__ */ jsx("div", {
+										className: "flex items-center px-2 py-lt-cell-y",
+										role: "cell",
+										children: detail && /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"data-test": `row-expand-${key}`,
+											"aria-expanded": expanded,
+											"aria-controls": detailId,
+											"aria-label": t("table.row-detail.toggle", "Toggle detail"),
+											className: "inline-flex size-6 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg",
+											onClick: () => toggleRow(key),
+											children: /* @__PURE__ */ jsx(Icon, {
+												name: "chevron-down",
+												"aria-hidden": "true",
+												className: cn("size-lt-icon-md transition-transform", !expanded && "-rotate-90")
+											})
+										})
+									}),
 									hasBulkActions && /* @__PURE__ */ jsx("div", {
 										className: "flex items-center px-lt-cell-x py-lt-cell-y",
 										role: "cell",
 										children: /* @__PURE__ */ jsx(Checkbox, {
-											"aria-label": t("table.selectRow", "Select row {{key}}", { key }),
+											"aria-label": t("table.select-row", "Select row {{key}}", { key }),
 											"data-test": `select-row-${key}`,
 											checked: selection.isSelected(key),
 											onCheckedChange: () => selection.toggle(key)
@@ -252,7 +299,13 @@ var TableComponent = ({ node }) => {
 										children: actions.map((action, actionIndex) => /* @__PURE__ */ jsx(TableActionNode, { node: action }, action.key ?? action.id ?? actionIndex))
 									})
 								]
-							}, key);
+							}), expanded && detail && /* @__PURE__ */ jsx("div", {
+								id: detailId,
+								role: "region",
+								"data-slot": "table-row-detail",
+								className: "border-b border-lt-border bg-lt-muted/20 px-lt-cell-x py-lt-cell-y",
+								children: /* @__PURE__ */ jsx(Renderer, { nodes: [detail] })
+							})] }, key);
 						})
 					})]
 				}),

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

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

package/dist/table/hooks/use-expanded-rows.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Client-side expansion state for expandable table rows, keyed by row key.
+ * In-memory only: expansions reset when the table reloads or refetches.
+ */
+export declare function useExpandedRows(): {
+    isExpanded: (key: string) => boolean;
+    toggle: (key: string) => void;
+};

package/dist/table/hooks/use-expanded-rows.js

@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+//#region resources/js/table/hooks/use-expanded-rows.ts
+/**
+* Client-side expansion state for expandable table rows, keyed by row key.
+* In-memory only: expansions reset when the table reloads or refetches.
+*/
+function useExpandedRows() {
+	const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+	return {
+		isExpanded: useCallback((key) => expanded.has(key), [expanded]),
+		toggle: useCallback((key) => {
+			setExpanded((current) => {
+				const next = new Set(current);
+				if (next.has(key)) next.delete(key);
+				else next.add(key);
+				return next;
+			});
+		}, [])
+	};
+}
+//#endregion
+export { useExpandedRows };
+
+//# sourceMappingURL=use-expanded-rows.js.map

package/dist/table/hooks/use-expanded-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-expanded-rows.js","names":[],"sources":["../../../resources/js/table/hooks/use-expanded-rows.ts"],"sourcesContent":["import { useCallback, useState } from \"react\";\n\n/**\n * Client-side expansion state for expandable table rows, keyed by row key.\n * In-memory only: expansions reset when the table reloads or refetches.\n */\nexport function useExpandedRows() {\n  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set());\n\n  const isExpanded = useCallback((key: string): boolean => expanded.has(key), [expanded]);\n\n  const toggle = useCallback((key: string): void => {\n    setExpanded((current) => {\n      const next = new Set(current);\n\n      if (next.has(key)) {\n        next.delete(key);\n      } else {\n        next.add(key);\n      }\n\n      return next;\n    });\n  }, []);\n\n  return { isExpanded, toggle };\n}\n"],"mappings":";;;;;;AAMA,SAAgB,kBAAkB;CAChC,MAAM,CAAC,UAAU,eAAe,+BAAoC,IAAI,IAAI,CAAC;CAkB7E,OAAO;EAAE,YAhBU,aAAa,QAAyB,SAAS,IAAI,GAAG,GAAG,CAAC,QAAQ,CAgB5E;EAAY,QAdN,aAAa,QAAsB;GAChD,aAAa,YAAY;IACvB,MAAM,OAAO,IAAI,IAAI,OAAO;IAE5B,IAAI,KAAK,IAAI,GAAG,GACd,KAAK,OAAO,GAAG;SAEf,KAAK,IAAI,GAAG;IAGd,OAAO;GACT,CAAC;EACH,GAAG,CAAC,CAEiB;CAAO;AAC9B"}

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

@@ -1,19 +1,21 @@
 import { Option } from '../../types/generated.js';
-import { FilterClause, TableColumn, TableNode, TableSort, TableState } from '../types.js';
+import { FilterClause, TableColumn, TableNode, TableSort, TableQuery } from '../types.js';
 export declare function useTable(node: TableNode): {
     columns: TableColumn[];
     rows: import('../types.js').TableRow[];
     pagination: import('../../types/generated.js').TablePagination;
-    state: TableState;
+    query: TableQuery;
     filters: FilterClause[];
     tableFilters: Record<string, Record<string, unknown>>;
+    search: string;
     addFilter: (clause: FilterClause) => void;
     updateFilter: (index: number, clause: FilterClause) => void;
     removeFilter: (index: number) => void;
     replaceColumnFilters: (field: string, clauses: FilterClause[]) => void;
     setTableFilter: (key: string, value: unknown) => void;
     resetFilters: () => void;
-    searchFilterOptions: (searchKey: string, query: string, signal?: AbortSignal) => Promise<Option[]>;
+    setSearch: (search: string) => void;
+    searchFilterOptions: (searchKey: string, search: string, signal?: AbortSignal) => Promise<Option[]>;
     processing: boolean;
     hasLoaded: boolean;
     infiniteLoaderRef: import('react').RefObject<HTMLDivElement | null>;

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

@@ -1,6 +1,6 @@
 import { LATTICE_EVENT } from "../../events/event-names.js";
 import { apiFetch, apiJson } from "../../core/api.js";
-import { getColumns, getPagination, getRows, getState } from "../lib/payload.js";
+import { getColumns, getPagination, getQuery, getRows } from "../lib/payload.js";
 import { isEmptyFilterValue, isFilterValue } from "../lib/filter-values.js";
 import { buildEndpoint, nextSort } from "../lib/query.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -10,27 +10,27 @@ function useTable(node) {
 	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;
-	const initialState = useMemo(() => getState(node.props?.state), [node.props?.state]);
+	const initialQuery = useMemo(() => getQuery(node.props?.query), [node.props?.query]);
 	const initialRows = useMemo(() => getRows(node.props?.data), [node.props?.data]);
 	const initialPagination = useMemo(() => getPagination(node.props?.pagination), [node.props?.pagination]);
 	const [rows, setRows] = useState(initialRows);
 	const [pagination, setPagination] = useState(initialPagination);
-	const [state, setState] = useState(initialState);
+	const [query, setQuery] = useState(initialQuery);
 	const [processing, setProcessing] = useState(isLazy);
 	const [hasLoaded, setHasLoaded] = useState(!isLazy);
 	const infiniteLoaderRef = useRef(null);
-	const currentPage = pagination.currentPage ?? state.page;
+	const currentPage = pagination.currentPage ?? query.page;
 	const isInfinite = (pagination.mode ?? "table") === "infinite";
-	const load = useCallback(async (nextState, append = false) => {
+	const load = useCallback(async (nextQuery, append = false) => {
 		if (!endpoint) return;
 		setProcessing(true);
 		try {
-			const result = await apiJson(buildEndpoint(endpoint, nextState), { ref: componentRef });
-			const resultState = getState(result.state);
+			const result = await apiJson(buildEndpoint(endpoint, nextQuery), { ref: componentRef });
+			const resultQuery = getQuery(result.query);
 			const resultRows = getRows(result.data);
 			setRows((currentRows) => append ? [...currentRows, ...resultRows] : resultRows);
 			setPagination(getPagination(result.pagination));
-			setState(resultState);
+			setQuery(resultQuery);
 			setHasLoaded(true);
 		} finally {
 			setProcessing(false);
@@ -38,68 +38,78 @@ function useTable(node) {
 	}, [endpoint, componentRef]);
 	function sort(column) {
 		load({
-			...state,
+			...query,
 			page: 1,
-			sorts: nextSort(state.sorts, column)
+			sorts: nextSort(query.sorts, column)
 		});
 	}
 	function clearSort(sort) {
 		load({
-			...state,
+			...query,
 			page: 1,
-			sorts: state.sorts.filter((currentSort) => currentSort.key !== sort.key)
+			sorts: query.sorts.filter((currentSort) => currentSort.key !== sort.key)
 		});
 	}
 	function applyFilters(next) {
-		const nextState = {
-			...state,
+		const nextQuery = {
+			...query,
 			filters: next,
 			page: 1
 		};
-		setState(nextState);
-		load(nextState);
+		setQuery(nextQuery);
+		load(nextQuery);
 	}
 	function addFilter(clause) {
-		applyFilters([...state.filters, clause]);
+		applyFilters([...query.filters, clause]);
 	}
 	function updateFilter(index, clause) {
-		applyFilters(state.filters.map((current, position) => position === index ? clause : current));
+		applyFilters(query.filters.map((current, position) => position === index ? clause : current));
 	}
 	function removeFilter(index) {
-		applyFilters(state.filters.filter((_, current) => current !== index));
+		applyFilters(query.filters.filter((_, current) => current !== index));
 	}
 	function replaceColumnFilters(field, clauses) {
-		applyFilters([...state.filters.filter((clause) => clause.field !== field), ...clauses]);
+		applyFilters([...query.filters.filter((clause) => clause.field !== field), ...clauses]);
 	}
 	function setTableFilter(key, value) {
-		const next = { ...state.tableFilters };
+		const next = { ...query.tableFilters };
 		if (isEmptyFilterValue(value) || !isFilterValue(value)) delete next[key];
 		else next[key] = value;
-		const nextState = {
-			...state,
+		const nextQuery = {
+			...query,
 			tableFilters: next,
-			tableFilterIndicators: state.tableFilterIndicators.filter((indicator) => indicator.filter !== key),
+			tableFilterIndicators: query.tableFilterIndicators.filter((indicator) => indicator.filter !== key),
 			page: 1
 		};
-		setState(nextState);
-		load(nextState);
+		setQuery(nextQuery);
+		load(nextQuery);
 	}
 	function resetFilters() {
-		const nextState = {
-			...state,
+		const nextQuery = {
+			...query,
 			filters: [],
 			tableFilters: {},
 			tableFilterIndicators: [],
+			search: "",
 			page: 1
 		};
-		setState(nextState);
-		load(nextState);
+		setQuery(nextQuery);
+		load(nextQuery);
 	}
-	const searchFilterOptions = useCallback(async (searchKey, query, signal) => {
+	function setSearch(search) {
+		const nextQuery = {
+			...query,
+			search,
+			page: 1
+		};
+		setQuery(nextQuery);
+		load(nextQuery);
+	}
+	const searchFilterOptions = useCallback(async (searchKey, search, signal) => {
 		if (!endpoint) return [];
 		const url = new URL(endpoint, window.location.origin);
 		url.searchParams.set("_search", searchKey);
-		url.searchParams.set("q", query);
+		url.searchParams.set("_q", search);
 		const response = await apiFetch(`${url.pathname}${url.search}`, {
 			ref: componentRef,
 			signal,
@@ -110,14 +120,14 @@ function useTable(node) {
 	}, [endpoint, componentRef]);
 	function goToPage(page) {
 		load({
-			...state,
+			...query,
 			page
 		});
 	}
 	const loadMore = useCallback(() => {
 		if (processing || !pagination.hasMore) return;
 		load({
-			...state,
+			...query,
 			page: pagination.nextPage ?? currentPage + 1
 		}, true);
 	}, [
@@ -126,40 +136,40 @@ function useTable(node) {
 		pagination.hasMore,
 		pagination.nextPage,
 		processing,
-		state
+		query
 	]);
 	useEffect(() => {
 		setRows(initialRows);
 		setPagination(initialPagination);
-		setState(initialState);
+		setQuery(initialQuery);
 		setProcessing(isLazy);
 		setHasLoaded(!isLazy);
 	}, [
 		initialRows,
 		initialPagination,
-		initialState,
+		initialQuery,
 		isLazy
 	]);
 	useEffect(() => {
 		if (!isLazy || hasLoaded) return;
-		load(state);
+		load(query);
 	}, [
 		hasLoaded,
 		isLazy,
 		load,
-		state
+		query
 	]);
 	useEffect(() => {
 		function reload(event) {
 			if (event.detail?.component !== node.id) return;
-			load(state);
+			load(query);
 		}
 		window.addEventListener(LATTICE_EVENT.reloadComponent, reload);
 		return () => window.removeEventListener(LATTICE_EVENT.reloadComponent, reload);
 	}, [
 		load,
 		node.id,
-		state
+		query
 	]);
 	useEffect(() => {
 		if (!isInfinite || !pagination.hasMore || processing || !infiniteLoaderRef.current || typeof IntersectionObserver === "undefined") return;
@@ -178,15 +188,17 @@ function useTable(node) {
 		columns,
 		rows,
 		pagination,
-		state,
-		filters: state.filters,
-		tableFilters: state.tableFilters,
+		query,
+		filters: query.filters,
+		tableFilters: query.tableFilters,
+		search: query.search,
 		addFilter,
 		updateFilter,
 		removeFilter,
 		replaceColumnFilters,
 		setTableFilter,
 		resetFilters,
+		setSearch,
 		searchFilterOptions,
 		processing,
 		hasLoaded,