From e3c572c0c5c1d98e117b35e45582a5b62deb2764 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Thu, 14 May 2026 12:50:49 +0300
Subject: [PATCH 1/3] Introduce RowPlaceholdersRenderer

---
 src/components/table/body/index.js            | 55 +++++--------------
 .../table/body/rowPLaceholdersRenderer.js     | 33 +++++++++++
 2 files changed, 47 insertions(+), 41 deletions(-)
 create mode 100644 src/components/table/body/rowPLaceholdersRenderer.js

diff --git a/src/components/table/body/index.js b/src/components/table/body/index.js
index 2586c25f..8336ec14 100644
--- a/src/components/table/body/index.js
+++ b/src/components/table/body/index.js
@@ -5,6 +5,7 @@ import Flex from "@/components/templates/flex"
 import { useTableState } from "../provider"
 import Row from "./row"
 import Header from "./header"
+import RowPlaceholdersRenderer from "./rowPLaceholdersRenderer"
 
 const noop = () => {}
 
@@ -35,7 +36,7 @@ const Body = memo(
     initialOffset = 0,
     onScroll,
     enableColumnReordering,
-    renderPlaceholder,
+    RowPlaceholder,
     ...rest
   }) => {
     useTableState(rerenderSelector)
@@ -73,7 +74,7 @@ const Body = memo(
     const lastVirtualDataIndex = virtualRows[virtualRows.length - 1]?.index ?? 0
 
     const placeholders = useMemo(() => {
-      if (!renderPlaceholder) return { before: [], after: [] }
+      if (!RowPlaceholder) return { before: [], after: [] }
 
       const N = overscan || 15
       const firstDataIndex = 1
@@ -91,7 +92,7 @@ const Body = memo(
         before: Array.from({ length: beforeEnd - beforeStart }, (_, i) => beforeStart + i),
         after: Array.from({ length: afterEnd - afterStart }, (_, i) => afterStart + i),
       }
-    }, [renderPlaceholder, firstVirtualDataIndex, lastVirtualDataIndex, rows.length, overscan])
+    }, [RowPlaceholder, firstVirtualDataIndex, lastVirtualDataIndex, rows.length, overscan])
 
     const getPlaceholderOffset = useCallback(
       index => {
@@ -145,25 +146,11 @@ const Body = memo(
             flex: "1 0 auto",
           }}
         >
-          {renderPlaceholder &&
-            placeholders.before.map(index => (
-              <div
-                key={`placeholder-before-${index}`}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  transform: `translateY(${getPlaceholderOffset(index)}px)`,
-                  minWidth: "100%",
-                }}
-              >
-                {renderPlaceholder({
-                  index: index - 1,
-                  isBefore: true,
-                  table,
-                })}
-              </div>
-            ))}
+          <RowPlaceholdersRenderer
+            RowPlaceholder={RowPlaceholder}
+            items={placeholders.before}
+            getPlaceholderOffset={getPlaceholderOffset}
+          />
           {virtualRows.map(virtualRow => {
             return (
               <div
@@ -208,25 +195,11 @@ const Body = memo(
               </div>
             )
           })}
-          {renderPlaceholder &&
-            placeholders.after.map(index => (
-              <div
-                key={`placeholder-after-${index}`}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  transform: `translateY(${getPlaceholderOffset(index)}px)`,
-                  minWidth: "100%",
-                }}
-              >
-                {renderPlaceholder({
-                  index: index - 1,
-                  isBefore: false,
-                  table,
-                })}
-              </div>
-            ))}
+          <RowPlaceholdersRenderer
+            RowPlaceholder={RowPlaceholder}
+            items={placeholders.after}
+            getPlaceholderOffset={getPlaceholderOffset}
+          />
         </div>
       </Flex>
     )
diff --git a/src/components/table/body/rowPLaceholdersRenderer.js b/src/components/table/body/rowPLaceholdersRenderer.js
new file mode 100644
index 00000000..7d814d94
--- /dev/null
+++ b/src/components/table/body/rowPLaceholdersRenderer.js
@@ -0,0 +1,33 @@
+import React, { isValidElement } from "react"
+
+const RowPlaceholdersRenderer = ({
+  RowPlaceholder,
+  items = [],
+  getPlaceholderOffset,
+  ...props
+}) => {
+  if (!items.length) return null
+
+  return (
+    <>
+      {items.map(index => (
+        <div
+          key={`placeholder-${index}`}
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            minWidth: "100%",
+            ...(typeof getPlaceholderOffset === "function"
+              ? { transform: `translateY(${getPlaceholderOffset(index)}px)` }
+              : {}),
+          }}
+        >
+          {RowPlaceholder ? <RowPlaceholder index={index - 1} /> : null}
+        </div>
+      ))}
+    </>
+  )
+}
+
+export default RowPlaceholdersRenderer

From 701420cf98f353d598f4c1fe247a4e1eaea535b0 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Thu, 14 May 2026 13:10:26 +0300
Subject: [PATCH 2/3] Introduce placeholdersLength

---
 src/components/table/body/index.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/table/body/index.js b/src/components/table/body/index.js
index 8336ec14..a5737b5e 100644
--- a/src/components/table/body/index.js
+++ b/src/components/table/body/index.js
@@ -37,6 +37,7 @@ const Body = memo(
     onScroll,
     enableColumnReordering,
     RowPlaceholder,
+    placeholdersLength,
     ...rest
   }) => {
     useTableState(rerenderSelector)
@@ -76,23 +77,28 @@ const Body = memo(
     const placeholders = useMemo(() => {
       if (!RowPlaceholder) return { before: [], after: [] }
 
-      const N = overscan || 15
       const firstDataIndex = 1
       const lastDataIndex = rows.length
 
-      // "before" = up to N data rows immediately before the virtual window (outside overscan)
+      // "before" = rows before the virtual window; capped to placeholdersLength when provided
       const beforeEnd = firstVirtualDataIndex
-      const beforeStart = Math.max(firstDataIndex, beforeEnd - N)
+      const beforeStart =
+        placeholdersLength != null
+          ? Math.max(firstDataIndex, beforeEnd - placeholdersLength)
+          : firstDataIndex
 
-      // "after" = up to N data rows immediately after the virtual window (outside overscan)
+      // "after" = rows after the virtual window; capped to placeholdersLength when provided
       const afterStart = lastVirtualDataIndex + 1
-      const afterEnd = Math.min(lastDataIndex + 1, afterStart + N)
+      const afterEnd =
+        placeholdersLength != null
+          ? Math.min(lastDataIndex + 1, afterStart + placeholdersLength)
+          : lastDataIndex + 1
 
       return {
         before: Array.from({ length: beforeEnd - beforeStart }, (_, i) => beforeStart + i),
         after: Array.from({ length: afterEnd - afterStart }, (_, i) => afterStart + i),
       }
-    }, [RowPlaceholder, firstVirtualDataIndex, lastVirtualDataIndex, rows.length, overscan])
+    }, [RowPlaceholder, firstVirtualDataIndex, lastVirtualDataIndex, rows.length, placeholdersLength])
 
     const getPlaceholderOffset = useCallback(
       index => {

From ae949aadbe331b36d8a7d84691221b36939a4d02 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Thu, 14 May 2026 13:11:36 +0300
Subject: [PATCH 3/3] v5.4.11

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d030aea1..d373d307 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.4.10",
+  "version": "5.4.11",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",