DEVELOPER GUIDE / REACT

Usage & API.

Copy a working snippet, customize columns and wire the table to your own data.

Start with typed columns

Every column connects a key of your row type to a renderer and optional editor, filter or aggregation. The grid accepts new data and columns props at runtime.

QUICK START

// app/layout.tsx (Next.js) or main.tsx (Vite)
import '@battincik/coreor-datatable/styles.css'

// components/customers-table.tsx
'use client'
import { useState } from 'react'
import { EnterpriseGrid, type GridColumn } from '@battincik/coreor-datatable'

type Customer = { id: number; name: string; status: string; balance: number }
const columns: GridColumn<Customer>[] = [
  { key: 'name', title: 'Customer', kind: 'text', editable: true },
  { key: 'status', title: 'Status', kind: 'status', editable: true,
    options: ['active', 'pending', 'blocked'] },
  { key: 'balance', title: 'Balance', kind: 'price', editable: true,
    aggregate: 'sum', cellOptions: { currency: 'TRY', locale: 'tr-TR' } },
]

export function CustomersTable() {
  const [rows, setRows] = useState<Customer[]>([
    { id: 1, name: 'Acme', status: 'active', balance: 1250 },
    { id: 2, name: 'Coreor', status: 'pending', balance: 980 },
  ])
  return <EnterpriseGrid title="Customers" columns={columns} data={rows}
    onDataChange={setRows} pagination={{ initialPageSize: 25 }}
    height={520} filename="customers.csv" />
}

Server pagination and export

With serverMode, pass only the active page and the total matching row count. Your API handles sorting, filters and export requests.

QUICK START

import type { GridQuery, GridExportRequest } from '@battincik/coreor-datatable'

// Keep query, result rows and total on the client. Query the API when
// search, sorting, filters or pagination change.
const [query, setQuery] = useState<GridQuery>({
  search: '', sorting: [], filters: [], pageIndex: 0, pageSize: 25,
})

<EnterpriseGrid data={pageRows} columns={columns} serverMode
  totalRows={matchingRowCount} onQueryChange={setQuery}
  onExportRequest={async (request: GridExportRequest) => {
    // Server returns the requested selection or all filtered rows.
    const response = await fetch('/api/export', {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(request),
    })
    if (!response.ok) throw new Error('Export failed')
    return response.blob()
  }}
/>

Explore the full API

See README.md and docs/API.md in the repository for all props, cell options, raw value shapes and limitations.