tessl/npm-tanstack--table-core
Headless UI for building powerful tables & datagrids for TS/JS
—
Pending
column-features.mddocs/
Column Features
Advanced column functionality including visibility control, ordering, pinning, and resizing. These features provide comprehensive column management capabilities for building sophisticated table interfaces.
Capabilities
Column Visibility
Control which columns are visible or hidden with programmatic and user-driven visibility management.
/** Column visibility state mapping column IDs to visibility */
type VisibilityState = Record<string, boolean>;
interface VisibilityOptions {
/** Visibility state change handler */
onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
/** Enable column hiding globally */
enableHiding?: boolean;
/** Auto reset visibility when columns change */
autoResetColumnVisibility?: boolean;
}
interface VisibilityInstance<TData extends RowData> {
/** Get current visibility state */
getState(): { columnVisibility: VisibilityState };
/** Set column visibility state */
setColumnVisibility(updater: Updater<VisibilityState>): void;
/** Reset column visibility to initial state */
resetColumnVisibility(defaultState?: boolean): void;
/** Get whether all columns are visible */
getIsAllColumnsVisible(): boolean;
/** Get whether some columns are visible */
getIsSomeColumnsVisible(): boolean;
/** Toggle all columns visibility */
toggleAllColumnsVisible(): void;
/** Get visible leaf columns */
getVisibleLeafColumns(): Column<TData, unknown>[];
/** Get left visible leaf columns */
getLeftVisibleLeafColumns(): Column<TData, unknown>[];
/** Get center visible leaf columns */
getCenterVisibleLeafColumns(): Column<TData, unknown>[];
/** Get right visible leaf columns */
getRightVisibleLeafColumns(): Column<TData, unknown>[];
}Usage Examples:
import { createTable } from "@tanstack/table-core";
// Basic visibility control
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
age: false, // Hide age column
email: false, // Hide email column
});
const table = createTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
onColumnVisibilityChange: setColumnVisibility,
state: {
columnVisibility,
},
});
// Toggle specific column visibility
const ageColumn = table.getColumn('age');
ageColumn.toggleVisibility();
// Toggle all columns
table.toggleAllColumnsVisible();
// Get visible columns
const visibleColumns = table.getVisibleLeafColumns();
// Column-specific visibility in definition
const columns = [
columnHelper.accessor('sensitiveData', {
header: 'Sensitive Data',
enableHiding: false, // Cannot be hidden
}),
];Column Visibility Column Methods
Methods available on individual columns for visibility management.
interface VisibilityColumn {
/** Get whether this column is visible */
getIsVisible(): boolean;
/** Get whether this column can be hidden */
getCanHide(): boolean;
/** Toggle visibility of this column */
toggleVisibility(value?: boolean): void;
}Column Ordering
Reorder columns programmatically or through drag-and-drop interfaces.
/** Column order state as array of column IDs */
type ColumnOrderState = string[];
interface ColumnOrderOptions {
/** Column order change handler */
onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
/** Auto reset column order when columns change */
autoResetColumnOrder?: boolean;
}
interface ColumnOrderInstance<TData extends RowData> {
/** Get current column order state */
getState(): { columnOrder: ColumnOrderState };
/** Set column order state */
setColumnOrder(updater: Updater<ColumnOrderState>): void;
/** Reset column order to initial state */
resetColumnOrder(defaultState?: boolean): void;
}Usage Examples:
// Column ordering setup
const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([]);
const table = createTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
onColumnOrderChange: setColumnOrder,
state: {
columnOrder,
},
});
// Reorder columns programmatically
table.setColumnOrder(['lastName', 'firstName', 'age', 'email']);
// Reset to original order
table.resetColumnOrder();
// Get current order
const currentOrder = table.getState().columnOrder;Column Pinning
Pin columns to the left or right side of the table for fixed positioning.
/** Column pinning position */
type ColumnPinningPosition = 'left' | 'right' | false;
/** Column pinning state */
interface ColumnPinningState {
left?: string[];
right?: string[];
}
interface ColumnPinningOptions {
/** Column pinning change handler */
onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
/** Enable column pinning globally */
enablePinning?: boolean;
/** Auto reset column pinning when columns change */
autoResetColumnPinning?: boolean;
}
interface ColumnPinningInstance<TData extends RowData> {
/** Get current column pinning state */
getState(): { columnPinning: ColumnPinningState };
/** Set column pinning state */
setColumnPinning(updater: Updater<ColumnPinningState>): void;
/** Reset column pinning to initial state */
resetColumnPinning(defaultState?: boolean): void;
/** Get whether any columns are pinned */
getIsSomeColumnsPinned(position?: ColumnPinningPosition): boolean;
/** Get left pinned leaf columns */
getLeftLeafColumns(): Column<TData, unknown>[];
/** Get center (unpinned) leaf columns */
getCenterLeafColumns(): Column<TData, unknown>[];
/** Get right pinned leaf columns */
getRightLeafColumns(): Column<TData, unknown>[];
}Usage Examples:
// Column pinning setup
const [columnPinning, setColumnPinning] = useState<ColumnPinningState>({
left: ['select', 'name'],
right: ['actions'],
});
const table = createTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
onColumnPinningChange: setColumnPinning,
state: {
columnPinning,
},
});
// Pin/unpin columns
const nameColumn = table.getColumn('name');
nameColumn.pin('left');
nameColumn.pin('right');
nameColumn.pin(false); // Unpin
// Get pinned columns
const leftColumns = table.getLeftLeafColumns();
const centerColumns = table.getCenterLeafColumns();
const rightColumns = table.getRightLeafColumns();Column Pinning Column Methods
Methods available on individual columns for pinning management.
interface ColumnPinningColumn {
/** Get current pin position of this column */
getIsPinned(): ColumnPinningPosition;
/** Get pin index of this column */
getPinnedIndex(): number;
/** Get whether this column can be pinned */
getCanPin(): boolean;
/** Pin this column to specified position */
pin(position: ColumnPinningPosition): void;
}Column Sizing
Resize columns with mouse drag or programmatic control.
/** Column sizing state mapping column IDs to widths */
type ColumnSizingState = Record<string, number>;
/** Column resize mode */
type ColumnResizeMode = 'onChange' | 'onEnd';
/** Column resize direction */
type ColumnResizeDirection = 'ltr' | 'rtl';
/** Column sizing info state for tracking resize operations */
interface ColumnSizingInfoState {
startOffset: null | number;
startSize: null | number;
deltaOffset: null | number;
deltaPercentage: null | number;
isResizingColumn: false | string;
columnSizingStart: [string, number][];
}
interface ColumnSizingOptions {
/** Column sizing change handler */
onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
/** Column sizing info change handler */
onColumnSizingInfoChange?: OnChangeFn<ColumnSizingInfoState>;
/** Enable column resizing globally */
enableColumnResizing?: boolean;
/** Column resize mode */
columnResizeMode?: ColumnResizeMode;
/** Column resize direction */
columnResizeDirection?: ColumnResizeDirection;
/** Auto reset column sizing when columns change */
autoResetColumnSizing?: boolean;
/** Default column sizing configuration */
defaultColumn?: Partial<ColumnDefBase<any, any>>;
}Usage Examples:
// Column sizing setup
const [columnSizing, setColumnSizing] = useState<ColumnSizingState>({});
const table = createTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
onColumnSizingChange: setColumnSizing,
state: {
columnSizing,
},
enableColumnResizing: true,
columnResizeMode: 'onChange',
defaultColumn: {
minSize: 50,
maxSize: 500,
size: 150,
},
});
// Set column size programmatically
table.getColumn('name')?.resetSize();
table.getColumn('name')?.setSize(200);
// Column sizing in definition
const columns = [
columnHelper.accessor('description', {
header: 'Description',
size: 300,
minSize: 200,
maxSize: 600,
enableResizing: true,
}),
];Column Sizing Instance Methods
Methods available on the table and columns for sizing management.
interface ColumnSizingInstance {
/** Get current column sizing state */
getState(): { columnSizing: ColumnSizingState; columnSizingInfo: ColumnSizingInfoState };
/** Set column sizing state */
setColumnSizing(updater: Updater<ColumnSizingState>): void;
/** Set column sizing info */
setColumnSizingInfo(updater: Updater<ColumnSizingInfoState>): void;
/** Reset column sizing to initial state */
resetColumnSizing(defaultState?: boolean): void;
/** Reset header size info */
resetHeaderSizeInfo(defaultState?: boolean): void;
/** Get total table size */
getTotalSize(): number;
/** Get left table size */
getLeftTotalSize(): number;
/** Get center table size */
getCenterTotalSize(): number;
/** Get right table size */
getRightTotalSize(): number;
}
interface ColumnSizingColumn {
/** Get current size of this column */
getSize(): number;
/** Get start size when resizing */
getStart(): number;
/** Get whether this column is being resized */
getIsResizing(): boolean;
/** Get whether this column can be resized */
getCanResize(): boolean;
/** Reset size of this column */
resetSize(): void;
/** Set size of this column */
setSize(size: number): void;
}
interface ColumnSizingHeader {
/** Get resize handler for this header */
getResizeHandler(): (event: unknown) => void;
/** Get current size of this header */
getSize(): number;
/** Get start position for resizing */
getStart(): number;
/** Get whether this header is being resized */
getIsResizing(): boolean;
/** Get whether this header can be resized */
getCanResize(): boolean;
/** Reset size of this header */
resetSize(): void;
}Usage Examples:
// Table-level sizing methods
const totalWidth = table.getTotalSize();
const leftWidth = table.getLeftTotalSize();
// Column-level sizing methods
const nameColumn = table.getColumn('name');
const nameWidth = nameColumn.getSize();
const isResizing = nameColumn.getIsResizing();
// Header resize handler
const nameHeader = table.getHeaderGroups()[0].headers.find(h => h.id === 'name');
const resizeHandler = nameHeader.getResizeHandler();
// Usage in UI (React example)
<div
onMouseDown={resizeHandler}
onTouchStart={resizeHandler}
className="resize-handle"
/>Default Column Sizing
Default sizing configuration that applies to all columns.
/** Default column sizing configuration */
const defaultColumnSizing = {
size: 150,
minSize: 20,
maxSize: Number.MAX_SAFE_INTEGER,
};
/** Check if passive event listeners are supported */
function passiveEventSupported(): boolean;Column Definition Extensions
Column definition properties for controlling various column features.
interface VisibilityColumnDef {
/** Enable/disable hiding for this column */
enableHiding?: boolean;
}
interface ColumnPinningColumnDef {
/** Enable/disable pinning for this column */
enablePinning?: boolean;
}
interface ColumnSizingColumnDef {
/** Initial size of this column */
size?: number;
/** Minimum size of this column */
minSize?: number;
/** Maximum size of this column */
maxSize?: number;
/** Enable/disable resizing for this column */
enableResizing?: boolean;
}Usage Examples:
// Column definition with all features
const columns = [
columnHelper.accessor('name', {
header: 'Name',
size: 200,
minSize: 100,
maxSize: 300,
enableHiding: false, // Cannot be hidden
enablePinning: true, // Can be pinned
enableResizing: true, // Can be resized
}),
columnHelper.display({
id: 'actions',
header: 'Actions',
size: 100,
enableHiding: false,
enablePinning: true,
enableResizing: false, // Fixed width
cell: ({ row }) => (
<button onClick={() => handleEdit(row.original)}>
Edit
</button>
),
}),
];Install with Tessl CLI
npx tessl i tessl/npm-tanstack--table-core