gp-grid: A Free, Open-Source TypeScript Data Grid for React, Vue, and Angular (No Paywalled Features)

An open-source data grid can look impressive with 1,000 rows and still struggle when your application needs to handle 100,000 or more. The same goes for features: you might find sorting and filtering in a free library, only to discover that row grouping, pivot tables, or other advanced capabilities require an enterprise license.

gp-grid takes a different approach. It is an open-source TypeScript data grid for React, Vue, and Angular, released under the Apache 2.0 license. It has zero external dependencies, supports large datasets through virtual scrolling, and includes all its features without paywalls.

In this article, we'll explore what makes a data grid useful, how gp-grid works, how to get started in your framework, and how it compares with AG Grid in features, bundle size, and published performance benchmarks.

TL;DR

gp-grid is a free, open-source TypeScript data grid for React, Vue, and Angular, licensed under Apache 2.0. It combines virtual scrolling, advanced data handling, and spreadsheet-style interactions without locking features behind a paid enterprise tier.

Its core features include:

✅ Row and column virtualization: Render only the visible rows and columns, plus an overscan buffer, to keep large and wide grids responsive.
✅ Sorting and filtering: Support multi-column sorting and advanced filter conditions.
✅ Cell selection and editing: Work with selected ranges, keyboard navigation, inline editing, and a fill handle.
✅ Custom rendering and styling: Customize cells, headers, filters, themes, and dark mode.
✅ Live and server-side data: Manage streaming updates or fetch rows on demand for larger datasets.
✅ Flexible layouts and analytics: Reorder, resize, pin, and freeze columns, with row grouping, aggregation, and pivot tables.
✅ AI coding agent support: Use the official gp-grid skill to help coding agents integrate the correct APIs, framework bindings, and data-source patterns.

gp-grid 1.0.0 supports both row and column virtualization, using overscan to render the visible viewport efficiently. Its published one-million-row benchmark reports 56.2 average FPS during the measured scrolling test, although results depend on the workload and test environment.

What Is a Web Data Grid?

A web data grid is an interactive component for displaying, sorting, filtering, selecting, and editing tabular data in a browser. Unlike a plain HTML table, a data grid can provide spreadsheet-style interactions, customizable cells, and virtual scrolling, which renders only the rows needed for the current viewport.

The distinction matters when you're building an admin dashboard, CRM, analytics platform, financial application, or any interface where people work with large datasets.

A standard HTML <table> gives you the basic structure for displaying rows and columns. You can add the behavior you need, but you'll have to build features such as sorting, filtering, and keyboard navigation yourself.

A headless table library such as TanStack Table handles much of the table logic while leaving the markup and presentation to you. This offers considerable flexibility, although your team remains responsible for building the interface.

A full data grid component comes with a more complete UI, including built-in interactions and configurable behavior. For teams that need a spreadsheet-like experience without implementing every interaction from scratch, this can save substantial development time.

The challenge is finding a grid that handles your dataset, fits your framework, and includes the features your application needs without creating unnecessary bundle weight or licensing costs.

What Features Really Matter in a Web Data Grid?

When choosing an open-source data grid, start with a practical checklist: performance, data operations, editing, customization, framework compatibility, accessibility, and licensing. The right balance depends on your application's workload and the experience your users expect.

Here are the capabilities worth evaluating before committing to a library:

• Virtual scrolling: Keeps large datasets responsive by rendering visible rows and a small buffer instead of mounting every row in the DOM.
• Sorting and filtering: Supports everyday data exploration, including multi-column sorting, advanced filter conditions, and server-side operations.
• Selection and editing: Provides cell and range selection, keyboard navigation, inline editing, and spreadsheet-style conveniences such as a fill handle.
• Customization and theming: Lets you create custom cell renderers, format values, apply application-specific styling, and support dark mode.
• TypeScript and framework support: Offers reliable types and bindings that fit your existing React, Vue, or Angular application.
• Bundle size and dependencies: Affects initial loading costs and the number of third-party packages your project must maintain.
• Accessibility and keyboard support: Makes common grid interactions available through the keyboard and provides appropriate accessibility semantics.
• Licensing: Clarifies whether grouping, pivot tables, and other advanced features are available under the free license.

That final point deserves attention. A library can be free to install while charging for the capabilities your application eventually needs. Check the licensing of individual features before making your decision.

