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

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@react-fabric/core');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var data$1 = require('./ar/data.json.js');
+var data = require('./en/data.json.js');
 
 /*
  * React Fabric
@@ -28,6 +28,6 @@ var en = require('./en.json.js');
  */
 
 core.addTranslationBundle("data", {
-  en: en.default,
-  ar: ar.default
+  en: data.default,
+  ar: data$1.default
 });

package/dist/cjs/index.js

@@ -5,6 +5,7 @@ var CheckList = require('./checklist/CheckList.js');
 var Histogram = require('./histogram/Histogram.js');
 var JsonViewer = require('./json/JsonViewer.js');
 var Pagination = require('./pagination/Pagination.js');
+var HtmlTable = require('./table/HtmlTable.js');
 var Table = require('./table/Table.js');
 var TreePanel = require('./tree/TreePanel.js');
 var Gallery = require('./virtual/Gallery.js');
@@ -18,6 +19,7 @@ exports.CheckList = CheckList.CheckList;
 exports.Histogram = Histogram.Histogram;
 exports.JsonViewer = JsonViewer.JsonViewer;
 exports.Pagination = Pagination.Pagination;
+exports.HtmlTable = HtmlTable.HtmlTable;
 exports.Table = Table.Table;
 exports.TreePanel = TreePanel.TreePanel;
 exports.VirtualGallery = Gallery.VirtualGallery;

package/dist/cjs/pagination/Pagination.js

@@ -33,7 +33,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), mid && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -44,7 +44,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), last && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -55,7 +55,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       })]
@@ -67,7 +67,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(0);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         icon: "icon-[mdi--chevron-double-left]",
         rtlFlip: true
@@ -76,7 +76,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(page - 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         icon: "icon-[mdi--chevron-left]",
         rtlFlip: true
@@ -88,7 +88,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(page + 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         icon: "icon-[mdi--chevron-right]",
         rtlFlip: true
@@ -97,7 +97,7 @@ var Pagination = /*#__PURE__*/react.memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(totalPages - 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         icon: "icon-[mdi--chevron-double-right]",
         rtlFlip: true

package/dist/cjs/table/HtmlTable.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var usePagination = require('../hooks/usePagination.js');
+var Pagination = require('../pagination/Pagination.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var HtmlTable = function HtmlTable(_ref) {
+  var data = _ref.data,
+    columns = _ref.columns,
+    _ref$paginationSize = _ref.paginationSize,
+    paginationSize = _ref$paginationSize === void 0 ? 25 : _ref$paginationSize,
+    className = _ref.className;
+  var paginator = usePagination.usePagination({
+    totalRecords: data.length,
+    perPage: paginationSize
+  });
+  var startIndex = react.useMemo(function () {
+    return paginator.page * paginationSize;
+  }, [paginator.page, paginationSize]);
+  var dataPage = react.useMemo(function () {
+    return paginationSize > 0 ? data.slice(startIndex, startIndex + paginationSize) : data;
+  }, [data, paginationSize, startIndex]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: className,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("table", {
+      className: "table-fixed border-spacing-1 border-separate w-full text-sm",
+      children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
+        className: "sticky top-0 z-1",
+        children: /*#__PURE__*/jsxRuntime.jsx("tr", {
+          children: columns.map(function (col, idx) {
+            var _ref2, _col$headRenderer;
+            return /*#__PURE__*/jsxRuntime.jsx("th", {
+              className: "text-start truncate bg-accent-100 px-2 py-1 font-medium text-accent-800",
+              style: {
+                width: col.width,
+                maxWidth: col.maxWidth
+              },
+              children: (_ref2 = (_col$headRenderer = col.headRenderer) !== null && _col$headRenderer !== void 0 ? _col$headRenderer : col.label) !== null && _ref2 !== void 0 ? _ref2 : " "
+            }, idx);
+          })
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx("tbody", {
+        className: "bg-alternate",
+        children: dataPage.map(function (row, idx) {
+          return /*#__PURE__*/jsxRuntime.jsx("tr", {
+            children: columns.map(function (col, cidx) {
+              var _col$renderer, _col$renderer2;
+              return /*#__PURE__*/jsxRuntime.jsx("td", {
+                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
+                },
+                children: (_col$renderer = (_col$renderer2 = col.renderer) === null || _col$renderer2 === void 0 ? void 0 : _col$renderer2.call(col, utilities.getByPath(row, col.id.toString()), row, startIndex + idx)) !== null && _col$renderer !== void 0 ? _col$renderer : utilities.getByPath(row, col.id.toString())
+              }, "".concat(idx, "-").concat(cidx));
+            })
+          }, idx);
+        })
+      })]
+    }), paginationSize > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
+      flex: true,
+      justify: "end",
+      className: "px-2 py-1 sticky bottom-0 bg-tint-50",
+      children: /*#__PURE__*/jsxRuntime.jsx(Pagination.Pagination, _objectSpread({
+        minimal: true
+      }, paginator))
+    })]
+  });
+};
+
+exports.HtmlTable = HtmlTable;

