Flashing column cells in Infinite Table

By admin·2024-10-15

Flashing cells is an important feature that has been requested by some of our users - both in public and private conversations.

It's also a very useful addition for DataGrids users that work in the financial industry. Version 5.0.0 of <InfiniteTable /> shipped flashing and in this blogpost we want to show how to use it.

Configuring a flashing column.

In order to configure a column to flash its cells when the data changes, you need to specify a custom ColumnCell component.

import { FlashingColumnCell } from '@infinite-table/infinite-react';

const columns: InfiniteTablePropColumns<Developer> = {
  id: {
    field: 'id',
  },
  firstName: {
    field: 'firstName',
  },
  salary: {
    field: 'salary',
    components: {
      ColumnCell: FlashingColumnCell,
    }
  },
};

@infinite-table/infinite-react exports a FlashingColumnCell React component that you can pass to the components.ColumnCell prop of any column you want to flash.

Customizing the flashing duration

If you want to customize the flashing duration, you need to pass a different components.ColumnCell to the column. You can very easily do this by calling createFlashingColumnCellComponent and passing the flashDuration option.

import { createFlashingColumnCellComponent } from '@infinite-table/infinite-react';

const FlashingColumnCell = createFlashingColumnCellComponent({
  flashDuration: 500,
  flashClassName: 'my-flash-class',
});

const columns: InfiniteTablePropColumns<Developer> = {
  salary: {
    field: 'salary',
    components: {
      ColumnCell: FlashingColumnCell,
    }
  }
}

Customizing the flash colors

If you want to customize the flash colors, you have three CSS variables available:

• --infinite-flashing-background: background color to be used when non-numeric cells flash.
• --infinite-flashing-up-background: background color to use for flashing numeric cells, when the value goes up.
• --infinite-flashing-down-background: background color to use for flashing numeric cells, when the value goes down.

The example below is configured to use the following colors:

• flash up - yellow
• flash down - magenta
• flash non-numeric - blue

Also, the flashing duration is configured to take 2 seconds.

Taking it further

Infinite Table implements flashing by passing in a custom ColumnCell component. However, you're not limited to using our default implementation. You can very easily create your own component and apply your own custom logic.

Maybe you want display both the new and the old values in the cell - this can be implemented quite easily. It's up to you to extend the cell rendering to suit your business requirements.

The current flashing implementation is flashing on any change in a cell, but you might be interested only in some of the changes. You can definitely use onEditPersistSuccess to detect when a cell edit is persisted and then decide whether to flash the cell or not. The possibilities are very diverse.

We're keen to see what you build!