Step 4: Define Columns Using columnHelper

The createColumnHelper function gives you a type-safe way to define columns. The .accessor() method infers the value type from the data interface.

// columns.ts
import { createColumnHelper } from '@zvndev/yable-react'
import type { Employee } from './types'

const columnHelper = createColumnHelper<Employee>()

export const columns = [
  columnHelper.accessor('name', {
    header: 'Name',
  }),
  columnHelper.accessor('department', {
    header: 'Department',
  }),
  columnHelper.accessor('salary', {
    header: 'Salary',
    cell: ({ getValue }) => {
      return `$${getValue().toLocaleString()}`
    },
  }),
  columnHelper.accessor('startDate', {
    header: 'Start Date',
  }),
  columnHelper.accessor('active', {
    header: 'Active',
    cell: ({ getValue }) => (getValue() ? 'Yes' : 'No'),
  }),
]

---