Documentation

Live Updates

Push cell changes in real time with updateData.

Update a cell

Provide getRowId, then call updateData with rowId (preferred) or rowIndex into your source rows array. Set cellUpdateFlash to highlight the cell when it changes.

React TSX

Copy

const tableRef = useRef(null);

<SimpleTable
  ref={tableRef}
  columns={columns}
  rows={rows}
  getRowId={({ row }) => row.id}
  cellUpdateFlash
/>

// Update the price cell on the row with this id.
tableRef.current?.updateData({
  accessor: "price",
  rowId: targetId,
  newValue: 29.99,
});

Charts

Chart columns accept array values the same way — update the series with updateData. See Chart Columns. For the full table API, see Programmatic Control.

Example

Prices, stock, and chart series update on a timer. Use Code or StackBlitz for the full example.

React TSXLiveUpdateDemo.tsx

Copy

1import { useRef, useEffect } from "react";
2import { SimpleTable } from "@simple-table/react";
3import type { TableAPI } from "@simple-table/react";
4import { liveUpdateConfig } from "./live-update.demo-data";
5import "@simple-table/react/styles.css";
6
7const LiveUpdateDemo = () => {
8  const tableRef = useRef<TableAPI>(null);
9
10  useEffect(() => {
11    const id = setInterval(() => {
12      const rowIndex = Math.floor(Math.random() * liveUpdateConfig.rows.length);
13      const newPrice = +(Math.random() * 100).toFixed(2);
14      // Push a single-cell update without re-rendering the whole table
15      tableRef.current?.updateData({ accessor: "price", rowIndex, newValue: newPrice });
16    }, 500);
17    return () => clearInterval(id);
18  }, []);
19
20  return (
21    <SimpleTable
22      ref={tableRef}
23      columns={liveUpdateConfig.headers}
24      rows={liveUpdateConfig.rows}
25      height="400px"
26    />
27  );
28};
29
30export default LiveUpdateDemo;
31

StackBlitz

Props

Live Update Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`cellUpdateFlash` boolean	Optional	Flashes a cell when its value is updated via updateData.

updateData parameters

updateData

Property	Required	Description	Example
Property	Required	Description	Example
`accessor` string	Required	Column accessor for the cell to update.
`rowId` string \| number	Optional	Stable row id from getRowId. Preferred. Wins when both rowId and rowIndex are passed.
`rowIndex` number	Optional	Zero-based index into your source rows array (not sorted/visible order). Use when you don't have a rowId.
`newValue` any	Required	New cell value.