@pindoba/astro-table 0.0.0-alpha-20260426220647

package/src/demos/headless.astro

@@ -0,0 +1,98 @@
+---
+import Table from "../table.astro";
+import { createTable, type ColumnDef } from "@tanstack/table-core";
+import { createTableOptions, getDefaultTableState } from "@pindoba/core-table";
+
+interface Contact {
+  firstName: string;
+  lastName: string;
+  email: string;
+  balance: number;
+  status: "active" | "pending" | "overdue";
+}
+
+// Seed data is pre-sorted by balance descending — the escape hatch is static
+// (consumer-owned tables don't auto-hydrate), so we bake the order directly
+// into the data rather than relying on TanStack's sortingFn at click time.
+const data: Contact[] = [
+  {
+    firstName: "Donald",
+    lastName: "Knuth",
+    email: "donald@example.com",
+    balance: 21_040,
+    status: "active",
+  },
+  {
+    firstName: "Ada",
+    lastName: "Lovelace",
+    email: "ada@example.com",
+    balance: 12_450,
+    status: "active",
+  },
+  {
+    firstName: "Alan",
+    lastName: "Turing",
+    email: "alan@example.com",
+    balance: 8_300,
+    status: "active",
+  },
+  {
+    firstName: "Linus",
+    lastName: "Torvalds",
+    email: "linus@example.com",
+    balance: 5_670,
+    status: "pending",
+  },
+  {
+    firstName: "Grace",
+    lastName: "Hopper",
+    email: "grace@example.com",
+    balance: -230,
+    status: "overdue",
+  },
+];
+
+// Grouped-header columns: TanStack resolves a nested `columns` array into a
+// multi-row `<thead>` with the right `colspan`. Pindoba's `<Table>` already
+// iterates every header group, so the escape hatch just needs to produce the
+// right ColumnDef shape — no wrapper changes required.
+const columns: ColumnDef<Contact>[] = [
+  {
+    id: "contact",
+    header: "Contact",
+    columns: [
+      { accessorKey: "firstName", header: "First" },
+      { accessorKey: "lastName", header: "Last" },
+      { accessorKey: "email", header: "Email" },
+    ],
+  },
+  {
+    id: "account",
+    header: "Account",
+    columns: [
+      { accessorKey: "balance", header: "Balance" },
+      { accessorKey: "status", header: "Status" },
+    ],
+  },
+];
+
+// Sorting UI is off on purpose: the escape hatch passes a pre-built instance
+// for SSR rendering, so there's no client-side state loop to drive sort
+// clicks. Interactivity belongs in the normal `<Table>` path (see the
+// `filtering`, `pagination`, etc. demos).
+const options = createTableOptions({ data, columns, enableSorting: false });
+const table = createTable({
+  ...options,
+  state: getDefaultTableState(options),
+  onStateChange: () => {
+    /* no-op */
+  },
+  renderFallbackValue: null,
+});
+---
+
+<Table
+  table={table}
+  bordered
+  caption="Grouped headers + balance-desc order, baked into a TanStack instance before handoff"
+/>

package/src/demos/index.ts

@@ -0,0 +1,11 @@
+export { default as Default } from "./default.astro";
+export { default as Sortable } from "./sortable.astro";
+export { default as Pagination } from "./pagination.astro";
+export { default as Filterable } from "./filterable.astro";
+export { default as CustomCell } from "./custom-cell.astro";
+export { default as Selectable } from "./selectable.astro";
+export { default as ColumnVisibility } from "./column-visibility.astro";
+export { default as Expandable } from "./expandable.astro";
+export { default as Grouped } from "./grouped.astro";
+export { default as ServerSide } from "./server-side.astro";
+export { default as Headless } from "./headless.astro";

package/src/demos/pagination.astro

@@ -0,0 +1,45 @@
+---
+import Table from "../table.astro";
+import type { ColumnDef } from "@tanstack/table-core";
+
+interface Order {
+  id: string;
+  customer: string;
+  total: string;
+  status: "pending" | "shipped" | "delivered" | "cancelled";
+}
+
+const statuses: Order["status"][] = [
+  "pending",
+  "shipped",
+  "delivered",
+  "cancelled",
+];
+
+// Deterministic totals for SSR: avoids hydration mismatches from Math.random.
+const data: Order[] = Array.from({ length: 47 }, (_, i) => {
+  const totalNum = Math.round(((i + 1) * 173.91) % 50000) / 100;
+  return {
+    id: `ORD-${String(1000 + i)}`,
+    customer: `Customer ${i + 1}`,
+    total: `$${totalNum.toFixed(2)}`,
+    status: statuses[i % statuses.length]!,
+  };
+});
+
+const columns: ColumnDef<Order>[] = [
+  { accessorKey: "id", header: "Order ID" },
+  { accessorKey: "customer", header: "Customer" },
+  { accessorKey: "total", header: "Total" },
+  { accessorKey: "status", header: "Status" },
+];
+---
+
+<Table
+  data={data}
+  columns={columns}
+  caption="47 orders — paginated 10 per page"
+  pageSize={10}
+  pageSizeOptions={[5, 10, 25, 50]}
+  bordered
+/>

