From cd50a4cef7548ebd99c03d163815e24fb9f0b3b5 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 1 Dec 2025 11:11:14 +0000
Subject: [PATCH] convert Table filters

---
 .../Table/TableNG/Filter/FilterList.tsx       | 40 +++++++++++--------
 .../components/Table/TableRT/FilterList.tsx   | 40 +++++++++++--------
 2 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx
index bb2666e6310..d824694513e 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { useCallback, useMemo } from 'react';
 import * as React from 'react';
-import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
+import { List, type RowComponentProps } from 'react-window';
 
 import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
@@ -162,15 +162,16 @@ export const FilterList = ({ options, values, caseSensitive, onChange, searchFil
       {items.length > 0 ? (
         <>
           <List
-            height={height}
-            itemCount={items.length}
-            itemSize={ITEM_HEIGHT}
-            itemData={{ items, values: selectedItems, onCheckedChanged, className: styles.filterListRow }}
-            width="100%"
+            rowComponent={ItemRenderer}
+            rowCount={items.length}
+            rowHeight={ITEM_HEIGHT}
+            rowProps={{ items, values: selectedItems, onCheckedChanged, className: styles.filterListRow }}
+            style={{
+              height,
+              width: '100%',
+            }}
             className={styles.filterList}
-          >
-            {ItemRenderer}
-          </List>
+          />
           <div
             className={styles.filterListRow}
             data-testid={selectors.components.Panels.Visualization.TableNG.Filters.SelectAll}
@@ -193,16 +194,21 @@ export const FilterList = ({ options, values, caseSensitive, onChange, searchFil
   );
 };
 
-interface ItemRendererProps extends ListChildComponentProps {
-  data: {
-    onCheckedChanged: (option: SelectableValue) => (event: React.FormEvent<HTMLInputElement>) => void;
-    items: SelectableValue[];
-    values: SelectableValue[];
-    className: string;
-  };
+interface ItemRendererProps {
+  onCheckedChanged: (option: SelectableValue) => (event: React.FormEvent<HTMLInputElement>) => void;
+  items: SelectableValue[];
+  values: SelectableValue[];
+  className: string;
 }
 
-function ItemRenderer({ index, style, data: { onCheckedChanged, items, values, className } }: ItemRendererProps) {
+function ItemRenderer({
+  index,
+  style,
+  onCheckedChanged,
+  items,
+  values,
+  className,
+}: RowComponentProps<ItemRendererProps>) {
   const option = items[index];
   const { value, label } = option;
   const isChecked = values.find((s) => s.value === value) !== undefined;
diff --git a/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx b/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx
index 273f97d684f..8b0c044bfa1 100644
--- a/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx
+++ b/packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx
@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import { useCallback, useMemo } from 'react';
 import * as React from 'react';
-import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
+import { List, type RowComponentProps } from 'react-window';
 
 import { GrafanaTheme2, formattedValueToString, getValueFormat, SelectableValue } from '@grafana/data';
 import { t, Trans } from '@grafana/i18n';
@@ -202,15 +202,16 @@ export const FilterList = ({
       {items.length > 0 ? (
         <>
           <List
-            height={height}
-            itemCount={items.length}
-            itemSize={ITEM_HEIGHT}
-            itemData={{ items, values: selectedItems, onCheckedChanged, className: styles.filterListRow }}
-            width="100%"
+            rowComponent={ItemRenderer}
+            rowCount={items.length}
+            rowHeight={ITEM_HEIGHT}
+            rowProps={{ items, values: selectedItems, onCheckedChanged, className: styles.filterListRow }}
+            style={{
+              height,
+              width: '100%',
+            }}
             className={styles.filterList}
-          >
-            {ItemRenderer}
-          </List>
+          />
           <Stack direction="column" gap={0.25}>
             <div className={cx(styles.selectDivider)} />
             <div className={cx(styles.filterListRow)}>
@@ -233,16 +234,21 @@ export const FilterList = ({
   );
 };
 
-interface ItemRendererProps extends ListChildComponentProps {
-  data: {
-    onCheckedChanged: (option: SelectableValue) => (event: React.FormEvent<HTMLInputElement>) => void;
-    items: SelectableValue[];
-    values: SelectableValue[];
-    className: string;
-  };
+interface ItemRendererProps {
+  onCheckedChanged: (option: SelectableValue) => (event: React.FormEvent<HTMLInputElement>) => void;
+  items: SelectableValue[];
+  values: SelectableValue[];
+  className: string;
 }
 
-function ItemRenderer({ index, style, data: { onCheckedChanged, items, values, className } }: ItemRendererProps) {
+function ItemRenderer({
+  index,
+  style,
+  onCheckedChanged,
+  items,
+  values,
+  className,
+}: RowComponentProps<ItemRendererProps>) {
   const option = items[index];
   const { value, label } = option;
   const isChecked = values.find((s) => s.value === value) !== undefined;