@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

$3

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

``typescript
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)
`

$3

| 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

New table.interact object for managing interaction states:

`typescript
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
highlight: Record
// ...
}
`

$3

Each Cell object has new methods:

`typescript
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
`

$3

Each Row object has new properties:

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

$3

Each Column object has new properties:

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

$3

Multi-user collaborative editing awareness state:

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

$3

Built-in theme configuration:

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

Installation

`bash
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