package/src/demos/selectable.astro

@@ -0,0 +1,92 @@
+---
+import Table from "../table.astro";
+import type { ColumnDef } from "@tanstack/table-core";
+
+interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const data: User[] = [
+  { id: "u1", name: "Ada Lovelace", email: "ada@example.com", role: "Admin" },
+  { id: "u2", name: "Alan Turing", email: "alan@example.com", role: "Member" },
+  { id: "u3", name: "Grace Hopper", email: "grace@example.com", role: "Admin" },
+  {
+    id: "u4",
+    name: "Linus Torvalds",
+    email: "linus@example.com",
+    role: "Member",
+  },
+  {
+    id: "u5",
+    name: "Donald Knuth",
+    email: "donald@example.com",
+    role: "Member",
+  },
+];
+
+const columns: ColumnDef<User>[] = [
+  { id: "select", header: "", cell: () => "", enableSorting: false },
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "email", header: "Email" },
+  { accessorKey: "role", header: "Role" },
+];
+---
+
+<div
+  data-demo="table-selectable"
+  style="display: flex; flex-direction: column; gap: 0.75rem;"
+>
+  <p style="margin: 0; font-size: 0.875rem;">
+    <strong data-selected-count>0</strong> of {data.length} selected
+  </p>
+
+  <Table
+    data={data}
+    columns={columns}
+    enableRowSelection
+    enablePagination={false}
+    enableSorting={false}
+    getRowId={(row) => row.id}
+    caption="Row selection via the `select` column"
+  >
+    <template data-table-header-template="select">
+      <input
+        type="checkbox"
+        data-table-select-all
+        aria-label="Select all rows"
+      />
+    </template>
+    <template data-table-cell-template="select">
+      <input type="checkbox" data-table-select-row aria-label="Select row" />
+    </template>
+  </Table>
+</div>
+
+<script>
+  function syncCounts(scope: ParentNode = document) {
+    const wrappers = scope.querySelectorAll<HTMLElement>(
+      '[data-demo="table-selectable"]',
+    );
+    wrappers.forEach((wrapper) => {
+      const counter = wrapper.querySelector<HTMLElement>(
+        "[data-selected-count]",
+      );
+      if (!counter) return;
+      const update = () => {
+        const n = wrapper.querySelectorAll(
+          'tbody tr[data-row-selected="true"]',
+        ).length;
+        counter.textContent = String(n);
+      };
+      wrapper.addEventListener("change", update);
+      // Defer until mountTable has stamped the initial rows.
+      queueMicrotask(update);
+    });
+  }
+
+  syncCounts();
+  document.addEventListener("astro:page-load", () => syncCounts());
+</script>

package/src/demos/server-side.astro

