@piyushnagar/react-editable-table/dist/index.d.ts

A comprehensive, feature-rich React table component with inline editing, sorting, filtering, column resizing, and more

import { default as default_2 } from 'react';

export declare interface CellPosition {
    rowIndex: number;
    columnIndex: number;
    subTableId?: string;
    subRowIndex?: number;
    subColumnIndex?: number;
}

export declare const ColumnFilter: default_2.FC<ColumnFilterProps>;

declare interface ColumnFilterProps {
    column: TableColumn;
    data: TableRow[];
    activeFilters: Record<string, string[]>;
    sortConfig: {
        column: string;
        direction: 'asc' | 'desc';
    } | null;
    onFilterChange: (columnId: string, values: string[]) => void;
    onSort: (columnId: string) => void;
    onClearFilter: (columnId: string) => void;
}

export declare const ColumnResizer: default_2.FC<ColumnResizerProps>;

declare interface ColumnResizerProps {
    columnId: string;
    onMouseDown: (e: default_2.MouseEvent, columnId: string) => void;
    isResizing: boolean;
}

export declare const ColumnVisibilityFilter: default_2.FC<ColumnVisibilityFilterProps>;

declare interface ColumnVisibilityFilterProps {
    columns: TableColumn[];
    visibleColumns: string[];
    onVisibilityChange: (visibleColumnIds: string[]) => void;
}

export declare const ContextMenu: default_2.FC<ContextMenuProps>;

declare interface ContextMenuProps {
    x: number;
    y: number;
    onClose: () => void;
    onCopy: () => void;
    onCut: () => void;
    onPaste: () => void;
    onDelete: () => void;
    onAddRowAbove: () => void;
    onAddRowBelow: () => void;
    onDeleteRow: () => void;
    onEdit: () => void;
    canPaste: boolean;
    hasSelection: boolean;
}

declare interface ContextMenuState {
    isOpen: boolean;
    x: number;
    y: number;
    targetCell: CellPosition | null;
}

export declare const createSampleData: (columns: TableColumn[], rowCount?: number) => TableRow[];

export declare const EditableCell: default_2.FC<EditableCellProps>;

declare interface EditableCellProps {
    row: TableRow;
    column: TableColumn;
    value: any;
    position: CellPosition;
    isSelected: boolean;
    isInSelection: boolean;
    onValueChange: (rowId: string, columnId: string, value: any) => void;
    onCellClick: (position: CellPosition) => void;
    onCellRightClick: (e: default_2.MouseEvent, position: CellPosition) => void;
    isEditing: boolean;
    onStartEdit: () => void;
    onStopEdit: () => void;
    onConfirmAndMoveDown: () => void;
    expandedSubTables?: Set<string>;
    onToggleSubTable?: (rowId: string, columnId: string) => void;
}

export declare const EditableTable: default_2.FC<TableConfig>;

export declare interface FileData {
    id: string;
    name: string;
    size: number;
    type: string;
    url?: string;
    file?: File;
    lastModified?: number;
}

export declare const MultiRowContextMenu: default_2.FC<MultiRowContextMenuProps>;

declare interface MultiRowContextMenuProps {
    x: number;
    y: number;
    selectedRowCount: number;
    onClose: () => void;
    onCopyRows: () => void;
    onCutRows: () => void;
    onPasteRows: () => void;
    onDeleteRows: () => void;
    onSelectAll: () => void;
    onClearSelection: () => void;
    canPaste: boolean;
}

export declare const Pagination: default_2.FC<PaginationProps>;

declare interface PaginationProps {
    currentPage: number;
    totalPages: number;
    totalItems: number;
    pageSize: number;
    onPageChange: (page: number) => void;
}

export declare const RowContextMenu: default_2.FC<RowContextMenuProps>;

declare interface RowContextMenuProps {
    x: number;
    y: number;
    rowIndex: number;
    onClose: () => void;
    onCopyRow: () => void;
    onCutRow: () => void;
    onPasteRow: () => void;
    onAddRowAbove: () => void;
    onAddRowBelow: () => void;
    onDeleteRow: () => void;
    canPaste: boolean;
}

declare interface RowContextMenuState {
    isOpen: boolean;
    x: number;
    y: number;
    rowIndex: number;
}

export declare interface RowSelection {
    selectedRows: Set<number>;
    lastSelectedRow: number | null;
    anchorRow: number | null;
}

export declare interface SelectionRange {
    start: CellPosition;
    end: CellPosition;
}

export declare interface SortConfig {
    column: string;
    direction: 'asc' | 'desc';
}

export declare interface SubTableData {
    id: string;
    rows: TableRow[];
}

export declare const SubTableExpansion: default_2.FC<SubTableExpansionProps>;

