DEVELOPER GUIDE / REACT

Documentation.

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

START HERE

A useful grid in a few lines.

Bring your own rows and column definitions. Keep edits in your state and add server handlers when the data set outgrows the browser.

Open Table Maker

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" />
}