advanced-react-datatable/dist/index.d.ts

A comprehensive React data grid component with advanced features like pinned columns, inline editing, grouping, filtering, and export capabilities

// Type definitions for advanced-react-datatable
import React from 'react';

export interface DataTableSortOptions {
  onSort: (field: string) => void;
  getSortIcon: (field: string) => React.ReactNode;
}

export interface DataTableSelectionOptions<T> {
  totalRows: number;
  onSelectAll: () => void;
  selectedRows: T[],
}

export interface DataTableColumn<T = any> {
  field: keyof T;
  header: string;
  sortable?: boolean;
  filterable?: boolean;
  groupable?: boolean;
  pinned?: 'left' | 'right' | null;
  type?: 'text' | 'number' | 'date' | 'select' | 'boolean';
  width?: number;
  minWidth?: number;
  maxWidth?: number;
  hidden?: boolean;
  editable?: boolean;
  useSelection?: boolean; // Enable checkbox selection for this column
  aggregation?: 'count' | 'sum' | 'avg' | 'min' | 'max'; // Aggregation function for footer
  cellRenderer?: (value: any, row: T) => React.ReactNode;
  headerRenderer?: (column: DataTableColumn<T>, sortOptions: DataTableSortOptions, selectOptions?: DataTableSelectionOptions<T>) => React.ReactNode;
  valueGetter?: (row: T) => any; // Custom value extraction for sorting, filtering, grouping
  options?: string[]; // For select type
}

export interface DataTableProps<T = any> {
  data: T[];
  columns: DataTableColumn<T>[];
  groupBy?: string | string[];
  virtualScrolling?: boolean;
  stickyHeader?: boolean;
  stickyFooter?: boolean; // Enable sticky footer
  showFilters?: boolean;
  showColumnConfig?: boolean;
  pageSize?: number;
  className?: string;
  enablePdfExport?: boolean;
  onRowSelect?: (selectedRows: T[]) => void;
  onExport?: (data: T[], format: 'csv' | 'pdf') => void;
  onColumnChange?: (columns: DataTableColumn<T>[]) => void;
  onCellEdit?: (row: T, field: keyof T, value: any) => void;
}

export interface FilterConfig {
  field: string;
  operator: 'contains' | 'equals' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'in';
  value: any;
  type: 'text' | 'number' | 'date' | 'select' | 'boolean';
}

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

export interface GroupConfig {
  field: string;
  expanded: boolean;
}

export interface GroupSummary {
  field: string;
  count: number;
  sum?: number;
  avg?: number;
  min?: number;
  max?: number;
}


export function DataTable<T = any>(props: DataTableProps<T>): React.ReactElement;

export function useDataTable<T = any>(props: {
  data: T[];
  initialColumns: DataTableColumn<T>[];
  initialGroupBy?: string | string[];
  selectionMode?: 'single' | 'multiple' | 'none';
  onRowSelect?: (selectedRows: T[]) => void;
  onCellEdit?: (row: T, field: keyof T, value: any) => void;
}): {
  data: T[];
  columns: DataTableColumn<T>[];
  filteredData: T[];
  sortedData: T[];
  paginatedData: T[];
  groupedData: any[];
  filters: FilterConfig[];
  sorts: SortConfig[];
  groupBy: string | string[] | null;
  selectedRows: T[];
  currentPage: number;
  totalPages: number;
  isFiltersExpanded: boolean;
  addFilter: (filter: FilterConfig) => void;
  removeFilter: (field: string) => void;
  clearFilters: () => void;
  addSort: (field: string) => void;
  removeSort: (field: string) => void;
  clearSorts: () => void;
  setGroupBy: (fields: string | string[] | null) => void;
  toggleRowSelection: (row: T) => void;
  clearSelection: () => void;
  selectAll: () => void;
  setPage: (page: number) => void;
  setPageSize: (size: number) => void;
  toggleFiltersExpanded: () => void;
  updateColumns: (columns: DataTableColumn<T>[]) => void;
};

export function cn(...inputs: any[]): string;