tabler-react-2 0.1.153-alpha.2 → 0.1.154

package/dist/index.js

@@ -156,7 +156,7 @@ Object.keys(_index15).forEach(function (key) {
     }
   });
 });
-var _index16 = require("./timeline/index");
+var _index16 = require("./table-v2/index");
 Object.keys(_index16).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -168,7 +168,7 @@ Object.keys(_index16).forEach(function (key) {
     }
   });
 });
-var _index17 = require("./input/index");
+var _index17 = require("./timeline/index");
 Object.keys(_index17).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -180,7 +180,7 @@ Object.keys(_index17).forEach(function (key) {
     }
   });
 });
-var _index18 = require("./navbar/index");
+var _index18 = require("./input/index");
 Object.keys(_index18).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -192,7 +192,7 @@ Object.keys(_index18).forEach(function (key) {
     }
   });
 });
-var _index19 = require("./segmentedControl/index");
+var _index19 = require("./navbar/index");
 Object.keys(_index19).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -204,7 +204,7 @@ Object.keys(_index19).forEach(function (key) {
     }
   });
 });
-var _index20 = require("./offcanvas/index");
+var _index20 = require("./segmentedControl/index");
 Object.keys(_index20).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -216,5 +216,17 @@ Object.keys(_index20).forEach(function (key) {
     }
   });
 });
+var _index21 = require("./offcanvas/index");
+Object.keys(_index21).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index21[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index21[key];
+    }
+  });
+});
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/dist/table-v2/index.js

