@papernote/ui/dist/components/DataGrid.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
/**
 * Cell value type - can be primitive or formula
 */
export type CellValue = string | number | boolean | null;
/**
 * Cell data structure
 */
export interface DataGridCell {
    /** The display/computed value */
    value: CellValue;
    /** Optional formula (e.g., "=SUM(B2:B5)") */
    formula?: string;
    /** Read-only cell */
    readOnly?: boolean;
    /** Custom class name */
    className?: string;
}
/**
 * Column configuration
 */
export interface DataGridColumn {
    /** Unique column key */
    key: string;
    /** Header text */
    header: string;
    /** Column width in pixels */
    width?: number;
    /** Minimum width */
    minWidth?: number;
    /** Text alignment */
    align?: 'left' | 'center' | 'right';
    /** Enable sorting */
    sortable?: boolean;
    /** Enable filtering */
    filterable?: boolean;
    /** Read-only column */
    readOnly?: boolean;
    /** Cell type for formatting */
    type?: 'text' | 'number' | 'currency' | 'percent' | 'date';
    /** Number format options */
    format?: {
        decimals?: number;
        prefix?: string;
        suffix?: string;
    };
}
/**
 * Sort configuration
 */
export interface SortConfig {
    key: string;
    direction: 'asc' | 'desc';
}
/**
 * Filter configuration
 */
export interface FilterConfig {
    key: string;
    value: string;
}
/**
 * Frozen row mode options
 * - 'none': No frozen rows
 * - 'first': Freeze first data row (common for headers in data)
 * - 'selected': Freeze the currently selected row
 * - number: Freeze specific number of rows from top
 */
export type FrozenRowMode = 'none' | 'first' | 'selected' | number;
/**
 * DataGrid component props
 */
export interface DataGridProps {
    /** 2D array of cell data */
    data: DataGridCell[][];
    /** Column configurations */
    columns: DataGridColumn[];
    /** Callback when data changes */
    onChange?: (data: DataGridCell[][], rowIndex: number, colIndex: number) => void;
    /** Row headers (e.g., ["1", "2", "3"] or true for auto) */
    rowHeaders?: boolean | string[];
    /**
     * Frozen rows configuration:
     * - 'none' or 0: No frozen rows
     * - 'first' or 1: Freeze first data row (common for headers in data)
     * - 'selected': Freeze the currently selected row (moves with selection)
     * - number > 1: Freeze specific number of rows from top
     */
    frozenRows?: FrozenRowMode;
    /** Number of frozen columns at left */
    frozenColumns?: number;
    /** Show freeze row toggle button in toolbar */
    showFreezeRowToggle?: boolean;
    /** Enable zebra striping */
    zebraStripes?: boolean;
    /** Enable formula evaluation */
    formulas?: boolean;
    /** Read-only mode */
    readOnly?: boolean;
    /** Table height */
    height?: number | string;
    /** Table width */
    width?: number | string;
    /** Show toolbar */
    showToolbar?: boolean;
    /** Toolbar title */
    title?: string;
    /** Enable export */
    enableExport?: boolean;
    /** Export filename */
    exportFileName?: string;
    /** Enable save */
    enableSave?: boolean;
    /** Save handler */
    onSave?: (data: DataGridCell[][]) => Promise<void> | void;
    /** Custom toolbar actions */
    toolbarActions?: React.ReactNode;
    /** Custom class name */
    className?: string;
    /** Density */
    density?: 'compact' | 'normal' | 'comfortable';
}
/**
 * DataGrid imperative handle
 */
export interface DataGridHandle {
    /** Get current data */
    getData: () => DataGridCell[][];
    /** Set cell value */
    setCell: (rowIndex: number, colIndex: number, value: CellValue | DataGridCell) => void;
    /** Clear all filters */
    clearFilters: () => void;
    /** Clear sorting */
    clearSort: () => void;
    /** Export to CSV */
    exportToCSV: () => void;
    /** Freeze/unfreeze the first row */
    toggleFreezeFirstRow: () => void;
    /** Freeze/unfreeze the selected row */
    toggleFreezeSelectedRow: () => void;
    /** Set frozen rows mode */
    setFrozenRows: (mode: FrozenRowMode) => void;
}
/**
 * DataGrid - Excel-like data grid component with formulas
 *
 * A grid-based spreadsheet component that provides:
 * - Cell-level editing with formula support (280+ Excel formulas)
 * - Sorting and filtering
 * - Frozen rows and columns
 * - Zebra striping
 * - CSV export
 * - Keyboard navigation
 *
 * Uses fast-formula-parser (MIT licensed) for formula evaluation.
 *
 * @example Basic usage
 * ```tsx
 * const columns = [
 *   { key: 'name', header: 'Name' },
 *   { key: 'q1', header: 'Q1', type: 'number' },
 *   { key: 'q2', header: 'Q2', type: 'number' },
 *   { key: 'total', header: 'Total', type: 'number' },
 * ];
 *
 * const data = [
 *   [{ value: 'Widget A' }, { value: 100 }, { value: 150 }, { value: 0, formula: '=SUM(B1:C1)' }],
 *   [{ value: 'Widget B' }, { value: 200 }, { value: 250 }, { value: 0, formula: '=SUM(B2:C2)' }],
 * ];
 *
 * <DataGrid
 *   data={data}
 *   columns={columns}
 *   formulas
 *   zebraStripes
 *   frozenRows={1}
 * />
 * ```
 */
export declare const DataGrid: React.ForwardRefExoticComponent<DataGridProps & React.RefAttributes<DataGridHandle>>;
export default DataGrid;
//# sourceMappingURL=DataGrid.d.ts.map