@overdoser/react-toolkit 0.0.1 → 0.0.3

package/recipes/server-side-table.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+import { Table, type ColumnDef, type SortConfig } from '@overdoser/react-toolkit';
+
+interface Order extends Record<string, unknown> {
+  id: string;
+  customer: string;
+  total: number;
+  status: 'pending' | 'paid' | 'refunded';
+  createdAt: string;
+}
+
+interface FetchArgs {
+  page: number;
+  pageSize: number;
+  sort: SortConfig[];
+}
+
+interface FetchResult {
+  rows: Order[];
+  totalRows: number;
+}
+
+const columns: ColumnDef<Order>[] = [
+  { key: 'id', header: 'Order #', sortable: true, width: 120 },
+  { key: 'customer', header: 'Customer', sortable: true },
+  {
+    key: 'total',
+    header: 'Total',
+    sortable: true,
+    align: 'right',
+    width: 120,
+    render: (value) =>
+      new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value as number),
+  },
+  { key: 'status', header: 'Status', sortable: true, width: 120 },
+  {
+    key: 'createdAt',
+    header: 'Created',
+    sortable: true,
+    align: 'right',
+    width: 180,
+    render: (value) => new Date(value as string).toLocaleString(),
+  },
+];
+
+export function ServerSideOrdersTable({
+  fetchPage,
+}: {
+  fetchPage: (args: FetchArgs) => Promise<FetchResult>;
+}) {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+  const [sort, setSort] = useState<SortConfig[]>([{ key: 'createdAt', direction: 'desc' }]);
+  const [rows, setRows] = useState<Order[]>([]);
+  const [totalRows, setTotalRows] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetchPage({ page, pageSize, sort }).then((result) => {
+      if (!cancelled) {
+        setRows(result.rows);
+        setTotalRows(result.totalRows);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [page, pageSize, sort, fetchPage]);
+
+  return (
+    <Table
+      data={rows}
+      columns={columns}
+      rowKey="id"
+      sortConfig={sort}
+      onSort={(next) => {
+        setSort(next);
+        setPage(1);
+      }}
+      hoverable
+      pagination={{
+        page,
+        pageSize,
+        totalRows,
+        onPageChange: (nextPage, nextPageSize) => {
+          setPage(nextPage);
+          setPageSize(nextPageSize);
+        },
+      }}
+    />
+  );
+}