declare interface SubTableExpansionProps {
    rowId: string;
    column: TableColumn;
    subTableData: SubTableData;
    totalColumns: number;
    onDataChange: (newData: SubTableData) => void;
    onClose: () => void;
}

export declare interface TableColumn {
    id: string;
    title: string;
    type: 'text' | 'number' | 'integer' | 'date' | 'select' | 'multiselect' | 'boolean' | 'file' | 'table';
    width?: number;
    required?: boolean;
    options?: string[];
    sortable?: boolean;
    editable?: boolean;
    multiple?: boolean;
    acceptedFileTypes?: string[];
    maxFileSize?: number;
    maxFiles?: number;
    subTableSchema?: TableColumn[];
    subTableConfig?: {
        sortable?: boolean;
        filterable?: boolean;
        addRows?: boolean;
        deleteRows?: boolean;
        maxRows?: number;
        minRows?: number;
    };
}

export declare interface TableConfig {
    columns: TableColumn[];
    data: TableRow[];
    sortable?: boolean;
    filterable?: boolean;
    addRows?: boolean;
    deleteRows?: boolean;
    addColumns?: boolean;
    deleteColumns?: boolean;
    pagination?: {
        enabled: boolean;
        pageSize?: number;
    };
    onDataChange?: (data: TableRow[]) => void;
    onColumnChange?: (columns: TableColumn[]) => void;
    onRowAdd?: (newRow: TableRow, insertIndex?: number) => void;
    onRowUpdate?: (updatedRow: TableRow, rowIndex: number, changes: Partial<TableRow>) => void;
    onRowDelete?: (deletedRow: TableRow, rowIndex: number) => void;
    onRowsDelete?: (deletedRows: TableRow[], rowIndices: number[]) => void;
    onRowMove?: (movedRow: TableRow, fromIndex: number, toIndex: number) => void;
    onRowSelect?: (selectedRows: TableRow[], selectedIndices: number[]) => void;
    onRowCopy?: (copiedRows: TableRow[], rowIndices: number[]) => void;
    onRowCut?: (cutRows: TableRow[], rowIndices: number[]) => void;
    onRowPaste?: (pastedRows: TableRow[], targetIndex: number) => void;
    onCellUpdate?: (rowId: string, columnId: string, oldValue: any, newValue: any, rowIndex: number, columnIndex: number) => void;
    onCellSelect?: (rowId: string, columnId: string, value: any, position: CellPosition) => void;
    onCellEdit?: (rowId: string, columnId: string, value: any, position: CellPosition) => void;
    onValidationError?: (errors: ValidationError[]) => void;
    validateRow?: (row: TableRow, rowIndex: number) => ValidationError[];
    validateCell?: (value: any, column: TableColumn, row: TableRow) => string | null;
}

export declare const TableControls: default_2.FC<TableControlsProps>;

declare interface TableControlsProps {
    searchTerm: string;
    onSearchChange: (term: string) => void;
    hasActiveFilters?: boolean;
    activeFilterCount?: number;
    onClearAllFilters?: () => void;
    onAddRow?: () => void;
    onExport?: () => void;
    onImport?: () => void;
    showSearch?: boolean;
    showAddRow?: boolean;
    showExport?: boolean;
    showImport?: boolean;
    columns?: TableColumn[];
    visibleColumns?: string[];
    onColumnVisibilityChange?: (visibleColumnIds: string[]) => void;
    showColumnVisibility?: boolean;
}

export declare const TableHeader: default_2.FC<TableHeaderProps>;

declare interface TableHeaderProps {
    columns: TableColumn[];
    data: TableRow[];
    sortConfig: SortConfig | null;
    columnFilters: Record<string, string[]>;
    onSort: (columnId: string) => void;
    onFilterChange: (columnId: string, values: string[]) => void;
    onClearFilter: (columnId: string) => void;
    onAddColumn?: () => void;
    onDeleteColumn?: (columnId: string) => void;
    showColumnActions?: boolean;
    onColumnResize?: (e: default_2.MouseEvent, columnId: string) => void;
    isResizing?: boolean;
    resizingColumnId?: string | null;
    onColumnDragStart?: (e: default_2.DragEvent, columnIndex: number) => void;
    onColumnDragEnd?: (e: default_2.DragEvent) => void;
    onColumnDragOver?: (e: default_2.DragEvent, columnIndex: number) => void;
    onColumnDragLeave?: () => void;
    onColumnDrop?: (e: default_2.DragEvent, columnIndex: number) => void;
    draggedColumnIndex?: number | null;
    dragOverColumnIndex?: number | null;
}

export declare interface TableRow {
    id: string;
    [key: string]: any;
}

