From a92bcb78a5b44e888db283e970ac270d2d8ecf08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Wed, 1 Apr 2020 14:24:17 +0200 Subject: [PATCH] ReactTable: upgrades react table to 7.0.0 and typings (#23247) * Chore: bumps react-table and types * Chore: reverts changes to root package.json * ReactTable: upgrades react-table to 7.0.0 and typings * Refactor: changes after PR comments --- packages/grafana-ui/package.json | 4 ++-- .../grafana-ui/src/components/Table/Table.tsx | 21 ++++++++++--------- .../grafana-ui/src/components/Table/utils.ts | 9 ++++++-- yarn.lock | 21 +++++++------------ 4 files changed, 28 insertions(+), 27 deletions(-) diff --git a/packages/grafana-ui/package.json b/packages/grafana-ui/package.json index a775eac84f7..0be5b169ec3 100644 --- a/packages/grafana-ui/package.json +++ b/packages/grafana-ui/package.json @@ -34,7 +34,7 @@ "@torkelo/react-select": "3.0.8", "@types/react-color": "3.0.1", "@types/react-select": "3.0.8", - "@types/react-table": "7.0.2", + "@types/react-table": "7.0.12", "@types/slate": "0.47.1", "@types/slate-react": "0.22.5", "bizcharts": "^3.5.8", @@ -59,7 +59,7 @@ "react-hook-form": "5.0.3", "react-popper": "1.3.3", "react-storybook-addon-props-combinations": "1.1.0", - "react-table": "7.0.0-rc.15", + "react-table": "7.0.0", "react-transition-group": "4.3.0", "slate": "0.47.8", "storybook-dark-mode": "0.4.0", diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx index a5ad19da3c8..4076162554b 100644 --- a/packages/grafana-ui/src/components/Table/Table.tsx +++ b/packages/grafana-ui/src/components/Table/Table.tsx @@ -1,15 +1,14 @@ import React, { FC, memo, useMemo } from 'react'; import { DataFrame, Field } from '@grafana/data'; -import { useSortBy, useTable, useBlockLayout, Cell } from 'react-table'; +import { Cell, Column, HeaderGroup, useBlockLayout, useSortBy, useTable } from 'react-table'; import { FixedSizeList } from 'react-window'; import useMeasure from 'react-use/lib/useMeasure'; -import { getColumns, getTableRows } from './utils'; +import { getColumns, getTableRows, getTextAlign } from './utils'; import { useTheme } from '../../themes'; import { TableFilterActionCallback } from './types'; import { getTableStyles } from './styles'; import { TableCell } from './TableCell'; import { Icon } from '../Icon/Icon'; -import { getTextAlign } from './utils'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; export interface Props { @@ -26,11 +25,13 @@ export const Table: FC = memo(({ data, height, onCellClick, width, column const theme = useTheme(); const [ref, headerRowMeasurements] = useMeasure(); const tableStyles = getTableStyles(theme); + const memoizedColumns = useMemo(() => getColumns(data, width, columnMinWidth ?? 150), [data, width, columnMinWidth]); + const memoizedData = useMemo(() => getTableRows(data), [data]); const { getTableProps, headerGroups, rows, prepareRow } = useTable( { - columns: useMemo(() => getColumns(data, width, columnMinWidth ?? 150), [data, width, columnMinWidth]), - data: useMemo(() => getTableRows(data), [data]), + columns: memoizedColumns, + data: memoizedData, }, useSortBy, useBlockLayout @@ -45,7 +46,7 @@ export const Table: FC = memo(({ data, height, onCellClick, width, column {row.cells.map((cell: Cell, index: number) => ( = memo(({ data, height, onCellClick, width, column {!noHeader && (
- {headerGroups.map((headerGroup: any) => ( + {headerGroups.map((headerGroup: HeaderGroup) => (
- {headerGroup.headers.map((column: any) => - renderHeaderCell(column, tableStyles.headerCell, data.fields[column.index]) + {headerGroup.headers.map((column: Column, index: number) => + renderHeaderCell(column, tableStyles.headerCell, data.fields[index]) )}
))} @@ -93,7 +94,7 @@ export const Table: FC = memo(({ data, height, onCellClick, width, column ); }); -function renderHeaderCell(column: any, className: string, field: Field) { +function renderHeaderCell(column: any, className: string, field?: Field) { const headerProps = column.getHeaderProps(column.getSortByToggleProps()); const fieldTextAlign = getTextAlign(field); diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts index ba2cb0cee3b..71203f41504 100644 --- a/packages/grafana-ui/src/components/Table/utils.ts +++ b/packages/grafana-ui/src/components/Table/utils.ts @@ -4,7 +4,7 @@ import { Column } from 'react-table'; import { DefaultCell } from './DefaultCell'; import { BarGaugeCell } from './BarGaugeCell'; import { BackgroundColoredCell } from './BackgroundColorCell'; -import { TableRow, TableFieldOptions, TableCellDisplayMode } from './types'; +import { TableCellDisplayMode, TableFieldOptions, TableRow } from './types'; export function getTableRows(data: DataFrame): TableRow[] { const tableData = []; @@ -21,7 +21,11 @@ export function getTableRows(data: DataFrame): TableRow[] { return tableData; } -export function getTextAlign(field: Field): TextAlignProperty { +export function getTextAlign(field?: Field): TextAlignProperty { + if (!field) { + return 'left'; + } + if (field.config.custom) { const custom = field.config.custom as TableFieldOptions; @@ -57,6 +61,7 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid columns.push({ Cell, + id: field.name, Header: field.name, accessor: field.name, width: fieldTableOptions.width, diff --git a/yarn.lock b/yarn.lock index 0b201c5020e..d95c6e2389e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5857,10 +5857,10 @@ dependencies: "@types/react" "*" -"@types/react-table@7.0.2": - version "7.0.2" - resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.0.2.tgz#184de5ad5a7c5aced08b49812002a4d2e8918cc0" - integrity sha512-sxvjV0JCk/ijCzENejXth99cFMnmucATaC31gz1bMk8iQwUDE2VYaw2QQTcDrzBxzastBQGdcLpcFIN61RvgIA== +"@types/react-table@7.0.12": + version "7.0.12" + resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.0.12.tgz#cb57c8dfb110f8c2d0f04b9d44a70f9235a13b27" + integrity sha512-x/8nFrCjr1ySs51pkHsDQz3t+nW94qS/M9mpyLoweJNd9YKFzJ2mbVcUshfcMOyR1/UR+6lfz2EKA1lzOoJz+w== dependencies: "@types/react" "*" @@ -8396,11 +8396,6 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-db@1.0.30000772: - version "1.0.30000772" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b" - integrity sha1-UarokXaChureSj2DGep21qAbUSs= - caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30000999: version "1.0.30000999" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz#427253a69ad7bea4aa8d8345687b8eec51ca0e43" @@ -20668,10 +20663,10 @@ react-syntax-highlighter@^11.0.2: prismjs "^1.8.4" refractor "^2.4.1" -react-table@7.0.0-rc.15: - version "7.0.0-rc.15" - resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.15.tgz#bb855e4e2abbb4aaf0ed2334404a41f3ada8e13a" - integrity sha512-ofMOlgrioHhhvHjvjsQkxvfQzU98cqwy6BjPGNwhLN1vhgXeWi0mUGreaCPvRenEbTiXsQbMl4k3Xmx3Mut8Rw== +react-table@7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0.tgz#3297e454cbffe916626b184f5394d7e7e098fa36" + integrity sha512-/RKUYLuqrupUs0qHdjdQLmgwdQ9mgXPnpshqv2T+OQUGhTu0XuLXVc6GOIywemXNf6qjL3dj81O6zALLK74Emw== react-test-renderer@16.12.0: version "16.12.0"