package/dist/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { addTranslationBundle } from '@react-fabric/core';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/data.json.js';
+import en from './en/data.json.js';
 
 /*
  * React Fabric

package/dist/esm/index.js

@@ -5,6 +5,7 @@ export { CheckList } from './checklist/CheckList.js';
 export { Histogram } from './histogram/Histogram.js';
 export { JsonViewer } from './json/JsonViewer.js';
 export { Pagination } from './pagination/Pagination.js';
+export { HtmlTable } from './table/HtmlTable.js';
 export { Table } from './table/Table.js';
 export { TreePanel } from './tree/TreePanel.js';
 export { VirtualGallery } from './virtual/Gallery.js';

package/dist/esm/pagination/Pagination.js

@@ -33,7 +33,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), mid && /*#__PURE__*/jsx("span", {
@@ -44,7 +44,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       }), last && /*#__PURE__*/jsx("span", {
@@ -55,7 +55,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
           onClick: function onClick() {
             return onPageChange(pg);
           },
-          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === pg && "bg-primary-500 text-white pointer-events-none"),
+          className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === pg && "bg-primary-500 text-white pointer-events-none"),
           children: pg + 1
         }, pg);
       })]
@@ -67,7 +67,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(0);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsx(Icon, {
         icon: "icon-[mdi--chevron-double-left]",
         rtlFlip: true
@@ -76,7 +76,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(page - 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page === 0 && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page === 0 && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsx(Icon, {
         icon: "icon-[mdi--chevron-left]",
         rtlFlip: true
@@ -88,7 +88,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(page + 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsx(Icon, {
         icon: "icon-[mdi--chevron-right]",
         rtlFlip: true
@@ -97,7 +97,7 @@ var Pagination = /*#__PURE__*/memo(function (_ref) {
       onClick: function onClick() {
         return onPageChange(totalPages - 1);
       },
-      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
+      className: classNames("leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer", page + 1 >= totalPages && "pointer-events-none text-tint-300"),
       children: /*#__PURE__*/jsx(Icon, {
         icon: "icon-[mdi--chevron-double-right]",
         rtlFlip: true

package/dist/esm/table/HtmlTable.js

@@ -0,0 +1,78 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+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.js';
+import { Pagination } from '../pagination/Pagination.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var HtmlTable = function HtmlTable(_ref) {
+  var data = _ref.data,
+    columns = _ref.columns,
+    _ref$paginationSize = _ref.paginationSize,
+    paginationSize = _ref$paginationSize === void 0 ? 25 : _ref$paginationSize,
+    className = _ref.className;
+  var paginator = usePagination({
+    totalRecords: data.length,
+    perPage: paginationSize
+  });
+  var startIndex = useMemo(function () {
+    return paginator.page * paginationSize;
+  }, [paginator.page, paginationSize]);
+  var dataPage = useMemo(function () {
+    return paginationSize > 0 ? data.slice(startIndex, startIndex + paginationSize) : data;
+  }, [data, paginationSize, startIndex]);
+  return /*#__PURE__*/jsxs("div", {
+    className: className,
+    children: [/*#__PURE__*/jsxs("table", {
+      className: "table-fixed border-spacing-1 border-separate w-full text-sm",
+      children: [/*#__PURE__*/jsx("thead", {
+        className: "sticky top-0 z-1",
+        children: /*#__PURE__*/jsx("tr", {
+          children: columns.map(function (col, idx) {
+            var _ref2, _col$headRenderer;
+            return /*#__PURE__*/jsx("th", {
+              className: "text-start truncate bg-accent-100 px-2 py-1 font-medium text-accent-800",
+              style: {
+                width: col.width,
+                maxWidth: col.maxWidth
+              },
+              children: (_ref2 = (_col$headRenderer = col.headRenderer) !== null && _col$headRenderer !== void 0 ? _col$headRenderer : col.label) !== null && _ref2 !== void 0 ? _ref2 : " "
+            }, idx);
+          })
+        })
+      }), /*#__PURE__*/jsx("tbody", {
+        className: "bg-alternate",
+        children: dataPage.map(function (row, idx) {
+          return /*#__PURE__*/jsx("tr", {
+            children: columns.map(function (col, cidx) {
+              var _col$renderer, _col$renderer2;
+              return /*#__PURE__*/jsx("td", {
+                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
+                },
+                children: (_col$renderer = (_col$renderer2 = col.renderer) === null || _col$renderer2 === void 0 ? void 0 : _col$renderer2.call(col, getByPath(row, col.id.toString()), row, startIndex + idx)) !== null && _col$renderer !== void 0 ? _col$renderer : getByPath(row, col.id.toString())
+              }, "".concat(idx, "-").concat(cidx));
+            })
+          }, idx);
+        })
+      })]
+    }), paginationSize > 0 && /*#__PURE__*/jsx(Footer, {
+      flex: true,
+      justify: "end",
+      className: "px-2 py-1 sticky bottom-0 bg-tint-50",
+      children: /*#__PURE__*/jsx(Pagination, _objectSpread({
+        minimal: true
+      }, paginator))
+    })]
+  });
+};
+
+export { HtmlTable };

package/dist/types/index.d.ts

@@ -3,6 +3,7 @@ export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
+export { HtmlTable } from "./table/HtmlTable";
 export { Table } from "./table/Table";
 export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";

package/dist/types/table/HtmlTable.d.ts

@@ -0,0 +1,21 @@
+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 declare const HtmlTable: <T extends KeyValue = KeyValue>({ data, columns, paginationSize, className, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.62",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,10 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.61",
-    "@react-fabric/date": "^1.0.0-beta.61",
-    "@react-fabric/form": "^1.0.0-beta.61",
-    "@react-fabric/utilities": "^1.0.0-beta.61",
+    "@react-fabric/core": "^1.0.0-beta.62",
+    "@react-fabric/date": "^1.0.0-beta.62",
+    "@react-fabric/form": "^1.0.0-beta.62",
+    "@react-fabric/utilities": "^1.0.0-beta.62",
     "@tanstack/react-virtual": "~3.13.12",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
+  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
 }

package/src/i18n/index.ts

@@ -22,7 +22,7 @@
  */
 
 import { addTranslationBundle } from "@react-fabric/core";
-import ar from "./ar.json";
-import en from "./en.json";
+import ar from "./ar/data.json";
+import en from "./en/data.json";
 
 addTranslationBundle("data", { en, ar });

package/src/index.ts

@@ -27,6 +27,7 @@ export { CheckList } from "./checklist/CheckList";
 export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
+export { HtmlTable } from "./table/HtmlTable";
 export { Table } from "./table/Table";
 export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";

package/src/pagination/Pagination.tsx

@@ -70,7 +70,7 @@ export const Pagination = memo(
               key={pg}
               onClick={() => onPageChange(pg)}
               className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
                 page === pg && "bg-primary-500 text-white pointer-events-none",
               )}
             >
@@ -87,7 +87,7 @@ export const Pagination = memo(
               key={pg}
               onClick={() => onPageChange(pg)}
               className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
                 page === pg && "bg-primary-500 text-white pointer-events-none",
               )}
             >
@@ -104,7 +104,7 @@ export const Pagination = memo(
               key={pg}
               onClick={() => onPageChange(pg)}
               className={classNames(
-                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+                "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
                 page === pg && "bg-primary-500 text-white pointer-events-none",
               )}
             >
@@ -121,7 +121,7 @@ export const Pagination = memo(
         <button
           onClick={() => onPageChange(0)}
           className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
             page === 0 && "pointer-events-none text-tint-300",
           )}
         >
@@ -130,7 +130,7 @@ export const Pagination = memo(
         <button
           onClick={() => onPageChange(page - 1)}
           className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
             page === 0 && "pointer-events-none text-tint-300",
           )}
         >
@@ -145,7 +145,7 @@ export const Pagination = memo(
         <button
           onClick={() => onPageChange(page + 1)}
           className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
             page + 1 >= totalPages && "pointer-events-none text-tint-300",
           )}
         >
@@ -154,7 +154,7 @@ export const Pagination = memo(
         <button
           onClick={() => onPageChange(totalPages - 1)}
           className={classNames(
-            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full",
+            "leading-none text-sm hover:bg-primary-200 w-8 h-6 rounded-full cursor-pointer",
             page + 1 >= totalPages && "pointer-events-none text-tint-300",
           )}
         >

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>
+  );
+};