Cell

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, and events based on the cell's data.

Example

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

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 attributes (tags)
      attributes: {
        '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;