Table Builder

TableBuilder builds a typed table configuration. It does not ship its own React table hook.

Imports

import {
  TableBuilder,
  createTableBuilder,
  createColumn,
  createColumns,
} from '@codella-software/utils'
import { useFiltersAndSort } from '@codella-software/react'

Core example

type User = {
  id: number
  name: string
  email: string
}

type UserFilters = {
  search: string
}

const filters = useFiltersAndSort<UserFilters>({
  config: {
    storageKey: 'users-table',
    defaultFilters: { search: '' },
  },
})

const table = new TableBuilder<User, UserFilters>()
  .data(users)
  .totalRows(users.length)
  .columns([
    createColumn('name', 'name', 'Name', { sortable: true }),
    createColumn('email', 'email', 'Email'),
  ])
  .filtersAndSort(filters.state, filters.getService().getActions())
  .selection({ enabled: true, mode: 'multiple' })
  .pagination({ enabled: true, pageSizeOptions: [10, 25, 50] })
  .build()

Available builder methods

• data(data)
• totalRows(total)
• columns(columns)
• column((builder) => builder.accessor(...).header(...).sortable())
• filtersAndSort(state, actions)
• row(config)
• rowActions(actions)
• rowAction(action)
• bulkActions(actions)
• bulkAction(action)
• selection(config)
• pagination(config)
• loading(loading)
• loadingState(config)
• emptyState(config)
• variant(variant)
• size(size)
• theme(theme)
• className(className)
• ariaLabel(label)
• caption(caption)
• build()

Column shape

type ColumnConfig<TData> = {
  id: string
  accessorKey?: keyof TData | string
  accessorFn?: (row: TData) => unknown
  header: string | ReactNode | ((props) => ReactNode)
  cell?: (props) => ReactNode
  footer?: string | ReactNode | ((props) => ReactNode)
  sortable?: boolean
  sortField?: string
  hidden?: boolean
  hideable?: boolean
  sticky?: 'left' | 'right'
  align?: 'left' | 'center' | 'right'
}

Important

build() throws unless filtersAndSort(state, actions) has been provided.