> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# AG Grid

## 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:

1. In your AG Grid column definitions, use the `cell renderer` property to customize the cell rendering.
2. 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:

```jsx theme={null}
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
  },
];
```