@coreui/react-data-grid 0.1.0-rc.0

package/dist/cjs/types.d.ts

@@ -0,0 +1,287 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO react-data-grid types.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+import type { DataGridColumn, DataGridColumnSizingOptions, DataGridDataRequest, DataGridDataResponse, DataGridEditCommitEvent, DataGridItem, DataGridLabels, DataGridPaginationOptions, DataGridRowSelectionOptions, DataGridSortingOptions } from '@coreui/data-grid';
+import type { CsvDownloadOptions } from '@coreui/data-grid/csv';
+import type { Column, ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingState, PaginationState, RowSelectionState, SortingState, Table, VisibilityState } from '@tanstack/react-table';
+import type { ComponentType, CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface CDataGridSlotProps {
+    table: Table<DataGridItem>;
+    labels: DataGridLabels;
+}
+export interface CDataGridSlots {
+    toolbar: ComponentType<CDataGridSlotProps>;
+    pagination: ComponentType<CDataGridSlotProps>;
+    empty: ComponentType<CDataGridSlotProps>;
+}
+export interface CDataGridToolbarOptions {
+    columns?: boolean;
+    export?: boolean | CsvDownloadOptions;
+    history?: boolean;
+    search?: boolean;
+}
+export interface CDataGridColumnFilterProps {
+    column: Column<DataGridItem, unknown>;
+    table: Table<DataGridItem>;
+    labels: DataGridLabels;
+}
+export interface CDataGridEditorHandle {
+    contains?: (target: Node) => boolean;
+    focus?: () => void;
+    getValue?: () => unknown;
+}
+export interface CDataGridEditorProps {
+    column: CDataGridColumn;
+    item: DataGridItem;
+    value: unknown;
+    invalid: string | null;
+    labels: DataGridLabels;
+    commit: (value: unknown) => void;
+    cancel: () => void;
+    handleRef: (handle: CDataGridEditorHandle | null) => void;
+}
+export interface CDataGridColumn extends Omit<DataGridColumn, 'editor' | 'filter' | 'render' | 'style'> {
+    editor?: ComponentType<CDataGridEditorProps>;
+    editorPopup?: boolean;
+    filter?: ComponentType<CDataGridColumnFilterProps>;
+    render?: (item: DataGridItem, index: number) => ReactNode;
+    style?: CSSProperties;
+}
+export interface CDataGridMenuAction {
+    key: string;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+    icon?: ReactNode;
+    run: () => void;
+}
+export interface CDataGridColumnMenuContext {
+    column: CDataGridColumn;
+    defaultActions: CDataGridMenuAction[];
+}
+export type CDataGridColumnMenuBuilder = (context: CDataGridColumnMenuContext) => CDataGridMenuAction[];
+export interface CDataGridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * APG grid keyboard navigation — `role="grid"`, a roving-tabindex active cell, and arrow-key movement across header and data cells.
+     */
+    cellNavigation?: boolean;
+    /**
+     * Renders a filter row in the header with an input per filterable column.
+     */
+    columnFilters?: boolean;
+    /**
+     * Adds a per-column header menu — `true` builds it from the enabled features (sort/pin/move/hide); a builder `({ column, defaultActions }) => actions` returns the final item list.
+     */
+    columnMenu?: boolean | CDataGridColumnMenuBuilder;
+    /**
+     * Custom column menu button icon (ReactNode) replacing the default one.
+     */
+    columnMenuIcon?: ReactNode;
+    /**
+     * Enables drag-and-drop column reordering; an array sets the initial order.
+     */
+    columnOrder?: boolean | ColumnOrderState;
+    /**
+     * Freezes columns (by `key`) to the left/right edge with sticky positioning; `true` enables the feature with no initial pins.
+     */
+    columnPinning?: boolean | ColumnPinningState;
+    /**
+     * Enables column resize handles; `mode` controls whether widths update while dragging (`'onChange'`, the default) or on release (`'onEnd'`).
+     */
+    columnSizing?: boolean | DataGridColumnSizingOptions;
+    /**
+     * Enables hiding/showing columns via `column.toggleVisibility()`; an object sets the initial visibility.
+     */
+    columnVisibility?: boolean | VisibilityState;
+    /**
+     * Column definitions.
+     */
+    columns: CDataGridColumn[];
+    /**
+     * Server-side mode: the grid requests data on every sorting/filter/page change; implies pagination.
+     */
+    dataProvider?: (request: DataGridDataRequest) => Promise<DataGridDataResponse>;
+    /**
+     * Inline cell editing on Enter/F2/double-click for columns opting in via `editable`/`editor`; implies `cellNavigation`.
+     */
+    editing?: boolean;
+    /**
+     * Content (ReactNode) shown when no rows match.
+     */
+    empty?: ReactNode;
+    /** Icon for the per-column filter button. */
+    filterIcon?: ReactNode;
+    /**
+     * Renders a search input above the grid that filters across all columns.
+     */
+    globalFilter?: boolean;
+    /**
+     * Undo/redo history of edit commits — Ctrl/Cmd+Z and Ctrl+Shift+Z/Ctrl+Y plus toolbar buttons; requires `editing`.
+     */
+    history?: boolean;
+    /**
+     * Custom hide-column menu action icon (ReactNode) replacing the default one.
+     */
+    hideColumnIcon?: ReactNode;
+    /**
+     * Stable row id — required for selection to survive sorting and filtering.
+     */
+    itemKey?: (item: DataGridItem, index: number) => string;
+    /**
+     * Row data.
+     */
+    items?: DataGridItem[];
+    /**
+     * UI strings (i18n), merged over the defaults; supports `{token}` interpolation.
+     */
+    labels?: Partial<DataGridLabels>;
+    /**
+     * Custom move-left menu action icon (ReactNode) replacing the default one.
+     */
+    moveLeftIcon?: ReactNode;
+    /**
+     * Custom move-right menu action icon (ReactNode) replacing the default one.
+     */
+    moveRightIcon?: ReactNode;
+    /**
+     * Fires when the data provider rejects, with the error (server-side mode).
+     */
+    onDataError?: (error: unknown) => void;
+    /**
+     * Fires when the data provider resolves, with the `{ items, totalRows }` response (server-side mode).
+     */
+    onDataLoad?: (response: DataGridDataResponse) => void;
+    /**
+     * Fires when an edit is cancelled, with the item and column key.
+     */
+    onEditCancel?: (item: DataGridItem, columnId: string) => void;
+    /**
+     * Fires when an edit commits, with `{ item, columnId, value, previousValue }` — the grid never mutates `items`; apply the change and re-render.
+     */
+    onEditCommit?: (event: DataGridEditCommitEvent) => void;
+    /**
+     * Fires when a cell enters edit mode, with the item and column key.
+     */
+    onEditStart?: (item: DataGridItem, columnId: string) => void;
+    /**
+     * Fires when column filters or the global filter change, with both filter states.
+     */
+    onFilterChange?: (columnFilters: ColumnFiltersState, globalFilter: string) => void;
+    /**
+     * Fires when columns are reordered, with the TanStack columnOrder state.
+     */
+    onOrderChange?: (columnOrder: ColumnOrderState) => void;
+    /**
+     * Fires when the page or page size changes, with the TanStack pagination state.
+     */
+    onPaginationChange?: (pagination: PaginationState) => void;
+    /**
+     * Fires when column pinning changes, with the TanStack columnPinning state.
+     */
+    onPinningChange?: (columnPinning: ColumnPinningState) => void;
+    /**
+     * Fires when the row selection changes, with the TanStack rowSelection state and the selected items.
+     */
+    onSelectionChange?: (rowSelection: RowSelectionState, selectedItems: DataGridItem[]) => void;
+    /**
+     * Fires when a column is resized, with the TanStack columnSizing state.
+     */
+    onSizingChange?: (columnSizing: ColumnSizingState) => void;
+    /**
+     * Fires when sorting changes, with the TanStack sorting state.
+     */
+    onSortingChange?: (sorting: SortingState) => void;
+    /**
+     * Fires when column visibility changes, with the TanStack columnVisibility state.
+     */
+    onVisibilityChange?: (columnVisibility: VisibilityState) => void;
+    /**
+     * Extra rows rendered above and below the visible window.
+     */
+    overscan?: number;
+    /**
+     * Pagination mode — mutually exclusive with virtualization.
+     */
+    pagination?: boolean | DataGridPaginationOptions;
+    /**
+     * Custom pin-left menu action icon (ReactNode) replacing the default one.
+     */
+    pinLeftIcon?: ReactNode;
+    /**
+     * Custom pin-right menu action icon (ReactNode) replacing the default one.
+     */
+    pinRightIcon?: ReactNode;
+    /**
+     * Estimated row height in px used by the virtualizer.
+     */
+    rowHeight?: number;
+    /**
+     * Checkbox selection with select-all and shift+click ranges.
+     */
+    rowSelection?: boolean | DataGridRowSelectionOptions;
+    /**
+     * Replaces built-in chrome — each slot is a component rendered with `{ table, labels }`.
+     */
+    slots?: Partial<CDataGridSlots>;
+    /**
+     * Custom ascending sort indicator icon (ReactNode) replacing the default one.
+     */
+    sortAscendingIcon?: ReactNode;
+    /**
+     * Custom descending sort indicator icon (ReactNode) replacing the default one.
+     */
+    sortDescendingIcon?: ReactNode;
+    /**
+     * Custom unsorted sort indicator icon (ReactNode) replacing the default one.
+     */
+    sortNeutralIcon?: ReactNode;
+    /**
+     * Controls when the neutral (unsorted) sort icon is shown on sortable columns: `'always'` keeps it visible, `'hover'` reveals it on header hover/focus. Omit to hide it until the column is sorted.
+     */
+    sorterVisibility?: 'always' | 'hover';
+    /**
+     * Column sorting; shift+click adds columns to the sort.
+     */
+    sorting?: boolean | DataGridSortingOptions;
+    /**
+     * Persists the grid state (sorting, filters, order, sizing, visibility, pinning, selection, page) to localStorage under this key — autosaved on every change and restored on mount.
+     */
+    stateKey?: string;
+    /**
+     * Ref that receives the TanStack table instance.
+     */
+    tableRef?: Ref<Table<DataGridItem>>;
+    /**
+     * Adds a built-in toolbar above the grid — `true` enables every action whose feature is on (column chooser, CSV export, global search); an object picks each individually.
+     */
+    toolbar?: boolean | CDataGridToolbarOptions;
+    /**
+     * Custom toolbar column-chooser button icon (ReactNode) replacing the default one.
+     */
+    toolbarColumnsIcon?: ReactNode;
+    /**
+     * Custom toolbar export button icon (ReactNode) replacing the default one.
+     */
+    toolbarExportIcon?: ReactNode;
+    /**
+     * Custom toolbar redo button icon (ReactNode) replacing the default one.
+     */
+    toolbarRedoIcon?: ReactNode;
+    /**
+     * Custom toolbar undo button icon (ReactNode) replacing the default one.
+     */
+    toolbarUndoIcon?: ReactNode;
+    /**
+     * Custom unpin menu action icon (ReactNode) replacing the default one.
+     */
+    unpinIcon?: ReactNode;
+    /**
+     * Windowed rendering for large datasets.
+     */
+    virtualization?: boolean;
+}
+export { type Column, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingState, type PaginationState, type RowSelectionState, type SortingState, type Table, type VisibilityState } from '@tanstack/react-table';
+export { type DataGridColumnFilterValue, type DataGridColumnSizingOptions, type DataGridDataRequest, type DataGridDataResponse, type DataGridEditableOptions, type DataGridEditCommitEvent, type DataGridEditorType, type DataGridFilterCondition, type DataGridFilterOperator, type DataGridFilterType, type DataGridItem, type DataGridLabels, type DataGridPaginationOptions, type DataGridRowSelectionOptions, type DataGridSortingOptions, type DataGridState } from '@coreui/data-grid';

package/dist/esm/CDataGrid.d.ts

@@ -0,0 +1,8 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO react-data-grid CDataGrid.tsx
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+import type { CDataGridProps } from './types';
+export declare const CDataGrid: import("react").ForwardRefExoticComponent<CDataGridProps & import("react").RefAttributes<HTMLDivElement>>;