@react-fabric/data 1.0.0-beta.61 → 1.0.0-beta.63

package/src/table/HtmlTable.tsx

@@ -0,0 +1,128 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+import { Footer } from "@react-fabric/core";
+import { getByPath } from "@react-fabric/utilities";
+import classNames from "classnames";
+import { useMemo } from "react";
+import { usePagination } from "../hooks/usePagination";
+import { Pagination } from "../pagination/Pagination";
+
+interface Props<T = KeyValue> {
+  data: T[];
+  columns: Array<{
+    id: keyof T;
+    label?: string;
+    width?: number | string;
+    maxWidth?: number | string;
+    align?: "start" | "center" | "end";
+    className?: string;
+    headRenderer?: React.ReactNode;
+    renderer?: (value: any, row: T, index: number) => React.ReactNode;
+  }>;
+  /**
+   * Number of pagination buttons to show, default is 25
+   * If set to 0, pagination will be hidden
+   */
+  paginationSize?: number;
+
+  className?: string;
+}
+
+export const HtmlTable = <T extends KeyValue = KeyValue>({
+  data,
+  columns,
+  paginationSize = 25,
+  className,
+}: Props<T>) => {
+  const paginator = usePagination({
+    totalRecords: data.length,
+    perPage: paginationSize,
+  });
+
+  const startIndex = useMemo(
+    () => paginator.page * paginationSize,
+    [paginator.page, paginationSize],
+  );
+
+  const dataPage = useMemo(
+    () =>
+      paginationSize > 0
+        ? data.slice(startIndex, startIndex + paginationSize)
+        : data,
+    [data, paginationSize, startIndex],
+  );
+
+  return (
+    <div className={className}>
+      <table className="table-fixed border-spacing-1 border-separate w-full text-sm">
+        <thead className="sticky top-0 z-1">
+          <tr>
+            {columns.map((col, idx) => (
+              <th
+                key={idx}
+                className="text-start truncate bg-accent-100 px-2 py-1 font-medium text-accent-800"
+                style={{ width: col.width, maxWidth: col.maxWidth }}
+              >
+                {col.headRenderer ?? col.label ?? " "}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="bg-alternate">
+          {dataPage.map((row, idx) => (
+            <tr key={idx}>
+              {columns.map((col, cidx) => (
+                <td
+                  key={`${idx}-${cidx}`}
+                  className={classNames(
+                    "px-2 py-1 truncate",
+                    col.align === "center" && "text-center",
+                    col.align === "end" && "text-end",
+                    col.className,
+                  )}
+                  style={{ width: col.width, maxWidth: col.maxWidth }}
+                >
+                  {col.renderer?.(
+                    getByPath(row, col.id.toString()),
+                    row,
+                    startIndex + idx,
+                  ) ?? getByPath(row, col.id.toString())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {paginationSize > 0 && (
+        <Footer
+          flex
+          justify="end"
+          className="px-2 py-1 sticky bottom-0 bg-tint-50"
+        >
+          <Pagination minimal {...paginator} />
+        </Footer>
+      )}
+    </div>
+  );
+};

package/src/table/{Context.tsx → Provider.tsx}

@@ -22,22 +22,10 @@
  */
 
 import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useRef, useState } from "react";
+import { TableContext } from "./context";
 import { useResizer } from "./useResizer";
 
-interface Context {
-  widths: Map<string, number>;
-  startResize: (col: HTMLElement) => void;
-}
-
-const TableContext = createContext<Context>({} as Context);
-
 export const TableProvider = ({ children }: ChildrenProp) => {
   const ghostRef = useRef<HTMLDivElement>(null);
   const [widths, setWidths] = useState<Map<string, number>>(new Map());
@@ -57,14 +45,9 @@ export const TableProvider = ({ children }: ChildrenProp) => {
     <TableContext.Provider value={{ startResize, widths }}>
       {children}
 
-      <div
-        className="absolute inset-0 hidden z-20 cursor-col-resize"
-        ref={ghostRef}
-      >
+      <div className="absolute inset-0 hidden z-20 cursor-col-resize" ref={ghostRef}>
         <div className="absolute inset-y-0 bg-muted opacity-50 border-primary border-e-2" />
       </div>
     </TableContext.Provider>
   );
 };
-
-export const useTableContext = () => useContext(TableContext);

package/src/table/Table.tsx

@@ -40,7 +40,7 @@ import { useTranslation } from "react-i18next";
 import { AddColumn } from "./AddColumn";
 import { BodyRow } from "./BodyRow";
 import { CheckboxCell } from "./CheckboxCell";
-import { TableProvider } from "./Context";
+import { TableProvider } from "./Provider";
 import { EmptyCell } from "./EmptyCell";
 import { HeaderCell } from "./HeaderCell";
 import { type TableProps } from "./types";
@@ -55,7 +55,7 @@ import { useVirtualTable } from "./useVirtualTable";
  * Uses TanStack's `useVirtual` for virtualization and React's `useMemo` for performance optimization.
  *
  * @param {TableProps<T>} props - The properties for the Table component.
- * @returns {JSX.Element} The rendered Table component.
+ * @returns {React.ReactElement} The rendered Table component.
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/data-table--table}
  * @see {@link https://tanstack.com/table/v8/docs/api/virtual}
@@ -183,7 +183,7 @@ export const Table = <T extends KeyValue = KeyValue>({
       >
         <div
           data-ref="tableHeader"
-          className="bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3"
+          className="bg-default font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3"
         >
           <div className={wrapperStart}>
             {canExpand && <div className="w-6" />}
@@ -251,7 +251,7 @@ export const Table = <T extends KeyValue = KeyValue>({
                   ref={measureElement}
                   data-index={index}
                   className={classNames(
-                    "text-md bg-base border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2",
+                    "text-md bg-default border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2",
                     isActiveSticky(index) && "sticky top-8",
                   )}
                   role="none"

package/src/table/context.ts

@@ -0,0 +1,33 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+import { createContext, useContext } from "react";
+
+interface Context {
+  widths: Map<string, number>;
+  startResize: (col: HTMLElement) => void;
+}
+
+export const TableContext = createContext<Context>({} as Context);
+
+export const useTableContext = () => useContext(TableContext);

package/src/table/useResizer.ts

@@ -21,6 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { useCallback } from "react";
+
 export const useResizer = (
   colEl: HTMLElement,
   ghostEl: HTMLElement,
@@ -29,20 +31,20 @@ export const useResizer = (
   const placeholder = ghostEl.firstElementChild as HTMLElement;
   const isRtl = getComputedStyle(colEl).direction === "rtl";
 
-  const onResize = (evt: MouseEvent) => {
+  const onResize = useCallback((evt: MouseEvent) => {
     /** ***************** check if reverse enabled of RTL *******************/
     const box = colEl.getBoundingClientRect();
     const x = isRtl ? box.left - evt.clientX : evt.clientX - box.right;
     placeholder.style.width = `${colEl.offsetWidth + x}px`;
-  };
+  }, [colEl, isRtl, placeholder]);
 
   /** ***************** dettach handlers on mouseup *******************/
-  const onResizeEnd = () => {
+  const onResizeEnd = useCallback(() => {
     callback(placeholder.offsetWidth);
     ghostEl.style.display = "none";
     document.removeEventListener("mousemove", onResize);
     document.removeEventListener("mouseup", onResizeEnd);
-  };
+  }, [callback, placeholder, ghostEl]);
 
   /** ***************** attach handlers *******************/
   const box = colEl.getBoundingClientRect();

package/src/tree/TreePanel.tsx

@@ -37,7 +37,7 @@ import { useTree } from "./useTree";
  * nodes and supports checkable nodes.
  *
  * @param {TreePanelProps<T>} props - The properties for the TreePanel component.
- * @returns {JSX.Element} The rendered TreePanel component.
+ * @returns {React.ReactElement} The rendered TreePanel component.
  * @template T - The type of items in the tree, extending KeyValue.
  *
  * @example

package/src/tree/types.ts

@@ -36,7 +36,7 @@ interface TreeBaseNode<T> extends CssProp, TestProps {
   /**
    * display label
    */
-  label: Elements<JSX.Element>;
+  label: Elements<React.ReactElement>;
   /**
    * icon path or props
    */
@@ -73,7 +73,7 @@ export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> &
 
 export interface InternalNode extends CssProp, TestProps {
   id: string;
-  label: Elements<JSX.Element>;
+  label: Elements<React.ReactElement>;
   queryable?: string;
   badge?: string | number | BadgeType;
   disabled?: boolean;
@@ -101,8 +101,8 @@ export interface InternalNode extends CssProp, TestProps {
 export interface TreeNodeProps extends ChildProp {
   node: InternalNode;
   expanders: [string, string];
-  defaultNodeIcon?: Elements<JSX.Element>;
-  defaultLeafIcon?: Elements<JSX.Element>;
+  defaultNodeIcon?: Elements<React.ReactElement>;
+  defaultLeafIcon?: Elements<React.ReactElement>;
   noLines?: boolean;
   selectable?: true | "leafOnly";
   checkable?: true | "leafOnly";
@@ -227,8 +227,8 @@ interface BaseTreePanelProps<T extends KeyValue = KeyValue>
   matcher?: (data: T, query: string) => boolean;
 
   sorter?: false | ((a: T, b: T) => number);
-  makeLabel?: (node: T) => Elements<JSX.Element>;
-  makeIcon?: (node: T) => Elements<JSX.Element>;
+  makeLabel?: (node: T) => Elements<React.ReactElement>;
+  makeIcon?: (node: T) => Elements<React.ReactElement>;
 
   defaultExpanded?: string[];
   onExpandToggle?: (id: string[]) => void;

package/src/virtual/Gallery.tsx

@@ -293,7 +293,7 @@ const _VirtualGallery = <T extends AnyObject>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames("area-content bg-base overflow-auto")}
+      className={classNames("area-content bg-default overflow-auto")}
       {...aria}
     >
       <div
@@ -388,7 +388,7 @@ const GenericMemo: <T>(c: T) => T = memo;
  * It also provides a scroller for easy navigation through the items.
  *
  * @param {VirtualGalleryProps<T>} props - The properties for the VirtualGallery component.
- * @returns {JSX.Element} The rendered VirtualGallery component.
+ * @returns {React.ReactElement} The rendered VirtualGallery component.
  *
  * @example
  * ```jsx

package/src/virtual/List.tsx

@@ -270,7 +270,7 @@ const _VirtualList = <T extends AnyObject>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames("area-content bg-base overflow-auto")}
+      className={classNames("area-content bg-default overflow-auto")}
       {...aria}
     >
       <div
@@ -340,7 +340,7 @@ const _VirtualList = <T extends AnyObject>({
           <div
             className={classNames(
               orientation === "vertical" && "self-end sticky bottom-2",
-              orientation === "horizontal" && "self-end sticky end-2",
+              orientation === "horizontal" && "self-end sticky inset-e-2",
             )}
           >
             <Scroller
@@ -383,7 +383,7 @@ const GenericMemo: <T>(c: T) => T = memo;
  * It can be used with a ref to control scrolling and hilighting of items.
  *
  * @param {VirtualListProps<T>} props - The properties for the VirtualList component.
- * @returns {JSX.Element} The rendered VirtualList component.
+ * @returns {React.ReactElement} The rendered VirtualList component.
  * @template T - The type of items in the list, extending AnyObject.
  *
  * @example