# Auto Size Row
URL: https://pro.rv-grid.com/guides/rows/row-autosize/
Source: src/content/docs/guides/rows/row-autosize.mdx
Description: Automatically adjust row heights based on content
The **Row Auto Size Plugin** enhances RevoGrid by automatically calculating and adjusting row heights based on their content. This ensures optimal display of data, particularly useful for cells containing multi-line text, rich content, or varying amounts of information.

When the plugin is enabled, normal grid cells wrap text so the rendered content matches the height calculation. Row heights are recalculated from the wrapped content after source changes, edits, scrolling into new virtual rows, configuration changes, and manual column resizing.

It is a **sophisticated feature** that significantly improves data presentation and user experience:

1. **Dynamic Content Adaptation**: Automatically adjusts row heights to accommodate varying content lengths, ensuring all data is visible without truncation.

2. **Performance Optimization**: Uses efficient caching and virtualization to maintain smooth scrolling even with large datasets and dynamic heights.

3. **Precise Calculations**: Offers both approximate and precise height calculations, allowing you to balance between performance and accuracy.

4. **Event-Driven Updates**: Intelligently recalculates heights only when necessary, such as after edits or viewport changes.

5. **Memory Management**: Implements cleanup strategies to prevent memory leaks and maintain optimal performance during long sessions.

- **Automatic Height Calculation**: Dynamically adjusts row heights based on content.
- **Content-Aware**: Considers line breaks, text wrapping, and column widths.
- **Resize-Aware**: Recalculates visible row heights after manual column resizing.
- **Configurable Limits**: Set minimum and maximum heights to maintain consistency.
- **Custom Calculator Support**: Implement your own height calculation logic.
- **Efficient Caching**: Caches calculated heights to optimize performance.
- **Precise Mode**: Optional precise calculations using DOM measurements.

## Basic Setup

To enable the Row Auto Size Plugin in your RevoGrid setup:

```typescript
import { RowAutoSizePlugin } from '@revolist/revogrid-pro';

const grid = document.createElement('revo-grid');
grid.plugins = [RowAutoSizePlugin];

grid.rowAutoSize = {
  minHeight: 24,
  maxHeight: 200,
  preciseSize: true, // Use DOM-based precise calculations
  precalculate: true, // Warm approximate row sizes ahead of scroll
  precalculateBatchSize: 500, // Rows processed per frame during warmup
};
grid.resize = true; // Optional: row heights adapt after user column resizing
```

## Configuration Options

The plugin supports several configuration options to customize its behavior:

```typescript
type RowAutoSizeConfig = {
  // Minimum row height in pixels (default: 24)
  minHeight?: number;

  // Maximum row height in pixels (default: 200)
  maxHeight?: number;

  // Use precise DOM-based calculations (slower but more accurate)
  preciseSize?: boolean;

  // Warm all approximate row heights in chunks before they are scrolled into view (default: true)
  precalculate?: boolean;

  // Rows processed per animation frame during non-precise warmup (default: 500)
  precalculateBatchSize?: number;

  // Custom height calculator function
  calculateHeight?: (rowData: DataType, columns: ColumnRegular[]) => number | Promise<number>;
};
```

### Custom Height Calculator

You can provide your own height calculation logic through the `calculateHeight` function:

```typescript
grid.rowAutoSize = {
  calculateHeight: (rowData, columns) => {
    // Custom logic to determine row height
    const maxLines = columns.reduce((max, col) => {
      const content = rowData[col.prop]?.toString() || '';
      const lines = content.split('\n').length;
      return Math.max(max, lines);
    }, 1);

    return maxLines * 24; // 24px per line
  }
};
```

## Events and Updates

The plugin automatically responds to various grid events to maintain accurate row heights:

- **Data Changes**: Recalculates heights when the source data is updated
- **Cell Edits**: Updates heights for edited rows
- **Viewport Changes**: Calculates heights for newly visible rows
- **Configuration Changes**: Recomputes all heights when plugin settings change
- **Column Resizing**: Recomputes visible row heights after resized widths are rendered

## Performance Considerations

The plugin is designed with performance in mind, but there are some considerations:

1. **Precise Mode**: Using `preciseSize: true` provides more accurate calculations but is slower as it requires DOM operations.
2. **Precalculation**: In non-precise mode, `precalculate` is enabled by default. The plugin warms row height cache in chunks so rows already have a height when they are scrolled into view.
3. **Batch Size**: `precalculateBatchSize` controls how many rows are processed per animation frame. Larger values warm the cache faster but make each frame heavier.
4. **Large Datasets**: For very large datasets, set `precalculate: false` to calculate only visible rows and preserve demand-driven behavior.
5. **Custom Calculators**: When implementing a custom calculator, ensure it's efficient as it will be called frequently during scrolling.

To disable background warmup:

```typescript
grid.rowAutoSize = {
  minHeight: 24,
  maxHeight: 200,
  precalculate: false,
};
```

## Best Practices

1. **Default Mode for Large Datasets**: Use the default approximate calculation mode for large datasets to maintain performance.
2. **Custom Height Logic**: Use `calculateHeight` when your data needs application-specific sizing.
3. **Reasonable Limits**: Set appropriate `minHeight` and `maxHeight` to prevent extreme row sizes.
4. **Cache Management**: The plugin automatically manages its cache, but consider clearing it when making major data changes.

## Example Use Cases

1. **Multi-line Text**:
```typescript
grid.columns = [{
  prop: 'description',
  name: 'Description',
  size: 200,
}];
grid.source = [{
  description: 'This is a long description\nthat spans multiple lines\nand needs appropriate height'
}];
```

2. **Rich Content**:
```typescript
grid.rowAutoSize = {
  calculateHeight: (rowData) => {
    if (rowData.hasImage) {
      return 100; // Taller rows for rows with images
    }
    return 24; // Default height for other rows
  }
};
```

## Conclusion

The Row Auto Size Plugin provides a powerful solution for handling varying content heights in RevoGrid. By automatically adjusting row heights while maintaining performance, it significantly improves the presentation and usability of your grid, especially when dealing with dynamic or rich content.
