Documentation

Live Updates

CodeSandbox

SimpleTable provides powerful tools for creating dynamic, real-time tables with data that updates on the fly. Using the tableRef and updateData API, you can update individual cells with smooth visual feedback through the cellUpdateFlash feature.

Basic Usage

To enable live updates in your table, follow these steps:

  1. Create a table reference - Create a ref using useRefand pass it to the tableRef prop
  2. Enable flash animation - Set the cellUpdateFlash prop to true to enable visual feedback on cell updates
  3. Update data - Call tableRef.current.updateData()with the appropriate parameters to update specific cells

Live Update Configuration

PropertyRequiredDescriptionExample
tableRef
React.RefObject<TableRefType>
Optional
React ref object that provides access to table methods for programmatic updates. Used to call updateData method.
cellUpdateFlash
boolean
Optional
Enables visual flash animation when cell values are updated programmatically. Provides user feedback for data changes.

The TableRef Interface

The TableRefType provides methods to interact with the table. Currently, it offers the updateData method:

updateData Method Parameters

PropertyRequiredDescriptionExample
accessor
string
Required
The column accessor/key that identifies which column to update.
rowIndex
number
Required
The zero-based index of the row to update.
newValue
any
Required
The new value to set in the specified cell.
React TSX
1// Example: Update multiple cells
2const updatePrices = () => {
3  // Update first row
4  tableRef.current?.updateData({
5    accessor: "price",
6    rowIndex: 0,
7    newValue: 25.99
8  });
9  
10  // Update third row
11  tableRef.current?.updateData({
12    accessor: "status", 
13    rowIndex: 2,
14    newValue: "updated"
15  });
16};

Cell Update Flash Animation

When cellUpdateFlash is enabled, cells will momentarily highlight when their value changes, providing a subtle visual cue to users:

React TSX
1<SimpleTable
2  cellUpdateFlash={true} // Enable the flash animation
3  defaultHeaders={headers}
4  rows={tableData}
5  tableRef={tableRef}
6/>

Important Notes

  • When updating cells, remember to also update your local state to keep it in sync with the table
  • The flash effect is subtle by design to avoid distracting users with too much motion
  • Updates are best used for small, incremental changes rather than complete table refreshes

Live Updates with Charts

Chart columns work seamlessly with live updates. You can update chart data in real-time while maintaining a fixed array length by adding new values and removing old ones. The demo above shows this in action with Stock Trend (line chart) and Sales Trend (bar chart) columns.

React TSX
1// Example: Update chart with new data point
2const updateStockHistory = (rowIndex: number, newStock: number) => {
3  // Get current history
4  const currentHistory = data[rowIndex].stockHistory as number[];
5  
6  // Add new value and remove oldest (keep array length constant)
7  const updatedHistory = [...currentHistory.slice(1), newStock];
8  
9  // Update the table
10  tableRef.current?.updateData({
11    accessor: "stockHistory",
12    rowIndex: rowIndex,
13    newValue: updatedHistory,
14  });
15};
16

17// Update both stock value and chart
18tableRef.current?.updateData({
19  accessor: "stock",
20  rowIndex: 0,
21  newValue: 150,
22});
23

24updateStockHistory(0, 150); // Add to chart

💡 Pro Tip

Use custom chartOptions colors (like green for stock and orange for sales) to make charts stand out against theme backgrounds. This is especially important for themes with blue row backgrounds where default blue chart colors would blend in. See the Chart Columns documentation for more details.

Real-world Use Cases

Live updates are particularly valuable in these scenarios:

  • Financial dashboards - Display real-time stock price changes and trades
  • Inventory management - Show live updates as items are purchased or restocked
  • Analytics dashboards - Present data metrics that update as new information arrives
  • Sports statistics - Display live game scores and player statistics
  • IoT monitoring - Show sensor readings that update in real-time