DataTable

import { DataTable } from "@jarllyng/nostromo";
// or
import { DataTable } from "@jarllyng/nostromo/data-table";

import { DataTable, type TableColumn } from "@jarllyng/nostromo";
 
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: TableColumn<(typeof data)[number]>[] = [
  { 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 { useEffect, useState } from "react";
import { DataTable, type TableColumn } from "@jarllyng/nostromo";
 
type Employee = { id: number; name: string; email: string };
 
const columns: TableColumn<Employee>[] = [
  { key: "name", title: "Name", dataIndex: "name", sortable: true },
  { key: "email", title: "Email", dataIndex: "email" },
];
 
export default function ServerSideDataTable() {
  const [rows, setRows] = useState<Employee[]>([]);
  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);
 
  // Every controlled prop the table reads is also a dependency here: the server
  // is doing the paging, sorting and searching, so a change to any of them is a
  // new request rather than a re-filter of what is already on screen.
  useEffect(() => {
    let cancelled = false;
    fetch(
      `/api/employees?page=${currentPage}&pageSize=${pageSize}&sort=${sortColumn}&direction=${sortDirection}&search=${searchTerm}`,
    )
      .then((response) => response.json())
      .then((body: { data: Employee[]; total: number }) => {
        if (cancelled) return;
        setRows(body.data);
        setTotalItems(body.total);
      });
    return () => {
      cancelled = true;
    };
  }, [currentPage, pageSize, sortColumn, sortDirection, searchTerm]);
 
  return (
    <DataTable
      data={rows}
      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}
    />
  );
}

<DataTable
  data={rows} // already searched, filtered and sorted by the server
  columns={columns}
  manualSearch
  manualFiltering
  manualSorting
  searchTerm={query}
  onSearchTermChange={setQuery}
  columnFilters={filters}
  onColumnFiltersChange={setFilters}
  sortColumn={sort.column}
  sortDirection={sort.direction}
  onSortChange={(column, direction) => setSort({ column, direction })}
  currentPage={page}
  onPageChange={setPage}
  totalItems={total}
/>