Chart Columns

1import { SimpleTable, HeaderObject } from "simple-table-core";
2
3const headers: HeaderObject[] = [
4  {
5    accessor: "product",
6    label: "Product",
7    width: 180,
8    type: "string",
9  },
10  {
11    accessor: "monthlySales",
12    label: "Monthly Sales (12mo)",
13    width: 150,
14    type: "lineAreaChart",
15    tooltip: "Sales trend over the past 12 months",
16    align: "center",
17  },
18  {
19    accessor: "quarterlyRevenue",
20    label: "Quarterly Revenue",
21    width: 140,
22    type: "barChart",
23    tooltip: "Revenue by quarter",
24    align: "center",
25  },
26];
27
28const rows = [
29  {
30    id: 1,
31    product: "Laptop Pro",
32    monthlySales: [150, 165, 142, 178, 195, 188, 203, 215, 198, 225, 240, 235],
33    quarterlyRevenue: [45000, 52000, 48000, 61000],
34  },
35  {
36    id: 2,
37    product: "Wireless Mouse",
38    monthlySales: [300, 315, 328, 342, 338, 355, 370, 368, 382, 395, 408, 415],
39    quarterlyRevenue: [12000, 15000, 18000, 21000],
40  },
41];
42
43<SimpleTable
44  defaultHeaders={headers}
45  rows={rows}
46  rowIdAccessor="id"
47/>

1{
2  accessor: "dailyViews",
3  label: "Daily Views (30d)",
4  width: 150,
5  type: "lineAreaChart",
6  tooltip: "Daily page views for the past 30 days",
7  align: "center",
8}
9
10// Data structure
11const row = {
12  dailyViews: [500, 520, 485, 550, 575, 590, 610, ...], // 30 values
13};

1{
2  accessor: "weeklyOrders",
3  label: "Weekly Orders",
4  width: 130,
5  type: "barChart",
6  tooltip: "Orders per week over the past 7 weeks",
7  align: "center",
8}
9
10// Data structure
11const row = {
12  weeklyOrders: [23, 28, 31, 25, 29, 35, 38], // 7 values
13};

1// Example: Update CPU history with live data
2const updateCPUHistory = (rowIndex: number, newValue: number) => {
3  const row = data[rowIndex];
4  const currentHistory = row.cpuHistory as number[];
5  
6  // Add new value and remove oldest (keep array length constant)
7  const updatedHistory = [...currentHistory.slice(1), newValue];
8  
9  tableRef.current?.updateData({
10    accessor: "cpuHistory",
11    rowIndex: rowIndex,
12    newValue: updatedHistory,
13  });
14};
15
16// Use with setInterval or WebSocket for real-time updates
17useEffect(() => {
18  const interval = setInterval(() => {
19    const newCPU = Math.random() * 100; // Simulate CPU reading
20    updateCPUHistory(0, newCPU);
21  }, 1000);
22  
23  return () => clearInterval(interval);
24}, []);

1// Line/area chart with custom options
2{
3  accessor: "cpuHistory",
4  label: "CPU Usage",
5  type: "lineAreaChart",
6  width: 150,
7  chartOptions: {
8    min: 0,           // Minimum value for scaling
9    max: 100,         // Maximum value for scaling
10    width: 120,       // Chart width in pixels
11    height: 35,       // Chart height in pixels
12    color: "#3b82f6", // Line color (overrides theme)
13    fillColor: "#93c5fd",     // Area fill color
14    fillOpacity: 0.3,         // Fill opacity (0-1)
15    strokeWidth: 2            // Line thickness
16  }
17}
18
19// Bar chart with custom options
20{
21  accessor: "quarterlyRevenue",
22  label: "Quarterly",
23  type: "barChart",
24  width: 140,
25  chartOptions: {
26    min: 0,           // Minimum value for scaling
27    max: 100000,      // Maximum value for scaling
28    width: 120,       // Chart width in pixels
29    height: 40,       // Chart height in pixels
30    color: "#10b981", // Bar color (overrides theme)
31    gap: 3            // Gap between bars in pixels
32  }
33}