@@ -0,0 +1,328 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableV2 = exports.SortIcon = exports.RangeText = exports.Pager = exports.PageSizeSelect = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactTable = require("@tanstack/react-table");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+// TableV2.jsx
+// TanStack Table v8 styled like the Original component's Tabler look.
+// Adds `dense` mode for a compact layout.
+// Controlled (server-side) pagination & sorting. ES modules, named exports, arrow functions only.
+
+/** Small utilities */
+
+var SortIcon = exports.SortIcon = function SortIcon(_ref) {
+  var state = _ref.state;
+  if (state === "asc") return /*#__PURE__*/_react["default"].createElement("span", {
+    "aria-label": "sorted ascending"
+  }, "\u25B2");
+  if (state === "desc") return /*#__PURE__*/_react["default"].createElement("span", {
+    "aria-label": "sorted descending"
+  }, "\u25BC");
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: "text-muted",
+    "aria-hidden": true
+  }, "\u2195");
+};
+var RangeText = exports.RangeText = function RangeText(_ref2) {
+  var page = _ref2.page,
+    size = _ref2.size,
+    total = _ref2.total,
+    dense = _ref2.dense;
+  var start = total === 0 ? 0 : (page - 1) * size + 1;
+  var end = Math.min(page * size, total);
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: dense ? "ms-2 small text-muted" : "ms-3 text-muted"
+  }, start.toLocaleString(), "\u2013", end.toLocaleString(), " of", " ", total.toLocaleString());
+};
+var PageSizeSelect = exports.PageSizeSelect = function PageSizeSelect(_ref3) {
+  var value = _ref3.value,
+    _onChange = _ref3.onChange,
+    _ref3$options = _ref3.options,
+    options = _ref3$options === void 0 ? [10, 25, 50, 100] : _ref3$options,
+    dense = _ref3.dense;
+  return /*#__PURE__*/_react["default"].createElement("select", {
+    className: dense ? "form-select form-select-sm" : "form-select",
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange(Number(e.target.value));
+    },
+    "aria-label": "Rows per page",
+    style: {
+      width: dense ? 90 : 110
+    }
+  }, options.map(function (n) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: n,
+      value: n
+    }, n, " / page");
+  }));
+};
+var Pager = exports.Pager = function Pager(_ref4) {
+  var page = _ref4.page,
+    size = _ref4.size,
+    total = _ref4.total,
+    onPageChange = _ref4.onPageChange,
+    disabled = _ref4.disabled,
+    _ref4$className = _ref4.className,
+    className = _ref4$className === void 0 ? "" : _ref4$className,
+    dense = _ref4.dense;
+  var totalPages = Math.max(1, Math.ceil(total / Math.max(1, size)));
+  var canPrev = page > 1 && !disabled;
+  var canNext = page < totalPages && !disabled;
+  var go = function go(p) {
+    var clamped = Math.min(Math.max(1, p), totalPages);
+    if (clamped !== page) onPageChange(clamped);
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "d-inline-flex align-items-center ".concat(dense ? "gap-2" : "", " ").concat(className)
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "btn ".concat(dense ? "btn-sm" : "btn-sm", " ").concat(dense ? "px-2 py-1" : ""),
+    onClick: function onClick() {
+      return go(Math.max(1, page - 1));
+    },
+    disabled: !canPrev
+  }, "Previous"), /*#__PURE__*/_react["default"].createElement("button", {
+    className: "btn ".concat(dense ? "btn-sm ms-1" : "btn-sm ms-2", " ").concat(dense ? "px-2 py-1" : ""),
+    onClick: function onClick() {
+      return go(Math.min(totalPages, page + 1));
+    },
+    disabled: !canNext
+  }, "Next"), /*#__PURE__*/_react["default"].createElement("span", {
+    className: dense ? "ms-2 small text-muted" : "ms-3 text-muted"
+  }, "Page ", page, " of ", totalPages));
+};
+
+/** Main table */
+
+var TableV2 = exports.TableV2 = function TableV2(_ref5) {
+  var columns = _ref5.columns,
+    data = _ref5.data,
+    totalRows = _ref5.totalRows,
+    page = _ref5.page,
+    size = _ref5.size,
+    onPageChange = _ref5.onPageChange,
+    onSizeChange = _ref5.onSizeChange,
+    sorting = _ref5.sorting,
+    onSortingChange = _ref5.onSortingChange,
+    getRowId = _ref5.getRowId,
+    rowSelection = _ref5.rowSelection,
+    onRowSelectionChange = _ref5.onRowSelectionChange,
+    _ref5$nowrap = _ref5.nowrap,
+    nowrap = _ref5$nowrap === void 0 ? false : _ref5$nowrap,
+    _ref5$stickyHeader = _ref5.stickyHeader,
+    stickyHeader = _ref5$stickyHeader === void 0 ? false : _ref5$stickyHeader,
+    _ref5$className = _ref5.className,
+    className = _ref5$className === void 0 ? "" : _ref5$className,
+    _ref5$tableClassName = _ref5.tableClassName,
+    tableClassName = _ref5$tableClassName === void 0 ? "" : _ref5$tableClassName,
+    _ref5$paginationClass = _ref5.paginationClassName,
+    paginationClassName = _ref5$paginationClass === void 0 ? "" : _ref5$paginationClass,
+    _ref5$parentClassName = _ref5.parentClassName,
+    parentClassName = _ref5$parentClassName === void 0 ? "" : _ref5$parentClassName,
+    _ref5$dense = _ref5.dense,
+    dense = _ref5$dense === void 0 ? false : _ref5$dense,
+    _ref5$emptyState = _ref5.emptyState,
+    emptyState = _ref5$emptyState === void 0 ? "No data" : _ref5$emptyState,
+    _ref5$loading = _ref5.loading,
+    loading = _ref5$loading === void 0 ? false : _ref5$loading,
+    _ref5$showPagination = _ref5.showPagination,
+    showPagination = _ref5$showPagination === void 0 ? true : _ref5$showPagination,
+    _ref5$pageSizeOptions = _ref5.pageSizeOptions,
+    pageSizeOptions = _ref5$pageSizeOptions === void 0 ? [10, 25, 50, 100] : _ref5$pageSizeOptions;
+  var table = (0, _reactTable.useReactTable)({
+    data: data,
+    columns: columns,
+    state: {
+      sorting: sorting,
+      rowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : {}
+    },
+    getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+    manualSorting: true,
+    enableSortingRemoval: false,
+    onSortingChange: onSortingChange,
+    getRowId: getRowId,
+    onRowSelectionChange: onRowSelectionChange
+  });
+  var headerCell = function headerCell(_ref6) {
+    var header = _ref6.header;
+    var canSort = header.column.getCanSort();
+    var sortState = header.column.getIsSorted();
+    var handleSort = function handleSort() {
+      if (!canSort) return;
+      var id = header.column.id;
+      var next = sortState === "asc" ? [{
+        id: id,
+        desc: true
+      }] : sortState === "desc" ? [] : [{
+        id: id,
+        desc: false
+      }];
+      onSortingChange(next);
+    };
+    var thClass = [header.column.columnDef.className || "", canSort ? "sortable" : "", dense ? "py-1" : ""].filter(Boolean).join(" ");
+    return /*#__PURE__*/_react["default"].createElement("th", {
+      key: header.id,
+      className: thClass,
+      onClick: canSort && !loading ? handleSort : undefined,
+      style: {
+        cursor: canSort && !loading ? "pointer" : "default"
+      },
+      "aria-sort": sortState === "asc" ? "ascending" : sortState === "desc" ? "descending" : "none"
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext())), canSort && /*#__PURE__*/_react["default"].createElement(SortIcon, {
+      state: sortState || false
+    }));
+  };
+  var content = (0, _react.useMemo)(function () {
+    if (!loading && data.length === 0) {
+      return /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+        colSpan: table.getAllLeafColumns().length,
+        className: "text-center ".concat(dense ? "py-3 small" : "py-3", " text-muted")
+      }, typeof emptyState === "function" ? emptyState() : emptyState));
+    }
+    return table.getRowModel().rows.map(function (row) {
+      return /*#__PURE__*/_react["default"].createElement("tr", {
+        key: row.id,
+        className: [row.getIsSelected() ? "table-active" : "", dense ? "align-middle" : ""].filter(Boolean).join(" ")
+      }, row.getVisibleCells().map(function (cell) {
+        return /*#__PURE__*/_react["default"].createElement("td", {
+          key: cell.id,
+          className: [cell.column.columnDef.className || "", dense ? "py-1" : ""].filter(Boolean).join(" ")
+        }, (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext()));
+      }));
+    });
+  }, [data, loading, emptyState, table, dense]);
+  var total = totalRows !== null && totalRows !== void 0 ? totalRows : 0;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: parentClassName
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "table-responsive ".concat(nowrap ? "table-nowrap" : "", " ").concat(className)
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    className: ["table table-vcenter", stickyHeader ? "sticky-top" : "", dense ? "table-sm" : "", tableClassName].filter(Boolean).join(" ")
+  }, /*#__PURE__*/_react["default"].createElement("thead", null, table.getHeaderGroups().map(function (hg) {
+    return /*#__PURE__*/_react["default"].createElement("tr", {
+      key: hg.id
+    }, hg.headers.map(function (h) {
+      return headerCell({
+        header: h
+      });
+    }));
+  })), /*#__PURE__*/_react["default"].createElement("tbody", null, loading && /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    colSpan: table.getAllLeafColumns().length,
+    className: "text-center ".concat(dense ? "py-2" : "py-3")
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "spinner-border spinner-border-sm me-2",
+    role: "status",
+    "aria-hidden": true
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: dense ? "small text-muted" : "text-muted"
+  }, "Loading\u2026"))), content))), showPagination && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "d-flex justify-content-between align-items-center ".concat(dense ? "mt-1" : "mt-2", " ").concat(paginationClassName)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "d-flex align-items-center ".concat(dense ? "gap-2" : "")
+  }, /*#__PURE__*/_react["default"].createElement(Pager, {
+    page: page,
+    size: size,
+    total: total,
+    onPageChange: onPageChange,
+    disabled: loading,
+    dense: dense
+  }), /*#__PURE__*/_react["default"].createElement(RangeText, {
+    page: page,
+    size: size,
+    total: total,
+    dense: dense
+  })), /*#__PURE__*/_react["default"].createElement(PageSizeSelect, {
+    value: size,
+    onChange: function onChange(n) {
+      onSizeChange === null || onSizeChange === void 0 || onSizeChange(n);
+    },
+    options: pageSizeOptions,
+    dense: dense
+  })));
+};
+
+/** PropTypes */
+
+SortIcon.propTypes = {
+  state: _propTypes["default"].oneOf(["asc", "desc", false])
+};
+RangeText.propTypes = {
+  page: _propTypes["default"].number.isRequired,
+  size: _propTypes["default"].number.isRequired,
+  total: _propTypes["default"].number.isRequired,
+  dense: _propTypes["default"].bool
+};
+PageSizeSelect.propTypes = {
+  value: _propTypes["default"].number.isRequired,
+  onChange: _propTypes["default"].func.isRequired,
+  options: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  dense: _propTypes["default"].bool
+};
+Pager.propTypes = {
+  page: _propTypes["default"].number.isRequired,
+  size: _propTypes["default"].number.isRequired,
+  total: _propTypes["default"].number.isRequired,
+  onPageChange: _propTypes["default"].func.isRequired,
+  disabled: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  dense: _propTypes["default"].bool
+};
+TableV2.propTypes = {
+  columns: _propTypes["default"].array.isRequired,
+  data: _propTypes["default"].array.isRequired,
+  totalRows: _propTypes["default"].number.isRequired,
+  page: _propTypes["default"].number.isRequired,
+  size: _propTypes["default"].number.isRequired,
+  onPageChange: _propTypes["default"].func.isRequired,
+  onSizeChange: _propTypes["default"].func.isRequired,
+  sorting: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    desc: _propTypes["default"].bool
+  })).isRequired,
+  onSortingChange: _propTypes["default"].func.isRequired,
+  getRowId: _propTypes["default"].func,
+  rowSelection: _propTypes["default"].object,
+  onRowSelectionChange: _propTypes["default"].func,
+  nowrap: _propTypes["default"].bool,
+  stickyHeader: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  tableClassName: _propTypes["default"].string,
+  paginationClassName: _propTypes["default"].string,
+  parentClassName: _propTypes["default"].string,
+  emptyState: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
+  loading: _propTypes["default"].bool,
+  showPagination: _propTypes["default"].bool,
+  pageSizeOptions: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  dense: _propTypes["default"].bool // <<< NEW
+};
+
+/** Usage (server-side)
+ *
+ * <TableV2
+ *   dense // compact mode
+ *   columns={columns}
+ *   data={data}
+ *   totalRows={total}
+ *   page={page}
+ *   size={size}
+ *   onPageChange={setPage}
+ *   onSizeChange={(n)=>{ setPage(1); setSize(n); }}
+ *   sorting={sorting}
+ *   onSortingChange={(next)=>{ setPage(1); setSorting(next); }}
+ *   loading={loading}
+ *   nowrap
+ *   stickyHeader
+ * />
+ */

