react-auto-smart-table 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -490,7 +490,7 @@ var generateInsights = (dataset, schema) => {
 };
 
 // src/components/SmartTable.tsx
-import React3, { useMemo as useMemo5 } from "react";
+import React3, { useMemo as useMemo6 } from "react";
 
 // src/components/TableHeader.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -531,7 +531,7 @@ var TableHeader = ({
 };
 
 // src/components/TableBody.tsx
-import React, { useRef } from "react";
+import { useMemo as useMemo4, useCallback } from "react";
 
 // src/renderers/numberRenderer.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -665,7 +665,7 @@ var DefaultRenderer = ({ value }) => {
 // src/plugins/currencyPlugin.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var currencyPlugin = {
-  detect: (columnKey, sample) => {
+  detect: (columnKey, _sample) => {
     const lowerKey = columnKey.toLowerCase();
     if (lowerKey.includes("amount") || lowerKey.includes("price") || lowerKey.includes("revenue")) {
       return "currency";
@@ -689,7 +689,7 @@ var currencyPlugin = {
 // src/plugins/percentagePlugin.tsx
 import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var percentagePlugin = {
-  detect: (columnKey, sample) => {
+  detect: (columnKey, _sample) => {
     const lowerKey = columnKey.toLowerCase();
     if (lowerKey.includes("percent") || lowerKey.includes("rate")) {
       return "percentage";
@@ -759,76 +759,94 @@ var getCellRenderer = (type, registry) => {
 };
 
 // src/components/TableBody.tsx
-import { useVirtual } from "react-virtual";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var TableBody = ({ data, schema, registry }) => {
-  const columns = Object.keys(schema);
-  const parentRef = useRef(null);
-  const rowVirtualizer = useVirtual({
-    size: data.length,
-    parentRef,
-    estimateSize: React.useCallback(() => 45, []),
-    overscan: 5
-  });
+var TableRow = ({ row, index, columns, schema, registry, style }) => {
+  return /* @__PURE__ */ jsx12("tr", { className: "rst-row", style, children: columns.map((colKey) => {
+    const colInfo = schema[colKey];
+    const Renderer = getCellRenderer(colInfo.type, registry);
+    const widthClass = getColumnWidthClass(colKey, colInfo.type);
+    const val = row[colKey];
+    return /* @__PURE__ */ jsx12(
+      "td",
+      {
+        className: `rst-td rst-td-col-${colKey} rst-td-type-${colInfo.type} ${widthClass}`,
+        children: colInfo.type === "boolean" ? /* @__PURE__ */ jsx12(
+          "span",
+          {
+            className: `rst-badge ${val ? "rst-badge-yes" : "rst-badge-no"}`,
+            children: val ? "Yes" : "No"
+          }
+        ) : /* @__PURE__ */ jsx12(Renderer, { value: val })
+      },
+      colKey
+    );
+  }) });
+};
+var TableBody = ({
+  data,
+  schema,
+  registry,
+  scrollRef
+}) => {
+  const columns = useMemo4(() => Object.keys(schema), [schema]);
   const isVirtualized = data.length > 20;
-  if (!isVirtualized) {
-    return /* @__PURE__ */ jsx12("tbody", { className: "rst-body", children: data.map((row, index) => /* @__PURE__ */ jsx12("tr", { className: "rst-row", children: columns.map((colKey) => {
-      const colInfo = schema[colKey];
-      const Renderer = getCellRenderer(colInfo.type, registry);
-      const widthClass = getColumnWidthClass(colKey, colInfo.type);
-      const val = row[colKey];
-      return /* @__PURE__ */ jsx12(
-        "td",
-        {
-          className: `rst-td rst-td-col-${colKey} rst-td-type-${colInfo.type} ${widthClass}`,
-          children: colInfo.type === "boolean" ? /* @__PURE__ */ jsx12("span", { className: `rst-badge ${val ? "rst-badge-yes" : "rst-badge-no"}`, children: val ? "Yes" : "No" }) : /* @__PURE__ */ jsx12(Renderer, { value: val })
-        },
-        colKey
-      );
-    }) }, index)) });
+  const rowVirtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => scrollRef?.current || null,
+    estimateSize: useCallback(() => 45, []),
+    overscan: 5,
+    enabled: isVirtualized,
+    // Provide an initialRect to ensure virtualization works in JSDOM 
+    // and during the very first render before ResizeObserver kicks in.
+    initialRect: { width: 0, height: 600 }
+  });
+  if (!isVirtualized || !scrollRef) {
+    return /* @__PURE__ */ jsx12("tbody", { className: "rst-body", children: data.map((row, index) => /* @__PURE__ */ jsx12(
+      TableRow,
+      {
+        row,
+        index,
+        columns,
+        schema,
+        registry
+      },
+      index
+    )) });
   }
+  const virtualRows = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
   return /* @__PURE__ */ jsx12(
     "tbody",
     {
-      className: "rst-body",
-      ref: parentRef,
+      className: "rst-body rst-body-virtualized",
       style: {
-        height: `${rowVirtualizer.totalSize}px`,
+        height: `${totalSize}px`,
         width: "100%",
         position: "relative"
       },
-      children: rowVirtualizer.virtualItems.map((virtualRow) => {
-        const row = data[virtualRow.index];
-        return /* @__PURE__ */ jsx12(
-          "tr",
-          {
-            className: "rst-row",
-            style: {
-              position: "absolute",
-              top: 0,
-              left: 0,
-              width: "100%",
-              height: `${virtualRow.size}px`,
-              transform: `translateY(${virtualRow.start}px)`
-            },
-            children: columns.map((colKey) => {
-              const val = row[colKey];
-              const colInfo = schema[colKey];
-              const Renderer = getCellRenderer(colInfo.type, registry);
-              const widthClass = getColumnWidthClass(colKey, colInfo.type);
-              return /* @__PURE__ */ jsx12(
-                "td",
-                {
-                  className: `rst-td rst-td-col-${colKey} rst-td-type-${colInfo.type} ${widthClass}`,
-                  children: colInfo.type === "boolean" ? /* @__PURE__ */ jsx12("span", { className: `rst-badge ${val ? "rst-badge-yes" : "rst-badge-no"}`, children: val ? "Yes" : "No" }) : /* @__PURE__ */ jsx12(Renderer, { value: val })
-                },
-                colKey
-              );
-            })
-          },
-          virtualRow.index
-        );
-      })
+      children: virtualRows.length > 0 ? virtualRows.map((virtualRow) => /* @__PURE__ */ jsx12(
+        TableRow,
+        {
+          row: data[virtualRow.index],
+          index: virtualRow.index,
+          columns,
+          schema,
+          registry,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: `${virtualRow.size}px`,
+            transform: `translateY(${virtualRow.start}px)`
+          }
+        },
+        virtualRow.key
+      )) : (
+        // Fallback for edge cases where virtualizer might be settling
+        /* @__PURE__ */ jsx12("tr", { style: { height: `${totalSize}px` }, children: /* @__PURE__ */ jsx12("td", { colSpan: columns.length }) })
+      )
     }
   );
 };
@@ -961,7 +979,7 @@ var FilterPanel = ({ schema, filters, onFilterChange, onClear }) => {
 };
 
 // src/components/InsightsPanel.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 import {
   BarChart,
   Bar,
@@ -980,7 +998,7 @@ import {
 import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var COLORS = ["#8884d8", "#82ca9d", "#ffc658", "#ff8042", "#a4de6c", "#d0ed57"];
 var InsightsPanel = ({ data, schema }) => {
-  const insights = useMemo4(() => {
+  const insights = useMemo5(() => {
     return generateInsights(data, schema);
   }, [data, schema]);
   if (!insights || insights.length === 0) {
@@ -1026,7 +1044,7 @@ var InsightsPanel = ({ data, schema }) => {
             dataKey: widget.yAxisKeys[0],
             nameKey: widget.xAxisKey,
             label: false,
-            children: widget.data.map((entry, index) => /* @__PURE__ */ jsx14(Cell, { fill: COLORS[index % COLORS.length] }, `cell-${index}`))
+            children: widget.data.map((_entry, index) => /* @__PURE__ */ jsx14(Cell, { fill: COLORS[index % COLORS.length] }, `cell-${index}`))
           }
         )
       ] }) }) })
@@ -1062,8 +1080,6 @@ var PluginRegistry = class {
   }
   getRenderers() {
     const renderers = {};
-    for (const plugin of this.plugins) {
-    }
     return renderers;
   }
   getPlugins() {
@@ -1082,14 +1098,14 @@ var SmartTable = ({
   insights = false,
   plugins = []
 }) => {
-  const registry = useMemo5(() => {
+  const registry = useMemo6(() => {
     const reg = new PluginRegistry();
     if (plugins && plugins.length > 0) {
       reg.register(plugins);
     }
     return reg;
   }, [plugins]);
-  const schema = useMemo5(() => {
+  const schema = useMemo6(() => {
     return buildSchema(data, registry);
   }, [data, registry]);
   const { filteredData, filters, setFilter, clearFilters } = useFilters(data, schema);
@@ -1099,6 +1115,7 @@ var SmartTable = ({
   const { paginatedData, currentPage, totalPages, setPage } = usePagination(dataToRenderOrPaginate, 10);
   const finalData = pagination ? paginatedData : dataToRenderOrPaginate;
   const [showFilters, setShowFilters] = React3.useState(true);
+  const scrollRef = React3.useRef(null);
   if (!data || data.length === 0) {
     return /* @__PURE__ */ jsx15("div", { className: "rst-container", children: /* @__PURE__ */ jsx15("div", { className: "rst-empty", children: "No data to display." }) });
   }
@@ -1154,7 +1171,7 @@ var SmartTable = ({
       /* @__PURE__ */ jsx15("button", { className: "btn btn-primary", onClick: clearFilters, children: "Clear All Filters" })
     ] }),
     data.length > 0 && finalData.length > 0 && /* @__PURE__ */ jsxs6("section", { className: "rst-card", children: [
-      /* @__PURE__ */ jsx15("div", { className: "rst-table-container", children: /* @__PURE__ */ jsxs6("table", { className: "rst-table", children: [
+      /* @__PURE__ */ jsx15("div", { className: "rst-table-container", ref: scrollRef, children: /* @__PURE__ */ jsxs6("table", { className: "rst-table", children: [
         /* @__PURE__ */ jsx15(
           TableHeader,
           {
@@ -1165,7 +1182,15 @@ var SmartTable = ({
             onSort: handleSort
           }
         ),
-        /* @__PURE__ */ jsx15(TableBody, { data: finalData, schema, registry })
+        /* @__PURE__ */ jsx15(
+          TableBody,
+          {
+            data: finalData,
+            schema,
+            registry,
+            scrollRef
+          }
+        )
       ] }) }),
       pagination && /* @__PURE__ */ jsxs6("div", { className: "rst-pagination", children: [
         /* @__PURE__ */ jsx15(