diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx index 3b95dd91599..55be6417742 100644 --- a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx +++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx @@ -1,13 +1,14 @@ import { css } from '@emotion/css'; -import { ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react'; +import { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; import { TableAutoCellOptions, TableCellDisplayMode } from '@grafana/schema'; import { useStyles2 } from '../../../../themes'; +import { t } from '../../../../utils/i18n'; import { IconButton } from '../../../IconButton/IconButton'; import { TableCellInspectorMode } from '../../TableCellInspector'; -import { CellColors, TableCellNGProps } from '../types'; +import { CellColors, FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR, TableCellNGProps } from '../types'; import { getCellColors, getTextAlign } from '../utils'; import { ActionsCell } from './ActionsCell'; @@ -34,6 +35,7 @@ export function TableCellNG(props: TableCellNGProps) { cellInspect, getActions, rowBg, + onCellFilterAdded, } = props; const { config: fieldConfig } = field; @@ -41,6 +43,8 @@ export function TableCellNG(props: TableCellNGProps) { const cellOptions = fieldConfig.custom?.cellOptions ?? defaultCellOptions; const { type: cellType } = cellOptions; + const showFilters = field.config.filterable && onCellFilterAdded; + const isRightAligned = getTextAlign(field) === 'flex-end'; const displayValue = field.display!(value); let colors: CellColors = { bgColor: '', textColor: '', bgHoverColor: '' }; @@ -160,25 +164,53 @@ export function TableCellNG(props: TableCellNGProps) { } }; + const onFilterFor = useCallback(() => { + if (onCellFilterAdded) { + onCellFilterAdded({ key: field.name, operator: FILTER_FOR_OPERATOR, value: String(value ?? '') }); + } + }, [field.name, onCellFilterAdded, value]); + + const onFilterOut = useCallback(() => { + if (onCellFilterAdded) { + onCellFilterAdded({ key: field.name, operator: FILTER_OUT_OPERATOR, value: String(value ?? '') }); + } + }, [field.name, onCellFilterAdded, value]); + return (