package/docs/gatsby-node.js

@@ -0,0 +1,36 @@
+const path = require("path");
+
+exports.onCreateWebpackConfig = ({ stage, actions, loaders }) => {
+  // Only alias to source during local development unless explicitly enabled
+  const enableSourceAlias =
+    stage === "develop" || process.env.DOCS_USE_SRC === "1";
+
+  if (!enableSourceAlias) return;
+
+  actions.setWebpackConfig({
+    resolve: {
+      alias: {
+        // Use library source directly during docs development
+        "tabler-react-2": path.resolve(__dirname, "../src"),
+
+        // Ensure a single React/DOM instance (avoid hooks mismatch)
+        react: path.resolve(__dirname, "node_modules/react"),
+        "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+        // Route dependency to the docs install so resolution is stable
+        "react-router-dom": path.resolve(
+          __dirname,
+          "node_modules/react-router-dom"
+        ),
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.jsx?$/,
+          include: [path.resolve(__dirname, "../src")],
+          use: [loaders.js()],
+        },
+      ],
+    },
+  });
+};

package/docs/src/components/LoadableTabler.jsx

@@ -57,6 +57,9 @@ export const Table = loadable(() =>
 export const Timeline = loadable(() =>
   import("tabler-react-2").then((mod) => mod.Timeline)
 );
+export const TableV2 = loadable(() =>
+  import("tabler-react-2").then((mod) => mod.TableV2)
+);
 
 // Util
 const Hr = loadable(() => import("tabler-react-2").then((mod) => mod.Util.Hr));

package/docs/src/components/Tabler.jsx

@@ -1,63 +1,140 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
-export const Tabler = ({ children }) => {
-  const containerRef = useRef(null);
-  const shadowRef = useRef(null);
-  const [wrapper, setWrapper] = useState(null);
+const TABLER_CSS_URL =
+  "https://cdn.jsdelivr.net/npm/@tabler/core@1.3.0/dist/css/tabler.min.css";
+const TABLER_JS_URL =
+  "https://cdn.jsdelivr.net/npm/@tabler/core@1.3.0/dist/js/tabler.min.js";
+
+/**
+ * <Tabler>
+ * Same public API as before:
+ *   - children
+ *   - theme?: "light" | "dark" (defaults to "light")
+ * Also accepts className and style for the outer iframe element.
+ */
+export const Tabler = ({
+  children,
+  theme = "light",
+  className,
+  style,
+  headExtras = "",
+  cssUrl = TABLER_CSS_URL,
+  jsUrl = TABLER_JS_URL,
+}) => {
+  const iframeRef = useRef(null);
+  const [mountNode, setMountNode] = useState(null);
+  const roRef = useRef(null);
+
+  const srcDoc = useMemo(() => {
+    const t = theme === "dark" ? "dark" : "light";
+    return `<!DOCTYPE html>
+<html lang="en" data-bs-theme="${t}">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <link rel="stylesheet" href="${cssUrl}">
+  ${headExtras}
+  <style>
+    html, body { margin: 0; padding: 0; }
+    body { display: block; background-color: transparent!important; }
+    #app { min-height: 0; }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>`;
+  }, [cssUrl, headExtras, theme]);
 
   useEffect(() => {
-    const initialize = async () => {
-      if (containerRef.current && !shadowRef.current) {
-        // Create a shadow root for this instance
-        const shadowRoot = containerRef.current.attachShadow({ mode: "open" });
-        shadowRef.current = shadowRoot;
-
-        // Inject Tabler stylesheet
-        const styleLink = document.createElement("link");
-        styleLink.rel = "stylesheet";
-        styleLink.href =
-          "https://cdn.jsdelivr.net/npm/@tabler/core@1.3.2/dist/css/tabler.min.css";
-
-        // Create a wrapper div for children
-        const wrapperDiv = document.createElement("div");
-        wrapperDiv.style.display = "inline-block";
-        wrapperDiv.style.width = "auto";
-        wrapperDiv.style.height = "auto";
-
-        shadowRoot.appendChild(styleLink);
-        shadowRoot.appendChild(wrapperDiv);
-        setWrapper(wrapperDiv);
-
-        // Load and run Tabler script in an isolated context
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    iframe.srcdoc = srcDoc;
+
+    const onLoad = () => {
+      const doc = iframe.contentDocument;
+      const win = iframe.contentWindow;
+      if (!doc || !win) return;
+
+      // Ensure theme attribute is correct
+      doc.documentElement.setAttribute(
+        "data-bs-theme",
+        theme === "dark" ? "dark" : "light"
+      );
+
+      const app = doc.getElementById("app");
+      setMountNode(app || null);
+
+      // Inject Tabler JS in iframe context
+      const s = doc.createElement("script");
+      s.src = jsUrl;
+      s.defer = true;
+      doc.head.appendChild(s);
+
+      // Auto-resize to content
+      if (roRef.current) {
         try {
-          const response = await fetch("/tabler.min.js");
-          const scriptText = await response.text();
-
-          // Wrap the code in a function that temporarily sets window.SHADOW_DOC
-          const runTablerScript = new Function(
-            "shadowRoot",
-            `
-            window.USE_FALLBACK_ANCHOR = true;
-            const originalShadowDoc = window.SHADOW_DOC;
-            window.SHADOW_DOC = shadowRoot;
-            ${scriptText}
-            window.SHADOW_DOC = originalShadowDoc;
-          `
-          );
-          runTablerScript(shadowRoot);
-        } catch (err) {
-          console.error("Failed to load Tabler script:", err);
-        }
+          roRef.current.disconnect();
+        } catch {}
       }
+      const ro = new win.ResizeObserver(() => {
+        const h =
+          doc.documentElement.scrollHeight ||
+          doc.body.scrollHeight ||
+          app?.scrollHeight ||
+          0;
+        // iframe.style.height = `${Math.ceil(h) + 1}px`;
+      });
+      roRef.current = ro;
+      ro.observe(doc.documentElement);
+
+      // Initial sizing tick
+      setTimeout(() => {
+        const h =
+          doc.documentElement.scrollHeight ||
+          doc.body.scrollHeight ||
+          app?.scrollHeight ||
+          0;
+        iframe.style.height = `${Math.ceil(h) + 1}px`;
+      }, 0);
     };
 
-    initialize();
-  }, []);
+    iframe.addEventListener("load", onLoad);
+    return () => {
+      iframe.removeEventListener("load", onLoad);
+      if (roRef.current) {
+        try {
+          roRef.current.disconnect();
+        } catch {}
+        roRef.current = null;
+      }
+      setMountNode(null);
+    };
+  }, [srcDoc, jsUrl, theme]);
+
+  // Keep theme in sync if it changes
+  useEffect(() => {
+    const doc = iframeRef.current?.contentDocument;
+    if (doc) {
+      doc.documentElement.setAttribute(
+        "data-bs-theme",
+        theme === "dark" ? "dark" : "light"
+      );
+    }
+  }, [theme]);
 
   return (
-    <div ref={containerRef}>
-      {wrapper && ReactDOM.createPortal(children, wrapper)}
-    </div>
+    <>
+      <iframe
+        ref={iframeRef}
+        className={className}
+        style={{ width: "100%", border: 0, display: "block", ...(style || {}) }}
+        // Add sandbox if you want stricter isolation; e.g.:
+        // sandbox="allow-scripts allow-same-origin"
+      />
+      {mountNode ? ReactDOM.createPortal(children, mountNode) : null}
+    </>
   );
 };

package/docs/src/config/sidebar.yml

@@ -50,6 +50,8 @@
       link: "/components/steps"
     - label: "Tables"
       link: "/components/tables"
+    - label: "Tables v2"
+      link: "/components/table-v2"
     - label: "Timeline"
       link: "/components/timeline"
     - label: "Navbar"

package/docs/src/data/congressPeople.json

@@ -86,5 +86,93 @@
       "district": "3rd"
     },
     "website": "https://susielee.house.gov"
