DataTable

import { DataTable } from '@nostromo/ui-core'
// or
import { DataTable } from '@nostromo/ui-core/data-table'

import { DataTable } from '@nostromo/ui-core'
 
const data = [
  { id: 1, name: 'John Doe', email: 'john@example.com', department: 'Engineering' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', department: 'Marketing' }
]
 
const columns = [
  { key: 'name', title: 'Name', dataIndex: 'name', sortable: true },
  { key: 'email', title: 'Email', dataIndex: 'email' },
  { key: 'department', title: 'Department', dataIndex: 'department', sortable: true }
]
 
export default function Example() {
  return (
    <DataTable
      data={data}
      columns={columns}
      searchable={true}
      showPagination={true}
    />
  )
}

interface ColumnFilter<T = Record<string, unknown>> {
  key: string;                    // Column key to filter
  type: 'text' | 'select' | 'number' | 'date' | 'boolean';
  options?: Array<{                // For 'select' type
    label: string;
    value: string | number;
  }>;
  placeholder?: string;            // Placeholder for filter input
  filterFn?: (value: unknown, record: T) => boolean;  // Custom filter function
}

<DataTable
  data={employees}
  columns={columns}
  searchable={true}
  searchPlaceholder="Search employees..."
/>

<DataTable
  data={employees}
  columns={columns}
  searchable={true}
  filterable={true}
  filters={[
    {
      key: 'department',
      type: 'select',
      options: [
        { label: 'Engineering', value: 'Engineering' },
        { label: 'Marketing', value: 'Marketing' }
      ]
    },
    {
      key: 'status',
      type: 'select',
      options: [
        { label: 'Active', value: 'Active' },
        { label: 'Inactive', value: 'Inactive' }
      ]
    }
  ]}
/>

<DataTable
  data={employees}
  columns={columns}
  searchable={true}
  searchKeys={['name', 'email']}  // Only search in name and email columns
  searchPlaceholder="Search by name or email..."
/>

<DataTable
  data={employees}
  columns={columns}
  defaultSortColumn="name"
  defaultSortDirection="asc"
/>

<DataTable
  data={employees}
  columns={columns}
  searchable={true}
  showPagination={false}  // Show all results
/>

import { useState } from 'react'
import { DataTable } from '@nostromo/ui-core'
 
export default function ServerSideDataTable() {
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [sortColumn, setSortColumn] = useState('name')
  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
  const [searchTerm, setSearchTerm] = useState('')
  const [totalItems, setTotalItems] = useState(0)
 
  // Fetch data from server based on current state
  const fetchData = async () => {
    const response = await fetch(`/api/employees?page=${currentPage}&pageSize=${pageSize}&sort=${sortColumn}&direction=${sortDirection}&search=${searchTerm}`)
    const { data, total } = await response.json()
    setTotalItems(total)
    return data
  }
 
  return (
    <DataTable
      data={data}
      columns={columns}
      // Controlled props for server-side operations
      currentPage={currentPage}
      pageSize={pageSize}
      totalItems={totalItems}
      onPageChange={setCurrentPage}
      onPageSizeChange={setPageSize}
      sortColumn={sortColumn}
      sortDirection={sortDirection}
      onSortChange={(col, dir) => {
        setSortColumn(col)
        setSortDirection(dir)
      }}
      searchTerm={searchTerm}
      onSearchTermChange={setSearchTerm}
    />
  )
}