Skip to content
RevoGrid [Pro]

Auto Size Row

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.

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();
const ROW_COUNT = 1000;
const COLUMN_COUNT = 50;
const STATUSES = ['Active', 'Pending', 'Completed', 'Blocked'];
const BADGE_STYLES: Record<string, Record<string, string>> = {
  Active: {
    backgroundColor: '#d1fae5',
    color: '#065f46',
    borderColor: '#34d399',
  },
  Pending: {
    backgroundColor: '#fef3c7',
    color: '#92400e',
    borderColor: '#f59e0b',
  },
  Completed: {
    backgroundColor: '#dbeafe',
    color: '#1e40af',
    borderColor: '#60a5fa',
  },
  Blocked: {
    backgroundColor: '#fee2e2',
    color: '#991b1b',
    borderColor: '#f87171',
  },
};


const getColumnKind = (columnIndex: number) => {
  if (columnIndex % 5 === 2) return 'badge';
  if (columnIndex % 5 === 3) return 'date';
  return 'text';
};


const getColumnName = (columnIndex: number) => {
  const group = Math.floor(columnIndex / 5) + 1;
  const names = ['Summary', 'Notes', 'Status', 'Due Date', 'Owner'];
  return `${names[columnIndex % 5]} ${group}`;
};


const getColumnSize = (columnIndex: number) => {
  if (columnIndex % 5 === 1) return 320;
  if (columnIndex % 5 === 2) return 150;
  if (columnIndex % 5 === 3) return 170;
  return 190;
};


const formatDate = (value: unknown) =>
  new Intl.DateTimeFormat('en-US', {
    month: 'short',
    day: '2-digit',
    year: 'numeric',
  }).format(new Date(String(value)));


// Generate sample data with varying content lengths
const generateData = (count: number) => {
  return Array.from({ length: count }, (_, rowIndex) => {
    const row: Record<string, string> = {};
    for (let columnIndex = 0; columnIndex < COLUMN_COUNT; columnIndex++) {
      const kind = getColumnKind(columnIndex);
      if (kind === 'badge') {
        row[`field${columnIndex}`] =
          STATUSES[(rowIndex + columnIndex) % STATUSES.length];
      } else if (kind === 'date') {
        row[`field${columnIndex}`] = new Date(
          2026,
          columnIndex % 12,
          (rowIndex % 28) + 1,
        ).toISOString();
      } else {
        row[`field${columnIndex}`] =
          columnIndex % 5 === 1
            ? Array.from({ length: Math.floor(Math.random() * 4) + 1 }, () =>
                faker.lorem.sentence(),
              ).join('\n')
            : `${faker.commerce.productName()} ${rowIndex + 1}.${columnIndex + 1}`;
      }
    }
    return row;
  });
};


const cellTemplate = (
  h: any,
  { value, prop }: { value: unknown; prop: string },
) => {
  const columnIndex = Number(prop.replace('field', ''));
  const kind = getColumnKind(columnIndex);


  if (kind === 'badge') {
    const style = BADGE_STYLES[String(value)] || BADGE_STYLES.Pending;
    return h(
      'span',
      {
        style: {
          display: 'inline-flex',
          alignItems: 'center',
          border: `1px solid ${style.borderColor}`,
          borderRadius: '999px',
          padding: '2px 8px',
          fontSize: '12px',
          fontWeight: '600',
          lineHeight: '18px',
          backgroundColor: style.backgroundColor,
          color: style.color,
        },
      },
      value,
    );
  }


  if (kind === 'date') {
    return h(
      'span',
      {
        style: {
          color: '#4b5563',
          fontVariantNumeric: 'tabular-nums',
          whiteSpace: 'nowrap',
        },
      },
      formatDate(value),
    );
  }


  return h('span', { style: { whiteSpace: 'pre-wrap' } }, value);
};


export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) return;


  const grid = document.createElement('revo-grid');
  // Define columns;
  grid.columns = Array.from({ length: COLUMN_COUNT }, (_, columnIndex) => ({
    prop: `field${columnIndex}`,
    name: getColumnName(columnIndex),
    size: getColumnSize(columnIndex),
    readonly: columnIndex % 5 === 4,
    cellTemplate,
  }));
  // Define plugin
  grid.plugins = [RowHeaderPlugin, RowAutoSizePlugin];


  grid.rowAutoSize = {
    minHeight: 24,
    maxHeight: 200,
  };


  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.resize = true;
  grid.range = true;
  grid.hideAttribution = true;
  parent.appendChild(grid);
  grid.source = generateData(ROW_COUNT);
}

Key Features

  • 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

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];


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

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;


  // 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

Section titled “Custom Height Calculator”

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

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

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
  • Column Resizing: Recomputes visible row heights after resized widths are rendered

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

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

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. 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

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.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.