react-gridix 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,47 +1,13 @@
-import { ButtonHTMLAttributes } from 'react';
 import { ComponentType } from 'react';
 import { CSSProperties } from 'react';
-import { ForwardRefExoticComponent } from 'react';
-import { HTMLAttributes } from 'react';
-import { InputHTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react';
+import { MutableRefObject } from 'react';
 import { ReactNode } from 'react';
-import { ReactPortal } from 'react';
-import { RefAttributes } from 'react';
-
-export declare function Alert({ tone, title, onClose, className, children, ...rest }: AlertProps): JSX_2.Element;
-
-export declare interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    tone?: "info" | "success" | "warning" | "danger";
-    title?: ReactNode;
-    onClose?: () => void;
-}
 
 declare type AnyRow = Record<string, any>;
 
-export declare function Badge({ tone, className, children, ...rest }: BadgeProps): JSX_2.Element;
-
-export declare interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
-    tone?: "neutral" | "info" | "success" | "warning" | "danger";
-}
-
-export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
-
-export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: "primary" | "secondary" | "ghost" | "danger";
-    size?: "sm" | "md" | "lg";
-    loading?: boolean;
-}
-
-export declare function Card({ title, footer, className, children, ...rest }: CardProps): JSX_2.Element;
-
-export declare interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    title?: ReactNode;
-    footer?: ReactNode;
-}
-
 export declare interface CellEditableParams<T = Record<string, any>> {
-    /** The raw value stored in the row. */
+    /** The raw value stored in the row (read from nested objects for `"a.b"` fields). */
     value: unknown;
     /** The value as text, after `valueFormatter`. */
     formattedValue: string;
@@ -54,9 +20,11 @@ export declare interface CellEditableParams<T = Record<string, any>> {
 export declare interface CellEditEvent<T> {
     rowId: string | number;
     rowIndex: number;
+    /** The column's field, for example `"contact.phone"`. */
     field: string;
     oldValue: unknown;
     newValue: unknown;
+    /** The updated row. */
     row: T;
 }
 
@@ -136,7 +104,7 @@ export declare type CheckboxVariant = "button" | "tick" | "native";
 export declare interface ColumnCheckboxOptions {
     /** Overrides the grid's `checkboxVariant` for this column. */
     variant?: CheckboxVariant;
-    /** Replaces what is drawn inside the `"button"` and `"tick"` variants. */
+    /** A custom character (or any node) drawn inside the box when checked, for example `"✕"` or `"★"`. */
     indicator?: ReactNode;
     className?: string;
     style?: CSSProperties;
@@ -145,22 +113,59 @@ export declare interface ColumnCheckboxOptions {
 }
 
 export declare interface ColumnDef<T = Record<string, any>> {
-    /** Key of the row object this column reads and writes. */
-    field: keyof T & string;
-    /** Text shown in the header. Defaults to the field name. */
+    /**
+     * Key of the row object this column reads and writes. Use dot notation for nested objects:
+     * `"contact.phone"`. Edits to a nested field copy the objects on the way and never change your data in place.
+     */
+    field: FieldPath<T> & string;
+    /**
+     * Text shown in the header. Defaults to the field name, except for `type: "boolean"` columns,
+     * which default to an empty string.
+     */
     headerName?: string;
     /**
-     * "number" columns sort numerically and parse edits as numbers.
-     * "boolean" columns show a checkbox that toggles with one click (see `checkbox`).
+     * - `"number"`  : sorts numerically, edits parse as numbers, filters with a min / max range.
+     * - `"boolean"` : shows a checkbox that toggles with one click (see `checkbox`).
+     * - `"date"`    : shows a formatted date, edits with a date picker, sorts by day, filters with a from / to range.
+     *   Values can be ISO strings (`"2026-11-05"`), `Date` objects or timestamps. A date is saved in the same
+     *   kind the cell already had (a `Date` stays a `Date`, a string stays an ISO string).
      */
-    type?: "text" | "number" | "boolean";
+    type?: "text" | "number" | "boolean" | "date";
     width?: number | string;
     minWidth?: number | string;
+    /** Largest width in pixels when the user resizes the column. */
+    maxWidth?: number;
     align?: "left" | "center" | "right";
-    /** Overrides the grid-level `sortable`. */
+    /** Click the header to sort by this column. Default false: sorting is opt-in, column by column. */
     sortable?: boolean;
-    /** Overrides the grid-level `columnFilters`. */
+    /** Let the user drag the right edge of the header to change the column's width. Default false. */
+    resizable?: boolean;
+    /** Keep this column stuck to the left or right edge while the grid scrolls sideways. Pinned columns move to that edge. */
+    pinned?: "left" | "right";
+    /** Start with this column hidden. Needs `columnMenu` on the grid if users should be able to show it again. */
+    hidden?: boolean;
+    /** Set to false to keep this column out of the column menu (it can then never be hidden by the user). */
+    hideable?: boolean;
+    /** Show a filter indicator in this column's header. Default false. Clicking it opens the filter popup. */
     filterable?: boolean;
+    /** Which filter this column gets. Defaults from `type`, see {@link FilterType}. */
+    filterType?: FilterType;
+    /** Choices for a `"select"` filter. When missing they are taken from the values in the loaded rows. */
+    filterOptions?: (string | FilterOption)[];
+    /** Placeholder of the default filter text box. */
+    filterPlaceholder?: string;
+    /** A React component drawn instead of the default dot. Receives `{ column, active, open }`. */
+    filterIndicator?: ComponentType<FilterIndicatorProps<T>>;
+    /** Classes for this column's filter indicator button (Tailwind works). */
+    filterIndicatorClassName?: string;
+    /** Inline styles for this column's filter indicator button. */
+    filterIndicatorStyle?: CSSProperties;
+    /** Classes for this column's filter popup. */
+    filterPopupClassName?: string;
+    /** Inline styles for this column's filter popup. */
+    filterPopupStyle?: CSSProperties;
+    /** A React component that replaces the filter controls inside the popup (text matching only). */
+    filterRenderer?: ComponentType<FilterRendererProps<T>>;
     /**
      * `true` / `false`, or a function that decides per cell. Overrides the grid-level `editable`.
      * Example: `editable: ({ row }) => row.status !== "locked"`.
@@ -174,14 +179,26 @@ export declare interface ColumnDef<T = Record<string, any>> {
     validate?: (value: unknown, row: T) => boolean;
     /** Custom sort. Return a negative, zero or positive number. */
     comparator?: (a: any, b: any, rowA: T, rowB: T) => number;
+    /** `type: "date"`: how the date is shown, as `Intl.DateTimeFormat` options. Default `{ year: "numeric", month: "short", day: "numeric" }`. */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** `type: "date"`: locale for the displayed date, for example `"en-GB"`. Default is the browser's. */
+    dateLocale?: string;
+    /** `type: "date"`: earliest day the date picker accepts, as `"YYYY-MM-DD"`. */
+    dateMin?: string;
+    /** `type: "date"`: latest day the date picker accepts, as `"YYYY-MM-DD"`. */
+    dateMax?: string;
+    /** What goes into the CSV export for this column. Defaults to the displayed text (dates as `YYYY-MM-DD`). */
+    exportValue?: (value: any, row: T) => string | number | boolean | null | undefined;
     /** A React component that renders the cell content. Define it outside render so it keeps its identity. */
     cellRenderer?: ComponentType<CellParams<T>>;
-    /** A React component used instead of the text box when editing this column. */
+    /** A React component used instead of the default editor when editing this column. */
     cellEditor?: ComponentType<CellEditorProps<T>>;
-    /** A React component that renders the header label (the sort arrow is still added). */
+    /** A React component that renders the header label (the filter indicator and sort arrow are still added). */
     headerRenderer?: ComponentType<HeaderRendererProps<T>>;
-    /** A React component that replaces the filter text box under the header. */
-    filterRenderer?: ComponentType<FilterRendererProps<T>>;
+    /** Classes for the whole column: its header cell and every body cell. Tailwind works. */
+    className?: string;
+    /** Inline styles for the whole column: its header cell and every body cell. */
+    style?: CSSProperties;
     headerClassName?: string;
     headerStyle?: CSSProperties;
     cellClassName?: string | ((params: CellParams<T>) => string);
@@ -190,19 +207,34 @@ export declare interface ColumnDef<T = Record<string, any>> {
     checkbox?: ColumnCheckboxOptions;
     /**
      * For `type: "boolean"` columns: draws a checkbox in the header, with the header name as its
-     * label. Clicking it checks every row that matches the current search and filters (all pages),
-     * or unchecks them all when they are already checked. It shows a mixed state when only some
-     * are checked. Ignored when the column has a `headerRenderer`.
+     * label (no label when the name is empty). Clicking it checks every row that matches the current
+     * search and filters (all pages), or unchecks them all when they are already checked. It shows a
+     * mixed state when only some are checked. Ignored when the column has a `headerRenderer`.
      */
     headerCheckbox?: boolean;
 }
 
-export declare function DataGrid<T extends AnyRow = AnyRow>({ columns, rows, getRowId, editable, enterMovesDown, onCellEdit, onRowsChange, sortable, defaultSort, onSortChange, searchable, searchPlaceholder, columnFilters, pagination, paginationPosition, pageSize: initialPageSize, pageSizeOptions, onRowClick, toolbar, emptyMessage, striped, checkboxVariant, maxHeight, className, style, classNames, styles, rowClassName, rowStyle, }: DataGridProps<T>): JSX_2.Element;
+export declare function DataGrid<T extends AnyRow = AnyRow>({ columns, rows, getRowId, editable, enterMovesDown, onCellEdit, onRowsChange, rowSelection, selectedRowIds, defaultSelectedRowIds, onSelectionChange, isRowSelectable, sort: sortProp, defaultSort, onSortChange, multiSort, searchable, searchPlaceholder, search: searchProp, onSearchChange, filters: filtersProp, onFiltersChange, pagination, paginationPosition, pageSize: initialPageSize, pageSizeOptions, page: pageProp, onPageChange, onPageSizeChange, serverSide, rowCount, onQueryChange, queryDebounce, loading: loadingProp, loadingRows, skeletonRow, errorMessage, columnMenu, onColumnVisibilityChange, keyboardNavigation, virtualize, rowHeight, overscan, exportable, apiRef, onRowClick, toolbar, emptyMessage, striped, stripeColors, checkboxVariant, animateRows, theme, maxHeight, className, style, classNames, styles, rowClassName, rowStyle, }: DataGridProps<T>): JSX_2.Element;
+
+/** Methods you can call from outside by passing a ref as `apiRef`. */
+export declare interface DataGridApi<T = Record<string, any>> {
+    /** Builds the CSV text without downloading it. */
+    getCsv: (options?: ExportOptions) => string;
+    /** Downloads a CSV file (opens the browser's save dialog). */
+    exportCsv: (options?: ExportOptions) => void;
+    getSelectedRows: () => T[];
+    getSelectedRowIds: () => (string | number)[];
+    /** Selects every selectable row that matches the search and filters. */
+    selectAll: () => void;
+    clearSelection: () => void;
+    /** Runs the last query again (`serverSide` only). Use it after your data changed on the server. */
+    refresh: () => void;
+}
 
 export declare interface DataGridProps<T = Record<string, any>> {
     columns: ColumnDef<T>[];
     rows: T[];
-    /** Stable id for each row. Defaults to the row's index in `rows`. */
+    /** Stable id for each row. Defaults to the row's index in `rows`. Row selection needs ids that do not change. */
     getRowId?: (row: T, index: number) => string | number;
     /** Allow editing cells (double-click, Enter/F2, or just start typing). Default false. */
     editable?: boolean;
@@ -215,29 +247,110 @@ export declare interface DataGridProps<T = Record<string, any>> {
     onCellEdit?: (event: CellEditEvent<T>) => void;
     /** Fires with the full updated array after a cell edit. Handy for `setRows`. */
     onRowsChange?: (rows: T[]) => void;
-    /** Header click sorting. Default true. */
-    sortable?: boolean;
-    /** Uncontrolled initial sort. */
-    defaultSort?: SortModel | null;
-    onSortChange?: (sort: SortModel | null) => void;
-    /** Global search box above the grid. Default true. */
+    /**
+     * Adds a checkbox column for selecting rows. `true` or `"multiple"` allows many rows (with a
+     * select-all header and Shift+click ranges), `"single"` allows one. Default false.
+     */
+    rowSelection?: boolean | "single" | "multiple";
+    /** Controlled selection: the ids of the selected rows. Pair it with `onSelectionChange`. */
+    selectedRowIds?: (string | number)[];
+    /** Initial selection when you do not control it. */
+    defaultSelectedRowIds?: (string | number)[];
+    /** Fires whenever the selection changes. */
+    onSelectionChange?: (selection: RowSelection<T>) => void;
+    /** Return false for rows that must not be selected (their checkbox is disabled). */
+    isRowSelectable?: (row: T) => boolean;
+    /** Controlled sort. Pair it with `onSortChange`. */
+    sort?: SortModel[];
+    /** Initial sort when you do not control it. */
+    defaultSort?: SortModel | SortModel[] | null;
+    /** Fires with the new sort list (empty when no column is sorted). */
+    onSortChange?: (sort: SortModel[]) => void;
+    /** Hold Shift while clicking headers to sort by several columns. Default false. */
+    multiSort?: boolean;
+    /** Show the global search box. Default false. */
     searchable?: boolean;
     searchPlaceholder?: string;
-    /** Per-column filter inputs under the header. Default true. */
-    columnFilters?: boolean;
-    /** Default true. */
+    /** Controlled search text. Pair it with `onSearchChange`. */
+    search?: string;
+    onSearchChange?: (search: string) => void;
+    /** Controlled filters, by field. Pair it with `onFiltersChange`. */
+    filters?: Record<string, FilterValue>;
+    onFiltersChange?: (filters: Record<string, FilterValue>) => void;
+    /** Split rows into pages and show the row count and page controls. Default false. */
     pagination?: boolean;
     /** Where the row count and page controls go: "bottom" (default), "top" or "both". */
     paginationPosition?: PaginationPosition;
+    /** Initial rows per page. */
     pageSize?: number;
     pageSizeOptions?: number[];
+    /** Controlled page (zero-based). Pair it with `onPageChange`. */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Fires when the user picks another page size. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Let your server sort, filter, search and page. The grid then shows `rows` as they are (the
+     * current page) and calls `onQueryChange` whenever the query changes. Default false.
+     */
+    serverSide?: boolean;
+    /** Total number of rows on the server, for the page count. Needed with `serverSide` and `pagination`. */
+    rowCount?: number;
+    /**
+     * Called on mount and whenever the query changes (`serverSide` only). If it returns a promise,
+     * the grid shows the loading state until the promise settles and shows an error with a Retry
+     * button if it rejects. Update your `rows` (and `rowCount`) before the promise resolves.
+     */
+    onQueryChange?: (query: GridQuery) => void | Promise<unknown>;
+    /** Wait this long (ms) after the last keystroke in the search box before querying. Default 250. */
+    queryDebounce?: number;
+    /**
+     * Force the loading state on or off. When you leave it out, the loading state follows the promise
+     * returned by `onQueryChange`.
+     */
+    loading?: boolean;
+    /** How many placeholder rows to draw while loading. Default: the page size (at most 20), or 5 without pagination. */
+    loadingRows?: number;
+    /** A component that draws one placeholder row's content. Without it each cell gets a shimmering bar. */
+    skeletonRow?: ComponentType<SkeletonRowProps<T>>;
+    /** Shown (with a Retry button) when the promise from `onQueryChange` rejects. */
+    errorMessage?: ReactNode;
+    /** Show a "Columns" button that lets users show and hide columns. Default false. */
+    columnMenu?: boolean;
+    /** Fires with the fields that are hidden now. */
+    onColumnVisibilityChange?: (hiddenFields: string[]) => void;
+    /** Arrow keys, Home/End and Page Up/Down move between cells. Default false. */
+    keyboardNavigation?: boolean;
+    /**
+     * Render only the rows that are on screen, so tens of thousands of rows stay smooth. Needs a fixed
+     * `rowHeight`, and the grid scrolls inside `maxHeight` (400 when you set none). Default false.
+     */
+    virtualize?: boolean;
+    /** Row height in pixels when `virtualize` is on. Rows must fit it. Default 40. */
+    rowHeight?: number;
+    /** Extra rows rendered above and below the visible ones when `virtualize` is on. Default 6. */
+    overscan?: number;
+    /** Show an "Export CSV" button. Pass an object to set the file name, scope and so on. Default false. */
+    exportable?: boolean | ExportOptions;
+    /** Pass a ref to call methods such as `exportCsv()` or `getSelectedRows()` from outside. */
+    apiRef?: MutableRefObject<DataGridApi<T> | null>;
     onRowClick?: (row: T, rowIndex: number) => void;
     /** Extra content on the right side of the toolbar. */
     toolbar?: ReactNode;
     emptyMessage?: ReactNode;
+    /** Alternate row shading. Default false. */
     striped?: boolean;
-    /** Checkbox style for `type: "boolean"` columns: "button", "tick" or "native" (default). */
+    /** Two colours for the alternating rows, for example `["#ffffff", "#f1f5f9"]`. Implies `striped`. */
+    stripeColors?: [string, string];
+    /** Checkbox style for `type: "boolean"` columns and the selection column: "button", "tick" or "native" (default). */
     checkboxVariant?: CheckboxVariant;
+    /** Rows slide in smoothly when they render (new page, sort, search). Default true. Respects "reduce motion". */
+    animateRows?: boolean;
+    /**
+     * Name of a theme. Nothing changes unless you pass one: "ocean", "midnight", "sunset", "forest",
+     * "lavender", "coffee", "graphite" or "aurora", or the name of your own `[data-rk-theme="..."]` CSS.
+     */
+    theme?: GridTheme | (string & {});
     /** Makes the body scroll with a sticky header, e.g. 400 or "60vh". */
     maxHeight?: number | string;
     /** Tailwind or any CSS classes for the root element. */
@@ -252,45 +365,138 @@ export declare interface DataGridProps<T = Record<string, any>> {
     rowStyle?: CSSProperties | ((row: T, rowIndex: number) => CSSProperties);
 }
 
-/** Props received by a column's `filterRenderer` component. */
+/** Value of a `"date"` filter: ISO days (`"2026-11-05"`), both ends included. */
+export declare interface DateRangeFilter {
+    from?: string;
+    to?: string;
+}
+
+export declare interface ExportOptions {
+    /** File name without the extension. Default `"export"`. */
+    filename?: string;
+    /**
+     * Which rows to export.
+     * - `"filtered"` (default): every row matching the search and filters, across all pages
+     * - `"page"`    : only the rows on the current page
+     * - `"selected"`: only the selected rows
+     * With `serverSide`, "filtered" means the rows currently loaded.
+     */
+    scope?: "filtered" | "page" | "selected";
+    /** Also export columns the user has hidden. Default false. */
+    includeHidden?: boolean;
+    /** Add an apostrophe in front of text that starts with `= + - @`, so spreadsheets do not run it as a formula. Default true. */
+    sanitize?: boolean;
+}
+
+/**
+ * Every field a column can point at: top-level keys, plus dot paths into nested objects
+ * (`"contact.phone"`). Goes up to 5 levels deep. Arrays are treated as plain values.
+ */
+export declare type FieldPath<T, D extends number = 5> = [D] extends [never] ? never : T extends Primitive | readonly unknown[] ? never : {
+    [K in keyof T & string]: NonNullable<T[K]> extends Primitive | readonly unknown[] ? K : K | `${K}.${FieldPath<NonNullable<T[K]>, Prev[D]>}`;
+}[keyof T & string];
+
+/** Props received by a column's `filterIndicator` component. */
+export declare interface FilterIndicatorProps<T = Record<string, any>> {
+    column: ColumnDef<T>;
+    /** True while a filter is set for this column. */
+    active: boolean;
+    /** True while the filter popup is open. */
+    open: boolean;
+}
+
+/** An entry in a `"select"` filter's list. A plain string is shorthand for `{ value }`. */
+export declare interface FilterOption {
+    value: string;
+    /** Text shown in the list. Defaults to `value`. */
+    label?: string;
+}
+
+/**
+ * Props received by a column's `filterRenderer` component (shown inside the filter popup).
+ * A column with a `filterRenderer` always filters with a text "contains" match.
+ */
 export declare interface FilterRendererProps<T = Record<string, any>> {
     column: ColumnDef<T>;
     value: string;
     onChange: (value: string) => void;
 }
 
-export declare type GridSlot = "root" | "toolbar" | "search" | "scroll" | "table" | "thead" | "headerRow" | "headerCell" | "filterRow" | "filterCell" | "filterInput" | "tbody" | "row" | "cell" | "editor" | "empty" | "footer" | "rowCount" | "pageInfo" | "pageSize" | "pagination" | "pageButton" | "checkbox" | "checkboxControl" | "checkboxIndicator";
+/**
+ * Which kind of filter a column gets in its popup.
+ * - `"text"`   : "contains" match on the displayed text (default for text columns)
+ * - `"exact"`  : the displayed text must equal what was typed (ignoring case)
+ * - `"number"` : a min / max range (default for `type: "number"` columns)
+ * - `"date"`   : a from / to range (default for `type: "date"` columns)
+ * - `"select"` : pick one or more values from a list (default for `type: "boolean"` columns)
+ */
+export declare type FilterType = "text" | "exact" | "number" | "date" | "select";
+
+/** What a column's filter currently holds. The shape depends on the column's `FilterType`. */
+export declare type FilterValue = string | NumberRangeFilter | DateRangeFilter | string[];
+
+/**
+ * Everything the grid wants from your server in `serverSide` mode. It is sent to `onQueryChange`
+ * on mount and whenever the sort, search, a filter, the page or the page size changes.
+ */
+export declare interface GridQuery {
+    /** Sorted columns, in priority order. Only sortable columns are included. */
+    sort: SortModel[];
+    /** Active filters by field. A filter that is empty is left out. Values depend on each column's `filterType`. */
+    filters: Record<string, FilterValue>;
+    /** The global search text (trimmed). */
+    search: string;
+    /** Zero-based page index. */
+    page: number;
+    pageSize: number;
+}
+
+export declare type GridSlot = "root" | "toolbar" | "search" | "scroll" | "table" | "thead" | "headerRow" | "headerCell" | "filterIndicator" | "filterPopup" | "filterInput" | "tbody" | "row" | "cell" | "editor" | "empty" | "footer" | "rowCount" | "pageInfo" | "pageSize" | "pagination" | "pageButton" | "checkbox" | "checkboxControl" | "checkboxIndicator" | "toolButton" | "skeleton";
+
+/**
+ * Built-in themes. A theme only applies when you pass its name to `<DataGrid theme="..." />`.
+ * Any other string works too if you define `[data-rk-theme="name"]` CSS variables yourself.
+ */
+export declare type GridTheme = "ocean" | "midnight" | "sunset" | "forest" | "lavender" | "coffee" | "graphite" | "aurora";
 
 /** Props received by a column's `headerRenderer` component. */
 export declare interface HeaderRendererProps<T = Record<string, any>> {
     column: ColumnDef<T>;
+    /** Direction this column is sorted in, or null when it is not sorted. */
     sortDirection: SortDirection | null;
 }
 
-export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+export declare type MoveDirection = "down" | "up" | "left" | "right" | "none";
 
-export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
-    error?: string;
-    hint?: string;
+/** Value of a `"number"` filter. Either bound may be missing. */
+export declare interface NumberRangeFilter {
+    min?: number;
+    max?: number;
 }
 
-export declare function Modal({ open, onClose, title, footer, children }: ModalProps): ReactPortal | null;
+export declare type PaginationPosition = "bottom" | "top" | "both";
 
-export declare interface ModalProps {
-    open: boolean;
-    onClose: () => void;
-    title?: ReactNode;
-    footer?: ReactNode;
-    children?: ReactNode;
-}
+declare type Prev = [never, 0, 1, 2, 3, 4, 5];
 
-export declare type MoveDirection = "down" | "up" | "left" | "right" | "none";
+declare type Primitive = string | number | boolean | bigint | symbol | null | undefined | Date | ((...args: any[]) => any);
 
-export declare type PaginationPosition = "bottom" | "top" | "both";
+/** The selected rows. `rows` only holds rows that are loaded in the grid right now (matters with `serverSide`). */
+export declare interface RowSelection<T> {
+    ids: (string | number)[];
+    rows: T[];
+}
+
+/** Props received by the `skeletonRow` component, which draws one placeholder row while loading. */
+export declare interface SkeletonRowProps<T = Record<string, any>> {
+    /** Position of this placeholder row (0, 1, 2 ...). */
+    rowIndex: number;
+    /** The columns that are currently visible. */
+    columns: ColumnDef<T>[];
+}
 
 export declare type SortDirection = "asc" | "desc";
 
+/** One sorted column. The grid keeps a list of these (more than one only with `multiSort`). */
 export declare interface SortModel {
     field: string;
     direction: SortDirection;