@choice-ui/tanstack-table-core

An extended version of TanStack Table with Legend State reactive integration and enhanced features.

Key Differences from Original TanStack Table

1. Legend State Reactive Integration

Replaced native state management with @legendapp/state for fine-grained reactive updates:

import { use$ } from '@choice-ui/tanstack-table-core'

// Subscribe to specific state changes, only re-render when that state changes
use$(table.state.columnSizing)
use$(table.interact.editingId)

2. New Features

| Feature | Description | |---------|-------------| | CellSelection | Cell selection with multi-select and range selection support | | FillSelection | Fill selection like Excel drag-fill | | Collaboration | Collaborative editing with awareness state sync | | Hover | Hover state management (cellId, rowId, columnId) | | Highlight | Cell highlighting | | Processing | Cell processing states (pending, success, failed) | | Theme | Theme system support | | Dom | DOM reference management | | Event | Event system | | Init | Initialization lifecycle | | Operation | Operation management | | Scroll | Scroll state management (using smooth-scrollbar) | | UndoRedo | Undo/Redo functionality | | Virtual | Virtualization rendering support |

3. InteractState

New table.interact object for managing interaction states:

interface InteractState {
  editingId: string | null           // Currently editing cell ID
  firstSelectedCell: CellPosition    // First selected cell
  hover: {
    cellId: string
    rowId: string
    columnId: string
  }
  scroll: ScrollState                // Scroll state
  processing: Record<string, ProcessingState>
  highlight: Record<string, boolean>
  // ...
}

4. Cell Extensions

Each Cell object has new methods:

cell.getIsSelected()      // Is cell selected
cell.getIsFocused()       // Is cell focused
cell.getIsFillSelected()  // Is cell in fill selection range
cell.getIsPending()       // Is cell in pending state
cell.getIsSuccessed()     // Is cell processing succeeded
cell.getIsFailed()        // Is cell processing failed
cell.getStyle()           // Get cell styles

5. Row Extensions

Each Row object has new properties:

row.order    // Row order index
row.dom      // DOM element reference
row.depth    // Grouping depth

6. Column Extensions

Each Column object has new properties:

column.order     // Column order index
column.dom       // DOM element reference
column.position  // Position ('left' | 'center' | 'right')

7. Awareness (Collaboration)

Multi-user collaborative editing awareness state:

table.awareness.get()  // Get all users' awareness states
// {
//   local: { userId, color, selection, timestamp },
//   remote: Map<userId, AwarenessState>
// }

8. Theme System

Built-in theme configuration:

table.resolvedOptions.theme = {
  rowHeight: 32,
  headerHeight: 40,
  footerHeight: 32,
  groupHeaderHeight: 48,
  groupSpacing: 20,
  bottomSpace: 200,
  rightSpace: 200,
  leftPadding: 10,
}

Installation

pnpm add @choice-ui/tanstack-table-core

Dependencies

• @legendapp/state - Reactive state management
• smooth-scrollbar - Smooth scrolling
• fast-memoize - Memoization
• fast-array-diff - Array diff computation

API Compatibility

This package maintains compatibility with TanStack Table core APIs. Original features like sorting, filtering, pagination, and grouping work as expected. All new features are optional enhancements.

License

MIT