@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/containers/data-grid/tool-panel.d.ts

@@ -0,0 +1,31 @@
+import type { DataGridLabels } from "./labels.js";
+import type { PivotConfig } from "./pivot.js";
+import type { DataGridColumn } from "./types.js";
+export declare const EMPTY_PIVOT: PivotConfig;
+export interface GridToolPanelProps<T> {
+    labels: DataGridLabels;
+    columns: readonly DataGridColumn<T>[];
+    /** Columns the grid shows now (a pivot replaces them); `columns` when absent. */
+    shownColumns?: readonly DataGridColumn<T>[];
+    /** Every column id in layout order. */
+    order: readonly string[];
+    hidden: readonly string[];
+    onHidden: (id: string, hidden: boolean) => void;
+    onMove: (id: string, delta: number) => void;
+    groupBy: readonly string[];
+    onGroup: (id: string, on: boolean) => void;
+    pivot: PivotConfig;
+    onPivot: (next: PivotConfig) => void;
+    pivotValid: boolean;
+    /** Row grouping is off while a tree, pivot or remote source drives the rows. */
+    canGroup: boolean;
+    canPivot: boolean;
+    /** Height cap in px; the panel scrolls inside it. */
+    maxHeight?: number;
+    className?: string;
+}
+/**
+ * Side panel to show, hide and reorder columns, group rows and configure a pivot (row fields,
+ * pivot column, aggregated value). It stacks above the grid when its container is narrow.
+ */
+export declare function GridToolPanel<T>({ labels, columns, shownColumns, order, hidden, onHidden, onMove, groupBy, onGroup, pivot, onPivot, pivotValid, canGroup, canPivot, maxHeight, className, }: GridToolPanelProps<T>): import("react").JSX.Element;

package/dist/containers/data-grid/tool-panel.js

