如何在React中创建Superset风格的时间序列表格？

1. 基于Plotly的实现方案 #

Plotly的React绑定可以快速实现类似Superset风格的时间序列表格，自带样式定制和基础交互能力。

安装依赖

npm install react-plotly.js plotly.js

核心代码示例

import React from 'react';
import Plot from 'react-plotly.js';

const TimeSeriesTable = () => {
  // 模拟时间序列数据
  const rowData = [
    { timestamp: '2024-05-01T00:00:00', metric1: 120, metric2: 85, metric3: 45 },
    { timestamp: '2024-05-01T01:00:00', metric1: 135, metric2: 92, metric3: 50 },
    { timestamp: '2024-05-01T02:00:00', metric1: 118, metric2: 88, metric3: 48 },
    { timestamp: '2024-05-01T03:00:00', metric1: 142, metric2: 95, metric3: 52 },
  ];

  // 提取并格式化表格列数据
  const formattedTimestamps = rowData.map(item => new Date(item.timestamp).toLocaleString());
  const metric1Values = rowData.map(item => item.metric1);
  const metric2Values = rowData.map(item => item.metric2);
  const metric3Values = rowData.map(item => item.metric3);

  return (
    <Plot
      data={[
        {
          type: 'table',
          header: {
            values: ['<b>时间戳</b>', '<b>指标1</b>', '<b>指标2</b>', '<b>指标3</b>'],
            align: 'left',
            fill: { color: '#f0f2f5' },
            font: { family: 'Arial', size: 12, color: '#333' },
            line: { color: '#ddd', width: 1 }
          },
          cells: {
            values: [formattedTimestamps, metric1Values, metric2Values, metric3Values],
            align: 'left',
            fill: {
              color: [
                '#ffffff',
                // 指标1超过130时高亮
                metric1Values.map(val => val > 130 ? '#e8f5e9' : '#ffffff'),
                // 指标2超过90时高亮
                metric2Values.map(val => val > 90 ? '#e3f2fd' : '#ffffff'),
                '#ffffff'
              ]
            },
            font: { family: 'Arial', size: 11, color: '#555' },
            line: { color: '#ddd', width: 0.5 }
          }
        }
      ]}
      layout={{
        width: '100%',
        height: 500,
        margin: { l: 10, r: 10, t: 30, b: 10 },
        title: { text: '时间序列指标统计表', font: { size: 16 } }
      }}
      config={{ responsive: true }}
    />
  );
};

export default TimeSeriesTable;

关键特性说明

• 时间格式化：用toLocaleString()快速将ISO时间转为易读格式，也可结合date-fns/moment.js实现自定义格式
• 条件高亮：通过fill.color根据指标值动态设置单元格背景色，匹配Superset的表格高亮逻辑
• 响应式适配：开启config.responsive让表格自适应容器宽度

2. 备选方案：AG Grid（复杂场景首选） #

如果需要排序、筛选、分页、时间范围快速选择等进阶表格功能，AG Grid是更专业的选择：

安装依赖

npm install ag-grid-react ag-grid-community

核心代码示例

import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const TimeSeriesAgGrid = () => {
  const columnDefs = [
    { 
      field: 'timestamp', 
      headerName: '时间戳', 
      sortable: true, 
      filter: true,
      valueFormatter: params => new Date(params.value).toLocaleString() 
    },
    { 
      field: 'metric1', 
      headerName: '指标1', 
      sortable: true, 
      filter: true,
      cellStyle: params => params.value > 130 ? { backgroundColor: '#e8f5e9' } : {} 
    },
    { 
      field: 'metric2', 
      headerName: '指标2', 
      sortable: true, 
      filter: true,
      cellStyle: params => params.value > 90 ? { backgroundColor: '#e3f2fd' } : {} 
    },
    { field: 'metric3', headerName: '指标3', sortable: true, filter: true }
  ];

  const rowData = [
    { timestamp: '2024-05-01T00:00:00', metric1: 120, metric2: 85, metric3: 45 },
    { timestamp: '2024-05-01T01:00:00', metric1: 135, metric2: 92, metric3: 50 },
  ];

  return (
    <div className="ag-theme-alpine" style={{ height: 500, width: '100%' }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
        pagination={true}
        paginationPageSize={10}
        enableSorting={true}
        enableFilter={true}
      />
    </div>
  );
};

export default TimeSeriesAgGrid;

内容的提问来源于stack exchange，提问作者javierlu