public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

convert Table filters

Browse Source
This commit is contained in:
Ashley Harrison
2025-12-01 11:11:14 +00:00
parent 2ae4ff8b4d
commit cd50a4cef7
2 changed files with 46 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/Table/TableNG/Filter/FilterList.tsx
+23 -17
View File
@@ -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;
packages/grafana-ui/src/components/Table/TableRT/FilterList.tsx
+23 -17
View File
@@ -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;