Velocity Grid - Fast React Data Grid

About Velocity Grid

Velocity Grid is a high-performance React data grid component designed to handle large datasets with ease. Built with TypeScript and optimized for speed, it provides a smooth user experience even when working with millions of rows through efficient virtual scrolling.

Virtual Scrolling

Render only visible rows and columns for optimal performance with large datasets.

Lightweight

Minimal dependencies and optimized bundle size for fast loading times.

Customizable

Flexible API for styling, cell rendering, and data formatting.

Data Export

Built-in functionality to export data as CSV, Excel, or PDF.

Sorting & Filtering

Powerful data manipulation capabilities for better user experience.

TypeScript Support

Full TypeScript support with comprehensive type definitions.

How to Use

1. Include the Required Files

2. Create a Container Element

<div id="grid" style="height: 500px; width: 100%;"></div>

3. Initialize the Grid

// Column definitions
const columnDefs = [
  { field: 'id', headerName: 'ID', width: 80 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'age', headerName: 'Age', width: 80 }
];

// Create the grid
const grid = React.createElement(
  VelocityGrid.Grid,
  {
    data: yourData,
    columnDefs: columnDefs,
    rowHeight: 35,
    defaultColWidth: 150
  }
);

// Create a root and render the grid
const root = ReactDOM.createRoot(document.getElementById('grid'));
root.render(grid);