The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
grafana/packages/grafana-ui/src/components/Table/TableCell.tsx

66 lines
1.4 KiB

import React from 'react';
import { Cell } from 'react-table';
import { TimeRange, DataFrame } from '@grafana/data';
import { TableStyles } from './styles';
import { GrafanaTableColumn, TableFilterActionCallback } from './types';
export interface Props {
cell: Cell;
tableStyles: TableStyles;
onCellFilterAdded?: TableFilterActionCallback;
columnIndex: number;
columnCount: number;
timeRange?: TimeRange;
userProps?: object;
frame: DataFrame;
rowStyled?: boolean;
Table Panel: Enable text wrapping (#86895) * Calculate row height * Move things around * Update getItemSize to use text bounding box * Update types * Cleanups and reminders * Calculate line height * Update line height calculation * Remove debugging * Add cell option editing * Prettier * Use field configured for text wrapping * Add TODO * Make sure column configuration is correct * Update height heuristic and hover behavior * Disable overflow on hover with text wrapping * Update heuristic * Clean things up * Color background cell options * Fix tests * Prettier * React deps * Remove old hook dep * Fix type errors * Update label and description for editor * Fix non-wrapped case * Make sure color background works * Prettier * Address review comments * fix prettier * Add heuristic for field sizing * Fix up logic * Prettier * Fix test * Oh prettier 🙈 * Don't wrap text on non-string fields * Add wrapping to color text cell * Prettier * Fix option not showing for auto cell type * Move longest field guessing into function * Clean things up * Add tests * Make sure text won't flake * Prettier * Remove spurious import * Ignore any in this case * Add alpha label * Prettier * Fix typecheck * Fix crash when sampling when there are undefined records * Update heuristic to take into account long strings * Prettier * Update scale factors * Update field index selection * Prettier --------- Co-authored-by: jev forsberg <jev.forsberg@grafana.com> Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
12 months ago
textWrapped?: boolean;
height?: number;
}
Table Panel: Enable text wrapping (#86895) * Calculate row height * Move things around * Update getItemSize to use text bounding box * Update types * Cleanups and reminders * Calculate line height * Update line height calculation * Remove debugging * Add cell option editing * Prettier * Use field configured for text wrapping * Add TODO * Make sure column configuration is correct * Update height heuristic and hover behavior * Disable overflow on hover with text wrapping * Update heuristic * Clean things up * Color background cell options * Fix tests * Prettier * React deps * Remove old hook dep * Fix type errors * Update label and description for editor * Fix non-wrapped case * Make sure color background works * Prettier * Address review comments * fix prettier * Add heuristic for field sizing * Fix up logic * Prettier * Fix test * Oh prettier 🙈 * Don't wrap text on non-string fields * Add wrapping to color text cell * Prettier * Fix option not showing for auto cell type * Move longest field guessing into function * Clean things up * Add tests * Make sure text won't flake * Prettier * Remove spurious import * Ignore any in this case * Add alpha label * Prettier * Fix typecheck * Fix crash when sampling when there are undefined records * Update heuristic to take into account long strings * Prettier * Update scale factors * Update field index selection * Prettier --------- Co-authored-by: jev forsberg <jev.forsberg@grafana.com> Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
12 months ago
export const TableCell = ({
cell,
tableStyles,
onCellFilterAdded,
timeRange,
userProps,
frame,
rowStyled,
textWrapped,
height,
}: Props) => {
const cellProps = cell.getCellProps();
const field = (cell.column as unknown as GrafanaTableColumn).field;
if (!field?.display) {
return null;
}
if (cellProps.style) {
cellProps.style.minWidth = cellProps.style.width;
cellProps.style.justifyContent = (cell.column as any).justifyContent;
}
let innerWidth = (typeof cell.column.width === 'number' ? cell.column.width : 24) - tableStyles.cellPadding * 2;
return (
<>
{cell.render('Cell', {
field,
tableStyles,
onCellFilterAdded,
cellProps,
innerWidth,
timeRange,
userProps,
frame,
rowStyled,
Table Panel: Enable text wrapping (#86895) * Calculate row height * Move things around * Update getItemSize to use text bounding box * Update types * Cleanups and reminders * Calculate line height * Update line height calculation * Remove debugging * Add cell option editing * Prettier * Use field configured for text wrapping * Add TODO * Make sure column configuration is correct * Update height heuristic and hover behavior * Disable overflow on hover with text wrapping * Update heuristic * Clean things up * Color background cell options * Fix tests * Prettier * React deps * Remove old hook dep * Fix type errors * Update label and description for editor * Fix non-wrapped case * Make sure color background works * Prettier * Address review comments * fix prettier * Add heuristic for field sizing * Fix up logic * Prettier * Fix test * Oh prettier 🙈 * Don't wrap text on non-string fields * Add wrapping to color text cell * Prettier * Fix option not showing for auto cell type * Move longest field guessing into function * Clean things up * Add tests * Make sure text won't flake * Prettier * Remove spurious import * Ignore any in this case * Add alpha label * Prettier * Fix typecheck * Fix crash when sampling when there are undefined records * Update heuristic to take into account long strings * Prettier * Update scale factors * Update field index selection * Prettier --------- Co-authored-by: jev forsberg <jev.forsberg@grafana.com> Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
12 months ago
textWrapped,
height,
})}
</>
);
};