gp-grid addresses this checklist with a TypeScript-first architecture, virtual scrolling, spreadsheet-style interactions, and an Apache 2.0 license that covers its complete feature set.

What Is gp-grid?

gp-grid is an open-source TypeScript data grid for React, Vue, and Angular, built around virtual scrolling, a framework-agnostic core, and a data-source abstraction. The library is released under Apache 2.0 and announces its 1.0.0 release with all features available for free.

Its architecture follows three main principles:

• Slot-based virtual scrolling: gp-grid recycles a pool of DOM containers as users scroll, keeping the number of rendered elements controlled even when the underlying dataset contains millions of rows.
• Instruction-based core: The core emits declarative instructions describing UI changes, separating grid logic from framework-specific rendering and allowing the wrappers to share the same underlying behavior.
• Flexible data sources: You can work with data held in browser memory or fetch rows from a server on demand, depending on your application's needs.

The project separates its functionality into four packages: @gp-grid/core, @gp-grid/react, @gp-grid/vue, and @gp-grid/angular. They are available through npm and JSR.

Installation and Quick Start: React, Vue, and Angular

Getting started with gp-grid requires installing the package for your framework, defining your columns, and providing your data. The library recommends TypeScript 5.0 or higher, includes its own type definitions, and supports React 18+ and Vue 3 through dedicated wrappers.

Install the package

Choose the framework package you need and install it with your preferred package manager:

npm install @gp-grid/<framework>
# Replace <framework> with react, vue, or angular

The package names and component bindings are summarized below.

Build your first React data grid

Define your columns and pass them to the Grid component alongside your rows. This example includes an editable name column and a basic email column.

import { Grid, type ColumnDefinition } from "@gp-grid/react";
import "@gp-grid/react/dist/styles.css";

const columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 80, headerName: "ID" },
  { field: "name", cellDataType: "text", width: 150, editable: true },
  { field: "email", cellDataType: "text", width: 250, headerName: "Email" },
];

const data = [
  { id: 1, name: "Alice", email: "[email protected]" },
  { id: 2, name: "Bob", email: "[email protected]" },
];

export default function App() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <Grid columns={columns} rowData={data} rowHeight={36} />
    </div>
  );
}

One detail can save you a frustrating debugging session: the grid fills its parent, so that parent needs an explicit height.

Remember to import the stylesheet once at your application's root. Vue and Angular use their own component bindings but follow the same column-definition model.

gp-grid Core Features

The core features of gp-grid cover performance, data exploration, spreadsheet-style editing, customization, and different ways of loading data. Here are the capabilities worth examining when deciding whether the library fits your application.

Slot-Based Virtual Scrolling and Million-Row Performance

gp-grid uses slot-based virtualization to keep the rendered DOM small as datasets grow. Starting with version 1.0.0, it virtualizes the entire grid viewport, including both rows and columns. It maintains reusable DOM containers and updates their assignments as users scroll vertically or horizontally, rendering only the visible area and the surrounding overscan buffer.

The same overscan logic applies to both dimensions, helping preserve smooth scrolling behavior in both directions. This means gp-grid can handle large datasets and wide grids without mounting every row and column in the DOM. By reusing rendering slots as the viewport moves, it reduces the overhead associated with repeatedly creating and destroying DOM elements.

For large client-side datasets, sorting can also run in a Web Worker, enabled by default in the client data source. Developers can tune overscan, wheelDampening, and maxFlingVelocity to adjust scrolling behavior for their interface and input devices.

According to gp-grid's benchmarks, its test with one million rows recorded:

• 56.2 average FPS while scrolling, with zero dropped frames.
• 652 ms for ascending sorting and 188 ms for text filtering.
• Approximately 254.7 MB of memory after loading the dataset.

These results are promising, but they're not universal performance guarantees. The benchmark tested @gp-grid/react 0.19.0, so keep that version in mind when comparing the figures with the project's newer 1.0 release.

Multi-Column Sorting and Advanced Filtering

Sorting and filtering help users find useful information without manually scanning thousands of records. gp-grid enables sorting by default: clicking a column header changes its sort order, while holding Shift and clicking another header adds a secondary sort criterion.

Filter controls support text, numeric, and date operators, along with a checkbox-based mode for selecting distinct values. For more complex searches, users can combine conditions with AND/OR logic, making expressions such as (A AND B) OR C possible.