@@ -0,0 +1,222 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { useId } from "react";
+import { cn } from "../../utils/cn.js";
+const AGGREGATES = ["sum", "avg", "count", "min", "max"];
+const EMPTY_PIVOT = {
+  enabled: false,
+  rows: [],
+  column: "",
+  value: "",
+  aggregate: "sum"
+};
+const selectClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink focus-visible:border-accent focus-visible:outline-none";
+const iconButton = "grid size-6 shrink-0 place-items-center rounded-xs text-ink-3 hover:bg-surface hover:text-ink disabled:pointer-events-none disabled:opacity-30 [&_svg]:size-3.5";
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxs("section", { className: "grid gap-1 border-b-divider p-2 last:border-b-0", children: [
+    /* @__PURE__ */ jsx("h3", { className: "px-1 pb-0.5 font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]", children: title }),
+    children
+  ] });
+}
+function Check({
+  checked,
+  disabled,
+  onChange,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 min-w-0 flex-1 items-center gap-2 text-[13px] text-ink", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: "size-4 shrink-0 accent-accent",
+        checked,
+        disabled,
+        onChange: (event) => onChange(event.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children })
+  ] });
+}
+function GridToolPanel({
+  labels,
+  columns,
+  shownColumns,
+  order,
+  hidden,
+  onHidden,
+  onMove,
+  groupBy,
+  onGroup,
+  pivot,
+  onPivot,
+  pivotValid,
+  canGroup,
+  canPivot,
+  maxHeight,
+  className
+}) {
+  const id = useId();
+  const byId = new Map((shownColumns ?? columns).map((column) => [column.id, column]));
+  const ordered = order.map((key) => byId.get(key)).filter((c) => !!c);
+  const visibleCount = ordered.length - hidden.length;
+  const groupable = columns.filter((column) => column.groupable === true);
+  const dimensions = columns.filter(
+    (column) => column.type !== "number" && column.type !== "currency"
+  );
+  const measures = columns.filter(
+    (column) => column.type === "number" || column.type === "currency"
+  );
+  const patch = (next) => onPivot({ ...pivot, ...next });
+  const pivotOn = pivot.enabled !== false && canPivot;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "aria-label": labels.toolPanel,
+      style: maxHeight ? { maxHeight } : void 0,
+      className: cn(
+        "min-h-0 min-w-0 overflow-y-auto bg-surface-2/40 text-[13px] @max-2xl/grid:max-h-72 @max-2xl/grid:border-b-divider @2xl/grid:w-64 @2xl/grid:shrink-0 @2xl/grid:border-l-divider",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Section, { title: labels.panelColumns, children: /* @__PURE__ */ jsx("ul", { className: "grid gap-0.5", children: ordered.map((column, index) => {
+          const isHidden = hidden.includes(column.id);
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-center gap-1 rounded-xs px-1 hover:bg-surface",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Check,
+                  {
+                    checked: !isHidden,
+                    disabled: column.hideable === false || !isHidden && visibleCount <= 1,
+                    onChange: (checked) => onHidden(column.id, !checked),
+                    children: column.header
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: iconButton,
+                    "aria-label": `${labels.moveColumnUp}: ${column.header}`,
+                    title: labels.moveColumnUp,
+                    disabled: index === 0 || column.reorderable === false,
+                    onClick: () => onMove(column.id, -1),
+                    children: /* @__PURE__ */ jsx(ArrowUp, { "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: iconButton,
+                    "aria-label": `${labels.moveColumnDown}: ${column.header}`,
+                    title: labels.moveColumnDown,
+                    disabled: index === ordered.length - 1 || column.reorderable === false,
+                    onClick: () => onMove(column.id, 1),
+                    children: /* @__PURE__ */ jsx(ArrowDown, { "aria-hidden": "true" })
+                  }
+                )
+              ]
+            },
+            column.id
+          );
+        }) }) }),
+        groupable.length > 0 ? /* @__PURE__ */ jsx(Section, { title: labels.panelRowGroups, children: /* @__PURE__ */ jsx("ul", { className: "grid gap-0.5", children: groupable.map((column) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1 px-1", children: [
+          /* @__PURE__ */ jsx(
+            Check,
+            {
+              checked: groupBy.includes(column.id),
+              disabled: !canGroup,
+              onChange: (checked) => onGroup(column.id, checked),
+              children: column.header
+            }
+          ),
+          groupBy.includes(column.id) ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-ink-3 tabular-nums", children: groupBy.indexOf(column.id) + 1 }) : null
+        ] }, column.id)) }) }) : null,
+        measures.length > 0 && dimensions.length > 1 ? /* @__PURE__ */ jsxs(Section, { title: labels.panelPivot, children: [
+          /* @__PURE__ */ jsx(
+            Check,
+            {
+              checked: pivotOn,
+              disabled: !canPivot,
+              onChange: (checked) => patch({ enabled: checked }),
+              children: labels.pivotMode
+            }
+          ),
+          pivotOn ? /* @__PURE__ */ jsxs("div", { className: "grid gap-2 pt-1", children: [
+            /* @__PURE__ */ jsxs("fieldset", { className: "grid gap-0.5 border-0 p-0", children: [
+              /* @__PURE__ */ jsx("legend", { className: "px-1 pb-0.5 text-[12px] text-ink-3", children: labels.pivotRows }),
+              dimensions.filter((column) => column.id !== pivot.column).map((column) => /* @__PURE__ */ jsx("div", { className: "flex items-center px-1", children: /* @__PURE__ */ jsx(
+                Check,
+                {
+                  checked: pivot.rows.includes(column.id),
+                  onChange: (checked) => patch({
+                    rows: checked ? [...pivot.rows, column.id] : pivot.rows.filter((x) => x !== column.id)
+                  }),
+                  children: column.header
+                }
+              ) }, column.id))
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "grid gap-1", htmlFor: `${id}-column`, children: [
+              /* @__PURE__ */ jsx("span", { className: "px-1 text-[12px] text-ink-3", children: labels.pivotColumn }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  id: `${id}-column`,
+                  className: selectClass,
+                  value: pivot.column,
+                  onChange: (event) => patch({
+                    column: event.target.value,
+                    rows: pivot.rows.filter((x) => x !== event.target.value)
+                  }),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: labels.noneOption }),
+                    dimensions.map((column) => /* @__PURE__ */ jsx("option", { value: column.id, children: column.header }, column.id))
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "grid gap-1", htmlFor: `${id}-value`, children: [
+              /* @__PURE__ */ jsx("span", { className: "px-1 text-[12px] text-ink-3", children: labels.pivotValue }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  id: `${id}-value`,
+                  className: selectClass,
+                  value: pivot.value,
+                  onChange: (event) => patch({ value: event.target.value }),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: labels.noneOption }),
+                    measures.map((column) => /* @__PURE__ */ jsx("option", { value: column.id, children: column.header }, column.id))
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "grid gap-1", htmlFor: `${id}-aggregate`, children: [
+              /* @__PURE__ */ jsx("span", { className: "px-1 text-[12px] text-ink-3", children: labels.pivotAggregate }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  id: `${id}-aggregate`,
+                  className: selectClass,
+                  value: pivot.aggregate,
+                  onChange: (event) => patch({ aggregate: event.target.value }),
+                  children: AGGREGATES.map((kind) => /* @__PURE__ */ jsx("option", { value: kind, children: labels.aggregate[kind] }, kind))
+                }
+              )
+            ] }),
+            pivotValid ? null : /* @__PURE__ */ jsx("p", { role: "status", className: "px-1 text-[12px] text-ink-3", children: labels.pivotIncomplete })
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  EMPTY_PIVOT,
+  GridToolPanel
+};

package/dist/containers/data-grid/tree.d.ts

@@ -0,0 +1,25 @@
+import type { DataGridColumn, DisplayRow } from "./types.js";
+export interface TreeOptions<T> {
+    getKey: (row: T) => string;
+    /** Key of the parent row; nullish for roots. Unknown parents make the row a root. */
+    getParentId: (row: T) => string | null | undefined;
+}
+/**
+ * Keeps `matches` plus every ancestor of a match, in the order of `all`, so a filtered tree
+ * still shows the path to each hit.
+ */
+export declare function withAncestors<T>(all: readonly T[], matches: readonly T[], options: TreeOptions<T>): T[];
+export interface TreeResult<T> {
+    rows: DisplayRow<T>[];
+    /** Rows without children: what the footer totals aggregate. */
+    leaves: T[];
+}
+/**
+ * Depth-first flattening. Children keep the order of `rows` (sort before calling). A collapsed
+ * node hides its subtree unless `forceExpand` is on. Parents carry the aggregates of every leaf
+ * below them. Cycles are cut where they close.
+ */
+export declare function buildTreeRows<T>(rows: readonly T[], columns: readonly DataGridColumn<T>[], options: TreeOptions<T> & {
+    expanded: ReadonlySet<string>;
+    forceExpand?: boolean;
+}): TreeResult<T>;

package/dist/containers/data-grid/tree.js

@@ -0,0 +1,65 @@
+import { computeAggregates } from "./model.js";
+function withAncestors(all, matches, options) {
+  const byKey = new Map(all.map((row) => [options.getKey(row), row]));
+  const keep = /* @__PURE__ */ new Set();
+  for (const row of matches) {
+    let current = row;
+    while (current) {
+      const key = options.getKey(current);
+      if (keep.has(key)) break;
+      keep.add(key);
+      const parent = options.getParentId(current);
+      current = parent === null || parent === void 0 ? void 0 : byKey.get(parent);
+    }
+  }
+  return all.filter((row) => keep.has(options.getKey(row)));
+}
+function buildTreeRows(rows, columns, options) {
+  const { getKey, getParentId, expanded, forceExpand = false } = options;
+  const keys = new Set(rows.map(getKey));
+  const children = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const row of rows) {
+    const parent = getParentId(row);
+    if (parent === null || parent === void 0 || !keys.has(parent) || parent === getKey(row)) {
+      roots.push(row);
+    } else {
+      const list = children.get(parent);
+      if (list) list.push(row);
+      else children.set(parent, [row]);
+    }
+  }
+  const out = [];
+  const leaves = [];
+  const visited = /* @__PURE__ */ new Set();
+  const walk = (row, depth) => {
+    const key = getKey(row);
+    visited.add(key);
+    const kids = (children.get(key) ?? []).filter((child) => !visited.has(getKey(child)));
+    const isExpanded = forceExpand || expanded.has(key);
+    const entry = {
+      kind: "data",
+      key,
+      depth,
+      row,
+      tree: { hasChildren: kids.length > 0, expanded: isExpanded, aggregates: {} }
+    };
+    out.push(entry);
+    if (kids.length === 0) {
+      leaves.push(row);
+      return [row];
+    }
+    const below = [];
+    const mark = out.length;
+    for (const child of kids) below.push(...walk(child, depth + 1));
+    if (entry.tree) entry.tree.aggregates = computeAggregates(below, columns);
+    if (!isExpanded) out.length = mark;
+    return below;
+  };
+  for (const root of roots) walk(root, 0);
+  return { rows: out, leaves };
+}
+export {
+  buildTreeRows,
+  withAncestors
+};

package/dist/containers/data-grid/types.d.ts

@@ -0,0 +1,154 @@
+import type { ReactNode } from "react";
+import type { ChipTone } from "../../atoms/chip/chip.js";
+import type { PinSide } from "../table/pin.js";
+export type { PinSide };
+export type CellValue = string | number | boolean | Date | null | undefined;
+export type ColumnType = "text" | "number" | "currency" | "date" | "status" | "boolean"
+/** A mini chart per row; see `DataGridColumn.sparkline`. The accessor still drives sort, filter and CSV. */
+ | "sparkline";
+export type ColumnAlign = "start" | "center" | "end";
+export type AggregateKind = "sum" | "avg" | "count" | "min" | "max";
+/** `set` is `select` with a searchable checkbox list and a select-all control. */
+export type FilterKind = "text" | "range" | "dateRange" | "select" | "set";
+export type EditorKind = "text" | "number" | "select";
+export type SortDirection = "asc" | "desc";
+export type Density = "compact" | "normal" | "comfortable";
+export interface SortRule {
+    id: string;
+    direction: SortDirection;
+}
+/** One filter per column. Empty values (blank query, open range, no values) match everything. */
+export type FilterValue = {
+    kind: "text";
+    query: string;
+} | {
+    kind: "range";
+    min?: number | null;
+    max?: number | null;
+}
+/** ISO dates (`yyyy-mm-dd`), both ends inclusive. */
+ | {
+    kind: "dateRange";
+    from?: string | null;
+    to?: string | null;
+} | {
+    kind: "select";
+    values: readonly string[];
+};
+export type Filters = Readonly<Record<string, FilterValue>>;
+export interface CellContext<T> {
+    row: T;
+    rowId: string;
+    value: CellValue;
+    /** The value as text, with the column's formatter applied. */
+    formatted: string;
+}
+/** Mini chart of a `sparkline` column. */
+export interface SparklineOptions<T> {
+    /** Points of the row's chart, in order; `null` leaves a gap. */
+    values: (row: T) => ReadonlyArray<number | null>;
+    kind?: "line" | "area" | "bar";
+    /** CSS color of the line or bars. */
+    color?: string;
+    /** Accessible description of each chart, e.g. "Ventas de los últimos 7 días". */
+    label?: string | ((row: T) => string);
+}
+export interface DataGridColumn<T> {
+    id: string;
+    header: string;
+    /** Property name or function that reads the cell value from a row. */
+    accessor: keyof T | ((row: T) => CellValue);
+    /** Custom cell content; the formatted text is used otherwise. */
+    cell?: (context: CellContext<T>) => ReactNode;
+    /** Drives formatting, alignment, the default filter and the default editor. `text` by default. */
+    type?: ColumnType;
+    /** Text shown for a value (cells, filters, group rows, CSV keeps raw numbers). */
+    format?: (value: CellValue) => string;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    /**
+     * Weight of the leftover width this column takes when the grid is wider than its columns.
+     * Text columns default to `1`, the rest to `0` (fixed); a user-resized column never grows.
+     */
+    grow?: number;
+    align?: ColumnAlign;
+    sortable?: boolean;
+    filterable?: boolean;
+    /** Overrides the filter picked from `type`. */
+    filter?: FilterKind;
+    pinnable?: boolean;
+    hideable?: boolean;
+    resizable?: boolean;
+    reorderable?: boolean;
+    groupable?: boolean;
+    /** Shown in group rows and in the footer totals. */
+    aggregate?: AggregateKind;
+    /** Chip tone per status value (`status` columns). */
+    statusTones?: Readonly<Record<string, ChipTone>>;
+    editable?: boolean | ((row: T) => boolean);
+    /** Editor kind; `number` for numeric types, `select` when `options` exist, `text` otherwise. */
+    editor?: EditorKind;
+    /** Values offered by the `select` editor. */
+    options?: readonly string[];
+    /**
+     * Returns an error message when `value` is not acceptable, nothing otherwise. A failing edit stays
+     * open with the message instead of being committed; already invalid cells are flagged.
+     */
+    validate?: (value: CellValue, row: T) => string | null | undefined;
+    /** Mini chart per row for `type: "sparkline"` columns. */
+    sparkline?: SparklineOptions<T>;
+    /** Header group path from the outermost level down; adjacent columns sharing it share a header. */
+    group?: string | readonly string[];
+}
+export interface GroupDisplayRow {
+    kind: "group";
+    key: string;
+    depth: number;
+    columnId: string;
+    label: string;
+    count: number;
+    collapsed: boolean;
+    aggregates: Record<string, number | null>;
+}
+/** Tree metadata of a data row (`tree` mode). */
+export interface TreeInfo {
+    hasChildren: boolean;
+    expanded: boolean;
+    /** Aggregates over all descendant leaves; only for rows with children. */
+    aggregates: Record<string, number | null>;
+}
+export interface DataDisplayRow<T> {
+    kind: "data";
+    key: string;
+    depth: number;
+    row: T;
+    tree?: TreeInfo;
+}
+/** Detail panel shown under an expanded data row (master / detail). */
+export interface DetailDisplayRow<T> {
+    kind: "detail";
+    key: string;
+    depth: number;
+    row: T;
+    rowKey: string;
+    height: number;
+}
+/** A row of a remote data source whose block is not loaded yet. */
+export interface PlaceholderDisplayRow {
+    kind: "placeholder";
+    key: string;
+    index: number;
+}
+export type DisplayRow<T> = GroupDisplayRow | DataDisplayRow<T> | DetailDisplayRow<T> | PlaceholderDisplayRow;
+/** Column layout the user can change; it is what `storageKey` persists. */
+export interface GridLayout {
+    order: string[];
+    hidden: string[];
+    widths: Record<string, number>;
+    pinned: {
+        left: string[];
+        right: string[];
+    };
+    density?: Density;
+}

package/dist/containers/data-grid/use-data-source.d.ts

@@ -0,0 +1,31 @@
+import { type DataSource } from "./data-source.js";
+import type { Filters, SortRule } from "./types.js";
+export interface DataSourceParams {
+    sort: readonly SortRule[];
+    filters: Filters;
+    search: string;
+    blockSize: number;
+    maxBlocks?: number;
+    /** Rows currently shown: `[start, end)` of the sorted, filtered result. */
+    range: {
+        start: number;
+        end: number;
+    };
+}
+export interface DataSourceView<T> {
+    /** Row count reported by the server; null until the first response. */
+    total: number | null;
+    rowAt: (index: number) => T | undefined;
+    /** A request is in flight for the shown range. */
+    loading: boolean;
+    /** The shown range failed to load. */
+    failed: boolean;
+    retry: () => void;
+    /** Changes whenever a block settles. */
+    version: number;
+}
+/**
+ * Drives a `DataSource`: one `BlockCache` per sort / filter / search / block size, blocks fetched
+ * for the shown range, late responses of an older query dropped.
+ */
+export declare function useDataSource<T>(source: DataSource<T> | undefined, params: DataSourceParams): DataSourceView<T>;

package/dist/containers/data-grid/use-data-source.js

@@ -0,0 +1,77 @@
+"use client";
+import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
+import { BlockCache } from "./data-source.js";
+function useDataSource(source, params) {
+  const { sort, filters, search, blockSize, maxBlocks = 20, range } = params;
+  const [version, bump] = useReducer((n) => n + 1, 0);
+  const query = JSON.stringify({ sort, filters, search });
+  const cache = useMemo(
+    () => new BlockCache(blockSize, maxBlocks),
+    [source, query, blockSize, maxBlocks]
+  );
+  const controllers = useRef(/* @__PURE__ */ new Set());
+  const latest = useRef({ sort, filters, search });
+  latest.current = { sort, filters, search };
+  const fetchMissing = useCallback(
+    (start2, end2) => {
+      if (!source) return;
+      for (const block of cache.missing(start2, end2)) {
+        cache.markLoading(block);
+        const controller = new AbortController();
+        const startRow = block * cache.blockSize;
+        source.getRows(
+          {
+            startRow,
+            endRow: startRow + cache.blockSize,
+            sort: [...latest.current.sort],
+            filters: latest.current.filters,
+            search: latest.current.search
+          },
+          { signal: controller.signal }
+        ).then((result) => {
+          if (controller.signal.aborted) return;
+          cache.setBlock(block, result.rows, result.total, cache.blocksFor(start2, end2));
+          bump();
+        }).catch(() => {
+          if (controller.signal.aborted) return;
+          cache.markError(block);
+          bump();
+        });
+        controllers.current.add(controller);
+      }
+      bump();
+    },
+    [source, cache]
+  );
+  useEffect(
+    () => () => {
+      for (const controller of controllers.current) controller.abort();
+      controllers.current.clear();
+    },
+    [cache]
+  );
+  const { start, end } = range;
+  useEffect(() => {
+    if (!source) return;
+    const wantEnd = cache.total === null ? Math.max(end, start + cache.blockSize) : end;
+    const missing = cache.missing(start, wantEnd);
+    if (missing.length > 0) fetchMissing(start, wantEnd);
+    else cache.touch(cache.blocksFor(start, wantEnd));
+  }, [source, cache, start, end, fetchMissing, version]);
+  const rowAt = useCallback((index) => cache.getRow(index), [cache, version]);
+  const retry = useCallback(() => {
+    cache.retry(start, Math.max(end, start + 1));
+    fetchMissing(start, Math.max(end, start + 1));
+  }, [cache, start, end, fetchMissing]);
+  return {
+    total: cache.total,
+    rowAt,
+    loading: cache.isLoading(start, Math.max(end, start + 1)) || source !== void 0 && cache.total === null && !cache.hasError(0, 1),
+    failed: cache.hasError(start, Math.max(end, start + 1)) || cache.total === null && cache.hasError(0, 1),
+    retry,
+    version
+  };
+}
+export {
+  useDataSource
+};

package/dist/containers/data-grid/use-grid-layout.d.ts

@@ -0,0 +1,25 @@
+import { type PinSide } from "../table/pin.js";
+import type { DataGridColumn, Density, GridLayout } from "./types.js";
+export interface LayoutDefaults {
+    pinned?: {
+        left?: readonly string[];
+        right?: readonly string[];
+    };
+    hidden?: readonly string[];
+    density: Density;
+}
+/**
+ * Column order, visibility, widths, pins and density. Starts from the column definitions and
+ * the defaults, then (after mount, so server and client render the same) from `storageKey`.
+ */
+export declare function useGridLayout<T>(columns: readonly DataGridColumn<T>[], defaults: LayoutDefaults, storageKey?: string): {
+    layout: GridLayout;
+    setWidth: (id: string, width: number) => void;
+    resetWidth: (id: string) => void;
+    move: (id: string, delta: number) => void;
+    moveTo: (id: string, targetId: string, place: "before" | "after") => void;
+    pin: (id: string, side: PinSide | null) => void;
+    setHidden: (id: string, hidden: boolean) => void;
+    setDensity: (density: Density) => void;
+    reset: () => void;
+};