tabler-react-2 0.1.153 → 0.1.154

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/package.json

@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "^0.1.140"
+    "tabler-react-2": "0.1.153-alpha.0"
   },
   "devDependencies": {},
   "keywords": [

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"
   }
 ]