Flashing column cells in Infinite Table
By adminยท
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
COPY
@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.The default flashing duration is
1000
milliseconds.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
COPY
When calling
createFlashingColumnCellComponent
, besides the flashDuration
option, you can also pass a flashClassName
, which is a CSS class name that will be applied to the flashing cell for the duration of the flash.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.
Besides clicking the "start updates" button, you can also edit the salary value in any cell. When you confirm the edit, the salary value will flash.
Flashing takes 2s and has custom colors
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!