DataTable

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

import { DataTable } 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 { useState } from "react";
import { DataTable } from "@jarllyng/nostromo";
 
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}
    />
  );
}