lite-table-js 1.0.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "lite-table-js",
+  "version": "1.0.0",
+  "description": "Enterprise-grade React data table with sorting, filtering, pagination, editing, theming, charts, virtualization, and more",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "types",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "recharts": {
+      "optional": true
+    }
+  },
+  "optionalDependencies": {
+    "xlsx": ">=0.18.0"
+  },
+  "dependencies": {
+    "lucide-react": ">=0.300.0"
+  },
+  "devDependencies": {
+    "vite": "^8.0.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "keywords": [
+    "react",
+    "table",
+    "datatable",
+    "data-grid",
+    "sorting",
+    "filtering",
+    "pagination",
+    "virtualization",
+    "theming",
+    "charts",
+    "editing"
+  ],
+  "license": "MIT",
+  "sideEffects": false
+}

package/types/index.d.ts

@@ -0,0 +1,174 @@
+import { ReactNode, ComponentType, CSSProperties, RefObject } from 'react';
+
+// ─── Core Types ───────────────────────────────────────────────────────
+export type SortDirection = 'asc' | 'desc' | null;
+export type FilterType = 'text' | 'number' | 'date' | 'select' | 'multi-select' | 'custom';
+export type ViewMode = 'table' | 'grid' | 'list';
+export type SelectionMode = 'single' | 'multiple' | 'none';
+export type DataMode = 'client' | 'server';
+export type PinPosition = 'left' | 'right' | null;
+export type ExportFormat = 'csv' | 'excel' | 'pdf';
+export type RowPinPosition = 'top' | 'bottom' | null;
+export type AggregationType = 'sum' | 'avg' | 'count' | 'min' | 'max' | 'first' | 'last';
+export type ChartType = 'bar' | 'line' | 'pie' | 'area';
+export type SidebarPanelType = 'columns' | 'filters' | 'custom';
+
+export interface ColumnDef<T = any> {
+  id: string;
+  header: string;
+  accessorKey?: string;
+  accessorFn?: (row: T) => any;
+  width?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  sortable?: boolean;
+  sortFn?: (a: T, b: T, direction: SortDirection) => number;
+  filterable?: boolean;
+  filterType?: FilterType;
+  filterOptions?: { label: string; value: string }[];
+  filterComponent?: ComponentType<any>;
+  cell?: (props: CellRenderProps<T>) => ReactNode;
+  headerCell?: (props: HeaderRenderProps<T>) => ReactNode;
+  visible?: boolean;
+  pin?: PinPosition;
+  resizable?: boolean;
+  editable?: boolean;
+  editCell?: (props: EditCellProps<T>) => ReactNode;
+  validation?: CellValidationRule<T>;
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+  group?: string;
+  aggregateFn?: (values: any[]) => any;
+  tooltip?: boolean | ((props: CellRenderProps<T>) => string);
+  rowSpan?: (row: T, rowIndex: number, data: T[]) => number;
+}
+
+export interface CellRenderProps<T = any> { value: any; row: T; rowIndex: number; column: ColumnDef<T>; }
+export interface HeaderRenderProps<T = any> { column: ColumnDef<T>; sortDirection: SortDirection; onSort: () => void; }
+export interface EditCellProps<T = any> { value: any; row: T; column: ColumnDef<T>; onSave: (value: any) => void; onCancel: () => void; error?: string | null; validating?: boolean; }
+export interface CellValidationRule<T = any> { validate: (value: any, row: T, column: ColumnDef<T>) => string | null | undefined; }
+export interface SortState { columnId: string; direction: SortDirection; }
+export interface FilterValue { columnId: string; value: any; operator?: string; }
+export interface FilterPreset { id: string; name: string; filters: FilterValue[]; globalSearch?: string; }
+
+export interface SortConfig { multi?: boolean; defaultSort?: SortState[]; sort?: SortState[]; onSortChange?: (sort: SortState[]) => void; }
+export interface FilterConfig { filters?: FilterValue[]; onFilterChange?: (filters: FilterValue[]) => void; globalSearch?: string; onGlobalSearchChange?: (value: string) => void; searchDebounce?: number; presets?: FilterPreset[]; onPresetSave?: (preset: FilterPreset) => void; onPresetDelete?: (presetId: string) => void; }
+export interface PaginationConfig { page?: number; pageSize?: number; pageSizeOptions?: number[]; totalItems?: number; onPageChange?: (page: number) => void; onPageSizeChange?: (size: number) => void; infinite?: boolean; onLoadMore?: () => void; hasMore?: boolean; }
+export interface SelectionConfig<T = any> { mode?: SelectionMode; selectedKeys?: string[]; onSelectionChange?: (keys: string[], rows: T[]) => void; rowKey?: string | ((row: T) => string); showCheckbox?: boolean; }
+export interface ExpandableConfig<T = any> { enabled?: boolean; render: (row: T) => ReactNode; expandedKeys?: string[]; onExpandChange?: (keys: string[]) => void; }
+export interface RowAction<T = any> { id: string; label: string; icon?: ReactNode; onClick: (row: T) => void; hidden?: (row: T) => boolean; disabled?: (row: T) => boolean; variant?: 'default' | 'danger'; }
+export interface BulkAction<T = any> { id: string; label: string; icon?: ReactNode; onClick: (selectedRows: T[]) => void; variant?: 'default' | 'danger'; }
+export interface DataTableTheme { wrapper?: string; table?: string; headerRow?: string; headerCell?: string; bodyRow?: string; bodyCell?: string; selectedRow?: string; hoverRow?: string; stripedRow?: string; gridCard?: string; listItem?: string; toolbar?: string; }
+export interface ThemeColors { background: string; foreground: string; primary: string; primaryLight: string; border: string; muted: string; hover: string; selected: string; surface: string; textSecondary: string; }
+export interface ThemeTypography { fontFamily: string; fontSize: string; headerFontSize: string; headerFontWeight: number; }
+export interface ThemeSpacing { cellPaddingX: string; cellPaddingY: string; compactCellPaddingY: string; rowHeight: string; }
+export interface TableThemeConfig { name: string; colors?: ThemeColors; typography?: ThemeTypography; spacing?: ThemeSpacing; header: CSSProperties; row: CSSProperties; cell: CSSProperties; selectedRow?: CSSProperties; hoverRow?: CSSProperties; stripedRow?: CSSProperties; toolbar?: CSSProperties; pagination?: CSSProperties; tooltip?: CSSProperties; conditionalRules?: any[]; rowRules?: any[]; cssVariables?: Record<string, string>; }
+export interface ChartConfig { id?: string; type: ChartType; labelColumn: string; dataColumns: string[]; title?: string; groupBy?: string; aggregation?: string; colors?: string[]; showLegend?: boolean; showTooltip?: boolean; stacked?: boolean; height?: number; }
+export interface ChartInstance { id: string; config: ChartConfig; createdAt: number; }
+export interface VirtualizationConfig { enabled: boolean; rowHeight: number; overscan?: number; }
+export interface DataTablePlugin<T = any> { name: string; processData?: (data: T[], state: any) => T[]; renderToolbar?: (state: any) => ReactNode; renderFooter?: (state: any) => ReactNode; renderRow?: (row: T, defaultRender: () => ReactNode) => ReactNode; }
+export interface ServerSideConfig { onFetch: (params: any) => Promise<{ data: any[]; totalItems: number }>; }
+
+export interface DataTableProps<T = any> {
+  data: T[];
+  columns: ColumnDef<T>[];
+  mode?: DataMode;
+  serverSide?: ServerSideConfig;
+  loading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  sorting?: SortConfig;
+  filtering?: FilterConfig;
+  pagination?: PaginationConfig;
+  selection?: SelectionConfig<T>;
+  expandable?: ExpandableConfig<T>;
+  rowActions?: RowAction<T>[];
+  bulkActions?: BulkAction<T>[];
+  onRowClick?: (row: T) => void;
+  onRowDoubleClick?: (row: T) => void;
+  rowClassName?: string | ((row: T) => string);
+  viewMode?: ViewMode;
+  onViewModeChange?: (mode: ViewMode) => void;
+  views?: ViewMode[];
+  renderGridCard?: (row: T) => ReactNode;
+  renderListItem?: (row: T) => ReactNode;
+  columnVisibility?: boolean;
+  columnResizing?: boolean;
+  columnReordering?: boolean;
+  onCellEdit?: (rowKey: string, columnId: string, value: any) => void;
+  floatingFilters?: boolean;
+  exportFormats?: ExportFormat[];
+  onExport?: (format: ExportFormat, data: T[]) => void;
+  theme?: DataTableTheme;
+  striped?: boolean;
+  bordered?: boolean;
+  compact?: boolean;
+  stickyHeader?: boolean;
+  maxHeight?: string | number;
+  emptyText?: string;
+  emptyIcon?: ComponentType<any>;
+  plugins?: DataTablePlugin<T>[];
+  persistKey?: string;
+  syncUrl?: boolean;
+  ariaLabel?: string;
+  ariaDescribedBy?: string;
+  className?: string;
+  themeConfig?: TableThemeConfig;
+  rowGrouping?: any;
+  treeData?: any;
+  rowPinning?: any;
+  masterDetail?: any;
+  contextMenu?: any[];
+  sidebarPanels?: any[];
+  virtualization?: VirtualizationConfig;
+  enableTooltips?: boolean;
+  statusBar?: any;
+  rowEditing?: any;
+}
+
+// ─── Main Component ───────────────────────────────────────────────────
+export function DataTable<T = any>(props: DataTableProps<T>): ReactNode;
+
+// ─── Hooks ────────────────────────────────────────────────────────────
+export function useDataTable<T = any>(props: DataTableProps<T>): any;
+export function useSorting(options: any): any;
+export function useFilters(options: any): any;
+export function usePagination(options: any): any;
+export function useSelection(options: any): any;
+export function useColumnManager(options: any): any;
+export function usePersistence(options: any): any;
+export function usePresets(options: any): any;
+export function useTheme(options: any): any;
+export function useVirtualization(options: any): any;
+export function useRowGrouping(options: any): any;
+export function useTreeData(options: any): any;
+export function useEditing(options: any): any;
+export function useChartData(options: any): any;
+export function useChartConfig(options?: any): any;
+
+// ─── Themes ───────────────────────────────────────────────────────────
+export const lightTheme: TableThemeConfig;
+export const darkTheme: TableThemeConfig;
+export const quartzTheme: TableThemeConfig;
+export const alpineTheme: TableThemeConfig;
+export const builtInThemes: Record<string, TableThemeConfig>;
+export function createTheme(base: TableThemeConfig, overrides: Partial<TableThemeConfig>): TableThemeConfig;
+
+// ─── Utilities ────────────────────────────────────────────────────────
+export function getNestedValue(obj: any, path: string): any;
+export function getCellValue<T>(row: T, column: ColumnDef<T>): any;
+export function getRowKey<T>(row: T, rowKey: string | ((row: T) => string) | undefined, index: number): string;
+export function sortData<T>(data: T[], sorts: SortState[], columns: ColumnDef<T>[]): T[];
+export function filterData<T>(data: T[], filters: FilterValue[], globalSearch: string, columns: ColumnDef<T>[]): T[];
+export function paginateData<T>(data: T[], page: number, pageSize: number): T[];
+export function groupData<T>(data: T[], groupBy: string): Map<any, T[]>;
+export function handleExport<T>(format: ExportFormat, data: T[], columns: ColumnDef<T>[], onExport?: Function): void;
+export function reorderArray<T>(arr: T[], fromIndex: number, toIndex: number): T[];
+export function exportToCSV<T>(data: T[], columns: ColumnDef<T>[], columnIds?: string[], filename?: string): void;
+export function exportToExcel<T>(data: T[], columns: ColumnDef<T>[], columnIds?: string[], filename?: string, sheetName?: string): Promise<void>;
+
+// ─── Plugins ──────────────────────────────────────────────────────────
+export function createRowNumberPlugin(): DataTablePlugin;
+export function createGroupingPlugin<T>(groupByField: string, renderGroupHeader?: Function): DataTablePlugin<T>;
+export function createSelectionSummaryPlugin<T>(): DataTablePlugin<T>;
+export function createTransformPlugin<T>(name: string, transform: (data: T[]) => T[]): DataTablePlugin<T>;