You can disable sorting globally through sortingEnabled or set sortable: false on an individual column. Custom comparators and custom filter components also provide room for application-specific behavior.

For example, a finance dashboard could sort transactions by date and then amount, while a CRM user could filter contacts by status and region. These operations are available without requiring a separate enterprise feature license.

Cell Selection, Keyboard Navigation, and Excel-Like Editing

gp-grid supports cell selection, drag-to-select ranges, Shift-click to extend a selection, and Ctrl-click to toggle individual cells. Keyboard navigation includes arrow keys, Tab, Enter, Home, End, and common Ctrl-based shortcuts, allowing users to work through data without constantly reaching for the mouse.

To enable inline editing, set editable: true on a column. Users can start editing with a double-click, Enter, F2, or by typing. Enter and Tab commit changes, while Escape cancels an edit.

The fill handle adds another useful spreadsheet-style interaction: users can drag the small handle at the corner of a selected range to copy values across the target cells. Custom edit renderers and validators can support more specialized inputs and validation rules.

Custom Renderers, Styling, Highlighting, and Dark Mode

A data grid needs to fit your application's interface, especially when cells communicate status, money, dates, or other values that benefit from custom presentation. gp-grid supports custom cell, edit, and header renderers, either directly in column definitions or through renderer registries.

The valueFormatter option is useful when the displayed value differs from the raw data. For example, a salary column can show currency formatting while sorting and value-based operations continue to use the underlying numeric value.

{
  field: "salary",
  cellDataType: "number",
  width: 140,
  cellRenderer: SalaryRenderer,
  valueFormatter: (value) =>
    "$" + (value as number).toLocaleString(),
}

Styling is also flexible. The darkMode prop enables dark styling, and the built-in CSS uses zero-specificity :where() selectors, making it easier to override defaults with your own classes. Tailwind's @apply directive is supported, while highlighting callbacks can add row, column, or cell classes for hover states, alternating rows, and crosshair effects.

Live Data Streaming and Server-Side Data

gp-grid supports both continuously changing datasets and data loaded from a server on demand. This makes it suitable for interfaces such as stock tickers, operational dashboards, and administrative tools where records can change while users are working.

For live updates in React, the useGridData hook provides a mutable data source with helpers such as addRows and removeRows. You can also update individual cells or rows through the data source. Its debounceMs option batches rapid changes into fewer transactions, helping the grid handle frequent updates efficiently.

When your dataset is too large to keep entirely in browser memory, createServerDataSource lets the grid request specific row ranges from your API, along with sorting and filtering information.

import { Grid, createServerDataSource } from "@gp-grid/react";

const dataSource = createServerDataSource(async (request) => {
  const res = await fetch("/api/grid-data", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(request),
  });

  return res.json(); // { rows, totalRows }
});

<Grid columns={columns} dataSource={dataSource} rowHeight={36} />

Your endpoint must return the requested rows and the total row count. For datasets exceeding roughly 10 million rows, gp-grid's performance guide recommends server-side data loading.

Flexible Layout: Drag, Resize, Pin, Freeze, and Group Columns

A useful data grid should let users arrange information around their workflow. gp-grid supports dragging columns into a new order, resizing columns with minimum and maximum constraints, pinning columns to either side, and freezing rows beneath the header.

Column virtualization also limits the number of mounted columns when working with wide datasets. The grid supports right-to-left layouts, configurable column sizing, nested column groups, and row heights that can vary by row identity.

For example, a CRM could keep contact names visible while users scroll horizontally through company details, activity dates, and account values. A financial dashboard could freeze important summary rows while users inspect the records below them.

The library also provides ARIA grid roles and keyboard support. However, its documentation does not claim full accessibility compliance, so applications with strict accessibility requirements should perform their own audits and testing.

Row Grouping, Aggregation, and Pivot Tables

gp-grid includes row grouping, aggregation, and pivot tables under its free Apache 2.0 license. These features help turn flat records into structured summaries, giving users ways to explore large datasets without requiring a separate enterprise license.

Row grouping organizes records into expandable groups, with aggregates and totals available for summarizing values. Depending on the data source, grouping calculations can happen locally or be loaded from the server on demand.

Pivot tables let you transform dimensions into columns and summarize the resulting data, either locally or through precomputed pivot tables. This is useful for analytical interfaces where users need to compare categories, examine totals, or reorganize information around different dimensions.