export declare const TableRowComponent: default_2.FC<TableRowProps>;

declare interface TableRowProps {
    row: TableRow;
    rowIndex: number;
    actualRowNumber?: number;
    isSelected?: boolean;
    isCut?: boolean;
    columns: TableColumn[];
    selectedCell: CellPosition | null;
    selectionRange: any;
    onValueChange: (rowId: string, columnId: string, value: any) => void;
    onCellClick: (position: CellPosition) => void;
    onCellRightClick: (e: default_2.MouseEvent, position: CellPosition) => void;
    onRowRightClick?: (e: default_2.MouseEvent, rowIndex: number) => void;
    onRowClick?: (rowIndex: number, isShiftKey: boolean, isCtrlKey: boolean) => void;
    onDeleteRow?: (rowId: string) => void;
    onConfirmEditAndMoveDown?: (position: CellPosition) => void;
    showRowActions?: boolean;
    isDragging?: boolean;
    isDragOver?: boolean;
    onDragStart?: (e: default_2.DragEvent, rowIndex: number) => void;
    onDragEnd?: (e: default_2.DragEvent) => void;
    onDragOver?: (e: default_2.DragEvent, rowIndex: number) => void;
    onDragLeave?: () => void;
    onDrop?: (e: default_2.DragEvent, rowIndex: number) => void;
    expandedSubTables?: Set<string>;
    onToggleSubTable?: (rowId: string, columnId: string) => void;
    onSubTableDataChange?: (rowId: string, columnId: string, newData: any) => void;
}

export declare const useClipboard: ({ data, columns, selectedCell, selectionRange, onDataChange, onClipboardUpdate, }: UseClipboardProps) => {
    copyToClipboard: () => void;
    cutToClipboard: () => void;
    pasteFromClipboard: (text: string) => void;
    deleteSelectedCells: () => void;
};

declare interface UseClipboardProps {
    data: TableRow[];
    columns: TableColumn[];
    selectedCell: CellPosition | null;
    selectionRange: SelectionRange | null;
    onDataChange: (data: TableRow[]) => void;
    onClipboardUpdate?: (data: string) => void;
}

export declare const useColumnDragDrop: ({ columns, visibleColumns, onColumnChange }: UseColumnDragDropProps) => {
    draggedColumnIndex: number | null;
    dragOverColumnIndex: number | null;
    handleColumnDragStart: (e: React.DragEvent, visibleColumnIndex: number) => void;
    handleColumnDragEnd: (e: React.DragEvent) => void;
    handleColumnDragOver: (e: React.DragEvent, visibleColumnIndex: number) => void;
    handleColumnDragLeave: () => void;
    handleColumnDrop: (e: React.DragEvent, visibleDropColumnIndex: number) => void;
};

declare interface UseColumnDragDropProps {
    columns: TableColumn[];
    visibleColumns: string[];
    onColumnChange: (columns: TableColumn[]) => void;
}

export declare const useColumnFilters: ({ data, columns }: UseColumnFiltersProps) => {
    columnFilters: Record<string, string[]>;
    filteredData: TableRow[];
    hasActiveFilters: boolean;
    activeFilterCount: number;
    handleFilterChange: (columnId: string, values: string[]) => void;
    handleClearFilter: (columnId: string) => void;
    handleClearAllFilters: () => void;
};

declare interface UseColumnFiltersProps {
    data: TableRow[];
    columns: TableColumn[];
}

export declare const useColumnResize: ({ columns, onColumnChange }: UseColumnResizeProps) => {
    isResizing: boolean;
    resizingColumnId: string | null;
    handleMouseDown: (e: React.MouseEvent, columnId: string) => void;
};

declare interface UseColumnResizeProps {
    columns: TableColumn[];
    onColumnChange: (columns: TableColumn[]) => void;
}

export declare const useContextMenu: () => {
    contextMenu: ContextMenuState;
    clipboardData: string;
    openContextMenu: (e: React.MouseEvent, cell: CellPosition) => void;
    closeContextMenu: () => void;
    updateClipboard: (data: string) => void;
};

export declare const useDragDrop: ({ data, paginatedData, currentPage, pageSize, paginationEnabled, onDataChange }: UseDragDropProps) => {
    draggedRowIndex: number | null;
    dragOverRowIndex: number | null;
    handleDragStart: (e: React.DragEvent, rowIndex: number) => void;
    handleDragEnd: (e: React.DragEvent) => void;
    handleDragOver: (e: React.DragEvent, rowIndex: number) => void;
    handleDragLeave: () => void;
    handleDrop: (e: React.DragEvent, dropRowIndex: number) => void;
};

