refactor: Remove usages of reactable from TimeTable (#11046)

* Use ListView instead of reactable

* Refactor TimeTable

* Spark column width fix

superset-frontend/src/visualizations/TimeTable/TimeTable.jsx

@@ -20,14 +20,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Mustache from 'mustache';
 import { scaleLinear } from 'd3-scale';
-import { Table, Thead, Th, Tr, Td } from 'reactable-arc';
 import { formatNumber, formatTime } from '@superset-ui/core';
 import {
   InfoTooltipWithTrigger,
   MetricOption,
 } from '@superset-ui/chart-controls';
 import moment from 'moment';
-
+import ListView from 'src/components/ListView';
+import { memoize } from 'lodash-es';
 import FormattedNumber from './FormattedNumber';
 import SparklineCell from './SparklineCell';
 import './TimeTable.less';
@@ -90,6 +90,68 @@ const defaultProps = {
 };
 
 class TimeTable extends React.PureComponent {
+  memoizedColumns = memoize(() => [
+    { accessor: 'metric', Header: 'Metric' },
+    ...this.props.columnConfigs.map((columnConfig, i) => ({
+      accessor: columnConfig.key,
+      cellProps: columnConfig.colType === 'spark' && { style: { width: '1%' } },
+      Header: () => (
+        <>
+          {columnConfig.label}{' '}
+          {columnConfig.tooltip && (
+            <InfoTooltipWithTrigger
+              tooltip={columnConfig.tooltip}
+              label={`tt-col-${i}`}
+              placement="top"
+            />
+          )}
+        </>
+      ),
+      sortType: (rowA, rowB, columnId) => {
+        const rowAVal = rowA.values[columnId].props['data-value'];
+        const rowBVal = rowB.values[columnId].props['data-value'];
+        return rowAVal - rowBVal;
+      },
+    })),
+  ]);
+
+  memoizedRows = memoize(() => {
+    const entries = Object.keys(this.props.data)
+      .sort()
+      .map(time => ({ ...this.props.data[time], time }));
+    const reversedEntries = entries.concat().reverse();
+
+    return this.props.rows.map(row => {
+      const valueField = row.label || row.metric_name;
+      const cellValues = this.props.columnConfigs.reduce(
+        (acc, columnConfig) => {
+          if (columnConfig.colType === 'spark') {
+            return {
+              ...acc,
+              [columnConfig.key]: this.renderSparklineCell(
+                valueField,
+                columnConfig,
+                entries,
+              ),
+            };
+          }
+          return {
+            ...acc,
+            [columnConfig.key]: this.renderValueCell(
+              valueField,
+              columnConfig,
+              reversedEntries,
+            ),
+          };
+        },
+        {},
+      );
+      return { ...row, ...cellValues, metric: this.renderLeftCell(row) };
+    });
+  });
+
+  initialSort = [{ id: 'metric', desc: false }];
+
   renderLeftCell(row) {
     const { rowType, url } = this.props;
     const context = { metric: row };
@@ -107,10 +169,9 @@ class TimeTable extends React.PureComponent {
       return column.label;
     }
 
-    const metric = row;
     return (
       <MetricOption
-        metric={metric}
+        metric={row}
         url={fullUrl}
         showFormula={false}
         openInNewWindow
@@ -136,32 +197,27 @@ class TimeTable extends React.PureComponent {
     }
 
     return (
-      <Td
-        column={column.key}
-        key={column.key}
-        value={sparkData[sparkData.length - 1]}
-      >
-        <SparklineCell
-          width={parseInt(column.width, 10) || 300}
-          height={parseInt(column.height, 10) || 50}
-          data={sparkData}
-          ariaLabel={`spark-${valueField}`}
-          numberFormat={column.d3format}
-          yAxisBounds={column.yAxisBounds}
-          showYAxis={column.showYAxis}
-          renderTooltip={({ index }) => (
+      <SparklineCell
+        width={parseInt(column.width, 10) || 300}
+        height={parseInt(column.height, 10) || 50}
+        data={sparkData}
+        data-value={sparkData[sparkData.length - 1]}
+        ariaLabel={`spark-${valueField}`}
+        numberFormat={column.d3format}
+        yAxisBounds={column.yAxisBounds}
+        showYAxis={column.showYAxis}
+        renderTooltip={({ index }) => (
+          <div>
+            <strong>{formatNumber(column.d3format, sparkData[index])}</strong>
             <div>
-              <strong>{formatNumber(column.d3format, sparkData[index])}</strong>
-              <div>
-                {formatTime(
-                  column.dateFormat,
-                  moment.utc(entries[index].time).toDate(),
-                )}
-              </div>
+              {formatTime(
+                column.dateFormat,
+                moment.utc(entries[index].time).toDate(),
+              )}
             </div>
-          )}
-        />
-      </Td>
+          </div>
+        )}
+      />
     );
   }
 
@@ -204,10 +260,9 @@ class TimeTable extends React.PureComponent {
     const color = colorFromBounds(v, column.bounds);
 
     return (
-      <Td
-        column={column.key}
+      <span
         key={column.key}
-        value={v}
+        data-value={v}
         style={
           color && {
             boxShadow: `inset 0px -2.5px 0px 0px ${color}`,
@@ -216,87 +271,34 @@ class TimeTable extends React.PureComponent {
         }
       >
         {errorMsg ? (
-          <div>{errorMsg}</div>
+          { errorMsg }
         ) : (
-          <div style={{ color }}>
+          <span style={{ color }}>
             <FormattedNumber num={v} format={column.d3format} />
-          </div>
+          </span>
         )}
-      </Td>
-    );
-  }
-
-  renderRow(row, entries, reversedEntries) {
-    const { columnConfigs } = this.props;
-    const valueField = row.label || row.metric_name;
-    const leftCell = this.renderLeftCell(row);
-
-    return (
-      <Tr key={leftCell}>
-        <Td column="metric" data={leftCell}>
-          {leftCell}
-        </Td>
-        {columnConfigs.map(c =>
-          c.colType === 'spark'
-            ? this.renderSparklineCell(valueField, c, entries)
-            : this.renderValueCell(valueField, c, reversedEntries),
-        )}
-      </Tr>
+      </span>
     );
   }
 
   render() {
-    const {
-      className,
-      height,
-      data,
-      columnConfigs,
-      rowType,
-      rows,
-    } = this.props;
-
-    const entries = Object.keys(data)
-      .sort()
-      .map(time => ({ ...data[time], time }));
-    const reversedEntries = entries.concat().reverse();
-
-    const defaultSort =
-      rowType === 'column' && columnConfigs.length
-        ? {
-            column: columnConfigs[0].key,
-            direction: 'desc',
-          }
-        : false;
+    const { className, height } = this.props;
 
     return (
       <div className={`time-table ${className}`} style={{ height }}>
-        <Table
-          className="table table-no-hover"
-          defaultSort={defaultSort}
-          sortBy={defaultSort}
-          sortable={columnConfigs.map(c => c.key)}
-        >
-          <Thead>
-            <Th column="metric">Metric</Th>
-            {columnConfigs.map((c, i) => (
-              <Th
-                key={c.key}
-                column={c.key}
-                width={c.colType === 'spark' ? '1%' : null}
-              >
-                {c.label}{' '}
-                {c.tooltip && (
-                  <InfoTooltipWithTrigger
-                    tooltip={c.tooltip}
-                    label={`tt-col-${i}`}
-                    placement="top"
-                  />
-                )}
-              </Th>
-            ))}
-          </Thead>
-          {rows.map(row => this.renderRow(row, entries, reversedEntries))}
-        </Table>
+        <ListView
+          columns={this.memoizedColumns()}
+          data={this.memoizedRows()}
+          count={0}
+          // we don't use pagination
+          pageSize={0}
+          initialSort={this.initialSort}
+          fetchData={() => {}}
+          loading={false}
+          sticky={false}
+          fullHeight
+          manualSortBy={false}
+        />
       </div>
     );
   }