-
- );
- }
-
- // Try to determine the longet field
- // TODO: do we wrap only one field?
- // What if there are multiple fields with long text?
- let longestField: Field | undefined = undefined;
- let textWrapField = undefined;
-
- if (fieldConfig) {
- longestField = guessLongestField(fieldConfig, data);
-
- data.fields.forEach((field) => {
- fieldConfig.overrides.forEach((override) => {
- const matcher = getFieldMatcher(override.matcher);
- if (matcher(field, data, [data])) {
- for (const property of override.properties) {
- if (property.id === 'custom.cellOptions' && property.value.wrapText) {
- textWrapField = field;
- }
- }
- }
- });
- });
- }
-
- return (
- <>
-
-
- {{ itemsRangeStart }} - {{ displayedEnd }} of {{ numRows }} rows
-
-
- )}
-
-
-
- {paginationEl}
-
-
- {inspectCell !== null && (
-
- {!noHeader && (
-
-
-
- ) : (
-
- {noValuesDisplayText}
-
- )}
- {footerItems && (
-
+ {actions && actions.map((action, i) =>
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ buttonsGap: css({
+ display: 'flex',
+ gap: 6,
+ }),
+});
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/AutoCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/AutoCell.tsx
new file mode 100644
index 00000000000..c484601c8b6
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/AutoCell.tsx
@@ -0,0 +1,94 @@
+import { css, cx } from '@emotion/css';
+import { Property } from 'csstype';
+
+import { GrafanaTheme2, formattedValueToString } from '@grafana/data';
+import { TableCellDisplayMode, TableCellOptions } from '@grafana/schema';
+
+import { useStyles2 } from '../../../../themes';
+import { clearLinkButtonStyles } from '../../../Button';
+import { DataLinksContextMenu } from '../../../DataLinks/DataLinksContextMenu';
+import { AutoCellProps } from '../types';
+import { getCellLinks } from '../utils';
+
+export default function AutoCell({ value, field, justifyContent, rowIdx, cellOptions }: AutoCellProps) {
+ const styles = useStyles2(getStyles, justifyContent);
+
+ const displayValue = field.display!(value);
+ const formattedValue = formattedValueToString(displayValue);
+ const hasLinks = Boolean(getCellLinks(field, rowIdx)?.length);
+ const clearButtonStyle = useStyles2(clearLinkButtonStyles);
+
+ return (
+
+ {hasLinks ? (
+ getCellLinks(field, rowIdx) || []}>
+ {(api) => {
+ if (api.openMenu) {
+ return (
+
+ );
+ } else {
+ return
+ ) : (
+ formattedValue
+ )}
+
+ );
+}
+
+const getLinkStyle = (
+ styles: ReturnType{formattedValue}
;
+ }
+ }}
+
+ {links &&
+ links.map((link, idx) => {
+ return (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+
+
+ {link.title}
+
+
+ );
+ })}
+
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ linkCell: css({
+ cursor: 'pointer',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ userSelect: 'text',
+ whiteSpace: 'nowrap',
+ color: theme.colors.text.link,
+ fontWeight: theme.typography.fontWeightMedium,
+ paddingRight: theme.spacing(1.5),
+ a: {
+ color: theme.colors.text.link,
+ },
+ '&:hover': {
+ textDecoration: 'underline',
+ color: theme.colors.text.link,
+ },
+ }),
+});
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/FooterCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/FooterCell.tsx
new file mode 100644
index 00000000000..61e62f2dedc
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/FooterCell.tsx
@@ -0,0 +1,80 @@
+import { css } from '@emotion/css';
+import { Property } from 'csstype';
+
+import { fieldReducers, KeyValue, ReducerID } from '@grafana/data';
+
+export type FooterItem = Array-
+ {props.value.map((v: KeyValue
- + {key} + {v[key]} + + ); + })} +
{
+ if (event.key === ' ') {
+ event.stopPropagation();
+ }
+ }}
+ >
+
+
+ {isColumnFilterable && (
+
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ headerCellLabel: css({
+ border: 'none',
+ padding: 0,
+ background: 'inherit',
+ cursor: 'pointer',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ fontWeight: theme.typography.fontWeightMedium,
+ display: 'flex',
+ alignItems: 'center',
+ marginRight: theme.spacing(0.5),
+ color: theme.colors.text.secondary,
+ gap: theme.spacing(1),
+
+ '&:hover': {
+ textDecoration: 'underline',
+ color: theme.colors.text.link,
+ },
+ }),
+ sortIcon: css({
+ marginLeft: theme.spacing(0.5),
+ }),
+});
+
+export { HeaderCell };
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx
new file mode 100644
index 00000000000..1165d960019
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx
@@ -0,0 +1,69 @@
+import { css } from '@emotion/css';
+import { Property } from 'csstype';
+import * as React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { TableCellDisplayMode } from '@grafana/schema';
+
+import { useStyles2 } from '../../../../themes';
+import { DataLinksContextMenu } from '../../../DataLinks/DataLinksContextMenu';
+import { ImageCellProps } from '../types';
+import { getCellLinks } from '../utils';
+
+const DATALINKS_HEIGHT_OFFSET = 10;
+
+export const ImageCell = ({ cellOptions, field, height, justifyContent, value, rowIdx }: ImageCellProps) => {
+ const calculatedHeight = height - DATALINKS_HEIGHT_OFFSET;
+ const styles = useStyles2(getStyles, calculatedHeight, justifyContent);
+ const hasLinks = Boolean(getCellLinks(field, rowIdx)?.length);
+
+ const { text } = field.display!(value);
+ const { alt, title } =
+ cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { alt: undefined, title: undefined };
+
+ const img =
+ {hasLinks ? (
+ getCellLinks(field, rowIdx) || []}>
+ {(api) => {
+ if (api.openMenu) {
+ return (
+
+ ) : (
+ img
+ )}
+
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2, height: number, justifyContent: Property.JustifyContent) => ({
+ image: css({
+ height,
+ width: 'auto',
+ }),
+ imageContainer: css({
+ display: 'flex',
+ justifyContent,
+ }),
+});
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/JSONCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/JSONCell.tsx
new file mode 100644
index 00000000000..d207d710448
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/JSONCell.tsx
@@ -0,0 +1,69 @@
+import { css, cx } from '@emotion/css';
+import { Property } from 'csstype';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../../../themes';
+import { Button, clearLinkButtonStyles } from '../../../Button';
+import { DataLinksContextMenu } from '../../../DataLinks/DataLinksContextMenu';
+import { JSONCellProps } from '../types';
+import { getCellLinks } from '../utils';
+
+export const JSONCell = ({ value, justifyContent, field, rowIdx }: JSONCellProps) => {
+ const styles = useStyles2(getStyles, justifyContent);
+ const clearButtonStyle = useStyles2(clearLinkButtonStyles);
+
+ let displayValue = value;
+
+ // Handle string values that might be JSON
+ if (typeof value === 'string') {
+ try {
+ const parsed = JSON.parse(value);
+ displayValue = JSON.stringify(parsed, null, ' ');
+ } catch {
+ displayValue = value; // Keep original if not valid JSON
+ }
+ } else {
+ // For non-string values, stringify them
+ try {
+ displayValue = JSON.stringify(value, null, ' ');
+ } catch (error) {
+ // Handle circular references or other stringify errors
+ displayValue = String(value);
+ }
+ }
+
+ const hasLinks = Boolean(getCellLinks(field, rowIdx)?.length);
+
+ // TODO: Implement actions
+ return (
+ {
+ if (e.key === 'Enter' && api.openMenu) {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+ api.openMenu(e as any);
+ }
+ }}
+ >
+ {img}
+
+ );
+ } else {
+ return img;
+ }
+ }}
+
+ {hasLinks ? (
+ getCellLinks(field, rowIdx) || []}>
+ {(api) => {
+ if (api.openMenu) {
+ return (
+
+ );
+ } else {
+ return <>{displayValue};
+ }
+ }}
+
+ ) : (
+ displayValue
+ )}
+
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2, justifyContent: Property.JustifyContent) => ({
+ jsonText: css({
+ display: 'flex',
+ cursor: 'pointer',
+ fontFamily: 'monospace',
+ justifyContent: justifyContent,
+ }),
+});
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx
new file mode 100644
index 00000000000..9088017d980
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/RowExpander.tsx
@@ -0,0 +1,36 @@
+import { css } from '@emotion/css';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useStyles2 } from '../../../../themes';
+import { Icon } from '../../../Icon/Icon';
+import { RowExpanderNGProps } from '../types';
+
+export function RowExpander({ height, onCellExpand, isExpanded }: RowExpanderNGProps) {
+ const styles = useStyles2(getStyles, height);
+ function handleKeyDown(e: React.KeyboardEvent
+
+ );
+}
+
+const getStyles = (theme: GrafanaTheme2, rowHeight: number) => ({
+ expanderCell: css({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ height: `${rowHeight}px`,
+ cursor: 'pointer',
+ }),
+});
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/SparklineCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/SparklineCell.tsx
new file mode 100644
index 00000000000..f020ad830d5
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/SparklineCell.tsx
@@ -0,0 +1,160 @@
+import { css } from '@emotion/css';
+import { Property } from 'csstype';
+import * as React from 'react';
+
+import {
+ FieldType,
+ FieldConfig,
+ getMinMaxAndDelta,
+ FieldSparkline,
+ isDataFrame,
+ Field,
+ isDataFrameWithValue,
+ GrafanaTheme2,
+} from '@grafana/data';
+import {
+ BarAlignment,
+ GraphDrawStyle,
+ GraphFieldConfig,
+ GraphGradientMode,
+ LineInterpolation,
+ TableSparklineCellOptions,
+ TableCellDisplayMode,
+ VisibilityMode,
+} from '@grafana/schema';
+
+import { useStyles2 } from '../../../../themes';
+import { measureText } from '../../../../utils';
+import { FormattedValueDisplay } from '../../../FormattedValueDisplay/FormattedValueDisplay';
+import { Sparkline } from '../../../Sparkline/Sparkline';
+import { SparklineCellProps } from '../types';
+import { getAlignmentFactor, getCellOptions } from '../utils';
+
+export const defaultSparklineCellConfig: TableSparklineCellOptions = {
+ type: TableCellDisplayMode.Sparkline,
+ drawStyle: GraphDrawStyle.Line,
+ lineInterpolation: LineInterpolation.Smooth,
+ lineWidth: 1,
+ fillOpacity: 17,
+ gradientMode: GraphGradientMode.Hue,
+ pointSize: 2,
+ barAlignment: BarAlignment.Center,
+ showPoints: VisibilityMode.Never,
+ hideValue: false,
+};
+
+export const SparklineCell = (props: SparklineCellProps) => {
+ const { field, value, theme, timeRange, rowIdx, justifyContent, width } = props;
+ const styles = useStyles2(getStyles, justifyContent);
+ const sparkline = getSparkline(value);
+
+ if (!sparkline) {
+ return <>{field.config.noValue || 'no data'};
+ }
+
+ // Get the step from the first two values to null-fill the x-axis based on timerange
+ if (sparkline.x && !sparkline.x.config.interval && sparkline.x.values.length > 1) {
+ sparkline.x.config.interval = sparkline.x.values[1] - sparkline.x.values[0];
+ }
+
+ // Remove non-finite values, e.g: NaN, +/-Infinity
+ sparkline.y.values = sparkline.y.values.map((v) => {
+ if (!Number.isFinite(v)) {
+ return null;
+ } else {
+ return v;
+ }
+ });
+
+ const range = getMinMaxAndDelta(sparkline.y);
+ sparkline.y.config.min = range.min;
+ sparkline.y.config.max = range.max;
+ sparkline.y.state = { range };
+ sparkline.timeRange = timeRange;
+
+ const cellOptions = getTableSparklineCellOptions(field);
+
+ const config: FieldConfig
+ {valueElement}
+
+ );
+};
+
+function getSparkline(value: unknown): FieldSparkline | undefined {
+ if (Array.isArray(value)) {
+ return {
+ y: {
+ name: 'test',
+ type: FieldType.number,
+ values: value,
+ config: {},
+ },
+ };
+ }
+
+ if (isDataFrame(value)) {
+ const timeField = value.fields.find((x) => x.type === FieldType.time);
+ const numberField = value.fields.find((x) => x.type === FieldType.number);
+
+ if (timeField && numberField) {
+ return { x: timeField, y: numberField };
+ }
+ }
+
+ return;
+}
+
+function getTableSparklineCellOptions(field: Field): TableSparklineCellOptions {
+ let options = getCellOptions(field);
+ if (options.type === TableCellDisplayMode.Auto) {
+ options = { ...options, type: TableCellDisplayMode.Sparkline };
+ }
+ if (options.type === TableCellDisplayMode.Sparkline) {
+ return options;
+ }
+ throw new Error(`Expected options type ${TableCellDisplayMode.Sparkline} but got ${options.type}`);
+}
+
+const getStyles = (theme: GrafanaTheme2, justifyContent: Property.JustifyContent | undefined) => ({
+ cellContainer: css({
+ display: 'flex',
+ width: '100%',
+ alignItems: 'center',
+ justifyContent,
+ }),
+});
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
new file mode 100644
index 00000000000..3b95dd91599
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/TableCellNG.tsx
@@ -0,0 +1,210 @@
+import { css } from '@emotion/css';
+import { ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { TableAutoCellOptions, TableCellDisplayMode } from '@grafana/schema';
+
+import { useStyles2 } from '../../../../themes';
+import { IconButton } from '../../../IconButton/IconButton';
+import { TableCellInspectorMode } from '../../TableCellInspector';
+import { CellColors, TableCellNGProps } from '../types';
+import { getCellColors, getTextAlign } from '../utils';
+
+import { ActionsCell } from './ActionsCell';
+import AutoCell from './AutoCell';
+import { BarGaugeCell } from './BarGaugeCell';
+import { DataLinksCell } from './DataLinksCell';
+import { ImageCell } from './ImageCell';
+import { JSONCell } from './JSONCell';
+import { SparklineCell } from './SparklineCell';
+
+export function TableCellNG(props: TableCellNGProps) {
+ const {
+ field,
+ frame,
+ value,
+ theme,
+ timeRange,
+ height,
+ rowIdx,
+ justifyContent,
+ shouldTextOverflow,
+ setIsInspecting,
+ setContextMenuProps,
+ cellInspect,
+ getActions,
+ rowBg,
+ } = props;
+
+ const { config: fieldConfig } = field;
+ const defaultCellOptions: TableAutoCellOptions = { type: TableCellDisplayMode.Auto };
+ const cellOptions = fieldConfig.custom?.cellOptions ?? defaultCellOptions;
+ const { type: cellType } = cellOptions;
+
+ const isRightAligned = getTextAlign(field) === 'flex-end';
+ const displayValue = field.display!(value);
+ 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);
+
+ // TODO
+ // TableNG provides either an overridden cell width or 'auto' as the cell width value.
+ // While the overridden value gives the exact cell width, 'auto' does not.
+ // Therefore, we need to determine the actual cell width from the DOM.
+ const divWidthRef = useRef
+ {cell}
+ {cellInspect && isHovered && (
+
+ );
+}
+
+const getStyles = (theme: GrafanaTheme2, isRightAligned: boolean, color: CellColors) => ({
+ cell: css({
+ height: '100%',
+ alignContent: 'center',
+ paddingInline: '8px',
+ // TODO: follow-up on this: change styles on hover on table row level
+ background: color.bgColor || 'none',
+ color: color.textColor,
+ '&:hover': { background: color.bgHoverColor },
+ }),
+ cellActions: css({
+ display: 'flex',
+ position: 'absolute',
+ top: '1px',
+ left: isRightAligned ? 0 : undefined,
+ right: isRightAligned ? undefined : 0,
+ margin: 'auto',
+ height: '100%',
+ background: theme.colors.background.secondary,
+ color: theme.colors.text.primary,
+ padding: '4px 0px 4px 4px',
+ }),
+});
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx
new file mode 100644
index 00000000000..dfbda8354fe
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Filter/Filter.tsx
@@ -0,0 +1,99 @@
+import { css, cx } from '@emotion/css';
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
+
+import { useStyles2 } from '../../../../themes';
+import { Icon } from '../../../Icon/Icon';
+import { Popover } from '../../../Tooltip/Popover';
+import { TableRow } from '../types';
+
+import { REGEX_OPERATOR } from './FilterList';
+import { FilterPopup } from './FilterPopup';
+
+interface Props {
+ name: string;
+ rows: any[];
+ filter: any;
+ setFilter: (value: any) => void;
+ field?: Field;
+ crossFilterOrder: string[];
+ crossFilterRows: { [key: string]: TableRow[] };
+}
+
+export const Filter = ({ name, rows, filter, setFilter, field, crossFilterOrder, crossFilterRows }: Props) => {
+ const filterValue = filter[name]?.filtered;
+
+ // get rows for cross filtering
+ const filterIndex = crossFilterOrder.indexOf(name);
+ let filteredRows: TableRow[];
+ if (filterIndex > 0) {
+ // current filter list should be based on the previous filter list
+ const previousFilterName = crossFilterOrder[filterIndex - 1];
+ filteredRows = crossFilterRows[previousFilterName];
+ } else if (filterIndex === -1 && crossFilterOrder.length > 0) {
+ // current filter list should be based on the last filter list
+ const previousFilterName = crossFilterOrder[crossFilterOrder.length - 1];
+ filteredRows = crossFilterRows[previousFilterName];
+ } else {
+ filteredRows = rows;
+ }
+
+ const ref = useRef
+ {
+ setContextMenuProps({
+ value: String(value ?? ''),
+ mode:
+ cellType === TableCellDisplayMode.JSONView
+ ? TableCellInspectorMode.code
+ : TableCellInspectorMode.text,
+ });
+ setIsInspecting(true);
+ }}
+ />
+
+ )}
+ -
+ {ItemRenderer}
+
+
+
+
+ );
+}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ filterList: css({
+ label: 'filterList',
+ }),
+ filterListRow: css({
+ label: 'filterListRow',
+ cursor: 'pointer',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ padding: theme.spacing(0.5),
+
+ ':hover': {
+ backgroundColor: theme.colors.action.hover,
+ },
+ }),
+ selectDivider: css({
+ label: 'selectDivider',
+ width: '100%',
+ borderTop: `1px solid ${theme.colors.border.medium}`,
+ padding: theme.spacing(0.5, 2),
+ }),
+ noValuesLabel: css({
+ paddingTop: theme.spacing(1),
+ }),
+});
diff --git a/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx
new file mode 100644
index 00000000000..364254673a1
--- /dev/null
+++ b/packages/grafana-ui/src/components/Table/TableNG/Filter/FilterPopup.tsx
@@ -0,0 +1,167 @@
+import { css, cx } from '@emotion/css';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
+
+import { Button, ClickOutsideWrapper, IconButton, Label, Stack } from '../../..';
+import { useStyles2, useTheme2 } from '../../../../themes';
+import { Trans } from '../../../../utils/i18n';
+import { FilterType } from '../types';
+
+import { FilterList } from './FilterList';
+import { calculateUniqueFieldValues, getFilteredOptions, valuesToOptions } from './utils';
+
+interface Props {
+ name: string;
+ rows: any[];
+ filterValue: any;
+ setFilter: (value: any) => void;
+ onClose: () => void;
+ field?: Field;
+ searchFilter: string;
+ setSearchFilter: (value: string) => void;
+ operator: SelectableValue
+
+
+
+
+ {
+ setMatchCase((s) => !s);
+ }}
+ />
+
+
+
+
+
+
+
+
+ {clearFilterVisible && (
+
+
+
+ )}
+
+
+
+