React Grid Live Data Updates

    The Ignite UI for React Live Data Updates feature in React Grid is used for enabling real-time or near-real-time updates of data displayed within the grid. This is extremely useful in apps where data is constantly changing, like stock market trackers, live sports scores, or IoT (Internet of Things) dashboards. The IgrGrid can handle thousands of updates per second, while staying responsive for user interactions.

    React Live-data Update Example

    The sample below demonstrates the Grid performance when all records are updated multiple times per second. Use the UI controls to choose the number of records loaded and the frequency of updates. Feed the same data into the Column Chart to experience the powerful charting capabilities of Ignite UI for Angular. The Chart button will show Category Prices per Region data for the selected rows and the Chart column button will show the same for the current row.

    Data binding and updates

    A service provides data to the component when the page loads, and when the slider controller is used to fetch a certain number of records. While in a real scenario updated data would be consumed from the service, here data is updated in code. This is done to keep the demo simple and focus on its main goal - demonstrate the grid performance.

    <IgrGrid id="grid1"></IgrGrid>

    function startUpdate(frequency) {
  const timer = setInterval(() => {
    setData(prevData => FinancialDataClass.updateRandomPrices(prevData));
  }, frequency);

  setStartButtonDisabled(true);
  setShowChartButtonDisabled(true);
  setStopButtonDisabled(false);
}

    A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to complex data objects. To resolve the situation, provide a new object reference for the data object containing the property. Example:

    <IgrGrid id="grid1">
    <IgrColumn field="price.usd"></IgrColumn>
</IgrGrid>

    private updateData(data: any[]) {
    const newData = []
    for (const rowData of data) {
        rowData.price = { usd: getUSD(), eur: getEUR() };
        newData.push({...rowData});
    }
    gridRef.current.data = newData;
}

    Templates

    Updating the view works the same way for columns with a default template and for columns with a custom template. However, it is recommended to keep custom templates relatively simple. As number of elements in the template grows, negative performance impact rises as well.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.