TableNG: Add row colors (#102706)

* chore(table-ng): add row colors

* clean up

* fix params

* fix(table-ng): cell color background indexing
pull/102445/head^2
Ihor Yeromin 3 months ago committed by GitHub
parent a9e93fd137
commit 18b8a793a8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 8
      packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
  2. 27
      packages/grafana-ui/src/components/Table/TableNG/TableNG.tsx
  3. 1
      packages/grafana-ui/src/components/Table/TableNG/types.ts

@ -33,6 +33,7 @@ export function TableCellNG(props: TableCellNGProps) {
setContextMenuProps, setContextMenuProps,
cellInspect, cellInspect,
getActions, getActions,
rowBg,
} = props; } = props;
const { config: fieldConfig } = field; const { config: fieldConfig } = field;
@ -42,7 +43,12 @@ export function TableCellNG(props: TableCellNGProps) {
const isRightAligned = getTextAlign(field) === 'flex-end'; const isRightAligned = getTextAlign(field) === 'flex-end';
const displayValue = field.display!(value); const displayValue = field.display!(value);
const colors = useMemo(() => getCellColors(theme, cellOptions, displayValue), [theme, cellOptions, displayValue]); let colors: CellColors = { bgColor: '', textColor: '', bgHoverColor: '' };
if (rowBg) {
colors = rowBg(rowIdx);
} else {
colors = useMemo(() => getCellColors(theme, cellOptions, displayValue), [theme, cellOptions, displayValue]);
}
const styles = useStyles2(getStyles, isRightAligned, colors); const styles = useStyles2(getStyles, isRightAligned, colors);
// TODO // TODO

@ -40,9 +40,11 @@ import {
TableColumn, TableColumn,
TableFieldOptionsType, TableFieldOptionsType,
ScrollPosition, ScrollPosition,
CellColors,
} from './types'; } from './types';
import { import {
frameToRecords, frameToRecords,
getCellColors,
getComparator, getComparator,
getDefaultRowHeight, getDefaultRowHeight,
getFooterItemNG, getFooterItemNG,
@ -363,7 +365,8 @@ export function TableNG(props: TableNGProps) {
headerCellRefs, headerCellRefs,
isCountRowsSet, isCountRowsSet,
osContext, osContext,
rows, // INFO: sortedRows is for correct row indexing for cell background coloring
rows: sortedRows,
setContextMenuProps, setContextMenuProps,
setFilter, setFilter,
setIsInspecting, setIsInspecting,
@ -382,7 +385,7 @@ export function TableNG(props: TableNGProps) {
// Adjust table width to account for the scroll bar width // Adjust table width to account for the scroll bar width
availableWidth: width - (hasScroll ? TABLE.SCROLL_BAR_WIDTH + TABLE.SCROLL_BAR_MARGIN : 0), availableWidth: width - (hasScroll ? TABLE.SCROLL_BAR_WIDTH + TABLE.SCROLL_BAR_MARGIN : 0),
}), }),
[props.data, calcsRef, filter, expandedRows, expandedRows.length, footerOptions, width, hasScroll] // eslint-disable-line react-hooks/exhaustive-deps [props.data, calcsRef, filter, expandedRows, expandedRows.length, footerOptions, width, hasScroll, sortedRows] // eslint-disable-line react-hooks/exhaustive-deps
); );
// This effect needed to set header cells refs before row height calculation // This effect needed to set header cells refs before row height calculation
@ -647,6 +650,25 @@ export function mapFrameToDataGrid({
availableWidth -= COLUMN.EXPANDER_WIDTH; availableWidth -= COLUMN.EXPANDER_WIDTH;
} }
// Row background color function
let rowBg: Function | undefined = undefined;
for (const field of frame.fields) {
const fieldOptions = field.config.custom;
const cellOptionsExist = fieldOptions !== undefined && fieldOptions.cellOptions !== undefined;
if (
cellOptionsExist &&
fieldOptions.cellOptions.type === TableCellDisplayMode.ColorBackground &&
fieldOptions.cellOptions.applyToRow
) {
rowBg = (rowIndex: number): CellColors => {
const display = field.display!(field.values.get(rows[rowIndex].__index));
const colors = getCellColors(theme, fieldOptions.cellOptions, display);
return colors;
};
}
}
let fieldCountWithoutWidth = 0; let fieldCountWithoutWidth = 0;
frame.fields.map((field, fieldIndex) => { frame.fields.map((field, fieldIndex) => {
if (field.type === FieldType.nestedFrames) { if (field.type === FieldType.nestedFrames) {
@ -706,6 +728,7 @@ export function mapFrameToDataGrid({
setContextMenuProps={setContextMenuProps} setContextMenuProps={setContextMenuProps}
cellInspect={cellInspect} cellInspect={cellInspect}
getActions={getActions} getActions={getActions}
rowBg={rowBg}
/> />
); );
}, },

@ -147,6 +147,7 @@ export interface TableCellNGProps {
theme: GrafanaTheme2; theme: GrafanaTheme2;
timeRange: TimeRange; timeRange: TimeRange;
value: TableCellValue; value: TableCellValue;
rowBg: Function | undefined;
} }
/* ------------------------- Specialized Cell Props ------------------------- */ /* ------------------------- Specialized Cell Props ------------------------- */

Loading…
Cancel
Save