tabler-react-2 0.1.154 → 0.1.155

package/dist/table-v2/index.js

@@ -14,6 +14,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // TableV2.jsx
 // TanStack Table v8 styled like the Original component's Tabler look.
 // Adds `dense` mode for a compact layout.
+// Supports null/empty cells without layout shift via placeholder rendering.
 // Controlled (server-side) pagination & sorting. ES modules, named exports, arrow functions only.
 
 /** Small utilities */
@@ -136,7 +137,13 @@ var TableV2 = exports.TableV2 = function TableV2(_ref5) {
     _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;
+    pageSizeOptions = _ref5$pageSizeOptions === void 0 ? [10, 25, 50, 100] : _ref5$pageSizeOptions,
+    _ref5$emptyCellPlaceh = _ref5.emptyCellPlaceholder,
+    emptyCellPlaceholder = _ref5$emptyCellPlaceh === void 0 ? "" : _ref5$emptyCellPlaceh,
+    _ref5$treatEmptyStrin = _ref5.treatEmptyStringAsNull,
+    treatEmptyStringAsNull = _ref5$treatEmptyStrin === void 0 ? false : _ref5$treatEmptyStrin,
+    _ref5$fixedLayout = _ref5.fixedLayout,
+    fixedLayout = _ref5$fixedLayout === void 0 ? true : _ref5$fixedLayout;
   var table = (0, _reactTable.useReactTable)({
     data: data,
     columns: columns,
@@ -184,6 +191,25 @@ var TableV2 = exports.TableV2 = function TableV2(_ref5) {
       state: sortState || false
     }));
   };
+
+  // Helper: render a stable placeholder for empty cells
+  var renderCellContent = function renderCellContent(cell) {
+    var _cell$getValue;
+    // Prefer the raw value to detect emptiness; custom renderers still run for non-empty values
+    var raw = (_cell$getValue = cell.getValue) === null || _cell$getValue === void 0 ? void 0 : _cell$getValue.call(cell);
+    var isEmpty = raw === null || raw === undefined || treatEmptyStringAsNull && raw === "";
+    if (isEmpty) {
+      // Use an invisible placeholder to keep height without adding visual noise.
+      // Wrap in inline-block so the cell keeps a minimal box even in dense mode.
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        className: "d-inline-block",
+        "aria-label": "empty"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "opacity-0"
+      }, emptyCellPlaceholder));
+    }
+    return (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
+  };
   var content = (0, _react.useMemo)(function () {
     if (!loading && data.length === 0) {
       return /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
@@ -199,17 +225,20 @@ var TableV2 = exports.TableV2 = function TableV2(_ref5) {
         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()));
+        }, renderCellContent(cell));
       }));
     });
-  }, [data, loading, emptyState, table, dense]);
+  }, [data, loading, emptyState, table, dense, treatEmptyStringAsNull, emptyCellPlaceholder]);
   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(" ")
+    className: ["table table-vcenter", stickyHeader ? "sticky-top" : "", dense ? "table-sm" : "", tableClassName].filter(Boolean).join(" "),
+    style: fixedLayout ? {
+      tableLayout: "fixed"
+    } : undefined
   }, /*#__PURE__*/_react["default"].createElement("thead", null, table.getHeaderGroups().map(function (hg) {
     return /*#__PURE__*/_react["default"].createElement("tr", {
       key: hg.id
@@ -305,13 +334,16 @@ TableV2.propTypes = {
   loading: _propTypes["default"].bool,
   showPagination: _propTypes["default"].bool,
   pageSizeOptions: _propTypes["default"].arrayOf(_propTypes["default"].number),
-  dense: _propTypes["default"].bool // <<< NEW
+  dense: _propTypes["default"].bool,
+  emptyCellPlaceholder: _propTypes["default"].node,
+  treatEmptyStringAsNull: _propTypes["default"].bool,
+  fixedLayout: _propTypes["default"].bool
 };
 
 /** Usage (server-side)
  *
  * <TableV2
- *   dense // compact mode
+ *   dense
  *   columns={columns}
  *   data={data}
  *   totalRows={total}
@@ -324,5 +356,9 @@ TableV2.propTypes = {
  *   loading={loading}
  *   nowrap
  *   stickyHeader
+ *   // NEW props for null-safe cells:
+ *   emptyCellPlaceholder="—"
+ *   treatEmptyStringAsNull
+ *   fixedLayout
  * />
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.154",
+  "version": "0.1.155",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {