RevoGrid

Data Grid Cell Configuration ​

The intersection point of a row and a column in the grid, capable of displaying and editing data. A cell can have custom renderers and editors, which are tightly coupled with the column properties.

You can customize cells using templates to change their appearance or behavior.

Cell Properties Type: PropertiesFunc ​

What are cell properties in RevoGrid. You can add various properties to cells, including tags, styles, classes, and events like onClick.

Adding Custom Properties ​

You can customize cells by defining properties within the cellProperties function. This function allows you to dynamically assign styles, classes, data attributes, and events based on the cell's data.

Example ​

Here's an example of how to use cellProperties to add custom styles, classes, data attributes, and events to cells:

js
const columns = [{
  name: 'Person Name',
  prop: 'name',

  // Apply custom properties
  cellProperties: ({prop, model, data, column}) => {
    return {
      // Custom styles
      style: {
        color: model[prop] === 'John Doe' ? 'red' : 'black'
      },
      // Custom classes
      class: {
        'bank': data.isBankCustomer,
        'vip': data.isVIP
      },
      // Custom events
      onClick: (event) => {
        console.log(`Cell clicked: ${model[prop]}`);
      },
      // Custom data attribute
      'data-tooltip': model[prop]
    };
  },
}];

const items = [
  { name: 'John Doe', isBankCustomer: true, isVIP: false },
  { name: 'Jane Smith', isBankCustomer: false, isVIP: true }
];

// Applying the columns and data source to the grid
grid.columns = columns;
grid.source = items;

Advanced Cell Features ​

RevoGrid offers advanced cell features, including: