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",
     "@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",

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<Props> = 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<Props> = memo(({ data, height, onCellClick, width, column
           {row.cells.map((cell: Cell, index: number) => (
             <TableCell
               key={index}
-              field={data.fields[cell.column.index]}
+              field={data.fields[index]}
               tableStyles={tableStyles}
               cell={cell}
               onCellClick={onCellClick}
@@ -70,10 +71,10 @@ export const Table: FC<Props> = memo(({ data, height, onCellClick, width, column
       <CustomScrollbar>
         {!noHeader && (
           <div>
-            {headerGroups.map((headerGroup: any) => (
+            {headerGroups.map((headerGroup: HeaderGroup) => (
               <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>
             ))}
@@ -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 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 { 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,