TableKit

Headless data table with sorting, filtering, and pagination

Documentation • Getting Started • Examples

---

✨ Features

• 📊 Data Display - Flexible column definitions with custom cells
• ⬆️ Sorting - Single and multi-column with custom sort functions
• 🔍 Filtering - Column and global filters with 10+ built-in types
• 📄 Pagination - Client and server-side with customizable page sizes
• ☑️ Selection - Single and multi-row selection with conditional logic
• 👁️ Visibility - Toggle column visibility with persistence
• ↔️ Resizing - Drag to resize columns with min/max constraints
• 📌 Pinning - Pin columns to left or right
• 🚀 Virtualization - Render 100K+ rows efficiently at 60fps
• 📤 Export - Export to CSV and JSON with custom transforms
• ⌨️ Keyboard Navigation - Full keyboard support and shortcuts
• ♿ Accessible - WAI-ARIA compliant with screen reader support
• 🎨 Headless Architecture - Props getters pattern for unlimited customization
• ⚛️ React Integration - Hooks, components, and context provider
• 📦 Zero Dependencies - No runtime dependencies
• ⚡ Lightweight - Tree-shakeable and optimized
• 🔒 Type Safe - Full TypeScript support with strict mode

🚀 Installation

npm install @oxog/tablekit
# or
yarn add @oxog/tablekit
# or
pnpm add @oxog/tablekit

📚 Quick Start

Vanilla JavaScript / TypeScript

import { createTable } from '@oxog/tablekit'

interface User {
  id: number
  name: string
  email: string
  role: string
  status: 'Active' | 'Inactive'
}

const data: User[] = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
]

const table = createTable({
  data,
  columns: [
    {
      id: 'name',
      header: 'Name',
      accessorKey: 'name',
      enableSorting: true,
      enableFiltering: true
    },
    {
      id: 'email',
      header: 'Email',
      accessorKey: 'email',
      enableSorting: true
    },
    {
      id: 'role',
      header: 'Role',
      accessorKey: 'role'
    },
    {
      id: 'status',
      header: 'Status',
      accessorKey: 'status'
    },
  ],
  enableSorting: true,
  enableFiltering: true,
  enablePagination: true,
  enableRowSelection: true,
})

// Get props for rendering
const tableProps = table.getTableProps()
const headerGroups = table.getHeaderGroups()
const rowModel = table.getRowModel()

// Access state
const sorting = table.getSorting()
const pagination = table.getPagination()

// Update state
table.setSorting([{ id: 'name', desc: false }])
table.setPagination({ pageIndex: 0, pageSize: 10 })

React

import React from 'react'
import { DataTable } from '@oxog/tablekit/react'

interface User {
  id: number
  name: string
  email: string
  role: string
  status: 'Active' | 'Inactive'
}

const columns = [
  { id: 'name', header: 'Name', accessorKey: 'name', enableSorting: true },
  { id: 'email', header: 'Email', accessorKey: 'email', enableSorting: true },
  { id: 'role', header: 'Role', accessorKey: 'role' },
  { id: 'status', header: 'Status', accessorKey: 'status' },
]

const data: User[] = [
  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
  // ... more data
]

export default function UserTable() {
  return (
    <DataTable
      data={data}
      columns={columns}
      enableSorting
      enableFiltering
      enablePagination
      enableRowSelection
      onRowClick={(row) => console.log('Row clicked:', row.original)}
      onSelectionChange={(selection) => console.log('Selection changed:', selection)}
    />
  )
}

React with Hooks (Advanced)

import React from 'react'
import { useTable, TableProvider } from '@oxog/tablekit/react'
import { Table } from '@oxog/tablekit/react'

function MyTable({ data, columns }) {
  const table = useTable({
    data,
    columns,
    enableSorting: true,
    enableFiltering: true,
  })

  return (
    <table {...table.getTableProps()}>
      <thead>
        {table.headerGroups.map(headerGroup => (
          <tr {...table.getHeaderGroupProps(headerGroup)}>
            {headerGroup.headers.map(header => (
              <th {...table.getHeaderProps(header)}>
                {header.renderHeader()}
                {header.column.getIsSorted() === 'asc' && ' 🔼'}
                {header.column.getIsSorted() === 'desc' && ' 🔽'}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...table.getTableBodyProps()}>
        {table.rows.map(row => (
          <tr {...table.getRowProps(row)}>
            {row.cells.map(cell => (
              <td {...table.getCellProps(cell)}>
                {cell.renderCell()}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

export default function App() {
  return (
    <TableProvider>
      <MyTable data={data} columns={columns} />
    </TableProvider>
  )
}

🎯 Advanced Usage

Custom Cell Rendering

import { DataTable } from '@oxog/tablekit/react'

const columns = [
  {
    id: 'name',
    header: 'Name',
    accessorKey: 'name',
    cell: ({ getValue }) => (
      <strong>{getValue()}</strong>
    )
  },
  {
    id: 'age',
    header: 'Age',
    accessorKey: 'age',
    cell: ({ getValue }) => {
      const age = getValue<number>()
      return <span style={{ color: age > 30 ? 'red' : 'green' }}>{age}</span>
    }
  }
]

Server-Side Pagination

import { useTable } from '@oxog/tablekit/react'

function UserTable() {
  const table = useTable({
    data,
    columns,
    enablePagination: true,
    manualPagination: true,
    pageCount: totalPages,
  })

  // Fetch data when pagination changes
  React.useEffect(() => {
    if (table.getState().pagination) {
      fetchUsers({
        page: table.getState().pagination.pageIndex,
        pageSize: table.getState().pagination.pageSize,
      })
    }
  }, [table.getState().pagination])
}

Virtualization for Large Datasets

import { VirtualTable } from '@oxog/tablekit/react'

<VirtualTable
  data={largeDataset}
  columns={columns}
  height={600}
  estimatedRowHeight={50}
  enableVirtualization
/>

📖 Documentation

Visit tablekit.oxog.dev for:

• 📘 Full API reference
• 🎓 Getting started guide
• 💡 Advanced tutorials
• 📝 Examples and demos
• 🎨 Customization guide

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT © Ersin KOÇ

---

Made with ❤️ by Ersin KOÇ