Component Library

import { DataTable, useSortState } from '@mission-critical-saas/brand-system'
import type { Column } from '@mission-critical-saas/brand-system'

interface User {
  id: string
  name: string
  email: string
  status: string
}

const columns: Column<User>[] = [
  { key: 'name', header: 'Name', sortable: true },
  { key: 'email', header: 'Email', sortable: true },
  {
    key: 'status',
    header: 'Status',
    render: (value) => <StatusBadge status={value} />
  },
]

function UsersTable() {
  const { sort, handleSort } = useSortState('name', 'asc')

  return (
    <DataTable
      columns={columns}
      data={users}
      rowKey="id"
      sortColumn={sort.column ?? undefined}
      sortDirection={sort.direction ?? undefined}
      onSortChange={handleSort}
      onRowClick={(row) => navigate(`/users/${row.id}`)}
    />
  )
}

import { DataTableFiltersAdvanced, useFilterState } from '@mission-critical-saas/brand-system'
import type { FilterConfig } from '@mission-critical-saas/brand-system'

const filters: FilterConfig[] = [
  { key: 'search', label: 'Search', type: 'search' },
  {
    key: 'status',
    label: 'Status',
    type: 'select',
    options: [
      { value: 'all', label: 'All Statuses' },
      { value: 'active', label: 'Active' },
      { value: 'inactive', label: 'Inactive' },
    ],
  },
  { key: 'dateRange', label: 'Date Range', type: 'date-range' },
  { key: 'balance', label: 'Balance', type: 'balance' },
]

function FilteredTable() {
  const { values, setValue, clearAll } = useFilterState({
    search: '',
    status: 'all',
    dateRange: { from: null, to: null },
    balance: { min: null, max: null },
  })

  return (
    <DataTableFiltersAdvanced
      filters={filters}
      values={values}
      onChange={setValue}
      onClear={clearAll}
      layout="grid"
      columns={3}
    />
  )
}