@jielga/tmdatagrid 0.1.0

package/src/tmdatagrid/TMDataGridFilterPanel.tsx

@@ -0,0 +1,182 @@
+import { ActionIcon, Button, Select, Stack, TextInput } from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import classes from "./TMDataGrid.module.css";
+import { useTMDataGridContext } from "./TMDataGridContext";
+import { getColumnLabel, getColumnType } from "./columnUtils";
+import {
+  type TMDataGridFilterOperator,
+  type TMDataGridFilterValue,
+  FILTER_OPERATOR_LABELS,
+  getDefaultOperator,
+  getOperatorsForType,
+  isTMDataGridFilterValue,
+  operatorNeedsValue,
+} from "./filterOperators";
+import { CloseIcon } from "./icons";
+
+const FALLBACK_FILTER: TMDataGridFilterValue = { operator: "contains", value: "" };
+
+function asFilterValue(value: unknown): TMDataGridFilterValue {
+  return isTMDataGridFilterValue(value) ? value : FALLBACK_FILTER;
+}
+
+/**
+ * The MUI-style filter surface: one row per active column filter, each row a
+ * column / operator / value triple. It only ever reads and writes the table's
+ * `columnFilters` state, so a `manualFiltering` grid gets the same panel for
+ * free — the state is forwarded to the server instead of a row model.
+ */
+export function TMDataGridFilterPanel() {
+  const { table, ui, controlSize } = useTMDataGridContext();
+  const opened = useSelector(ui, (state) => state.filterPanelOpen);
+  const columnFilters = useSelector(
+    table.store,
+    (state) => state.columnFilters,
+  );
+
+  if (!opened) return null;
+
+  const filterableColumns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanFilter());
+
+  const columnOptions = filterableColumns.map((column) => ({
+    value: column.id,
+    label: getColumnLabel(column),
+  }));
+
+  function removeFilter(columnId: string) {
+    const remaining = columnFilters.filter((filter) => filter.id !== columnId);
+    table.setColumnFilters(remaining);
+    if (remaining.length === 0) ui.actions.closeFilterPanel();
+  }
+
+  function changeFilterColumn(fromColumnId: string, toColumnId: string) {
+    const current = asFilterValue(
+      columnFilters.find((filter) => filter.id === fromColumnId)?.value,
+    );
+    const target = table.getColumn(toColumnId);
+    table.setColumnFilters(
+      columnFilters
+        .filter((filter) => filter.id !== toColumnId)
+        .map((filter) =>
+          filter.id === fromColumnId
+            ? {
+                id: toColumnId,
+                value: {
+                  operator: getDefaultOperator(
+                    target ? getColumnType(target) : "string",
+                  ),
+                  value: current.value,
+                } satisfies TMDataGridFilterValue,
+              }
+            : filter,
+        ),
+    );
+    ui.actions.openFilterPanel(toColumnId);
+  }
+
+  function patchFilter(columnId: string, patch: Partial<TMDataGridFilterValue>) {
+    table.setColumnFilters(
+      columnFilters.map((filter) =>
+        filter.id === columnId
+          ? { ...filter, value: { ...asFilterValue(filter.value), ...patch } }
+          : filter,
+      ),
+    );
+  }
+
+  function addFilter() {
+    const nextColumn = filterableColumns.find(
+      (column) => !columnFilters.some((filter) => filter.id === column.id),
+    );
+    if (!nextColumn) return;
+    table.setColumnFilters([
+      ...columnFilters,
+      {
+        id: nextColumn.id,
+        value: {
+          operator: getDefaultOperator(getColumnType(nextColumn)),
+          value: "",
+        } satisfies TMDataGridFilterValue,
+      },
+    ]);
+  }
+
+  return (
+    <div className={classes.filterPanel}>
+      <Stack gap="xs">
+        {columnFilters.map((filter) => {
+          const column = table.getColumn(filter.id);
+          const value = asFilterValue(filter.value);
+          const type = column ? getColumnType(column) : "string";
+          const needsValue = operatorNeedsValue(value.operator);
+
+          return (
+            <div key={filter.id} className={classes.filterRow}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                size="lg"
+                aria-label="Remove filter"
+                onClick={() => removeFilter(filter.id)}
+              >
+                <CloseIcon size={18} stroke={1.6} />
+              </ActionIcon>
+
+              <Select
+                label="Column"
+                size={controlSize}
+                w={160}
+                allowDeselect={false}
+                data={columnOptions}
+                value={filter.id}
+                onChange={(next) => next && changeFilterColumn(filter.id, next)}
+              />
+
+              <Select
+                label="Operator"
+                size={controlSize}
+                w={170}
+                allowDeselect={false}
+                data={getOperatorsForType(type).map((operator) => ({
+                  value: operator,
+                  label: FILTER_OPERATOR_LABELS[operator],
+                }))}
+                value={value.operator}
+                onChange={(next) =>
+                  next &&
+                  patchFilter(filter.id, {
+                    operator: next as TMDataGridFilterOperator,
+                  })
+                }
+              />
+
+              <TextInput
+                label="Value"
+                size={controlSize}
+                w={180}
+                type={type === "number" && needsValue ? "number" : "text"}
+                disabled={!needsValue}
+                placeholder={needsValue ? "Filter value" : ""}
+                value={needsValue ? value.value : ""}
+                onChange={(event) =>
+                  patchFilter(filter.id, { value: event.currentTarget.value })
+                }
+              />
+            </div>
+          );
+        })}
+
+        <Button
+          variant="subtle"
+          size="compact-sm"
+          style={{ alignSelf: "flex-start" }}
+          onClick={addFilter}
+        >
+          Add filter
+        </Button>
+      </Stack>
+    </div>
+  );
+}

