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.

Source code

TypeScript ts

// 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(),
  }));
};

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

  const grid = document.createElement('revo-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
  Object.assign(grid, {
    rowAutoSize: {
      minHeight: 24,
      maxHeight: 200,
      preciseSize: true,
    },
  })

  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  parent.appendChild(grid);
}

React tsx

import React, { useState, useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { RowHeaderPlugin, RowAutoSizePlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import { faker } from '@faker-js/faker';

const RowAutosizeGrid = () => {
  const { isDark } = currentTheme();

  const theme = isDark() ? 'darkCompact' : 'compact';
  
  // 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 [rows] = useState(() => generateData(100));

  const columns = useMemo(
    () => [
      {
        prop: 'name',
        name: 'Name',
        size: 150,
      },
      {
        prop: 'description',
        name: '📝 Description',
        size: 300,
      },
      {
        prop: 'email',
        name: 'Email',
        size: 220,
        readonly: true,
      },
    ],
    []
  );

  const plugins = [RowHeaderPlugin, RowAutoSizePlugin];
  
  const additionalData = {
    rowAutoSize: {
      minHeight: 24,
      maxHeight: 200,
      preciseSize: true,
    },
  };

  return (
    <RevoGrid
      theme={theme}
      columns={columns}
      source={rows}
      plugins={plugins}
      additionalData={additionalData}
      hideAttribution
    />
  );
};

export default RowAutosizeGrid; 

Vue vue

<template>
  <RevoGrid
    class="overflow-hidden cell-border"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :columns="columns"
    :source="rows"
    :plugins="plugins"
    :additional-data="additionalData"
    range
    hide-attribution
  />
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import RevoGrid from '@revolist/vue3-datagrid';
import {
  RowHeaderPlugin,
  RowOddPlugin,
  RowAutoSizePlugin,
} from '@revolist/revogrid-pro';
import { currentThemeVue } from '../composables/useRandomData';
import { faker } from '@faker-js/faker';

const { isDark } = currentThemeVue();

// 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 rows = shallowRef(generateData(100));
const columns = ref([
  {
    prop: 'name',
    name: 'Name',
    size: 150,
  },
  {
    prop: 'description',
    name: '📝 Description',
    size: 300,
  },
  {
    prop: 'email',
    name: 'Email',
    size: 220,
    readonly: true,
  },
]);

const plugins = [RowHeaderPlugin, RowAutoSizePlugin, RowOddPlugin];

const additionalData = ref({
  rowAutoSize: {
    minHeight: 24,
    maxHeight: 200,
    preciseSize: true,
  },
});
</script> 

Angular ts

import { Component, ViewEncapsulation, OnInit, NO_ERRORS_SCHEMA } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import {
  RowHeaderPlugin,
  RowAutoSizePlugin,
} from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import { faker } from '@faker-js/faker';

@Component({
  selector: 'row-autosize-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [theme]="theme"
      [columns]="columns"
      [source]="rows"
      [plugins]="plugins"
      [rowAutoSize]="additionalData.rowAutoSize"
      [hideAttribution]="true"
      style="min-height: 400px; min-width: 600px"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
})
export class RowAutosizeGridComponent implements OnInit {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';

  // Generate sample data with varying content lengths
  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(),
    }));
  }

  rows = this.generateData(100);

  columns = [
    {
      prop: 'name',
      name: 'Name',
      size: 150,
    },
    {
      prop: 'description',
      name: '📝 Description',
      size: 300,
    },
    {
      prop: 'email',
      name: 'Email',
      size: 220,
      readonly: true,
    },
  ];

  plugins = [RowHeaderPlugin, RowAutoSizePlugin];


  additionalData = {
    rowAutoSize: {
      minHeight: 24,
      maxHeight: 200,
      preciseSize: true,
    },
  };

  ngOnInit() {
    // Any additional setup if needed
  }
} 

Why it matters

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.

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

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

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

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

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

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

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

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

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

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.