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

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