+  },
+  {
+    "name": "Ashley Hinson",
+    "email": "ashley.hinson@mail.house.gov",
+    "party": "republican",
+    "region": {
+      "state": "Iowa",
+      "abbr": "IA",
+      "district": "2nd"
+    },
+    "website": "https://hinson.house.gov"
+  },
+  {
+    "name": "Ilhan Omar",
+    "email": "ilhan.omar@mail.house.gov",
+    "party": "democrat",
+    "region": {
+      "state": "Minnesota",
+      "abbr": "MN",
+      "district": "5th"
+    },
+    "website": "https://omar.house.gov"
+  },
+  {
+    "name": "Nancy Mace",
+    "email": "nancy.mace@mail.house.gov",
+    "party": "republican",
+    "region": {
+      "state": "South Carolina",
+      "abbr": "SC",
+      "district": "1st"
+    },
+    "website": "https://mace.house.gov"
+  },
+  {
+    "name": "Maxwell Frost",
+    "email": "maxwell.frost@mail.house.gov",
+    "party": "democrat",
+    "region": {
+      "state": "Florida",
+      "abbr": "FL",
+      "district": "10th"
+    },
+    "website": "https://frost.house.gov"
+  },
+  {
+    "name": "Dan Crenshaw",
+    "email": "dan.crenshaw@mail.house.gov",
+    "party": "republican",
+    "region": {
+      "state": "Texas",
+      "abbr": "TX",
+      "district": "2nd"
+    },
+    "website": "https://crenshaw.house.gov"
+  },
+  {
+    "name": "Ayanna Pressley",
+    "email": "ayanna.pressley@mail.house.gov",
+    "party": "democrat",
+    "region": {
+      "state": "Massachusetts",
+      "abbr": "MA",
+      "district": "7th"
+    },
+    "website": "https://pressley.house.gov"
+  },
+  {
+    "name": "Lauren Boebert",
+    "email": "lauren.boebert@mail.house.gov",
+    "party": "republican",
+    "region": {
+      "state": "Colorado",
+      "abbr": "CO",
+      "district": "3rd"
+    },
+    "website": "https://boebert.house.gov"
+  },
+  {
+    "name": "Ruben Gallego",
+    "email": "ruben.gallego@mail.house.gov",
+    "party": "democrat",
+    "region": {
+      "state": "Arizona",
+      "abbr": "AZ",
+      "district": "3rd"
+    },
+    "website": "https://gallego.house.gov"
   }
 ]

