@enact-ui/table

Excel-like data table component package for ENACT UI with TanStack Table integration.

Features

• DataTable: Main table component with sorting, filtering, pagination, and grouping
• Inline Editing: Click-to-edit cells with text, number, and boolean support
• Resizable Columns: Drag column borders to resize
• Sortable Headers: Click headers to sort data
• Command Palette: Quick actions with keyboard shortcuts
• Virtual Scrolling: Efficient rendering for large datasets

Installation

bun add @enact-ui/table @tanstack/react-table @enact-ui/react

Usage

import { DataTable } from '@enact-ui/table';
import type { ColumnDef } from '@tanstack/react-table';

interface User {
  id: string;
  name: string;
  email: string;
}

const columns: ColumnDef<User>[] = [
  { id: 'name', accessorKey: 'name', header: 'Name' },
  { id: 'email', accessorKey: 'email', header: 'Email' },
];

function UserTable() {
  const [users] = useState<User[]>([
    { id: '1', name: 'John Doe', email: '[email protected]' },
    { id: '2', name: 'Jane Smith', email: '[email protected]' },
  ]);

  return (
    <DataTable
      data={users}
      columns={columns}
      enableSorting
      enableFiltering
    />
  );
}

Components

DataTable

Main table component with TanStack Table integration.

<DataTable
  data={data}
  columns={columns}
  enableSorting
  enableFiltering
  enablePagination
  enableGrouping
  enableColumnResizing
/>

InlineEditableCell

Click-to-edit cell component.

<InlineEditableCell
  value={value}
  onSave={async (newValue) => await updateValue(newValue)}
  fieldType="text" // 'text' | 'number' | 'boolean'
/>

CommandPalette

Quick actions with keyboard shortcuts.

<CommandPalette
  open={isOpen}
  actions={[
    { id: '1', label: 'Add Row', onSelect: () => addRow() },
    { id: '2', label: 'Delete Row', onSelect: () => deleteRow() },
  ]}
  onClose={() => setIsOpen(false)}
/>

Peer Dependencies

• @tanstack/react-table: ^8.0.0
• @enact-ui/react: ^0.1.0
• react: ^18.0.0 || ^19.0.0
• react-dom: ^18.0.0 || ^19.0.0

License

MIT