Table

The Table component allows you to display data in a structured, accessible, and interactive format. It supports sorting, pagination, and custom cell rendering.

Import

import { Table } from 'h2o-library';
import type { TableColumn, SortDirection } from 'h2o-library';

Usage

The example below demonstrates a table with sorting, pagination, and toast notifications for actions.

"use client";

import React, { useState } from "react";
import {
  Table,
  TableColumn,
  SortDirection,
  Button,
  useToast,
  ToastProvider,
} from "h2o-library";

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

const columns: TableColumn<User>[] = [
  { key: "id", label: "ID", sortable: true },
  { key: "name", label: "Name", sortable: true },
  { key: "email", label: "Email" },
  {
    key: "status",
    label: "Status",
    render: (item) => (
      <span className={`status status-${item.status.toLowerCase()}`}>{item.status}</span>
    ),
  },
];

const users: User[] = [
  { id: 1, name: "John Doe", email: "john.doe@example.com", status: "Active" },
  { id: 2, name: "Jane Smith", email: "jane.smith@example.com", status: "Inactive" },
  // ... more users
];

export function TableExample() {
  const [sortKey, setSortKey] = useState<string | undefined>(undefined);
  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [perPage, setPerPage] = useState(10);
  const totalPages = Math.ceil(users.length / perPage);

  const handleSort = (key: string, direction: SortDirection) => {
    setSortKey(key);
    setSortDirection(direction);
  };
  
  const sortedData = React.useMemo(() => {
    if (!sortKey) return users;
    const sorted = [...users].sort((a, b) => {
      if (a[sortKey] < b[sortKey]) {
        return sortDirection === "asc" ? -1 : 1;
      }
      if (a[sortKey] > b[sortKey]) {
        return sortDirection === "asc" ? 1 : -1;
      }
      return 0;
    });
    return sorted;
  }, [sortKey, sortDirection]);


  return (
      <Table
        columns={columns}
        data={sortedData}
        sortKey={sortKey}
        sortDirection={sortDirection}
        onSort={handleSort}
        currentPage={currentPage}
        totalPages={totalPages}
        perPage={perPage}
        onPageChange={setCurrentPage}
        onPerPageChange={(value) => setPerPage(Number(value))}
      />
  );
}

Table Props

Prop	Type	Default	Description
columns	TableColumn<T>[]	[]	An array of column configuration objects.
data	T[]	[]	The data to be displayed in the table.
sortKey	string	undefined	The key of the column to sort by.
sortDirection	SortDirection	null	The direction of the sort ('asc', 'desc', or null).
onSort	(key: string, direction: SortDirection) => void	undefined	Callback function triggered when a sortable column header is clicked.
currentPage	number	1	The current active page.
totalPages	number	1	The total number of pages.
perPage	number	10	The number of items to display per page.
onPageChange	(page: number) => void	undefined	Callback function triggered when the page is changed.
onPerPageChange	(perPage: number) => void	undefined	Callback function triggered when the items per page is changed.

TableColumn Props

Prop	Type	Required	Description
key	string	Yes	A unique identifier for the column, which should correspond to a key in the data objects.
label	string	Yes	The text to display in the column header.
sortable	boolean	No	If true, the column can be sorted by the user.
render	(item: T) => React.ReactNode	No	A function to customize the rendering of cells in this column. It receives the entire data object for the row.

Accessibility

• Column headers are implemented with <th> elements to be properly recognized by screen readers.
• Sortable columns are interactive and keyboard-accessible.
• Pagination controls are keyboard-accessible and provide ARIA attributes to announce page status.