declare interface UseDragDropProps {
    data: TableRow[];
    paginatedData: TableRow[];
    currentPage: number;
    pageSize: number;
    paginationEnabled: boolean;
    onDataChange: (data: TableRow[]) => void;
}

export declare const useGlobalKeyboardShortcuts: ({ hasRowSelection, hasSelectedCell, onCopyRows, onCutRows, onPasteRows, onDeleteRows, onSelectAll, onClearSelection, onCopyCell, onCutCell, onPasteCell, onDeleteCell, canPasteRows, canPasteCell, }: UseGlobalKeyboardShortcutsProps) => void;

declare interface UseGlobalKeyboardShortcutsProps {
    hasRowSelection: boolean;
    hasSelectedCell: boolean;
    onCopyRows: () => void;
    onCutRows: () => void;
    onPasteRows: () => void;
    onDeleteRows: () => void;
    onSelectAll: () => void;
    onClearSelection: () => void;
    onCopyCell: () => void;
    onCutCell: () => void;
    onPasteCell: (text: string) => void;
    onDeleteCell: () => void;
    canPasteRows: boolean;
    canPasteCell: boolean;
}

export declare const useKeyboardNavigation: ({ data, columns, visibleColumns, onRowSelection, selectedCell, selectionRange, editingCell, onCellSelect, onSelectionChange, onCopy, onPaste, onDelete, onStartEdit, tableRef, }: UseKeyboardNavigationProps) => void;

declare interface UseKeyboardNavigationProps {
    data: TableRow[];
    columns: TableColumn[];
    visibleColumns: string[];
    onRowSelection?: (direction: 'up' | 'down', isShiftKey: boolean) => void;
    selectedCell: CellPosition | null;
    selectionRange: SelectionRange | null;
    editingCell: CellPosition | null;
    onCellSelect: (position: CellPosition) => void;
    onSelectionChange: (range: SelectionRange | null) => void;
    onCopy: () => void;
    onPaste: (text: string) => void;
    onDelete: () => void;
    onStartEdit: () => void;
    tableRef: React.RefObject<HTMLTableElement>;
}

export declare const useMultiRowClipboard: ({ data, fullData, columns, currentPage, pageSize, paginationEnabled, onDataChange, onClipboardUpdate, cutRowIndices, onCutRowsChange, }: UseMultiRowClipboardProps) => {
    copyRowsToClipboard: (rowIndices: number[]) => void;
    cutRowsToClipboard: (rowIndices: number[]) => void;
    pasteRowsFromClipboard: (text: string, targetRowIndex: number) => void;
    deleteRows: (rowIndices: number[]) => void;
};

declare interface UseMultiRowClipboardProps {
    data: TableRow[];
    fullData: TableRow[];
    columns: TableColumn[];
    currentPage: number;
    pageSize: number;
    paginationEnabled: boolean;
    onDataChange: (data: TableRow[]) => void;
    onClipboardUpdate?: (data: string) => void;
    cutRowIndices?: number[];
    onCutRowsChange?: (indices: number[]) => void;
}

export declare const useRowClipboard: ({ data, columns, onDataChange, onClipboardUpdate, }: UseRowClipboardProps) => {
    copyRowToClipboard: (rowIndex: number) => void;
    cutRowToClipboard: (rowIndex: number) => void;
    pasteRowFromClipboard: (text: string, targetRowIndex: number) => void;
};

declare interface UseRowClipboardProps {
    data: TableRow[];
    columns: TableColumn[];
    onDataChange: (data: TableRow[]) => void;
    onClipboardUpdate?: (data: string) => void;
}

export declare const useRowContextMenu: () => {
    rowContextMenu: RowContextMenuState;
    rowClipboardData: string;
    openRowContextMenu: (e: React.MouseEvent, rowIndex: number) => void;
    closeRowContextMenu: () => void;
    updateRowClipboard: (data: string) => void;
};

export declare const useRowSelection: ({ totalRows }: UseRowSelectionProps) => {
    rowSelection: RowSelection;
    handleRowClick: (rowIndex: number, isShiftKey: boolean, isCtrlKey: boolean) => void;
    handleKeyboardSelection: (direction: "up" | "down", isShiftKey: boolean) => void;
    clearSelection: () => void;
    selectAll: () => void;
    isRowSelected: (rowIndex: number) => boolean;
    getSelectedRowIndices: () => number[];
    hasSelection: boolean;
    selectionCount: number;
};

declare interface UseRowSelectionProps {
    totalRows: number;
}

export declare const validateRowData: (row: TableRow, columns: TableColumn[]) => string[];

export declare interface ValidationError {
    rowId: string;
    columnId?: string;
    message: string;
    type: 'error' | 'warning';
}

export { }