opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-03 05:08:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

TableNG: Use Set for tracking expanded rows (#108198)

Browse Source
This commit is contained in:
Leon Sorokin
2025-07-16 19:11:28 -05:00
committed by GitHub
parent 6b266ebc50
commit c7aa83f8d3
3 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
View File

@ -159,7 +159,7 @@ export function TableNG(props: TableNGProps) {
const defaultRowHeight = getDefaultRowHeight(theme, cellHeight);
const defaultHeaderHeight = getDefaultRowHeight(theme, TableCellHeight.Sm);
const [isInspecting, setIsInspecting] = useState(false);
const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
const [expandedRows, setExpandedRows] = useState(() => new Set<number>());
// vt scrollbar accounting for column auto-sizing
const visibleFields = useMemo(() => getVisibleFields(data.fields), [data.fields]);
@ -517,12 +517,19 @@ export function TableNG(props: TableNGProps) {
},
renderCell: ({ row }) => {
if (row.__depth === 0) {
const rowIdx = row.__index;
return (
<RowExpander
height={defaultRowHeight}
isExpanded={expandedRows[row.__index] ?? false}
isExpanded={expandedRows.has(rowIdx)}
onCellExpand={() => {
setExpandedRows({ ...expandedRows, [row.__index]: !expandedRows[row.__index] });
if (expandedRows.has(rowIdx)) {
expandedRows.delete(rowIdx);
} else {
expandedRows.add(rowIdx);
}
setExpandedRows(new Set(expandedRows));
}}
/>
);
@ -710,16 +717,11 @@ export function TableNG(props: TableNGProps) {
* this is passed to the top-level `renderRow` prop on DataGrid. applies aria attributes and custom event handlers.
*/
const renderRowFactory =
(
fields: Field[],
panelContext: PanelContext,
expandedRows: Record<string, boolean>,
enableSharedCrosshair: boolean
) =>
(fields: Field[], panelContext: PanelContext, expandedRows: Set<number>, enableSharedCrosshair: boolean) =>
(key: React.Key, props: RenderRowProps<TableRow, TableSummaryRow>): React.ReactNode => {
const { row } = props;
const rowIdx = row.__index;
const isExpanded = !!expandedRows[rowIdx];
const isExpanded = expandedRows.has(rowIdx);
// Don't render non expanded child rows
if (row.__depth === 1 && !isExpanded) {

6
packages/grafana-ui/src/components/Table/TableNG/hooks.ts
View File

@ -441,7 +441,7 @@ interface UseRowHeightOptions {
hasNestedFrames: boolean;
defaultHeight: number;
headerHeight: number;
expandedRows: Record<string, boolean>;
expandedRows: Set<number>;
typographyCtx: TypographyCtx;
}
@ -497,9 +497,9 @@ export function useRowHeight({
return (row: TableRow) => {
// nested rows
if (Number(row.__depth) > 0) {
if (row.__depth > 0) {
// if unexpanded, height === 0
if (!expandedRows[row.__index]) {
if (!expandedRows.has(row.__index)) {
return 0;
}

6
packages/grafana-ui/src/components/Table/TableNG/utils.ts
View File

@ -512,10 +512,10 @@ export const processNestedTableRows = (
const childRows: Map<number, TableRow> = new Map();
for (const row of rows) {
if (Number(row.__depth) === 0) {
if (row.__depth === 0) {
parentRows.push(row);
} else {
childRows.set(Number(row.__index), row);
childRows.set(row.__index, row);
}
}
@ -526,7 +526,7 @@ export const processNestedTableRows = (
const result: TableRow[] = [];
processedParents.forEach((row) => {
result.push(row);
const childRow = childRows.get(Number(row.__index));
const childRow = childRows.get(row.__index);
if (childRow) {
result.push(childRow);
}