The project also provides further guides covering write commands, history, and columnar data sources. Because gp-grid is a young project, review the relevant guides and try these capabilities with your own data before making them a core dependency.

If you want to explore the examples yourself, I've published the complete gp-grid playground on GitHub.

Clone the repository, run it locally, and experiment with all seven interactive demos.

⭐ gp-grid Playground Demo

Onboard Your AI Coding Agent With the Official gp-grid Skill

AI coding agents can save time when building data-heavy interfaces, but they need accurate library-specific guidance to generate code that works. gp-grid provides an official skill that helps coding agents use the correct imports, column definitions, renderers, and data-source APIs across its supported frameworks.

The skill includes a main SKILL.md file and framework-specific references for React, Vue, Angular, and the framework-agnostic core. It also covers common integration mistakes, such as forgetting to set the grid container's height, missing the stylesheet import, or using the wrong date data type.

Install it from your project with:

npx skills add https://github.com/GioPat/gp-grid

# Update later
npx skills add GioPat/gp-grid

The skill can help agents choose between client-side data, live updates, and server-side loading, including the correct { startRow, endRow } request shape for server-side data.

gp-grid vs AG Grid: Features, Cost, and Performance

Choosing a React data grid involves more than comparing performance. Feature availability and licensing can have a major impact on the total cost of a project. AG Grid follows a Community and Enterprise model: its Community edition is free, but several advanced capabilities, including row grouping and pivoting, require an Enterprise license. gp-grid takes a different approach by making all its features available under the Apache 2.0 license, with no Enterprise tier or feature-based licensing restrictions.

The following comparison uses results from gp-grid's July 2026 benchmark, which tested one million rows using the same seeded data and column definitions. These are results from a specific test environment and workload, not universal performance guarantees.

gp-grid stands out when you want advanced data-grid capabilities without paying for an Enterprise license. It is worth considering for applications that need grouping, pivoting, virtual scrolling, editing, and other advanced features under one open-source license, alongside a smaller React bundle in the benchmark.

AG Grid can be a strong choice when your project already relies on its ecosystem, documentation, integrations, or established Community and Enterprise offerings. Its Community edition may be sufficient for applications that only need its free features, while teams that need Enterprise functionality can evaluate whether the commercial license fits their requirements.

Who Should Use gp-grid?

gp-grid is worth considering if you need a feature-rich, open-source data grid without an enterprise license. It can be a good fit for:

• Teams building data-heavy dashboards: Virtual scrolling and server-side loading help applications work with large datasets.
• Developers who need advanced features for free: Row grouping, pivot tables, cell selection, inline editing, and column pinning are included without paid feature tiers.
• TypeScript-first projects: Built-in type definitions support typed column configurations and editor autocomplete.
• Teams working across frontend frameworks: Dedicated packages support React, Vue 3, and Angular, with a framework-agnostic core for custom integrations.
• Projects with strict bundle or dependency requirements: The library has zero external runtime dependencies, and its published React bundle measurement is worth evaluating for performance-conscious applications.
• Developers using AI coding agents: The official gp-grid skill provides framework-specific guidance and examples to help agents generate compatible integrations.

📌 If you find this useful, consider starring the GitHub repo; it helps support the open-source project and its continued development.

⭐ Star gp-grid on GitHub

Frequently Asked Questions

Final Thoughts

Choosing an open-source data grid means looking at more than its license. Performance, editing, customization, data loading, framework support, and the long-term health of the project all affect whether it will serve your application well.

gp-grid brings these concerns together in a TypeScript-first library with virtual scrolling, React/Vue/Angular bindings, and advanced features available without paid tiers. Its benchmark results are promising, although the project is still young and the published test has limitations.

In this article, I explored gp-grid and its key features. In the next article, I’ll put it to the test by building a real React project, sharing the development process, what worked well, and the challenges I encountered along the way. Stay tuned for a hands-on look at building with gp-grid!

Thanks for reading! 🙏🏻 I hope you found this useful ✅ Please react and follow for more 😍 Made with 💙 by Hadil Ben Abdallah

Hadil Ben Abdallah

Software Engineer • Technical Writer (300K+ readers & 25K+ followers) • Trusted by 20+ startups and tech companies worldwide I turn brands into websites people 💙 to use