package/docs/src/docs/components/table-v2.mdx

@@ -0,0 +1,367 @@
+---
+title: Tables v2
+---
+
+import { Excerpt } from "../../components/Excerpt.jsx";
+import { TableV2 } from "../../components/LoadableTabler.jsx";
+import congressPeople from "../../data/congressPeople.json";
+
+Tables v2 is a new data table built on TanStack Table v8 with Tabler styling. It is fully controlled: you pass the current page of `data`, the total row count, and the active `sorting`. This design fits server-side pagination and ordering out of the box.
+
+> Note: live previews on this page may require a package version that exports `TableV2`. If you don’t see live examples, the code snippets still illustrate usage.
+
+## Signature
+
+```jsx
+import { TableV2 } from "tabler-react-2";
+
+<TableV2 {...props} />;
+```
+
+### Core props
+
+| Prop                   | Required | Type                                                                 | Description                                                                      |
+| ---------------------- | -------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
+| `columns`              | Yes      | TanStack `ColumnDef[]`                                               | Column definitions using `accessorKey`, `header`, and optional `cell` renderers. |
+| `data`                 | Yes      | `any[]`                                                              | Current page rows only.                                                          |
+| `totalRows`            | Yes      | `number`                                                             | Total available row count (for page count and range text).                       |
+| `page`                 | Yes      | `number`                                                             | Current page (1-based).                                                          |
+| `size`                 | Yes      | `number`                                                             | Current page size.                                                               |
+| `onPageChange`         | Yes      | `(page:number) => void`                                              | Called with next 1-based page.                                                   |
+| `onSizeChange`         | Yes      | `(size:number) => void`                                              | Called with next page size. Typically also reset page to 1.                      |
+| `sorting`              | Yes      | `{ id:string, desc?:boolean }[]`                                     | Active ordering (TanStack format). Empty array for “no sort”.                    |
+| `onSortingChange`      | Yes      | `(next) => void`                                                     | Called when the user clicks a sortable header.                                   |
+| `loading`              | No       | `boolean`                                                            | Shows a small spinner and disables pager while loading.                          |
+| `headerSticky`         | No       | `boolean`                                                            | Makes the header stick to the top of the card.                                   |
+| `emptyState`           | No       | `string                                          \| () => ReactNode` | What to render when there are no rows.                                           |
+| `getRowId`             | No       | `(row) => string`                                                    | Supply when your rows need a stable custom ID.                                   |
+| `rowSelection`         | No       | `Record<string, boolean>`                                            | Controlled selection map.                                                        |
+| `onRowSelectionChange` | No       | `(updater) => void`                                                  | Controlled selection callback.                                                   |
+| `renderToolbarLeft`    | No       | `({ page,size,totalRows,sorting }) => ReactNode`                     | Custom left content in the card header.                                          |
+| `renderToolbarRight`   | No       | same                                                                 | Custom right content in the card header.                                         |
+
+## Basic usage (client or server data)
+
+The table is controlled; keep `page`, `size`, and `sorting` in your component state. The example below uses in-memory data, but the same shape works with server APIs.
+
+```jsx
+import { useMemo, useState } from "react";
+import { TableV2 } from "tabler-react-2";
+
+const allRows = congressPeople; // e.g., from your API
+
+export default function Demo() {
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(5);
+  const [sorting, setSorting] = useState([]); // [{ id:'name', desc:false }]
+
+  const columns = useMemo(
+    () => [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "party", header: "Party" },
+      { accessorKey: "region.state", header: "State" },
+      {
+        accessorKey: "email",
+        header: "Email",
+        cell: ({ getValue }) => (
+          <a className="text-reset" href={`mailto:${getValue()}`}>
+            {getValue()}
+          </a>
+        ),
+      },
+    ],
+    []
+  );
+
+  // client-side slice just for the demo
+  const ordered = useMemo(() => {
+    if (!sorting.length) return allRows;
+    const { id, desc } = sorting[0];
+    const val = (row) => id.split(".").reduce((a, k) => a?.[k], row);
+    const cmp = (a, b) => (a === b ? 0 : a > b ? 1 : -1);
+    const sorted = [...allRows].sort((a, b) => cmp(val(a), val(b)));
+    return desc ? sorted.reverse() : sorted;
+  }, [sorting]);
+
+  const start = (page - 1) * size;
+  const pageData = ordered.slice(start, start + size);
+
+  return (
+    <TableV2
+      columns={columns}
+      data={pageData}
+      totalRows={allRows.length}
+      page={page}
+      size={size}
+      onPageChange={setPage}
+      onSizeChange={(n) => {
+        setPage(1);
+        setSize(n);
+      }}
+      sorting={sorting}
+      onSortingChange={(next) => {
+        setPage(1);
+        setSorting(next);
+      }}
+    />
+  );
+}
+```
+
+<Excerpt>
+{(() => {
+  const React = require("react");
+  const { useMemo, useState } = React;
+
+  // Local, fully functional demo state (client-side slice)
+  const allRows = congressPeople;
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(10);
+  const [sorting, setSorting] = useState([]); // [{ id:'name', desc:false }]
+
+  const ordered = useMemo(() => {
+    if (!sorting.length) return allRows;
+    const { id, desc } = sorting[0];
+    const val = (row) => id.split(".").reduce((a, k) => a?.[k], row);
+    const cmp = (a, b) => (a === b ? 0 : a > b ? 1 : -1);
+    const sorted = [...allRows].sort((a, b) => cmp(val(a), val(b)));
+    return desc ? sorted.reverse() : sorted;
+  }, [sorting]);
+
+  const start = (page - 1) * size;
+  const pageData = ordered.slice(start, start + size);
+
+  return (
+    <TableV2
+      columns={[
+        { accessorKey: "name", header: "Name" },
+        { accessorKey: "party", header: "Party" },
+        { accessorKey: "region.state", header: "State" },
+        {
+          accessorKey: "email",
+          header: "Email",
+          cell: ({ getValue }) => (
+            <a className="text-reset" href={`mailto:${getValue()}`}>
+              {getValue()}
+            </a>
+          ),
+        },
+      ]}
+      data={pageData}
+      totalRows={allRows.length}
+      page={page}
+      size={size}
+      onPageChange={setPage}
+      onSizeChange={(n) => {
+        setPage(1);
+        setSize(n);
+      }}
+      sorting={sorting}
+      onSortingChange={(next) => {
+        setPage(1);
+        setSorting(next);
+      }}
+      loading={false}
+    />
+  );
+})()}
+
+</Excerpt>
+
+## Server-side workflow
+
+When fetching from an API, keep the same controlled state, but fetch rows for the current `page`, `size`, and `sorting`.
+
+```jsx
+const [page, setPage] = useState(1);
+const [size, setSize] = useState(25);
+const [sorting, setSorting] = useState([]);
+const [rows, setRows] = useState([]);
+const [total, setTotal] = useState(0);
+const [loading, setLoading] = useState(false);
+
+useEffect(() => {
+  let isMounted = true;
+  (async () => {
+    setLoading(true);
+    try {
+      const res = await fetchPeople({ page, size, sorting });
+      if (!isMounted) return;
+      setRows(res.items);
+      setTotal(res.total);
+    } finally {
+      setLoading(false);
+    }
+  })();
+  return () => {
+    isMounted = false;
+  };
+}, [page, size, sorting]);
+
+<TableV2
+  columns={columns}
+  data={rows}
+  totalRows={total}
+  page={page}
+  size={size}
+  onPageChange={setPage}
+  onSizeChange={(n) => {
+    setPage(1);
+    setSize(n);
+  }}
+  sorting={sorting}
+  onSortingChange={(next) => {
+    setPage(1);
+    setSorting(next);
+  }}
+  loading={loading}
+/>;
+```
+
+### Live async demo (simulated API)
+
+The preview below simulates a server by sorting and slicing in a faux `fetch` with a 1s delay.
+
+<Excerpt>
+{(() => {
+  const React = require("react");
+  const { useEffect, useMemo, useState } = React;
+
+  // Simulated API that delays 1s and then returns sorted, paged rows
+  const fetchPeople = ({ page, size, sorting }) =>
+    new Promise((resolve) => {
+      setTimeout(() => {
+        const all = congressPeople;
+        const total = all.length;
+
+        // server-side order
+        let ordered = all;
+        if (sorting?.length) {
+          const { id, desc } = sorting[0];
+          const val = (row) => id.split(".").reduce((a, k) => a?.[k], row);
+          const cmp = (a, b) => (a === b ? 0 : a > b ? 1 : -1);
+          const sorted = [...all].sort((a, b) => cmp(val(a), val(b)));
+          ordered = desc ? sorted.reverse() : sorted;
+        }
+
+        // server-side page
+        const start = (page - 1) * size;
+        const items = ordered.slice(start, start + size);
+        resolve({ items, total });
+      }, 1000);
+    });
+
+  const columns = useMemo(
+    () => [
+      { accessorKey: "name", header: "Name" },
+      { accessorKey: "party", header: "Party" },
+      { accessorKey: "region.state", header: "State" },
+      {
+        accessorKey: "email",
+        header: "Email",
+        cell: ({ getValue }) => (
+          <a className="text-reset" href={`mailto:${getValue()}`}>
+            {getValue()}
+          </a>
+        ),
+      },
+    ],
+    []
+  );
+
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(10);
+  const [sorting, setSorting] = useState([]);
+  const [rows, setRows] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let isMounted = true;
+    setLoading(true);
+    fetchPeople({ page, size, sorting }).then((res) => {
+      if (!isMounted) return;
+      setRows(res.items);
+      setTotal(res.total);
+      setLoading(false);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [page, size, sorting]);
+
+  return (
+    <TableV2
+      columns={columns}
+      data={rows}
+      totalRows={total}
+      page={page}
+      size={size}
+      onPageChange={setPage}
+      onSizeChange={(n) => {
+        setPage(1);
+        setSize(n);
+      }}
+      sorting={sorting}
+      onSortingChange={(next) => {
+        setPage(1);
+        setSorting(next);
+      }}
+      loading={loading}
+    />
+  );
+})()}
+
+</Excerpt>
+
+## Extras
+
+- Sticky header: pass `headerSticky` to keep headers visible while scrolling.
+- Toolbars: use `renderToolbarLeft`/`renderToolbarRight` to add filters or actions.
+- Row selection: control with `rowSelection` and `onRowSelectionChange`.
+
+### Sticky header example
+
+```jsx
+<TableV2 {...commonProps} headerSticky />
+```
+
+### Toolbar example
+
+```jsx
+<TableV2
+  {...commonProps}
+  renderToolbarLeft={() => (
+    <input className="form-control form-control-sm" placeholder="Search" />
+  )}
+  renderToolbarRight={() => (
+    <button className="btn btn-sm btn-primary">Add</button>
+  )}
+/>
+```
+
+### Row selection (minimal)
+
+```jsx
+const [rowSelection, setRowSelection] = useState({});
+
+<TableV2
+  {...commonProps}
+  rowSelection={rowSelection}
+  onRowSelectionChange={setRowSelection}
+  columns={[
+    {
+      id: "select",
+      header: () => null,
+      cell: ({ row }) => (
+        <input
+          type="checkbox"
+          checked={row.getIsSelected()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      ),
+    },
+    ...columns,
+  ]}
+/>;
+```

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.153-alpha.2",
+  "version": "0.1.154",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {
     "test": "cd demo && yarn start",
     "build:css": "postcss src/**/*.css --dir dist",
-    "build": "babel src --out-dir dist && npm run build:css"
+    "build": "babel src --out-dir dist && npm run build:css",
+    "docs:vanilla": "yarn --cwd docs start",
+    "docs": "cpulimit -l 20 -- yarn --cwd docs start"
   },
   "author": "Jack Crane",
   "license": "MIT",
@@ -15,6 +17,8 @@
     "@babel/core": "^7.24.8",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
+    "@emotion/react": "^11.14.0",
+    "@tanstack/react-table": "^8.21.3",
     "classnames": "^2.5.1",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",