react-virtual-merged-list 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nilesh Ingale
+
+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.

package/README.md

@@ -0,0 +1,125 @@
+# React Virtual Merged List
+
+A high-performance React component for rendering large, virtualized lists with **merged cells** (rowspans).
+
+Built on top of `react-window`, this library combines the rendering speed of virtualization with the complex layout capabilities of data grids, automatically calculating rowspans based on your data.
+
+![License](https://img.shields.io/npm/l/react-virtual-merged-list)
+![Version](https://img.shields.io/npm/v/react-virtual-merged-list)
+![Size](https://img.shields.io/bundlephobia/minzip/react-virtual-merged-list)
+
+## Features
+
+* 🚀 **Virtualized Rendering**: Efficiently handles thousands of rows without performance lag.
+* 🧩 **Automatic Cell Merging**: Automatically calculates and renders rowspans based on duplicate data in your columns.
+* 🎨 **Flexible Layout**: Define columns, widths, custom renderers, and styles easily.
+* 🛡️ **TypeScript Native**: Fully typed for a robust developer experience.
+* 📦 **Lightweight**: Zero bloat—it relies on `react-window` as a peer dependency.
+
+## Installation
+
+```bash
+npm install react-virtual-merged-list
+```
+
+### Peer Dependencies
+
+This library depends on `react` and `react-window`. Ensure they are installed in your project:
+
+```bash
+npm install react-window
+```
+
+## Usage
+
+Here is a simple example showing how to render a list with merged "Department" and "Team" cells.
+
+```tsx
+import React from 'react';
+import { MergedList } from 'react-virtual-merged-list';
+
+const App = () => {
+  // 1. Prepare your data (Must be sorted by the keys you want to merge!)
+  const data = [
+    { id: 1, department: 'Engineering', team: 'Backend', name: 'Alice' },
+    { id: 2, department: 'Engineering', team: 'Backend', name: 'Bob' },
+    { id: 3, department: 'Engineering', team: 'Frontend', name: 'Charlie' },
+    { id: 4, department: 'Sales',       team: 'Enterprise', name: 'David' },
+    { id: 5, department: 'Sales',       team: 'Enterprise', name: 'Eve' },
+  ];
+
+  return (
+    <MergedList
+      data={data}
+      rowHeight={50}
+      height={600}
+      width="100%" // or a fixed number like 800
+      columns={[
+        { 
+          key: 'department', 
+          width: 150, 
+          style: { fontWeight: 'bold', background: '#f5f5f5', color: '#333' }
+        },
+        { 
+          key: 'team', 
+          width: 150,
+          style: { background: '#fafafa' }
+        },
+        { 
+          key: 'name', 
+          width: 200,
+          // Custom render function for complex content
+          render: (row) => (
+             <span style={{ color: 'blue', paddingLeft: 10 }}>
+               👤 {row.name}
+             </span>
+          ) 
+        }
+      ]}
+    />
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `data` | `any[]` | **Yes** | The array of data objects to render. **Note:** Data should be sorted by the keys you intend to merge for correct visualization. |
+| `columns` | `ColumnDef[]` | **Yes** | Configuration for the grid columns (see below). |
+| `rowHeight` | `number` | **Yes** | Fixed height of each row in pixels. |
+| `height` | `number` | **Yes** | Height of the scrollable container. |
+| `width` | `number\|string` | **Yes** | Width of the container. |
+
+### Column Configuration (`ColumnDef`)
+
+The `columns` prop takes an array of objects with the following properties:
+
+```typescript
+interface ColumnDef {
+  /** The key in your data object to bind to this column */
+  key: string;
+  
+  /** Width of the column in pixels */
+  width: number;
+  
+  /** Optional: Custom render function for cell content */
+  render?: (row: any) => React.ReactNode;
+  
+  /** Optional: Inline styles applied to the cell container */
+  style?: React.CSSProperties;
+}
+```
+
+## How It Works
+
+1. The component analyzes your `data` and the keys found in `columns`.
+2. It calculates `rowSpan` values for consecutive identical values in those columns.
+3. It uses `react-window` to render only the visible rows.
+4. It uses absolute positioning to render merged cells ("Phantom Spacers" are handled internally, so you don't have to worry about flexbox layouts breaking).
+
+## License
+
+MIT © Nilesh Ingale

package/dist/index.d.mts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface ColumnDef {
+    key: string;
+    width: number;
+    render?: (row: any) => React.ReactNode;
+    style?: React.CSSProperties;
+}
+interface MergedListProps {
+    data: any[];
+    columns: ColumnDef[];
+    rowHeight: number;
+    height: number;
+    width: number | string;
+}
+declare const MergedList: ({ data, columns, rowHeight, height, width, }: MergedListProps) => React.JSX.Element;
+
+type SpanMap = Record<string, {
+    span: number;
+    isVisible: boolean;
+    refRow?: number;
+}>;
+declare const calculateSpans: (data: any[], groupKeys: string[]) => SpanMap;
+
+export { MergedList, calculateSpans };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+interface ColumnDef {
+    key: string;
+    width: number;
+    render?: (row: any) => React.ReactNode;
+    style?: React.CSSProperties;
+}
+interface MergedListProps {
+    data: any[];
+    columns: ColumnDef[];
+    rowHeight: number;
+    height: number;
+    width: number | string;
+}
+declare const MergedList: ({ data, columns, rowHeight, height, width, }: MergedListProps) => React.JSX.Element;
+
+type SpanMap = Record<string, {
+    span: number;
+    isVisible: boolean;
+    refRow?: number;
+}>;
+declare const calculateSpans: (data: any[], groupKeys: string[]) => SpanMap;
+
+export { MergedList, calculateSpans };

package/dist/index.js

@@ -0,0 +1,148 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MergedList: () => MergedList,
+  calculateSpans: () => calculateSpans
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/MergedList.tsx
+var import_react = __toESM(require("react"));
+var ReactWindowNamespace = __toESM(require("react-window"));
+
+// src/utils/spanManager.ts
+var calculateSpans = (data, groupKeys) => {
+  const spanMap = {};
+  const lastSeenValues = {};
+  const lastStartIndices = {};
+  data.forEach((row, rowIndex) => {
+    groupKeys.forEach((key) => {
+      const cellId = `${rowIndex}:${key}`;
+      const currentValue = row[key];
+      if (rowIndex > 0 && currentValue === lastSeenValues[key]) {
+        const parentRowIndex = lastStartIndices[key];
+        const parentId = `${parentRowIndex}:${key}`;
+        if (!spanMap[parentId])
+          spanMap[parentId] = { span: 1, isVisible: true };
+        spanMap[parentId].span += 1;
+        spanMap[cellId] = { span: 0, isVisible: false, refRow: parentRowIndex };
+      } else {
+        lastSeenValues[key] = currentValue;
+        lastStartIndices[key] = rowIndex;
+        spanMap[cellId] = { span: 1, isVisible: true };
+      }
+    });
+  });
+  return spanMap;
+};
+
+// src/MergedList.tsx
+var ReactWindow = ReactWindowNamespace;
+var _a, _b;
+var ListComponent = ReactWindow.VariableSizeList || ReactWindow.List || ((_a = ReactWindow.default) == null ? void 0 : _a.VariableSizeList) || ((_b = ReactWindow.default) == null ? void 0 : _b.List);
+if (!ListComponent) {
+  console.error(
+    "\u274C Critical Error: Could not find 'List' or 'VariableSizeList' in react-window exports.",
+    ReactWindowNamespace
+  );
+}
+var MergedList = ({
+  data,
+  columns,
+  rowHeight,
+  height,
+  width
+}) => {
+  const mergeKeys = (0, import_react.useMemo)(() => columns.map((c) => c.key), [columns]);
+  const spanMap = (0, import_react.useMemo)(
+    () => calculateSpans(data, mergeKeys),
+    [data, mergeKeys]
+  );
+  const Row = ({ index, style }) => {
+    const row = data[index];
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { ...style, position: "absolute" } }, " ", columns.reduce(
+      (acc, col) => {
+        const { key, width: width2, render } = col;
+        const currentLeft = acc.leftOffset;
+        const spanData = spanMap[`${index}:${key}`];
+        const isVisible = spanData ? spanData.isVisible : true;
+        const spanCount = spanData ? spanData.span : 1;
+        if (isVisible) {
+          acc.elements.push(
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                key,
+                style: {
+                  position: "absolute",
+                  left: currentLeft,
+                  // 📍 PINNED POSITION
+                  width: width2,
+                  height: spanCount * rowHeight,
+                  // 📏 Grow downwards
+                  zIndex: spanCount > 1 ? 10 : 1,
+                  // Float on top if merged
+                  background: "white",
+                  // Important to cover rows below
+                  borderRight: "1px solid #eee",
+                  borderBottom: "1px solid #eee",
+                  display: "flex",
+                  alignItems: "center",
+                  ...col.style
+                }
+              },
+              render ? render(row) : row[key]
+            )
+          );
+        }
+        acc.leftOffset += width2;
+        return acc;
+      },
+      { elements: [], leftOffset: 0 }
+    ).elements);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    ListComponent,
+    {
+      height,
+      itemCount: data.length,
+      itemSize: () => rowHeight,
+      width
+    },
+    Row
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MergedList,
+  calculateSpans
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/MergedList.tsx","../src/utils/spanManager.ts"],"sourcesContent":["export { MergedList } from './MergedList';\r\nexport { calculateSpans } from './utils/spanManager';","import React, { useMemo } from \"react\";\r\n\r\nimport * as ReactWindowNamespace from \"react-window\";\r\n\r\n// 🛠️ FIX: Handle different export names dynamically\r\nconst ReactWindow = ReactWindowNamespace as any;\r\n\r\n// Try to find the List component in this order:\r\n// 1. VariableSizeList (Standard v1.8)\r\n// 2. List (What you are seeing in your console)\r\n// 3. default.VariableSizeList (CommonJS fallback)\r\nconst ListComponent =\r\n  ReactWindow.VariableSizeList ||\r\n  ReactWindow.List ||\r\n  ReactWindow.default?.VariableSizeList ||\r\n  ReactWindow.default?.List;\r\n\r\nif (!ListComponent) {\r\n  console.error(\r\n    \"❌ Critical Error: Could not find 'List' or 'VariableSizeList' in react-window exports.\",\r\n    ReactWindowNamespace\r\n  );\r\n}\r\n\r\nimport { calculateSpans } from \"./utils/spanManager\";\r\n\r\ninterface ColumnDef {\r\n  key: string;\r\n  width: number;\r\n  render?: (row: any) => React.ReactNode; // User can provide custom content\r\n  style?: React.CSSProperties;\r\n}\r\n\r\ninterface MergedListProps {\r\n  data: any[];\r\n  columns: ColumnDef[]; // <--- New Prop\r\n  rowHeight: number;\r\n  height: number;\r\n  width: number | string;\r\n}\r\n\r\nexport const MergedList = ({\r\n  data,\r\n  columns,\r\n  rowHeight,\r\n  height,\r\n  width,\r\n}: MergedListProps) => {\r\n  // 1. Identify which keys need span calculation\r\n  const mergeKeys = useMemo(() => columns.map((c) => c.key), [columns]);\r\n  const spanMap = useMemo(\r\n    () => calculateSpans(data, mergeKeys),\r\n    [data, mergeKeys]\r\n  );\r\n\r\n  // 2. The Internal Row Renderer\r\n  const Row = ({ index, style }: any) => {\r\n    const row = data[index];\r\n\r\n    // We render a container, but the cells inside are ABSOLUTE positioned\r\n    return (\r\n      <div style={{ ...style, position: \"absolute\" }}>\r\n        {\" \"}\r\n        {/* Keep react-window's position */}\r\n        {\r\n          columns.reduce(\r\n            (acc, col) => {\r\n              const { key, width, render } = col;\r\n              const currentLeft = acc.leftOffset; // Where does this column start?\r\n\r\n              const spanData = spanMap[`${index}:${key}`];\r\n              const isVisible = spanData ? spanData.isVisible : true; // Default true if not merged\r\n              const spanCount = spanData ? spanData.span : 1;\r\n\r\n              // LOGIC: Only render if it's the start of a span (or not a merge column)\r\n              if (isVisible) {\r\n                acc.elements.push(\r\n                  <div\r\n                    key={key}\r\n                    style={{\r\n                      position: \"absolute\",\r\n                      left: currentLeft, // 📍 PINNED POSITION\r\n                      width: width,\r\n                      height: spanCount * rowHeight, // 📏 Grow downwards\r\n                      zIndex: spanCount > 1 ? 10 : 1, // Float on top if merged\r\n                      background: \"white\", // Important to cover rows below\r\n                      borderRight: \"1px solid #eee\",\r\n                      borderBottom: \"1px solid #eee\",\r\n                      display: \"flex\",\r\n                      alignItems: \"center\",\r\n                      ...col.style,\r\n                    }}\r\n                  >\r\n                    {/* Render user content or default text */}\r\n                    {render ? render(row) : row[key]}\r\n                  </div>\r\n                );\r\n              }\r\n\r\n              // Move the cursor to the right for the next column\r\n              // We add width even if we didn't render anything!\r\n              acc.leftOffset += width;\r\n\r\n              return acc;\r\n            },\r\n            { elements: [] as React.ReactNode[], leftOffset: 0 }\r\n          ).elements\r\n        }\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ListComponent\r\n      height={height}\r\n      itemCount={data.length}\r\n      itemSize={() => rowHeight}\r\n      width={width}\r\n    >\r\n      {Row}\r\n    </ListComponent>\r\n  );\r\n};\r\n","export type SpanMap = Record<\r\n  string,\r\n  { span: number; isVisible: boolean; refRow?: number }\r\n>;\r\n\r\nexport const calculateSpans = (data: any[], groupKeys: string[]): SpanMap => {\r\n  const spanMap: SpanMap = {};\r\n\r\n  // Initialize pointers for each column (groupKey)\r\n  const lastSeenValues: Record<string, any> = {};\r\n  const lastStartIndices: Record<string, number> = {};\r\n\r\n  data.forEach((row, rowIndex) => {\r\n    groupKeys.forEach((key) => {\r\n      const cellId = `${rowIndex}:${key}`;\r\n      const currentValue = row[key];\r\n\r\n      // If it matches the previous row's value, extend the span\r\n      if (rowIndex > 0 && currentValue === lastSeenValues[key]) {\r\n        const parentRowIndex = lastStartIndices[key];\r\n        const parentId = `${parentRowIndex}:${key}`;\r\n\r\n        // Increment parent span\r\n        if (!spanMap[parentId])\r\n          spanMap[parentId] = { span: 1, isVisible: true };\r\n        spanMap[parentId].span += 1;\r\n\r\n        // Mark current cell as hidden\r\n        spanMap[cellId] = { span: 0, isVisible: false, refRow: parentRowIndex };\r\n      } else {\r\n        // New Value: Start a new span\r\n        lastSeenValues[key] = currentValue;\r\n        lastStartIndices[key] = rowIndex;\r\n        spanMap[cellId] = { span: 1, isVisible: true };\r\n      }\r\n    });\r\n  });\r\n\r\n  return spanMap;\r\n};\r\n"],"mappings":"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","names":["React","width"]}

package/dist/index.mjs

@@ -0,0 +1,111 @@
+// src/MergedList.tsx
+import React, { useMemo } from "react";
+import * as ReactWindowNamespace from "react-window";
+
+// src/utils/spanManager.ts
+var calculateSpans = (data, groupKeys) => {
+  const spanMap = {};
+  const lastSeenValues = {};
+  const lastStartIndices = {};
+  data.forEach((row, rowIndex) => {
+    groupKeys.forEach((key) => {
+      const cellId = `${rowIndex}:${key}`;
+      const currentValue = row[key];
+      if (rowIndex > 0 && currentValue === lastSeenValues[key]) {
+        const parentRowIndex = lastStartIndices[key];
+        const parentId = `${parentRowIndex}:${key}`;
+        if (!spanMap[parentId])
+          spanMap[parentId] = { span: 1, isVisible: true };
+        spanMap[parentId].span += 1;
+        spanMap[cellId] = { span: 0, isVisible: false, refRow: parentRowIndex };
+      } else {
+        lastSeenValues[key] = currentValue;
+        lastStartIndices[key] = rowIndex;
+        spanMap[cellId] = { span: 1, isVisible: true };
+      }
+    });
+  });
+  return spanMap;
+};
+
+// src/MergedList.tsx
+var ReactWindow = ReactWindowNamespace;
+var _a, _b;
+var ListComponent = ReactWindow.VariableSizeList || ReactWindow.List || ((_a = ReactWindow.default) == null ? void 0 : _a.VariableSizeList) || ((_b = ReactWindow.default) == null ? void 0 : _b.List);
+if (!ListComponent) {
+  console.error(
+    "\u274C Critical Error: Could not find 'List' or 'VariableSizeList' in react-window exports.",
+    ReactWindowNamespace
+  );
+}
+var MergedList = ({
+  data,
+  columns,
+  rowHeight,
+  height,
+  width
+}) => {
+  const mergeKeys = useMemo(() => columns.map((c) => c.key), [columns]);
+  const spanMap = useMemo(
+    () => calculateSpans(data, mergeKeys),
+    [data, mergeKeys]
+  );
+  const Row = ({ index, style }) => {
+    const row = data[index];
+    return /* @__PURE__ */ React.createElement("div", { style: { ...style, position: "absolute" } }, " ", columns.reduce(
+      (acc, col) => {
+        const { key, width: width2, render } = col;
+        const currentLeft = acc.leftOffset;
+        const spanData = spanMap[`${index}:${key}`];
+        const isVisible = spanData ? spanData.isVisible : true;
+        const spanCount = spanData ? spanData.span : 1;
+        if (isVisible) {
+          acc.elements.push(
+            /* @__PURE__ */ React.createElement(
+              "div",
+              {
+                key,
+                style: {
+                  position: "absolute",
+                  left: currentLeft,
+                  // 📍 PINNED POSITION
+                  width: width2,
+                  height: spanCount * rowHeight,
+                  // 📏 Grow downwards
+                  zIndex: spanCount > 1 ? 10 : 1,
+                  // Float on top if merged
+                  background: "white",
+                  // Important to cover rows below
+                  borderRight: "1px solid #eee",
+                  borderBottom: "1px solid #eee",
+                  display: "flex",
+                  alignItems: "center",
+                  ...col.style
+                }
+              },
+              render ? render(row) : row[key]
+            )
+          );
+        }
+        acc.leftOffset += width2;
+        return acc;
+      },
+      { elements: [], leftOffset: 0 }
+    ).elements);
+  };
+  return /* @__PURE__ */ React.createElement(
+    ListComponent,
+    {
+      height,
+      itemCount: data.length,
+      itemSize: () => rowHeight,
+      width
+    },
+    Row
+  );
+};
+export {
+  MergedList,
+  calculateSpans
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MergedList.tsx","../src/utils/spanManager.ts"],"sourcesContent":["import React, { useMemo } from \"react\";\r\n\r\nimport * as ReactWindowNamespace from \"react-window\";\r\n\r\n// 🛠️ FIX: Handle different export names dynamically\r\nconst ReactWindow = ReactWindowNamespace as any;\r\n\r\n// Try to find the List component in this order:\r\n// 1. VariableSizeList (Standard v1.8)\r\n// 2. List (What you are seeing in your console)\r\n// 3. default.VariableSizeList (CommonJS fallback)\r\nconst ListComponent =\r\n  ReactWindow.VariableSizeList ||\r\n  ReactWindow.List ||\r\n  ReactWindow.default?.VariableSizeList ||\r\n  ReactWindow.default?.List;\r\n\r\nif (!ListComponent) {\r\n  console.error(\r\n    \"❌ Critical Error: Could not find 'List' or 'VariableSizeList' in react-window exports.\",\r\n    ReactWindowNamespace\r\n  );\r\n}\r\n\r\nimport { calculateSpans } from \"./utils/spanManager\";\r\n\r\ninterface ColumnDef {\r\n  key: string;\r\n  width: number;\r\n  render?: (row: any) => React.ReactNode; // User can provide custom content\r\n  style?: React.CSSProperties;\r\n}\r\n\r\ninterface MergedListProps {\r\n  data: any[];\r\n  columns: ColumnDef[]; // <--- New Prop\r\n  rowHeight: number;\r\n  height: number;\r\n  width: number | string;\r\n}\r\n\r\nexport const MergedList = ({\r\n  data,\r\n  columns,\r\n  rowHeight,\r\n  height,\r\n  width,\r\n}: MergedListProps) => {\r\n  // 1. Identify which keys need span calculation\r\n  const mergeKeys = useMemo(() => columns.map((c) => c.key), [columns]);\r\n  const spanMap = useMemo(\r\n    () => calculateSpans(data, mergeKeys),\r\n    [data, mergeKeys]\r\n  );\r\n\r\n  // 2. The Internal Row Renderer\r\n  const Row = ({ index, style }: any) => {\r\n    const row = data[index];\r\n\r\n    // We render a container, but the cells inside are ABSOLUTE positioned\r\n    return (\r\n      <div style={{ ...style, position: \"absolute\" }}>\r\n        {\" \"}\r\n        {/* Keep react-window's position */}\r\n        {\r\n          columns.reduce(\r\n            (acc, col) => {\r\n              const { key, width, render } = col;\r\n              const currentLeft = acc.leftOffset; // Where does this column start?\r\n\r\n              const spanData = spanMap[`${index}:${key}`];\r\n              const isVisible = spanData ? spanData.isVisible : true; // Default true if not merged\r\n              const spanCount = spanData ? spanData.span : 1;\r\n\r\n              // LOGIC: Only render if it's the start of a span (or not a merge column)\r\n              if (isVisible) {\r\n                acc.elements.push(\r\n                  <div\r\n                    key={key}\r\n                    style={{\r\n                      position: \"absolute\",\r\n                      left: currentLeft, // 📍 PINNED POSITION\r\n                      width: width,\r\n                      height: spanCount * rowHeight, // 📏 Grow downwards\r\n                      zIndex: spanCount > 1 ? 10 : 1, // Float on top if merged\r\n                      background: \"white\", // Important to cover rows below\r\n                      borderRight: \"1px solid #eee\",\r\n                      borderBottom: \"1px solid #eee\",\r\n                      display: \"flex\",\r\n                      alignItems: \"center\",\r\n                      ...col.style,\r\n                    }}\r\n                  >\r\n                    {/* Render user content or default text */}\r\n                    {render ? render(row) : row[key]}\r\n                  </div>\r\n                );\r\n              }\r\n\r\n              // Move the cursor to the right for the next column\r\n              // We add width even if we didn't render anything!\r\n              acc.leftOffset += width;\r\n\r\n              return acc;\r\n            },\r\n            { elements: [] as React.ReactNode[], leftOffset: 0 }\r\n          ).elements\r\n        }\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <ListComponent\r\n      height={height}\r\n      itemCount={data.length}\r\n      itemSize={() => rowHeight}\r\n      width={width}\r\n    >\r\n      {Row}\r\n    </ListComponent>\r\n  );\r\n};\r\n","export type SpanMap = Record<\r\n  string,\r\n  { span: number; isVisible: boolean; refRow?: number }\r\n>;\r\n\r\nexport const calculateSpans = (data: any[], groupKeys: string[]): SpanMap => {\r\n  const spanMap: SpanMap = {};\r\n\r\n  // Initialize pointers for each column (groupKey)\r\n  const lastSeenValues: Record<string, any> = {};\r\n  const lastStartIndices: Record<string, number> = {};\r\n\r\n  data.forEach((row, rowIndex) => {\r\n    groupKeys.forEach((key) => {\r\n      const cellId = `${rowIndex}:${key}`;\r\n      const currentValue = row[key];\r\n\r\n      // If it matches the previous row's value, extend the span\r\n      if (rowIndex > 0 && currentValue === lastSeenValues[key]) {\r\n        const parentRowIndex = lastStartIndices[key];\r\n        const parentId = `${parentRowIndex}:${key}`;\r\n\r\n        // Increment parent span\r\n        if (!spanMap[parentId])\r\n          spanMap[parentId] = { span: 1, isVisible: true };\r\n        spanMap[parentId].span += 1;\r\n\r\n        // Mark current cell as hidden\r\n        spanMap[cellId] = { span: 0, isVisible: false, refRow: parentRowIndex };\r\n      } else {\r\n        // New Value: Start a new span\r\n        lastSeenValues[key] = currentValue;\r\n        lastStartIndices[key] = rowIndex;\r\n        spanMap[cellId] = { span: 1, isVisible: true };\r\n      }\r\n    });\r\n  });\r\n\r\n  return spanMap;\r\n};\r\n"],"mappings":";AAAA,OAAO,SAAS,eAAe;AAE/B,YAAY,0BAA0B;;;ACG/B,IAAM,iBAAiB,CAAC,MAAa,cAAiC;AAC3E,QAAM,UAAmB,CAAC;AAG1B,QAAM,iBAAsC,CAAC;AAC7C,QAAM,mBAA2C,CAAC;AAElD,OAAK,QAAQ,CAAC,KAAK,aAAa;AAC9B,cAAU,QAAQ,CAAC,QAAQ;AACzB,YAAM,SAAS,GAAG,QAAQ,IAAI,GAAG;AACjC,YAAM,eAAe,IAAI,GAAG;AAG5B,UAAI,WAAW,KAAK,iBAAiB,eAAe,GAAG,GAAG;AACxD,cAAM,iBAAiB,iBAAiB,GAAG;AAC3C,cAAM,WAAW,GAAG,cAAc,IAAI,GAAG;AAGzC,YAAI,CAAC,QAAQ,QAAQ;AACnB,kBAAQ,QAAQ,IAAI,EAAE,MAAM,GAAG,WAAW,KAAK;AACjD,gBAAQ,QAAQ,EAAE,QAAQ;AAG1B,gBAAQ,MAAM,IAAI,EAAE,MAAM,GAAG,WAAW,OAAO,QAAQ,eAAe;AAAA,MACxE,OAAO;AAEL,uBAAe,GAAG,IAAI;AACtB,yBAAiB,GAAG,IAAI;AACxB,gBAAQ,MAAM,IAAI,EAAE,MAAM,GAAG,WAAW,KAAK;AAAA,MAC/C;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AACT;;;ADlCA,IAAM,cAAc;AALpB;AAWA,IAAM,gBACJ,YAAY,oBACZ,YAAY,UACZ,iBAAY,YAAZ,mBAAqB,uBACrB,iBAAY,YAAZ,mBAAqB;AAEvB,IAAI,CAAC,eAAe;AAClB,UAAQ;AAAA,IACN;AAAA,IACA;AAAA,EACF;AACF;AAmBO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AAErB,QAAM,YAAY,QAAQ,MAAM,QAAQ,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;AACpE,QAAM,UAAU;AAAA,IACd,MAAM,eAAe,MAAM,SAAS;AAAA,IACpC,CAAC,MAAM,SAAS;AAAA,EAClB;AAGA,QAAM,MAAM,CAAC,EAAE,OAAO,MAAM,MAAW;AACrC,UAAM,MAAM,KAAK,KAAK;AAGtB,WACE,oCAAC,SAAI,OAAO,EAAE,GAAG,OAAO,UAAU,WAAW,KAC1C,KAGC,QAAQ;AAAA,MACN,CAAC,KAAK,QAAQ;AACZ,cAAM,EAAE,KAAK,OAAAA,QAAO,OAAO,IAAI;AAC/B,cAAM,cAAc,IAAI;AAExB,cAAM,WAAW,QAAQ,GAAG,KAAK,IAAI,GAAG,EAAE;AAC1C,cAAM,YAAY,WAAW,SAAS,YAAY;AAClD,cAAM,YAAY,WAAW,SAAS,OAAO;AAG7C,YAAI,WAAW;AACb,cAAI,SAAS;AAAA,YACX;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,OAAO;AAAA,kBACL,UAAU;AAAA,kBACV,MAAM;AAAA;AAAA,kBACN,OAAOA;AAAA,kBACP,QAAQ,YAAY;AAAA;AAAA,kBACpB,QAAQ,YAAY,IAAI,KAAK;AAAA;AAAA,kBAC7B,YAAY;AAAA;AAAA,kBACZ,aAAa;AAAA,kBACb,cAAc;AAAA,kBACd,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,GAAG,IAAI;AAAA,gBACT;AAAA;AAAA,cAGC,SAAS,OAAO,GAAG,IAAI,IAAI,GAAG;AAAA,YACjC;AAAA,UACF;AAAA,QACF;AAIA,YAAI,cAAcA;AAElB,eAAO;AAAA,MACT;AAAA,MACA,EAAE,UAAU,CAAC,GAAwB,YAAY,EAAE;AAAA,IACrD,EAAE,QAEN;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB;AAAA;AAAA,IAEC;AAAA,EACH;AAEJ;","names":["width"]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-virtual-merged-list",
+  "version": "1.0.0",
+  "description": "A React component for rendering virtualized lists with merged cells/rowspans using react-window.",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-window": ">=1.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-window": "^1.8.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-window": "^1.8.10",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "virtualized",
+    "table",
+    "rowspan",
+    "merged-cells",
+    "react-window"
+  ],
+  "author": "Nilesh Ingale",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nilesh-sde/react-virtual-merged-list.git"
+  }
+}