@@ -0,0 +1,155 @@
+---
+import Table from "../table.astro";
+import type { ColumnDef } from "@tanstack/table-core";
+
+interface Log {
+  id: number;
+  level: "info" | "warn" | "error";
+  message: string;
+  timestamp: string;
+}
+
+const TOTAL_ROWS = 120;
+
+function generateAllRows(): Log[] {
+  const levels: Log["level"][] = ["info", "warn", "error"];
+  return Array.from({ length: TOTAL_ROWS }, (_, i) => ({
+    id: i + 1,
+    level: levels[i % 3]!,
+    message: `Log entry #${i + 1}`,
+    timestamp: new Date(Date.UTC(2026, 0, 1) - i * 60_000).toISOString(),
+  }));
+}
+
+// SSR renders the first page of the unsorted dataset. The inline `<script>`
+// below takes over on hydration and answers pagination/sorting changes with a
+// fresh slice of the *full* dataset — what a real backend would do.
+const initialRows = generateAllRows().slice(0, 10);
+
+const columns: ColumnDef<Log>[] = [
+  { accessorKey: "id", header: "#" },
+  { accessorKey: "level", header: "Level" },
+  { accessorKey: "message", header: "Message" },
+  { accessorKey: "timestamp", header: "Timestamp" },
+];
+---
+
+<div
+  data-demo="table-server-side"
+  style="display: flex; flex-direction: column; gap: 0.5rem;"
+>
+  <p style="margin: 0; font-size: 0.875rem;">
+    <span data-status>{TOTAL_ROWS} total rows (server-paginated)</span>
+  </p>
+
+  <Table
+    data={initialRows}
+    columns={columns}
+    manualPagination
+    manualSorting
+    rowCount={TOTAL_ROWS}
+    caption="Mock server-side pagination + sorting"
+  />
+</div>
+
+<script>
+  import { mountTable } from "@pindoba/core-table";
+  import type { SortingState } from "@tanstack/table-core";
+
+  type Log = {
+    id: number;
+    level: "info" | "warn" | "error";
+    message: string;
+    timestamp: string;
+  };
+
+  const TOTAL_ROWS = 120;
+
+  function generateAllRows(): Log[] {
+    const levels: Log["level"][] = ["info", "warn", "error"];
+    return Array.from({ length: TOTAL_ROWS }, (_, i) => ({
+      id: i + 1,
+      level: levels[i % 3]!,
+      message: `Log entry #${i + 1}`,
+      timestamp: new Date(Date.UTC(2026, 0, 1) - i * 60_000).toISOString(),
+    }));
+  }
+
+  const ALL_ROWS: Log[] = generateAllRows();
+
+  /** Mock server query: sort the full dataset, then slice the requested page. */
+  function queryPage(pi: number, ps: number, srt: SortingState): Log[] {
+    const sorted = ALL_ROWS.slice();
+    const first = srt[0];
+    if (first) {
+      const { id, desc } = first;
+      sorted.sort((a, b) => {
+        const va = (a as Record<string, unknown>)[id] as string | number;
+        const vb = (b as Record<string, unknown>)[id] as string | number;
+        if (va < vb) return desc ? 1 : -1;
+        if (va > vb) return desc ? -1 : 1;
+        return 0;
+      });
+    }
+    return sorted.slice(pi * ps, pi * ps + ps);
+  }
+
+  function init() {
+    const wrappers = document.querySelectorAll<HTMLElement>(
+      '[data-demo="table-server-side"]',
+    );
+    wrappers.forEach((wrapper) => {
+      const root = wrapper.querySelector<HTMLElement>(
+        '[data-component="table"][data-table-hydrate]',
+      );
+      const status = wrapper.querySelector<HTMLElement>("[data-status]");
+      if (!root) return;
+
+      // Replace the table.astro auto-mount with a manual mount so we control
+      // the `data` source via async fetches.
+      root.removeAttribute("data-table-hydrate");
+      root.setAttribute("data-table-mounted", "true");
+
+      const columns = JSON.parse(
+        root.getAttribute("data-table-columns") ?? "[]",
+      );
+      const opts = JSON.parse(root.getAttribute("data-table-options") ?? "{}");
+
+      const mount = mountTable<Log>(root, {
+        ...opts,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        columns: columns as any,
+        data: queryPage(0, opts.pageSize ?? 10, []),
+      });
+
+      let lastKey = "";
+      const fetchPage = async () => {
+        const state = mount.store.getState();
+        const pi = state.pagination?.pageIndex ?? 0;
+        const ps = state.pagination?.pageSize ?? 10;
+        const srt = (state.sorting ?? []) as SortingState;
+        const key = `${pi}|${ps}|${srt[0]?.id ?? ""}|${srt[0]?.desc ? "d" : "a"}`;
+        if (key === lastKey) return;
+        lastKey = key;
+        if (status) status.textContent = "Loading…";
+        await new Promise((r) => setTimeout(r, 250));
+        mount.store.actions.setData(queryPage(pi, ps, srt));
+        if (status) {
+          status.textContent = `${TOTAL_ROWS} total rows (server-paginated)`;
+        }
+      };
+
+      mount.store.subscribe(() => {
+        void fetchPage();
+      });
+      void fetchPage();
+
+      const teardown = () => mount.destroy();
+      window.addEventListener("pagehide", teardown, { once: true });
+      document.addEventListener("astro:before-swap", teardown, { once: true });
+    });
+  }
+
+  init();
+  document.addEventListener("astro:page-load", init);
+</script>

package/src/demos/sortable.astro

@@ -0,0 +1,33 @@
+---
+import Table from "../table.astro";
+import type { ColumnDef } from "@tanstack/table-core";
+
+interface Row {
+  name: string;
+  stars: number;
+  language: string;
+}
+
+const data: Row[] = [
+  { name: "Framework A", stars: 12000, language: "TypeScript" },
+  { name: "Framework B", stars: 48000, language: "JavaScript" },
+  { name: "Framework C", stars: 7400, language: "Rust" },
+  { name: "Framework D", stars: 23500, language: "Go" },
+  { name: "Framework E", stars: 31200, language: "Python" },
+];
+
+const columns: ColumnDef<Row>[] = [
+  { accessorKey: "name", header: "Name" },
+  { accessorKey: "stars", header: "★ Stars" },
+  { accessorKey: "language", header: "Language" },
+];
+---
+
+<Table
+  data={data}
+  columns={columns}
+  striped
+  caption="Click any header to sort (ascending, descending, unsorted)"
+  initialState={{ sorting: [{ id: "stars", desc: true }] }}
+  enablePagination={false}
+/>

package/src/env.d.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../.astro/types.d.ts" />