@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/containers/data-grid/column-menu.js

@@ -0,0 +1,361 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowLeftToLine,
+  ArrowRight,
+  ArrowRightToLine,
+  ArrowUp,
+  EllipsisVertical,
+  EyeOff,
+  Filter,
+  Layers,
+  Minus,
+  MoveHorizontal,
+  PinOff,
+  Plus,
+  X
+} from "lucide-react";
+import { useId, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "../../overlays/popover/popover.js";
+import { cn } from "../../utils/cn.js";
+import {
+  checkedSetValues,
+  filterKindOf,
+  isFilterActive,
+  searchOptions,
+  toggleSetValues
+} from "./model.js";
+const itemClass = "flex min-h-8 w-full items-center gap-2 rounded-xs px-2 text-left text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink focus-visible:bg-surface-2 focus-visible:text-ink disabled:pointer-events-none disabled:opacity-40 aria-pressed:text-accent-ink [&_svg]:size-3.5 [&_svg]:shrink-0";
+const inputClass = "h-control-sm w-full min-w-0 rounded-input border-control bg-surface-control px-2 text-[13px] text-ink placeholder:text-ink-3 focus-visible:border-accent focus-visible:outline-none";
+function Item({
+  icon: Icon,
+  children,
+  pressed,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs("button", { type: "button", "aria-pressed": pressed, className: itemClass, ...props, children: [
+    /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children })
+  ] });
+}
+function Section({ children, label }) {
+  return /* @__PURE__ */ jsxs("div", { className: "border-t-divider py-1 first:border-t-0 first:pt-0 last:pb-0", children: [
+    label ? /* @__PURE__ */ jsx("p", { className: "px-2 pt-1 pb-1.5 font-[650] text-[11px] text-ink-3 uppercase tracking-[.07em]", children: label }) : null,
+    children
+  ] });
+}
+function parseNumber(text) {
+  const value = Number.parseFloat(text.replace(",", "."));
+  return Number.isFinite(value) ? value : null;
+}
+function SetFilterEditor({
+  column,
+  filter,
+  labels,
+  values,
+  onFilter
+}) {
+  const id = useId();
+  const [query, setQuery] = useState("");
+  const options = values();
+  const visible = searchOptions(options, query);
+  const checked = checkedSetValues(options, filter);
+  const visibleChecked = visible.filter((value) => checked.has(value)).length;
+  const allVisible = visible.length > 0 && visibleChecked === visible.length;
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        "aria-label": `${labels.searchValues}: ${column.header}`,
+        placeholder: labels.searchValues,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        className: inputClass
+      }
+    ),
+    /* @__PURE__ */ jsxs("fieldset", { className: "grid max-h-48 gap-0.5 overflow-y-auto", children: [
+      /* @__PURE__ */ jsx("legend", { className: "sr-only", children: `${labels.filter}: ${column.header}` }),
+      /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 items-center gap-2 border-b-divider px-1 text-[13px] text-ink-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: "size-4 accent-accent",
+            checked: allVisible,
+            disabled: visible.length === 0,
+            ref: (node) => {
+              if (node) node.indeterminate = visibleChecked > 0 && !allVisible;
+            },
+            onChange: () => onFilter(toggleSetValues(options, filter, visible, !allVisible))
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: labels.selectAllValues }),
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] text-ink-3 tabular-nums", children: labels.valuesChecked(checked.size, options.length) })
+      ] }),
+      visible.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-1 py-1.5 text-[13px] text-ink-3", children: labels.noMatches }) : null,
+      visible.map((value, index) => /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: `${id}-${index}`,
+          className: "flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink",
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: `${id}-${index}`,
+                type: "checkbox",
+                className: "size-4 accent-accent",
+                checked: checked.has(value),
+                onChange: (event) => onFilter(toggleSetValues(options, filter, [value], event.target.checked))
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: value || "\u2014" })
+          ]
+        },
+        value
+      ))
+    ] })
+  ] });
+}
+function FilterEditor({
+  column,
+  filter,
+  labels,
+  values,
+  onFilter
+}) {
+  const id = useId();
+  const kind = filterKindOf(column);
+  const name = column.header;
+  if (kind === "text") {
+    const query = filter?.kind === "text" ? filter.query : "";
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "search",
+        "aria-label": `${labels.filter}: ${name}`,
+        placeholder: labels.contains,
+        value: query,
+        onChange: (event) => onFilter({ kind: "text", query: event.target.value }),
+        className: inputClass
+      }
+    );
+  }
+  if (kind === "range") {
+    const range = filter?.kind === "range" ? filter : { kind: "range" };
+    return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1.5", children: ["min", "max"].map((end) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "number",
+        inputMode: "decimal",
+        "aria-label": `${name}: ${labels[end]}`,
+        placeholder: labels[end],
+        value: range[end] ?? "",
+        onChange: (event) => onFilter({ ...range, kind: "range", [end]: parseNumber(event.target.value) }),
+        className: inputClass
+      },
+      end
+    )) });
+  }
+  if (kind === "dateRange") {
+    const range = filter?.kind === "dateRange" ? filter : { kind: "dateRange" };
+    return /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: ["from", "to"].map((end) => /* @__PURE__ */ jsxs("label", { className: "grid grid-cols-[3.5rem_1fr] items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[12px] text-ink-3", children: labels[end] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "date",
+          value: range[end] ?? "",
+          onChange: (event) => onFilter({ ...range, kind: "dateRange", [end]: event.target.value || null }),
+          className: inputClass
+        }
+      )
+    ] }, end)) });
+  }
+  if (kind === "set") {
+    return /* @__PURE__ */ jsx(
+      SetFilterEditor,
+      {
+        column,
+        filter,
+        labels,
+        values,
+        onFilter
+      }
+    );
+  }
+  const selected = filter?.kind === "select" ? filter.values : [];
+  const options = values();
+  const toggle = (value, checked) => {
+    const next = checked ? [...selected, value] : selected.filter((x) => x !== value);
+    onFilter({ kind: "select", values: next });
+  };
+  return /* @__PURE__ */ jsxs("fieldset", { className: "grid max-h-48 gap-0.5 overflow-y-auto", children: [
+    /* @__PURE__ */ jsx("legend", { className: "sr-only", children: `${labels.filter}: ${name}` }),
+    /* @__PURE__ */ jsxs("label", { className: "flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          className: "size-4 accent-accent",
+          checked: selected.length === 0,
+          onChange: () => onFilter(void 0)
+        }
+      ),
+      labels.allValues
+    ] }),
+    options.map((value, index) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: `${id}-${index}`,
+        className: "flex min-h-7 items-center gap-2 px-1 text-[13px] text-ink",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: `${id}-${index}`,
+              type: "checkbox",
+              className: "size-4 accent-accent",
+              checked: selected.includes(value),
+              onChange: (event) => toggle(value, event.target.checked)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: value })
+        ]
+      },
+      value
+    ))
+  ] });
+}
+function ColumnMenu(props) {
+  const { column, labels, open, onOpenChange, onCloseFocus, sortDirection, filter, pinned } = props;
+  const sortable = column.sortable !== false;
+  const filterable = column.filterable !== false;
+  const pinnable = column.pinnable !== false;
+  const groupable = column.groupable === true;
+  const resizable = column.resizable !== false;
+  const reorderable = column.reorderable !== false;
+  const active = isFilterActive(filter);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        tabIndex: -1,
+        "aria-label": labels.columnMenu(column.header),
+        title: labels.columnMenu(column.header),
+        className: cn(
+          "relative grid size-6 shrink-0 place-items-center rounded-xs text-ink-3 hover:bg-surface-2 hover:text-ink",
+          active && "text-accent-ink"
+        ),
+        children: active ? /* @__PURE__ */ jsx(Filter, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx(EllipsisVertical, { "aria-hidden": "true", className: "size-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "end",
+        "aria-label": labels.columnMenu(column.header),
+        className: "w-64 normal-case tracking-normal",
+        onCloseAutoFocus: (event) => {
+          event.preventDefault();
+          onCloseFocus();
+        },
+        children: [
+          sortable ? /* @__PURE__ */ jsxs(Section, { children: [
+            /* @__PURE__ */ jsx(
+              Item,
+              {
+                icon: ArrowUp,
+                pressed: sortDirection === "asc",
+                onClick: () => props.onSort("asc"),
+                children: labels.sortAsc
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Item,
+              {
+                icon: ArrowDown,
+                pressed: sortDirection === "desc",
+                onClick: () => props.onSort("desc"),
+                children: labels.sortDesc
+              }
+            ),
+            sortDirection ? /* @__PURE__ */ jsx(Item, { icon: X, onClick: () => props.onSort(null), children: labels.clearSort }) : null
+          ] }) : null,
+          filterable ? /* @__PURE__ */ jsx(Section, { label: labels.filter, children: /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5 px-1 pb-1", children: [
+            /* @__PURE__ */ jsx(
+              FilterEditor,
+              {
+                column,
+                filter,
+                labels,
+                values: props.values,
+                onFilter: props.onFilter
+              }
+            ),
+            active ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cn(itemClass, "min-h-7"),
+                onClick: () => props.onFilter(void 0),
+                children: [
+                  /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+                  labels.clearFilter
+                ]
+              }
+            ) : null
+          ] }) }) : null,
+          pinnable || groupable ? /* @__PURE__ */ jsxs(Section, { children: [
+            pinnable && pinned !== "left" ? /* @__PURE__ */ jsx(Item, { icon: ArrowLeftToLine, onClick: () => props.onPin("left"), children: labels.pinLeft }) : null,
+            pinnable && pinned !== "right" ? /* @__PURE__ */ jsx(Item, { icon: ArrowRightToLine, onClick: () => props.onPin("right"), children: labels.pinRight }) : null,
+            pinnable && pinned ? /* @__PURE__ */ jsx(Item, { icon: PinOff, onClick: () => props.onPin(null), children: labels.unpin }) : null,
+            groupable ? /* @__PURE__ */ jsx(
+              Item,
+              {
+                icon: Layers,
+                pressed: props.grouped,
+                onClick: () => props.onGroup(!props.grouped),
+                children: props.grouped ? labels.removeGrouping : labels.groupBy
+              }
+            ) : null
+          ] }) : null,
+          reorderable || resizable || props.canHide ? /* @__PURE__ */ jsxs(Section, { children: [
+            reorderable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Item,
+                {
+                  icon: ArrowLeft,
+                  disabled: !props.canMoveLeft,
+                  onClick: () => props.onMove(-1),
+                  children: labels.moveLeft
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Item,
+                {
+                  icon: ArrowRight,
+                  disabled: !props.canMoveRight,
+                  onClick: () => props.onMove(1),
+                  children: labels.moveRight
+                }
+              )
+            ] }) : null,
+            resizable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Item, { icon: Minus, onClick: () => props.onResize(-24), children: labels.narrower }),
+              /* @__PURE__ */ jsx(Item, { icon: Plus, onClick: () => props.onResize(24), children: labels.wider }),
+              /* @__PURE__ */ jsx(Item, { icon: MoveHorizontal, onClick: () => props.onResize(null), children: labels.resetWidth })
+            ] }) : null,
+            props.canHide ? /* @__PURE__ */ jsx(Item, { icon: EyeOff, onClick: props.onHide, children: labels.hide }) : null
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ColumnMenu
+};

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