package/src/tmdatagrid/TMDataGridFooter.tsx

@@ -0,0 +1,74 @@
+import { ActionIcon, Group, Select, Text } from "@mantine/core";
+import { useSelector } from "@tanstack/react-store";
+import classes from "./TMDataGrid.module.css";
+import { useTMDataGridContext } from "./TMDataGridContext";
+import { ChevronLeftIcon, ChevronRightIcon } from "./icons";
+
+export type TMDataGridFooterProps = {
+  pageSizeOptions?: ReadonlyArray<number>;
+};
+
+/**
+ * MUI-style pager: "Rows per page · from–to of total · ‹ ›".
+ *
+ * Row totals come from `table.getRowCount()`, which prefers `options.rowCount`
+ * — so a server-paged grid shows the server's total without changes here.
+ */
+export function TMDataGridFooter({
+  pageSizeOptions = [10, 25, 50, 100],
+}: TMDataGridFooterProps) {
+  const { table, controlSize } = useTMDataGridContext();
+  useSelector(table.store);
+
+  const { pageIndex, pageSize } = table.store.state.pagination;
+  const total = table.getRowCount();
+  const from = total === 0 ? 0 : pageIndex * pageSize + 1;
+  const to = Math.min(total, (pageIndex + 1) * pageSize);
+
+  return (
+    <div className={classes.footer}>
+      <Group gap="xs" wrap="nowrap">
+        <Text size={controlSize} c="dimmed">
+          Rows per page:
+        </Text>
+        <Select
+          size={controlSize}
+          w={78}
+          allowDeselect={false}
+          variant="unstyled"
+          data={pageSizeOptions.map(String)}
+          value={String(pageSize)}
+          onChange={(value) => {
+            table.setPageSize(Number(value) || pageSizeOptions[0]);
+            table.setPageIndex(0);
+          }}
+        />
+      </Group>
+
+      <Text size={controlSize} c="dimmed">
+        {from}–{to} of {total}
+      </Text>
+
+      <Group gap={4} wrap="nowrap">
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          aria-label="Previous page"
+          disabled={!table.getCanPreviousPage()}
+          onClick={() => table.previousPage()}
+        >
+          <ChevronLeftIcon size={18} stroke={1.6} />
+        </ActionIcon>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          aria-label="Next page"
+          disabled={!table.getCanNextPage()}
+          onClick={() => table.nextPage()}
+        >
+          <ChevronRightIcon size={18} stroke={1.6} />
+        </ActionIcon>
+      </Group>
+    </div>
+  );
+}