diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index 493c85862dd..2df351259ac 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -175,8 +175,6 @@ export const Table: FC = memo((props: Props) => { useResizeColumns ); - const { fields } = data; - const RenderRow = React.useCallback( ({ index: rowIndex, style }) => { const row = rows[rowIndex]; @@ -186,7 +184,6 @@ export const Table: FC = memo((props: Props) => { {row.cells.map((cell: Cell, index: number) => ( = memo((props: Props) => { ); }, - [fields, onCellFilterAdded, prepareRow, rows, tableStyles] + [onCellFilterAdded, prepareRow, rows, tableStyles] ); const headerHeight = noHeader ? 0 : tableStyles.cellHeight; diff --git a/packages/grafana-ui/src/components/Table/TableCell.tsx b/packages/grafana-ui/src/components/Table/TableCell.tsx index 97bc8a071c3..6c373707773 100644 --- a/packages/grafana-ui/src/components/Table/TableCell.tsx +++ b/packages/grafana-ui/src/components/Table/TableCell.tsx @@ -1,20 +1,19 @@ import React, { FC } from 'react'; import { Cell } from 'react-table'; -import { Field } from '@grafana/data'; -import { TableFilterActionCallback } from './types'; +import { GrafanaTableColumn, TableFilterActionCallback } from './types'; import { TableStyles } from './styles'; export interface Props { cell: Cell; - field: Field; tableStyles: TableStyles; onCellFilterAdded?: TableFilterActionCallback; columnIndex: number; columnCount: number; } -export const TableCell: FC = ({ cell, field, tableStyles, onCellFilterAdded, columnIndex, columnCount }) => { +export const TableCell: FC = ({ cell, tableStyles, onCellFilterAdded, columnIndex, columnCount }) => { const cellProps = cell.getCellProps(); + const field = ((cell.column as any) as GrafanaTableColumn).field; if (!field.display) { return null; diff --git a/packages/grafana-ui/src/components/Table/types.ts b/packages/grafana-ui/src/components/Table/types.ts index 8076dc48cf0..aa7480bb35e 100644 --- a/packages/grafana-ui/src/components/Table/types.ts +++ b/packages/grafana-ui/src/components/Table/types.ts @@ -1,7 +1,8 @@ -import { CellProps } from 'react-table'; -import { Field, KeyValue } from '@grafana/data'; +import { CellProps, Column, Row } from 'react-table'; +import { Field, KeyValue, SelectableValue } from '@grafana/data'; import { TableStyles } from './styles'; import { FC } from 'react'; +import { Property } from 'csstype'; export { TableFieldOptions, TableCellDisplayMode, FieldTextAlignment } from '@grafana/schema'; @@ -33,3 +34,11 @@ export interface TableCellProps extends CellProps { export type CellComponent = FC; export type FooterItem = Array> | string | undefined; + +export type GrafanaTableColumn = Column & { + field: Field; + sortType: 'number' | 'basic' | 'alphanumeric-insensitive'; + filter: (rows: Row[], id: string, filterValues?: SelectableValue[]) => SelectableValue[]; + justifyContent: Property.JustifyContent; + minWidth: number; +}; diff --git a/packages/grafana-ui/src/components/Table/utils.test.ts b/packages/grafana-ui/src/components/Table/utils.test.ts index a8319dcb0d8..f710638701c 100644 --- a/packages/grafana-ui/src/components/Table/utils.test.ts +++ b/packages/grafana-ui/src/components/Table/utils.test.ts @@ -55,6 +55,13 @@ describe('Table utils', () => { expect(columns[0].width).toBe(450); expect(columns[1].width).toBe(100); }); + + it('Should set field on columns', () => { + const columns = getColumns(getData(), 1000, 120); + + expect(columns[0].field.name).toBe('Time'); + expect(columns[1].field.name).toBe('Value'); + }); }); describe('getTextAlign', () => { diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts index 79d9cee4787..360e2e2f76f 100644 --- a/packages/grafana-ui/src/components/Table/utils.ts +++ b/packages/grafana-ui/src/components/Table/utils.ts @@ -1,4 +1,4 @@ -import { Column, Row } from 'react-table'; +import { Row } from 'react-table'; import memoizeOne from 'memoize-one'; import { Property } from 'csstype'; import { @@ -12,7 +12,7 @@ import { import { DefaultCell } from './DefaultCell'; import { BarGaugeCell } from './BarGaugeCell'; -import { CellComponent, TableCellDisplayMode, TableFieldOptions, FooterItem } from './types'; +import { CellComponent, TableCellDisplayMode, TableFieldOptions, FooterItem, GrafanaTableColumn } from './types'; import { JSONViewCell } from './JSONViewCell'; import { ImageCell } from './ImageCell'; import { getFooterValue } from './FooterRow'; @@ -47,8 +47,8 @@ export function getColumns( availableWidth: number, columnMinWidth: number, footerValues?: FooterItem[] -): Column[] { - const columns: any[] = []; +): GrafanaTableColumn[] { + const columns: GrafanaTableColumn[] = []; let fieldCountWithoutWidth = 0; for (const [fieldIndex, field] of data.fields.entries()) { @@ -64,7 +64,7 @@ export function getColumns( fieldCountWithoutWidth++; } - const selectSortType = (type: FieldType): string => { + const selectSortType = (type: FieldType) => { switch (type) { case FieldType.number: return 'number'; @@ -79,13 +79,14 @@ export function getColumns( columns.push({ Cell, id: fieldIndex.toString(), + field: field, Header: getFieldDisplayName(field, data), accessor: (row: any, i: number) => { return field.values.get(i); }, sortType: selectSortType(field.type), width: fieldTableOptions.width, - minWidth: fieldTableOptions.minWidth || columnMinWidth, + minWidth: fieldTableOptions.minWidth ?? columnMinWidth, filter: memoizeOne(filterByValue(field)), justifyContent: getTextAlign(field), Footer: getFooterValue(fieldIndex, footerValues),