@pindoba/astro-table 0.0.0-alpha-20260426220647

package/src/table.astro

@@ -0,0 +1,514 @@
+---
+import {
+  connectTable,
+  createTableOptions,
+  getDefaultTableState,
+  type TableBaseProps,
+} from "@pindoba/core-table";
+import {
+  createTable,
+  type ColumnDef,
+  type Table,
+  type RowData,
+  type Header,
+} from "@tanstack/table-core";
+import type { HTMLAttributes } from "astro/types";
+import Button from "@pindoba/astro-button";
+import Input from "@pindoba/astro-input";
+import Select from "@pindoba/astro-select";
+import { Icon } from "astro-icon/components";
+
+type Props<TData extends RowData> = Omit<
+  HTMLAttributes<"div">,
+  "class" | "data"
+> &
+  TableBaseProps<TData, HTMLAttributes<"div">> & {
+    class?: string;
+  };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const props = Astro.props as Props<any>;
+const {
+  data,
+  columns,
+  table: externalTable,
+  caption,
+  emptyMessage = "No data",
+  enableSorting = true,
+  enableFiltering = true,
+  enablePagination = true,
+  enableRowSelection,
+  enableMultiRowSelection,
+  enableColumnVisibility,
+  enableExpanding,
+  enableGrouping,
+  enableColumnResizing,
+  pageSize = 10,
+  pageSizeOptions = [10, 25, 50, 100],
+  globalFilter,
+  globalFilterPlaceholder = "Search…",
+  manualPagination,
+  manualSorting,
+  manualFiltering,
+  rowCount,
+  getSubRows,
+  getRowId,
+  initialState,
+  showPagination,
+  showGlobalFilter = false,
+  state: _state,
+  onStateChange: _onStateChange,
+  class: className,
+  ...rest
+} = props;
+
+if (!externalTable && (!data || !columns)) {
+  throw new Error(
+    "[@pindoba/astro-table] Either `table` (headless instance) or both `data` and `columns` must be provided.",
+  );
+}
+
+const api = connectTable({ ...rest, class: className });
+
+// Strip function headers/cells for serialization — mountTable can't rehydrate
+// them. Consumers that need custom cells should write an inline <script> and
+// call mountTable themselves with `cellRenderers`.
+function serializableColumns(
+  cols: ColumnDef<unknown, unknown>[] | undefined,
+): ColumnDef<unknown, unknown>[] {
+  if (!cols) return [];
+  return cols.map((c) => {
+    const copy: Record<string, unknown> = {};
+    for (const [k, v] of Object.entries(c)) {
+      if (typeof v === "function") continue;
+      copy[k] = v;
+    }
+    return copy as unknown as ColumnDef<unknown, unknown>;
+  });
+}
+
+// `getSubRows` is a function and can't cross the SSR→client boundary via data
+// attributes. Bake the hierarchy into `subRows` on each row so the client's
+// default sub-row accessor (`row.subRows`) finds it without needing the fn.
+function normalizeSubRows(
+  rows: unknown[],
+  getSubRows: (row: unknown) => unknown[] | undefined,
+): unknown[] {
+  return rows.map((row) => {
+    const subs = getSubRows(row);
+    if (!subs || subs.length === 0) return row;
+    return {
+      ...(row as Record<string, unknown>),
+      subRows: normalizeSubRows(subs, getSubRows),
+    };
+  });
+}
+
+const serializedColumns = serializableColumns(
+  (columns ?? []) as ColumnDef<unknown, unknown>[],
+);
+const serializedData = getSubRows
+  ? normalizeSubRows(
+      (data ?? []) as unknown[],
+      getSubRows as (row: unknown) => unknown[] | undefined,
+    )
+  : (data ?? []);
+const serializedOptions = {
+  enableSorting,
+  enableFiltering,
+  enablePagination,
+  enableRowSelection:
+    typeof enableRowSelection === "function" ? true : enableRowSelection,
+  enableMultiRowSelection,
+  enableColumnVisibility,
+  enableExpanding,
+  enableGrouping,
+  enableColumnResizing,
+  pageSize,
+  pageSizeOptions,
+  globalFilter,
+  manualPagination,
+  manualSorting,
+  manualFiltering,
+  rowCount,
+  initialState,
+};
+
+// Variant props that affect slot classes (bordered, size, striped, …). These
+// MUST survive the SSR→client boundary so mountTable's post-hydration render
+// produces identical `td`/`tr`/… class strings — otherwise e.g. the bordered
+// column dividers disappear on first state change.
+const {
+  size,
+  density,
+  striped,
+  bordered,
+  stickyHeader,
+  background,
+  feedback,
+  accent,
+  translucent,
+  padding,
+  radius,
+  border,
+  shadow,
+  emphasis,
+} = rest as Record<string, unknown>;
+const serializedVariants: Record<string, unknown> = {};
+for (const [k, v] of Object.entries({
+  size,
+  density,
+  striped,
+  bordered,
+  stickyHeader,
+  background,
+  feedback,
+  accent,
+  translucent,
+  padding,
+  radius,
+  border,
+  shadow,
+  emphasis,
+})) {
+  if (v !== undefined) serializedVariants[k] = v;
+}
+
+// Build a transient TanStack instance to produce the initial SSR markup so
+// consumers without JS still see the first page.
+let table: Table<unknown>;
+if (externalTable) {
+  table = externalTable as Table<unknown>;
+} else {
+  const options = createTableOptions<unknown>({
+    data: data as unknown[],
+    columns: columns as ColumnDef<unknown, unknown>[],
+    enableSorting,
+    enableFiltering,
+    enablePagination,
+    enableRowSelection,
+    enableMultiRowSelection,
+    enableColumnVisibility,
+    enableExpanding,
+    enableGrouping,
+    enableColumnResizing,
+    pageSize,
+    globalFilter,
+    manualPagination,
+    manualSorting,
+    manualFiltering,
+    rowCount,
+    getSubRows,
+    getRowId,
+    initialState,
+  });
+  table = createTable<unknown>({
+    ...options,
+    state: getDefaultTableState(options),
+    onStateChange: () => {
+      /* no-op; mountTable owns state on the client */
+    },
+    renderFallbackValue: null,
+  });
+}
+
+const headerGroups = table.getHeaderGroups();
+const rows = table.getRowModel().rows;
+
+function renderHeader(h: Header<unknown, unknown>): string {
+  if (h.isPlaceholder) return "";
+  const def = h.column.columnDef.header;
+  if (typeof def === "string") return def;
+  if (typeof def === "function") {
+    try {
+      const result = def(h.getContext()) as unknown;
+      if (typeof result === "string" || typeof result === "number") {
+        return String(result);
+      }
+    } catch {
+      /* fallthrough */
+    }
+  }
+  return h.column.id;
+}
+
+function renderCell(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string" || typeof value === "number")
+    return String(value);
+  return "";
+}
+
+const showPaginationFooter =
+  enablePagination && (showPagination ?? true) && !externalTable;
+const paginationState = table.getState().pagination;
+const pageCount = table.getPageCount();
+const hydrate = !externalTable;
+---
+
+<div
+  {...api.rootProps}
+  data-table-rows={hydrate ? JSON.stringify(serializedData) : undefined}
+  data-table-columns={hydrate ? JSON.stringify(serializedColumns) : undefined}
+  data-table-options={hydrate ? JSON.stringify(serializedOptions) : undefined}
+  data-table-variants={hydrate ? JSON.stringify(serializedVariants) : undefined}
+  data-table-hydrate={hydrate ? "true" : undefined}
+>
+  {
+    showGlobalFilter && (
+      <div class={api.classes.toolbar}>
+        <Input
+          type="search"
+          size="sm"
+          fullWidth
+          placeholder={globalFilterPlaceholder}
+          aria-label="Filter rows"
+          passThrough={{
+            input: { props: { "data-table-global-filter": "" } },
+          }}
+        />
+      </div>
+    )
+  }
+  {
+    /* Consumer-provided toolbar. Lives inside the table root so mountTable's
+       delegated change/click handlers (e.g. `[data-table-column-toggle]`)
+       wire it up automatically. */
+    Astro.slots.has("toolbar") && (
+      <div class={api.classes.toolbar}>
+        <slot name="toolbar" />
+      </div>
+    )
+  }
+
+  <table class={api.classes.table}>
+    {caption && <caption class={api.classes.caption}>{caption}</caption>}
+    <thead class={api.classes.thead}>
+      {
+        headerGroups.map((hg) => (
+          <tr class={api.classes.tr}>
+            {hg.headers.map((header) => {
+              const sortDir = header.column.getIsSorted();
+              const canSort =
+                !header.isPlaceholder && header.column.getCanSort();
+              const columnId = header.column.id;
+              return (
+                <th
+                  class={api.classes.th}
+                  colspan={header.colSpan}
+                  data-table-header={columnId}
+                  aria-sort={
+                    sortDir === "asc"
+                      ? "ascending"
+                      : sortDir === "desc"
+                        ? "descending"
+                        : canSort
+                          ? "none"
+                          : undefined
+                  }
+                >
+                  {header.isPlaceholder ? null : canSort ? (
+                    <button
+                      type="button"
+                      class={api.classes.sortButton}
+                      data-sort={sortDir || "none"}
+                      data-table-sort={columnId}
+                      data-table-sort-button
+                    >
+                      <span>{renderHeader(header)}</span>
+                      <Icon
+                        name="lucide:chevrons-up-down"
+                        data-sort-icon="unsorted"
+                        aria-hidden="true"
+                      />
+                      <Icon
+                        name="lucide:chevron-up"
+                        data-sort-icon="asc"
+                        aria-hidden="true"
+                      />
+                      <Icon
+                        name="lucide:chevron-down"
+                        data-sort-icon="desc"
+                        aria-hidden="true"
+                      />
+                    </button>
+                  ) : (
+                    renderHeader(header)
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        ))
+      }
+    </thead>
+    <tbody class={api.classes.tbody} data-table-tbody>
+      {
+        rows.length === 0 ? (
+          <tr class={api.classes.tr}>
+            <td
+              class={api.classes.empty}
+              colspan={headerGroups[0]?.headers.length ?? 1}
+            >
+              {emptyMessage}
+            </td>
+          </tr>
+        ) : (
+          rows.map((row) => (
+            <tr class={api.classes.tr}>
+              {row.getVisibleCells().map((cell) => (
+                <td class={api.classes.td}>{renderCell(cell.getValue())}</td>
+              ))}
+            </tr>
+          ))
+        )
+      }
+    </tbody>
+  </table>
+  {
+    showPaginationFooter && (
+      <div class={api.classes.pagination}>
+        <div style="display: flex; align-items: center; gap: 0.5rem;">
+          <Button
+            type="button"
+            size="sm"
+            emphasis="ghost"
+            shape="square"
+            aria-label="First page"
+            passThrough={{ root: { props: { "data-table-page-first": "" } } }}
+          >
+            «
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            emphasis="ghost"
+            aria-label="Previous page"
+            passThrough={{ root: { props: { "data-table-page-prev": "" } } }}
+          >
+            ‹ Prev
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            emphasis="ghost"
+            aria-label="Next page"
+            passThrough={{ root: { props: { "data-table-page-next": "" } } }}
+          >
+            Next ›
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            emphasis="ghost"
+            shape="square"
+            aria-label="Last page"
+            passThrough={{ root: { props: { "data-table-page-last": "" } } }}
+          >
+            »
+          </Button>
+        </div>
+        <span class={api.classes.pageInfo} data-table-page-info>
+          Page {paginationState.pageIndex + 1} of {Math.max(pageCount, 1)}
+        </span>
+        <label style="display: flex; align-items: center; gap: 0.5rem;">
+          <span>Rows per page</span>
+          <Select
+            size="sm"
+            value={String(paginationState.pageSize)}
+            items={pageSizeOptions.map((opt) => ({
+              id: `page-size-${opt}`,
+              label: String(opt),
+              value: String(opt),
+            }))}
+            passThrough={{ select: { props: { "data-table-page-size": "" } } }}
+          />
+        </label>
+      </div>
+    )
+  }
+  {
+    /* Default slot — consumers drop `<template data-table-cell-template="X">`
+       and `<template data-table-header-template="X">` elements here. Templates
+       are inert in the DOM (cost nothing for non-JS clients, the SSR rows
+       above stay visible) and mountTable picks them up by querying for
+       `data-table-cell-template` / `data-table-header-template` inside the
+       root, so column-specific naming doesn't need an Astro dynamic slot. */
+  }
+  <slot />
+  {
+    /* Built-in grouped-row expand template. Rendered with the real `<Button>`
+       component so mountTable can clone its DOM per grouped row instead of
+       hand-rolling markup that has to stay in sync with button styles. */
+    enableGrouping && (
+      <template data-table-group-expand>
+        <span data-table-group-expand-row class={api.classes.groupExpandRow}>
+          <span
+            data-table-group-expand-rotator
+            class={api.classes.groupExpandRotator}
+          >
+            <Button
+              type="button"
+              size="xs"
+              emphasis="ghost"
+              shape="square"
+              aria-label="Toggle"
+              passThrough={{ root: { props: { "data-table-expand": "" } } }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path d="m9 18 6-6-6-6" />
+              </svg>
+            </Button>
+          </span>
+          <span data-table-group-expand-label />
+        </span>
+      </template>
+    )
+  }
+</div>
+
+<script>
+  import { mountTable } from "@pindoba/core-table";
+
+  function boot() {
+    const roots = document.querySelectorAll<HTMLElement>(
+      '[data-component="table"][data-table-hydrate]:not([data-table-mounted])',
+    );
+    for (const root of Array.from(roots)) {
+      root.setAttribute("data-table-mounted", "true");
+      let rows: unknown[];
+      let columns: unknown[];
+      let opts: Record<string, unknown>;
+      try {
+        rows = JSON.parse(root.getAttribute("data-table-rows") ?? "[]");
+        columns = JSON.parse(root.getAttribute("data-table-columns") ?? "[]");
+        opts = JSON.parse(root.getAttribute("data-table-options") ?? "{}");
+      } catch {
+        continue;
+      }
+      const mount = mountTable(root, {
+        data: rows as Record<string, unknown>[],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        columns: columns as any,
+        ...opts,
+      });
+      const teardown = () => mount.destroy();
+      window.addEventListener("pagehide", teardown, { once: true });
+      document.addEventListener("astro:before-swap", teardown, { once: true });
+    }
+  }
+
+  boot();
+  document.addEventListener("astro:page-load", boot);
+</script>