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

@@ -34,7 +34,7 @@
     "@torkelo/react-select": "3.0.8",
     "@torkelo/react-select": "3.0.8",
     "@types/react-color": "3.0.1",
     "@types/react-color": "3.0.1",
     "@types/react-select": "3.0.8",
     "@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": "0.47.1",
     "@types/slate-react": "0.22.5",
     "@types/slate-react": "0.22.5",
     "bizcharts": "^3.5.8",
     "bizcharts": "^3.5.8",
@@ -59,7 +59,7 @@
     "react-hook-form": "5.0.3",
     "react-hook-form": "5.0.3",
     "react-popper": "1.3.3",
     "react-popper": "1.3.3",
     "react-storybook-addon-props-combinations": "1.1.0",
     "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",
     "react-transition-group": "4.3.0",
     "slate": "0.47.8",
     "slate": "0.47.8",
     "storybook-dark-mode": "0.4.0",
     "storybook-dark-mode": "0.4.0",

packages/grafana-ui/src/components/Table/Table.tsx

 import React, { FC, memo, useMemo } from 'react';
 import React, { FC, memo, useMemo } from 'react';
 import { DataFrame, Field } from '@grafana/data';
 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 { FixedSizeList } from 'react-window';
 import useMeasure from 'react-use/lib/useMeasure';
 import useMeasure from 'react-use/lib/useMeasure';
-import { getColumns, getTableRows } from './utils';
+import { getColumns, getTableRows, getTextAlign } from './utils';
 import { useTheme } from '../../themes';
 import { useTheme } from '../../themes';
 import { TableFilterActionCallback } from './types';
 import { TableFilterActionCallback } from './types';
 import { getTableStyles } from './styles';
 import { getTableStyles } from './styles';
 import { TableCell } from './TableCell';
 import { TableCell } from './TableCell';
 import { Icon } from '../Icon/Icon';
 import { Icon } from '../Icon/Icon';
-import { getTextAlign } from './utils';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
 
 
 export interface Props {
 export interface Props {
@@ -26,11 +25,13 @@ export const Table: FC<Props> = memo(({ data, height, onCellClick, width, column
   const theme = useTheme();
   const theme = useTheme();
   const [ref, headerRowMeasurements] = useMeasure();
   const [ref, headerRowMeasurements] = useMeasure();
   const tableStyles = getTableStyles(theme);
   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(
   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,
     useSortBy,
     useBlockLayout
     useBlockLayout
@@ -45,7 +46,7 @@ export const Table: FC<Props> = memo(({ data, height, onCellClick, width, column
           {row.cells.map((cell: Cell, index: number) => (
           {row.cells.map((cell: Cell, index: number) => (
             <TableCell
             <TableCell
               key={index}
               key={index}
-              field={data.fields[cell.column.index]}
+              field={data.fields[index]}
               tableStyles={tableStyles}
               tableStyles={tableStyles}
               cell={cell}
               cell={cell}
               onCellClick={onCellClick}
               onCellClick={onCellClick}
@@ -70,10 +71,10 @@ export const Table: FC<Props> = memo(({ data, height, onCellClick, width, column
       <CustomScrollbar>
       <CustomScrollbar>
         {!noHeader && (
         {!noHeader && (
           <div>
           <div>
-            {headerGroups.map((headerGroup: any) => (
+            {headerGroups.map((headerGroup: HeaderGroup) => (
               <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()} ref={ref}>
               <div className={tableStyles.thead} {...headerGroup.getHeaderGroupProps()} ref={ref}>
-                {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])
                 )}
                 )}
               </div>
               </div>
             ))}
             ))}
@@ -93,7 +94,7 @@ export const Table: FC<Props> = 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 headerProps = column.getHeaderProps(column.getSortByToggleProps());
   const fieldTextAlign = getTextAlign(field);
   const fieldTextAlign = getTextAlign(field);
 
 

packages/grafana-ui/src/components/Table/utils.ts

@@ -4,7 +4,7 @@ import { Column } from 'react-table';
 import { DefaultCell } from './DefaultCell';
 import { DefaultCell } from './DefaultCell';
 import { BarGaugeCell } from './BarGaugeCell';
 import { BarGaugeCell } from './BarGaugeCell';
 import { BackgroundColoredCell } from './BackgroundColorCell';
 import { BackgroundColoredCell } from './BackgroundColorCell';
-import { TableRow, TableFieldOptions, TableCellDisplayMode } from './types';
+import { TableCellDisplayMode, TableFieldOptions, TableRow } from './types';
 
 
 export function getTableRows(data: DataFrame): TableRow[] {
 export function getTableRows(data: DataFrame): TableRow[] {
   const tableData = [];
   const tableData = [];
@@ -21,7 +21,11 @@ export function getTableRows(data: DataFrame): TableRow[] {
   return tableData;
   return tableData;
 }
 }
 
 
-export function getTextAlign(field: Field): TextAlignProperty {
+export function getTextAlign(field?: Field): TextAlignProperty {
+  if (!field) {
+    return 'left';
+  }
+
   if (field.config.custom) {
   if (field.config.custom) {
     const custom = field.config.custom as TableFieldOptions;
     const custom = field.config.custom as TableFieldOptions;
 
 
@@ -57,6 +61,7 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
 
 
     columns.push({
     columns.push({
       Cell,
       Cell,
+      id: field.name,
       Header: field.name,
       Header: field.name,
       accessor: field.name,
       accessor: field.name,
       width: fieldTableOptions.width,
       width: fieldTableOptions.width,

yarn.lock

@@ -5857,10 +5857,10 @@
   dependencies:
   dependencies:
     "@types/react" "*"
     "@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:
   dependencies:
     "@types/react" "*"
     "@types/react" "*"
 
 
@@ -8396,11 +8396,6 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
     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:
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30000999:
   version "1.0.30000999"
   version "1.0.30000999"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz#427253a69ad7bea4aa8d8345687b8eec51ca0e43"
   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"
     prismjs "^1.8.4"
     refractor "^2.4.1"
     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:
 react-test-renderer@16.12.0:
   version "16.12.0"
   version "16.12.0"