AG Grid - Velt

How to add Velt attributes to AG Grid cells?

Some Velt features like live selection require adding Velt specific attributes to the cell elements. Here’s how you can do it:

In your AG Grid column definitions, use the cell renderer property to customize the cell rendering.
Within the cell renderer, add the necessary Velt attributes to the cell element.

Here’s a code sample that shows how to add the data-velt-live-selection-enabled attribute and other required attributes to AG Grid cell div tags:

colDefs: ColDef[] = [
  {
    field: "FIELD_NAME",
    cellRenderer: (params: any) => {
      // Let AG Grid render the default cell, then modify the outer div
      setTimeout(() => {
        const cellElement = params.eGridCell;
        // Add Velt attributes to the parent cell div
        cellElement.setAttribute('data-velt-live-selection-enabled', 'true');
        // Add other Velt attributes as required
      }, 0);  // Timeout to wait for the DOM to be ready
      return params.value;  // Use the default renderer, which is the text value
    },
    editable: true, // Set to true if the column is editable
  },
];

Migrate from Liveblocks to Velt

⌘I

​How to add Velt attributes to AG Grid cells?

How to add Velt attributes to AG Grid cells?