Skip to content
RevoGrid [Pro]

Row Auto Size

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.

Source code
src/components/row-autosize/rowAutosize.ts
import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();


import {
  RowHeaderPlugin,
  RowAutoSizePlugin,
} from '@revolist/revogrid-pro';


import { currentTheme } from '../composables/useRandomData';
import { faker } from '@faker-js/faker';


const { isDark } = currentTheme();


// Generate sample data with varying content lengths
const generateData = (count: number) => {
  return Array.from({ length: count }, () => ({
    name: faker.person.fullName(),
    description: Array.from(
      { length: Math.floor(Math.random() * 4) + 1 },
      () => faker.lorem.sentence()
    ).join('\n'),
    email: faker.internet.email(),
  }));
};


const grid = document.querySelector('revo-grid');
if (grid) {
  grid.source = generateData(100);
  // Define columns;
  grid.columns = [
    {
      prop: 'name',
      name: 'Name',
      size: 150,
    },
    {
      prop: 'description',
      name: 'đź“ť Description',
      size: 300,
    },
    {
      prop: 'email',
      name: 'Email',
      size: 220,
      readonly: true,
    },
  ];
  // Define plugin
  grid.plugins = [RowHeaderPlugin, RowAutoSizePlugin];


  // Configure row auto size
  grid.additionalData = {
    rowAutoSize: {
      minHeight: 24,
      maxHeight: 200,
      preciseSize: true,
    },
  };


  grid.theme = isDark() ? 'darkCompact' : 'compact';
}

Key Features

  • Automatic Height Calculation: Dynamically adjusts row heights based on content.
  • Content-Aware: Considers line breaks, text wrapping, and column widths.
  • 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

Section titled “Basic Setup”

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

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


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


// Configure through additionalData
grid.additionalData = {
  rowAutoSize: {
    minHeight: 24,
    maxHeight: 200,
    preciseSize: false, // Use DOM-based precise calculations
  }
};

Configuration Options

Section titled “Configuration Options”

The plugin supports several configuration options to customize its behavior:

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;


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

Custom Height Calculator

Section titled “Custom Height Calculator”

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

grid.additionalData = {
  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

Section titled “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

Performance Considerations

Section titled “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. Large Datasets: For large datasets, heights are calculated only for visible rows and cached for better performance.
  3. Custom Calculators: When implementing a custom calculator, ensure it’s efficient as it will be called frequently during scrolling.

Best Practices

Section titled “Best Practices”
  1. Default Mode for Large Datasets: Use the default approximate calculation mode for large datasets to maintain performance.
  2. Precise Mode for Critical Cases: Enable precise calculations only when exact heights are crucial.
  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

Section titled “Example Use Cases”
  1. Multi-line Text:
grid.columns = [{
  prop: 'description',
  name: 'Description',
  size: 200,
}];
grid.source = [{
  description: 'This is a long description\nthat spans multiple lines\nand needs appropriate height'
}];
  1. Rich Content:
grid.additionalData = {
  rowAutoSize: {
    calculateHeight: (rowData) => {
      if (rowData.hasImage) {
        return 100; // Taller rows for rows with images
      }
      return 24; // Default height for other rows
    }
  }
};

Conclusion

Section titled “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.