@requence/table 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 requence
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,108 @@
+# @requence/table
+
+Headless virtualized table with compound component API, Suspense-compatible data caching, and column width persistence for React.
+
+## Installation
+
+```bash
+npm install @requence/table
+```
+
+## Prerequisites
+
+This package uses [Tailwind CSS](https://tailwindcss.com/) utility classes internally (via `tailwind-merge`). Your project must have Tailwind CSS configured for the component to render correctly.
+
+## Quick Start
+
+### VirtualTable
+
+A compound component for rendering large datasets with virtual scrolling and CSS Grid layout.
+
+```tsx
+import { VirtualTable } from '@requence/table'
+
+function MyTable({ cache }) {
+  return (
+    <VirtualTable
+      totalCount={cache.totalCount}
+      rowHeight={32}
+      onRangeChange={cache.handleRangeChange}
+    >
+      <VirtualTable.Header>
+        <VirtualTable.Column width="2fr" resizable>Name</VirtualTable.Column>
+        <VirtualTable.Column width="1fr">Email</VirtualTable.Column>
+        <VirtualTable.Column width={100}>Status</VirtualTable.Column>
+      </VirtualTable.Header>
+
+      <VirtualTable.Body>
+        {(index) => {
+          const item = cache.getItem(index)
+          if (!item) return null
+
+          return (
+            <VirtualTable.Row>
+              <VirtualTable.Cell>{item.name}</VirtualTable.Cell>
+              <VirtualTable.Cell>{item.email}</VirtualTable.Cell>
+              <VirtualTable.Cell>{item.status}</VirtualTable.Cell>
+            </VirtualTable.Row>
+          )
+        }}
+      </VirtualTable.Body>
+
+      <VirtualTable.Empty>No data found.</VirtualTable.Empty>
+
+      <VirtualTable.Footer>
+        {({ start, end }) => `Showing rows ${start}–${end}`}
+      </VirtualTable.Footer>
+    </VirtualTable>
+  )
+}
+```
+
+### useTableCache
+
+Suspense-compatible paginated data cache. The first fetch suspends the component; subsequent page fetches are non-blocking.
+
+```tsx
+import { useTableCache } from '@requence/table'
+
+const cache = useTableCache('users', {
+  pageSize: 50,
+  getItemId: (item) => item.id,
+  compare: (a, b) => a.name.localeCompare(b.name),
+  fetchItems: async (offset, limit) => {
+    const res = await fetch(`/api/users?offset=${offset}&limit=${limit}`)
+    const { items, total } = await res.json()
+    return { items, total }
+  },
+})
+```
+
+### useTableColumnWidths
+
+Persist user-resized column widths to localStorage.
+
+```tsx
+import { useTableColumnWidths } from '@requence/table'
+
+const { register, reset } = useTableColumnWidths({ persist: 'my-table' })
+
+<VirtualTable.Column {...register('name', { defaultValue: '2fr', relative: true })}>
+  Name
+</VirtualTable.Column>
+```
+
+## Exports
+
+All exports are available from the package root:
+
+| Export | Type | Description |
+| --- | --- | --- |
+| `VirtualTable` | Component | Compound component (`.Header`, `.Column`, `.Body`, `.Row`, `.Cell`, `.SkeletonRow`, `.Empty`, `.Footer`) |
+| `createTable*` | Functions | Factory functions for creating slot components with baked-in defaults |
+| `useTableCache` | Hook | Suspense-compatible paginated data cache |
+| `useTableColumnWidths` | Hook | Column width persistence with localStorage |
+
+## License
+
+MIT

package/dist/VirtualTable.d.ts

@@ -0,0 +1,94 @@
+import { type CSSProperties, type ComponentProps, type ReactNode } from 'react';
+export interface VirtualTableProps {
+    /** Total number of rows in the dataset */
+    totalCount: number;
+    /** Fixed height of each row in pixels */
+    rowHeight: number;
+    /** Number of extra rows rendered above/below viewport (default: 5) */
+    overscan?: number;
+    /** Called when the visible row range changes (for triggering page fetches) */
+    onRangeChange?: (range: {
+        start: number;
+        end: number;
+    }) => void;
+    /** Additional className for the outer container */
+    className?: string;
+    /** Accessible label for the table */
+    'aria-label'?: string;
+    /** Additional inline styles for the outer container */
+    style?: CSSProperties;
+    children: ReactNode;
+}
+export interface VirtualTableHeaderProps {
+    className?: string;
+    children: ReactNode;
+}
+export interface VirtualTableColumnProps {
+    /** Column width. Number for pixels, string for CSS grid values (e.g. '1fr'). Defaults to '1fr'. */
+    width?: number | string;
+    /** Optional className for the header cell */
+    className?: string;
+    /** Whether this column can be resized by dragging. Default: false */
+    resizable?: boolean;
+    /** Minimum width in pixels during resize. Default: 50 */
+    minWidth?: number;
+    /** Maximum width in pixels during resize */
+    maxWidth?: number;
+    /** Mark this column as transparent — the row background will not extend behind it. */
+    transparent?: boolean;
+    /** Called when a resize drag starts */
+    onResizeStart?: () => void;
+    /** Called when a resize drag ends with the final pixel width, original width, and equivalent fr value */
+    onResizeEnd?: (width: number, startWidth: number, frValue: number) => void;
+    children?: ReactNode;
+}
+export interface VirtualTableBodyProps {
+    children: (index: number) => ReactNode | null;
+}
+export interface VirtualTableRowProps extends ComponentProps<'div'> {
+}
+export interface VirtualTableSkeletonRowProps extends ComponentProps<'div'> {
+}
+export interface VirtualTableCellProps extends ComponentProps<'div'> {
+    /** Show cell content only on row hover */
+    showOnHover?: boolean;
+    /** Number of columns this cell spans */
+    colSpan?: number;
+}
+export interface VirtualTableEmptyProps {
+    className?: string;
+    children: ReactNode;
+}
+export interface VirtualTableFooterProps {
+    className?: string;
+    children: (range: {
+        start: number;
+        end: number;
+    }) => ReactNode;
+}
+interface SlotComponent<P> {
+    (props: P): ReactNode;
+    slot: string;
+    slotDefaults: Partial<P>;
+}
+export declare function createTableHeader(defaults?: Partial<VirtualTableHeaderProps>): SlotComponent<VirtualTableHeaderProps>;
+export declare function createTableColumn(defaults?: Partial<VirtualTableColumnProps>): SlotComponent<VirtualTableColumnProps>;
+export declare function createTableBody(defaults?: Partial<VirtualTableBodyProps>): SlotComponent<VirtualTableBodyProps>;
+export declare function createTableSkeletonRow(defaults?: Partial<VirtualTableSkeletonRowProps>): SlotComponent<VirtualTableSkeletonRowProps>;
+export declare function createTableEmpty(defaults?: Partial<VirtualTableEmptyProps>): SlotComponent<VirtualTableEmptyProps>;
+export declare function createTableFooter(defaults?: Partial<VirtualTableFooterProps>): SlotComponent<VirtualTableFooterProps>;
+export declare function createTableRow(defaults?: Partial<VirtualTableRowProps>): SlotComponent<VirtualTableRowProps>;
+declare function VirtualTableCell({ className, style, showOnHover, colSpan, ...rest }: VirtualTableCellProps): import("react").JSX.Element;
+declare function VirtualTableRoot({ totalCount, rowHeight, overscan, onRangeChange, className, style: styleProp, 'aria-label': ariaLabel, children, }: VirtualTableProps): import("react").JSX.Element;
+export declare const VirtualTable: typeof VirtualTableRoot & {
+    Header: SlotComponent<VirtualTableHeaderProps>;
+    Column: SlotComponent<VirtualTableColumnProps>;
+    Body: SlotComponent<VirtualTableBodyProps>;
+    SkeletonRow: SlotComponent<VirtualTableSkeletonRowProps>;
+    Row: SlotComponent<VirtualTableRowProps>;
+    Cell: typeof VirtualTableCell;
+    Empty: SlotComponent<VirtualTableEmptyProps>;
+    Footer: SlotComponent<VirtualTableFooterProps>;
+};
+export {};
+//# sourceMappingURL=VirtualTable.d.ts.map

package/dist/VirtualTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualTable.d.ts","sourceRoot":"","sources":["../src/VirtualTable.tsx"],"names":[],"mappings":"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"}

package/dist/VirtualTable.js

@@ -0,0 +1,411 @@
+// src/VirtualTable.tsx
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { flushSync } from "react-dom";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function asSlot(slot, defaults) {
+  const Component = () => null;
+  Component.slot = slot;
+  Component.slotDefaults = defaults ?? {};
+  return Component;
+}
+function createTableHeader(defaults) {
+  return asSlot("header", defaults);
+}
+function createTableColumn(defaults) {
+  return asSlot("column", defaults);
+}
+function createTableBody(defaults) {
+  return asSlot("body", defaults);
+}
+function createTableSkeletonRow(defaults) {
+  return asSlot("skeletonRow", defaults);
+}
+function createTableEmpty(defaults) {
+  return asSlot("empty", defaults);
+}
+function createTableFooter(defaults) {
+  return asSlot("footer", defaults);
+}
+function createTableRow(defaults) {
+  return asSlot("row", defaults);
+}
+var GRID_VAR = "--vtable-grid-cols";
+var GRID_VAR_REF = `var(${GRID_VAR})`;
+function buildGridTemplate(columns) {
+  return columns.map((col) => {
+    if (typeof col.width === "number") {
+      return `${col.width}px`;
+    }
+    const min = col.minWidth ? `${col.minWidth}px` : "0";
+    if (typeof col.width === "string") {
+      return `minmax(${min}, ${col.width})`;
+    }
+    return `minmax(${min}, 1fr)`;
+  }).join(" ");
+}
+var VirtualTableHeader = asSlot("header");
+var VirtualTableColumn = asSlot("column");
+var VirtualTableBody = asSlot("body");
+var VirtualTableRow = asSlot("row");
+var VirtualTableSkeletonRow = asSlot("skeletonRow");
+var VirtualTableEmpty = asSlot("empty");
+var VirtualTableFooter = asSlot("footer");
+function slotIs(child, slot) {
+  return child.type?.slot === slot;
+}
+function extractSlots(children) {
+  let header = null;
+  let body = null;
+  let skeletonRow = null;
+  let empty = null;
+  let footer = null;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+    if (slotIs(child, "header")) {
+      const defaults = child.type.slotDefaults ?? {};
+      const props = child.props;
+      const columns = [];
+      Children.forEach(props.children, (col) => {
+        if (isValidElement(col) && slotIs(col, "column")) {
+          const d = col.type.slotDefaults ?? {};
+          const p = col.props;
+          columns.push({
+            width: p.width ?? d.width,
+            header: p.children,
+            className: twMerge(d.className, p.className),
+            resizable: p.resizable ?? d.resizable,
+            minWidth: p.minWidth ?? d.minWidth,
+            maxWidth: p.maxWidth ?? d.maxWidth,
+            transparent: p.transparent ?? d.transparent,
+            onResizeStart: p.onResizeStart ?? d.onResizeStart,
+            onResizeEnd: p.onResizeEnd ?? d.onResizeEnd
+          });
+        }
+      });
+      header = {
+        className: twMerge(defaults.className, props.className),
+        columns
+      };
+    } else if (slotIs(child, "body")) {
+      body = child.props;
+    } else if (slotIs(child, "skeletonRow")) {
+      const defaults = child.type.slotDefaults ?? {};
+      const props = child.props;
+      skeletonRow = {
+        ...defaults,
+        ...props,
+        className: twMerge(defaults.className, props.className)
+      };
+    } else if (slotIs(child, "empty")) {
+      const defaults = child.type.slotDefaults ?? {};
+      const props = child.props;
+      empty = {
+        ...defaults,
+        ...props,
+        className: twMerge(defaults.className, props.className)
+      };
+    } else if (slotIs(child, "footer")) {
+      const defaults = child.type.slotDefaults ?? {};
+      const props = child.props;
+      footer = {
+        ...defaults,
+        ...props,
+        className: twMerge(defaults.className, props.className)
+      };
+    }
+  });
+  return { header, body, skeletonRow, empty, footer };
+}
+function ResizeHandle({ onMouseDown }) {
+  return /* @__PURE__ */ jsx("div", {
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: "resizer absolute right-0 top-0 z-10 h-full w-1.5 cursor-col-resize",
+    onMouseDown
+  });
+}
+function VirtualTableCell({
+  className,
+  style,
+  showOnHover,
+  colSpan,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    role: "cell",
+    className: twMerge("overflow-hidden text-ellipsis whitespace-nowrap", showOnHover && "not-group-hover/row:*:delay-200 *:opacity-10 *:transition-opacity *:duration-300 *:ease-in-out group-hover/row:*:opacity-100", className),
+    style: colSpan ? { gridColumn: `span ${colSpan}`, ...style } : style,
+    ...rest
+  });
+}
+function DataRow({ index, rowHeight, rowProps, children }) {
+  const { className, style, ...restProps } = rowProps;
+  return /* @__PURE__ */ jsx("div", {
+    role: "row",
+    "aria-rowindex": index + 1,
+    className: twMerge("group/row absolute w-full", className),
+    style: {
+      height: rowHeight,
+      transform: `translateY(${index * rowHeight}px)`,
+      display: "grid",
+      gridTemplateColumns: GRID_VAR_REF,
+      alignItems: "center",
+      willChange: "transform",
+      contain: "layout style paint",
+      ...style
+    },
+    ...restProps,
+    children
+  });
+}
+function VirtualTableRoot({
+  totalCount,
+  rowHeight,
+  overscan = 5,
+  onRangeChange,
+  className,
+  style: styleProp,
+  "aria-label": ariaLabel,
+  children
+}) {
+  const scrollRef = useRef(null);
+  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 0 });
+  const prevRangeRef = useRef({ start: 0, end: 0 });
+  const { header, body, skeletonRow, empty, footer } = extractSlots(children);
+  const columns = header?.columns ?? [];
+  const gridTemplate = buildGridTemplate(columns);
+  const renderRow = body?.children ?? (() => null);
+  const calculateRange = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el || totalCount === 0) {
+      return;
+    }
+    const scrollTop = el.scrollTop;
+    const viewportHeight = el.clientHeight;
+    const rawStart = Math.floor(scrollTop / rowHeight);
+    const rawEnd = Math.ceil((scrollTop + viewportHeight) / rowHeight);
+    const start = Math.max(0, rawStart - overscan);
+    const end = Math.min(totalCount, rawEnd + overscan);
+    const prev = prevRangeRef.current;
+    if (prev.start !== start || prev.end !== end) {
+      prevRangeRef.current = { start, end };
+      flushSync(() => setVisibleRange({ start, end }));
+    }
+  }, [totalCount, rowHeight, overscan]);
+  const handleScroll = useCallback(() => {
+    calculateRange();
+  }, [calculateRange]);
+  useEffect(() => {
+    calculateRange();
+  }, [calculateRange]);
+  useEffect(() => {
+    onRangeChange?.(visibleRange);
+  }, [visibleRange, onRangeChange]);
+  const handleResizeMouseDown = useCallback((columnIndex, e) => {
+    e.preventDefault();
+    const container = scrollRef.current;
+    if (!container) {
+      return;
+    }
+    const col = columns[columnIndex];
+    const headerCells = container.querySelectorAll('[role="columnheader"]');
+    const startWidth = headerCells[columnIndex]?.getBoundingClientRect().width ?? (typeof col.width === "number" ? col.width : 100);
+    const startX = e.clientX;
+    const minW = col.minWidth ?? 50;
+    const maxW = col.maxWidth ?? Infinity;
+    const otherColumnsMinWidth = columns.reduce((sum, c, i) => {
+      if (i === columnIndex) {
+        return sum;
+      }
+      if (typeof c.width === "number") {
+        return sum + c.width;
+      }
+      return sum + (c.minWidth ?? 0);
+    }, 0);
+    const maxAllowedWidth = container.clientWidth - otherColumnsMinWidth;
+    let currentWidth = startWidth;
+    col.onResizeStart?.();
+    const prevCursor = document.body.style.cursor;
+    document.body.style.cursor = "col-resize";
+    const handleMouseMove = (moveEvent) => {
+      const delta = moveEvent.clientX - startX;
+      currentWidth = Math.min(maxW, maxAllowedWidth, Math.max(minW, startWidth + delta));
+      const template = columns.map((c, i) => {
+        if (i === columnIndex) {
+          return `${currentWidth}px`;
+        }
+        return buildGridTemplate([c]);
+      }).join(" ");
+      container.style.setProperty(GRID_VAR, template);
+    };
+    const handleMouseUp = () => {
+      document.body.style.cursor = prevCursor;
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      const allCells = container.querySelectorAll('[role="columnheader"]');
+      let otherFrPx = 0;
+      let otherFrUnits = 0;
+      columns.forEach((c, i) => {
+        if (i === columnIndex) {
+          return;
+        }
+        if (typeof c.width !== "number") {
+          otherFrPx += allCells[i]?.getBoundingClientRect().width ?? 0;
+          otherFrUnits += typeof c.width === "string" ? parseFloat(c.width) || 1 : 1;
+        }
+      });
+      const frValue = otherFrPx > 0 ? currentWidth / otherFrPx * otherFrUnits : 1;
+      col.onResizeEnd?.(currentWidth, startWidth, frValue);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  }, [columns]);
+  if (totalCount === 0 && empty) {
+    return /* @__PURE__ */ jsxs("div", {
+      role: "table",
+      "aria-label": ariaLabel,
+      className: twMerge("flex flex-col overflow-hidden", className),
+      style: { [GRID_VAR]: gridTemplate, ...styleProp },
+      children: [
+        /* @__PURE__ */ jsx("div", {
+          role: "rowgroup",
+          className: twMerge("sticky top-0 z-10", header?.className),
+          children: /* @__PURE__ */ jsx("div", {
+            role: "row",
+            style: {
+              display: "grid",
+              gridTemplateColumns: GRID_VAR_REF,
+              alignItems: "center",
+              height: rowHeight
+            },
+            children: columns.map((col, i) => /* @__PURE__ */ jsxs("div", {
+              role: "columnheader",
+              className: twMerge("whitespace-nowrap", col.resizable && "relative", col.className),
+              children: [
+                col.header,
+                col.resizable && /* @__PURE__ */ jsx(ResizeHandle, {
+                  onMouseDown: (e) => handleResizeMouseDown(i, e)
+                })
+              ]
+            }, i))
+          })
+        }),
+        /* @__PURE__ */ jsx("div", {
+          className: twMerge("flex items-center justify-center", empty.className),
+          children: empty.children
+        })
+      ]
+    });
+  }
+  const rows = [];
+  for (let i = visibleRange.start;i < visibleRange.end; i++) {
+    const content = renderRow(i);
+    if (content === null) {
+      if (skeletonRow) {
+        const { children: skeletonContent, ...skeletonProps } = skeletonRow;
+        rows.push(/* @__PURE__ */ jsx(DataRow, {
+          index: i,
+          rowHeight,
+          rowProps: skeletonProps,
+          children: skeletonContent
+        }, `row-${i}`));
+      }
+    } else {
+      const rowElement = content;
+      const rowDefaults = rowElement.type?.slotDefaults ?? {};
+      const rawProps = rowElement.props;
+      const { children: cellContent, ...userRowProps } = rawProps;
+      const rowProps = {
+        ...rowDefaults,
+        ...userRowProps,
+        className: twMerge(rowDefaults.className, userRowProps.className)
+      };
+      rows.push(/* @__PURE__ */ jsx(DataRow, {
+        index: i,
+        rowHeight,
+        rowProps,
+        children: cellContent
+      }, `row-${i}`));
+    }
+  }
+  const totalHeight = totalCount * rowHeight;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        role: "table",
+        "aria-label": ariaLabel,
+        "aria-rowcount": totalCount,
+        ref: scrollRef,
+        onScroll: handleScroll,
+        className: twMerge("relative overflow-auto", className),
+        style: { [GRID_VAR]: gridTemplate, ...styleProp },
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            role: "rowgroup",
+            className: twMerge("sticky top-0 z-10", header?.className),
+            children: /* @__PURE__ */ jsx("div", {
+              role: "row",
+              style: {
+                display: "grid",
+                gridTemplateColumns: GRID_VAR_REF,
+                alignItems: "center"
+              },
+              children: columns.map((col, i) => /* @__PURE__ */ jsxs("div", {
+                role: "columnheader",
+                className: twMerge("whitespace-nowrap", col.resizable && "relative", col.className),
+                children: [
+                  col.header,
+                  col.resizable && /* @__PURE__ */ jsx(ResizeHandle, {
+                    onMouseDown: (e) => handleResizeMouseDown(i, e)
+                  })
+                ]
+              }, i))
+            })
+          }),
+          /* @__PURE__ */ jsx("div", {
+            role: "rowgroup",
+            className: "relative",
+            style: { height: totalHeight },
+            children: rows
+          })
+        ]
+      }),
+      footer && totalCount > 0 && /* @__PURE__ */ jsx("div", {
+        className: footer.className,
+        children: footer.children(visibleRange)
+      })
+    ]
+  });
+}
+var VirtualTable = Object.assign(VirtualTableRoot, {
+  Header: VirtualTableHeader,
+  Column: VirtualTableColumn,
+  Body: VirtualTableBody,
+  SkeletonRow: VirtualTableSkeletonRow,
+  Row: VirtualTableRow,
+  Cell: VirtualTableCell,
+  Empty: VirtualTableEmpty,
+  Footer: VirtualTableFooter
+});
+export {
+  createTableSkeletonRow,
+  createTableRow,
+  createTableHeader,
+  createTableFooter,
+  createTableEmpty,
+  createTableColumn,
+  createTableBody,
+  VirtualTable
+};
+
+//# debugId=D3E702252F525EB164756E2164756E21