@@ -0,0 +1,199 @@
+import { type ReactNode } from "react";
+import type { DataSource } from "./data-source.js";
+import type { DateStepMode } from "./fill-series.js";
+import { type FilterGroup } from "./filter-builder.js";
+import { type ChangeSource, type HistorySummary } from "./history.js";
+import { type DataGridLabels } from "./labels.js";
+import { type PivotConfig } from "./pivot.js";
+import { type PinnedRows } from "./rows.js";
+import type { CellValue, DataGridColumn, Density, Filters, SortRule } from "./types.js";
+export interface CellChange<T> {
+    row: T;
+    rowId: string;
+    columnId: string;
+    value: CellValue;
+    previous: CellValue;
+    /** Where the change comes from; `undo` and `redo` replay an earlier change in reverse or again. */
+    source?: ChangeSource;
+}
+/** Rows added or removed by the toolbar buttons, or by an undo / redo of them. */
+export interface RowsChange<T> {
+    type: "add" | "remove";
+    /** Ascending by `index` (the position in the `data` the grid was given). */
+    rows: ReadonlyArray<{
+        row: T;
+        rowId: string;
+        index: number;
+    }>;
+    source: "edit" | "undo" | "redo";
+}
+export interface RowReorderEvent {
+    rowId: string;
+    fromIndex: number;
+    toIndex: number;
+    /** Ids of all rows in the new order. */
+    order: string[];
+}
+export interface ExportPayload {
+    csv: string;
+    filename: string;
+    rowCount: number;
+}
+export interface XlsxExportPayload {
+    /** The .xlsx file. */
+    bytes: Uint8Array;
+    filename: string;
+    rowCount: number;
+}
+export interface DataGridProps<T> {
+    /** Rows to show. Optional with `dataSource`, which loads them. */
+    data?: readonly T[];
+    columns: readonly DataGridColumn<T>[];
+    /** Accessible name of the grid. */
+    "aria-label": string;
+    /** Stable row id (selection, editing, keys). The data index by default. */
+    getRowId?: (row: T, index: number) => string;
+    /** Maximum height of the scrolling body in px (virtualized mode). */
+    height?: number;
+    /** Switches from virtualized scrolling to pagination with this page size. */
+    pageSize?: number;
+    pageSizeOptions?: readonly number[];
+    /** localStorage key that remembers column order, widths, visibility, pins and density. */
+    storageKey?: string;
+    sort?: readonly SortRule[];
+    defaultSort?: readonly SortRule[];
+    onSortChange?: (sort: SortRule[]) => void;
+    filters?: Filters;
+    defaultFilters?: Filters;
+    onFiltersChange?: (filters: Filters) => void;
+    groupBy?: readonly string[];
+    defaultGroupBy?: readonly string[];
+    onGroupByChange?: (groupBy: string[]) => void;
+    defaultPinned?: {
+        left?: readonly string[];
+        right?: readonly string[];
+    };
+    defaultHidden?: readonly string[];
+    density?: Density;
+    defaultDensity?: Density;
+    onDensityChange?: (density: Density) => void;
+    /** Adds a checkbox column; Shift selects a range. */
+    selectable?: boolean;
+    selectedRowIds?: readonly string[];
+    defaultSelectedRowIds?: readonly string[];
+    onSelectionChange?: (ids: string[]) => void;
+    /** Called when an inline edit is committed with a different value. The grid does not mutate `data`. */
+    onCellChange?: (change: CellChange<T>) => void;
+    /**
+     * Called once with every cell a paste, fill, undo or redo changes. Without it those changes go to
+     * `onCellChange` one by one, which loses updates if the parent sets state from stale data.
+     */
+    onCellsChange?: (changes: CellChange<T>[]) => void;
+    /** Undo / redo of cell edits, paste, fill and row changes: buttons plus Ctrl / Cmd + Z, Shift + Ctrl / Cmd + Z, Ctrl + Y. */
+    history?: boolean;
+    /** Commands kept for undo (and for redo). 100 by default. */
+    historyDepth?: number;
+    onHistoryChange?: (history: HistorySummary) => void;
+    /**
+     * Spreadsheet formulas: a cell whose text starts with `=` is evaluated (`=B2*C2`, `=SUM(D2:D9)`,
+     * `=IF(E2>100,"alto","bajo")`). Columns are lettered in the order of `columns` and rows are
+     * numbered in the order of `data`; a formula bar shows the raw content of the focused cell.
+     * Off with `dataSource` and `pivot`.
+     */
+    formulas?: boolean;
+    /** Adds the "add row" button: the new row is appended through `onRowsChange`. */
+    createRow?: () => T;
+    /** Rows added (`createRow`), removed (the toolbar button removes the selected rows) or restored by undo. */
+    onRowsChange?: (change: RowsChange<T>) => void;
+    /**
+     * Server-side rows. Sort, filters and quick search are sent to `getRows` instead of being
+     * applied here; with `pageSize` the grid pages through blocks of that size, without it rows are
+     * loaded as you scroll. Grouping, tree data, row pinning, pivot and detail rows are off.
+     */
+    dataSource?: DataSource<T>;
+    /** Blocks kept in memory in infinite mode before the least recently used are dropped. */
+    maxBlocks?: number;
+    /** Shows `data` as a tree: `getParentId` links a row to its parent (nullish for roots). */
+    tree?: {
+        getParentId: (row: T) => string | null | undefined;
+    };
+    /** Expanded row ids: tree nodes and rows with a detail panel. */
+    expandedRowIds?: readonly string[];
+    defaultExpandedRowIds?: readonly string[];
+    onExpandedRowsChange?: (ids: string[]) => void;
+    /** Detail panel (master / detail) rendered under an expanded row. */
+    renderDetail?: (row: T, rowId: string) => ReactNode;
+    /** Height of a detail panel in px (fixed so rows stay virtualizable). 240 by default. */
+    detailHeight?: number | ((row: T) => number);
+    /** Adds pin-to-top / pin-to-bottom buttons to rows; pinned rows stay in view while scrolling. */
+    rowPinning?: boolean;
+    pinnedRows?: PinnedRows;
+    defaultPinnedRows?: PinnedRows;
+    onPinnedRowsChange?: (pinned: PinnedRows) => void;
+    /** Drag handle and Alt + arrows to reorder rows; works without sort, filters or grouping. */
+    rowReorder?: boolean;
+    /** Called with the new order; the grid does not mutate `data`. */
+    onRowReorder?: (event: RowReorderEvent) => void;
+    /** Rectangular cell selection by drag, Shift + click or Shift + arrows, with Ctrl + C as TSV. */
+    rangeSelection?: boolean;
+    /**
+     * How the fill handle reads series. `dateStep`: "auto" (default) continues dates by months when they
+     * share the day of the month and by days otherwise; "day" and "month" force one unit.
+     */
+    fillSeries?: {
+        dateStep?: DateStepMode;
+    };
+    /**
+     * Adds a "Graficar" button to the range status bar (turns `rangeSelection` on): the selected cells
+     * open a bar, line, area or pie chart under the grid. The text column of the range names the
+     * categories and each numeric column is a series. The chart code is loaded when first used.
+     */
+    charts?: boolean;
+    /** Advanced filter (AND / OR groups of conditions) applied after the column filters. */
+    advancedFilter?: FilterGroup;
+    defaultAdvancedFilter?: FilterGroup;
+    onAdvancedFilterChange?: (filter: FilterGroup) => void;
+    /** Adds the advanced filter button to the toolbar. */
+    showAdvancedFilter?: boolean;
+    /** Side panel to show, hide and reorder columns, group rows and set up a pivot. */
+    toolPanel?: boolean;
+    defaultToolPanelOpen?: boolean;
+    /** Pivot: row fields x pivot column x aggregated value. */
+    pivot?: PivotConfig;
+    defaultPivot?: PivotConfig;
+    onPivotChange?: (pivot: PivotConfig) => void;
+    loading?: boolean;
+    /** Shown when there are no rows (a filtered-out message is used when filters are active). */
+    emptyMessage?: ReactNode;
+    /** Footer with the column aggregates. On when some column has `aggregate`. */
+    showFooter?: boolean;
+    /** Hides search, chips, density, columns and export. */
+    hideToolbar?: boolean;
+    /** CSV file name for the export button; `false` hides the button. */
+    exportFilename?: string | false;
+    /** Called with the CSV right before it is downloaded. */
+    onExport?: (payload: ExportPayload) => void;
+    /**
+     * Adds an "Exportar XLSX" button: a file name (`"ventas.xlsx"`) or `true` for `datos.xlsx`. Same
+     * rows and columns as the CSV export, with numbers as numbers and dates as dates. The writer
+     * (`@jcsoftdev/ui/xlsx`) is loaded when the button is used, so it costs nothing until then.
+     */
+    exportXlsx?: string | boolean;
+    /** Called with the file right before it is downloaded. */
+    onExportXlsx?: (payload: XlsxExportPayload) => void;
+    toolbarActions?: ReactNode;
+    labels?: Partial<DataGridLabels>;
+    className?: string;
+}
+/** Starts a CSV download in the browser (no-op on the server). */
+export declare function downloadCSV(filename: string, csv: string): void;
+/** Starts a file download in the browser (no-op on the server). */
+export declare function downloadFile(filename: string, data: BlobPart, type: string): void;
+/**
+ * Data grid with sorting, filters, quick search, column pinning, resizing, reordering and
+ * visibility, row selection, grouping with aggregates, inline editing, virtualized rows or
+ * pagination, CSV export, and full keyboard navigation (ARIA grid pattern, roving tabindex).
+ * It adapts to its container width: the toolbar wraps and the grid scrolls horizontally with
+ * its pinned columns kept in place.
+ */
+export declare function DataGrid<T>({ data: dataProp, columns: columnsProp, "aria-label": ariaLabel, getRowId: getRowIdProp, height, pageSize: pageSizeProp, pageSizeOptions, storageKey, sort: sortProp, defaultSort, onSortChange, filters: filtersProp, defaultFilters, onFiltersChange, groupBy: groupByProp, defaultGroupBy, onGroupByChange, defaultPinned, defaultHidden, density: densityProp, defaultDensity, onDensityChange, selectable, selectedRowIds, defaultSelectedRowIds, onSelectionChange, onCellChange, onCellsChange, formulas, history: historyEnabled, historyDepth, onHistoryChange, createRow, onRowsChange, dataSource, maxBlocks, tree, expandedRowIds, defaultExpandedRowIds, onExpandedRowsChange, renderDetail, detailHeight, rowPinning, pinnedRows, defaultPinnedRows, onPinnedRowsChange, rowReorder, onRowReorder, rangeSelection: rangeSelectionProp, fillSeries: fillSeriesOptions, charts, advancedFilter: advancedFilterProp, defaultAdvancedFilter, onAdvancedFilterChange, showAdvancedFilter, toolPanel, defaultToolPanelOpen, pivot: pivotProp, defaultPivot, onPivotChange, loading, emptyMessage, showFooter, hideToolbar, exportFilename, onExport, exportXlsx, onExportXlsx, toolbarActions, labels: labelsProp, className, }: DataGridProps<T>): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { type Venta } from "./data-grid.fixtures.js";
+import { type DataGridProps } from "./data-grid.js";
+export type DemoControls = Pick<DataGridProps<Venta>, "density" | "selectable" | "loading" | "hideToolbar" | "height">;
+export declare function ValidationDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function RowPinningDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function RowReorderDemo({ density }: DemoControls): import("react").JSX.Element;
+export declare function ExpansionDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function PersistenceDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function KeyboardDemo({ density }: DemoControls): import("react").JSX.Element;
+export declare function TreeDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function RemotePaginationDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function InfiniteScrollDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function FilterBuilderDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function MasterDetailDemo({ density, height }: DemoControls): import("react").JSX.Element;
+export declare function ExportDemo({ density, height }: DemoControls): import("react").JSX.Element;