I had already explored gp-grid's features and capabilities, and I wrote gp-grid: A Free, Open-Source TypeScript Data Grid for React, Vue, and Angular (No Paywalled Features)
So I wanted to see how gp-grid's features would work together in an actual React application. I wanted a project with different types of data, enough records to make the grids useful, and interactions that would put the library's features to practical use.
For that, I built STREET BITES, a fictional international street food festival website where visitors can discover dishes, explore food vendors, and browse a three-day event schedule.
The application has four pages. I used gp-grid across three data-driven pages, with features such as sorting, filtering, custom cell renderers, inline editing, row grouping, pivoting, and virtual scrolling.
In this article, I'll walk through how I built the application, the gp-grid features I implemented, and my experience using it in a real React project.
TL;DR
gp-grid is a free, open-source TypeScript data grid for React, Vue, and Angular. After using it to build STREET BITES, I found it straightforward to integrate into a React application, with advanced grid features available through one package.
- Project: I built STREET BITES, a four-page React website for a fictional international street food festival.
- Grid integration: gp-grid powers the Vendor Directory, Food Explorer, and Festival Schedule.
- Features tested: Sorting, filtering, custom cell renderers, inline editing, row selection, grouping, pivoting, virtual scrolling, and live updates.
- Developer experience: Installation and initial setup were simple, and the library fitted naturally into my React and TypeScript project.
- Biggest strengths: Advanced features come with the Apache 2.0 package, custom renderers offer plenty of flexibility, and the core setup stays clean.
My overall experience was positive. I'd consider gp-grid for data-heavy React applications that need advanced functionality without a feature-based license fee, while teams with strict adoption requirements should evaluate its maturity and support options.
What Is gp-grid?
gp-grid is an open-source TypeScript data grid released under the Apache 2.0 license, with official integrations for React, Vue, and Angular. Its framework-agnostic core supports features such as sorting, filtering, editing, grouping, pivoting, and slot-based virtual scrolling. The project has reached version 1.0.0, and all features are available without a paid tier.
What I Built?
STREET BITES is a fictional international street food festival website built to give this gp-grid review a practical foundation. It brings together food vendors, international dishes, and festival events in one place, creating several realistic data exploration scenarios.
What Is STREET BITES?
The festival takes place from June 12 to 14, 2027, at Riverside Park in Old Harbour. Its tagline is "A world of flavor. One incredible festival." The fictional event brings together vendors from 15 countries, hundreds of dishes, and 72 activities, including cooking demonstrations, food competitions, chef talks, workshops, tastings, and live music.
Visitors can explore the vendors, discover dishes from different cuisines, and check the three-day event schedule. All festival information and records in the project are fictional.
Why I Chose a Street Food Festival
I wanted a project with different types of data and interactions that would make sense to visitors. A food festival provides plenty of opportunities to sort and filter records by cuisine, country, price, rating, dietary category, and availability.
It also creates useful scenarios for grouping vendors by location or cuisine, analyzing availability with a pivot view, and displaying event status changes. Food images, ratings, badges, and spice indicators give the grids room for custom cell rendering, too.
The Four Pages and Their Purpose
STREET BITES has four main pages, each serving a different part of the festival experience:
- Home: Introduces the festival with featured vendors, popular dishes, statistics, highlights, and upcoming events.
- Vendors: Lists 10,000 food vendors with information about their cuisine, country, festival zone, stall, rating, and current status.
- Food Explorer: Presents a catalog of 5,000 dishes with prices, dietary categories, spice levels, ratings, and popularity scores.
- Schedule: Organizes 72 events across three days, with details about times, stages, hosts, categories, and live statuses.
The Home page uses regular React components for its editorial sections and featured cards. The other three pages use gp-grid to power their interactive data exploration experiences.
You can check out the full project and explore the food yourself.
Technology Stack and Project Setup
STREET BITES uses a React and TypeScript stack, with gp-grid handling the interactive data grids across its three main exploration pages. The rest of the interface uses familiar React components, keeping navigation, filters, featured cards, and festival sections separate from the grid implementation.
Technologies Used
Here is the stack behind the project:
- React: Builds the website interface and reusable components.
- TypeScript: Defines the data models for vendors, dishes, and festival events, helping keep the application code consistent.
- Vite: Handles the development server and production build.
- Tailwind CSS: Styles the website, including its colorful cards, responsive layouts, and festival-inspired design.
- React Router: Handles navigation between the four routes:
/,/vendors,/food, and/schedule. - gp-grid (
@gp-grid/react): Powers the interactive data grids on the Vendors, Food Explorer, and Schedule pages.
Installing gp-grid in a React Project
Adding gp-grid to a React project takes one package installation command:
npm install @gp-grid/react The React integration requires React 18 or higher, with TypeScript 5.0 or higher recommended. Once the package is installed, import its stylesheet once at the application root:
import "@gp-grid/react/dist/styles.css"; This loads the grid's default styling across the application. You can then customize its appearance to fit your website's design.
Integrating gp-grid into the Application
A basic gp-grid integration has three main parts: column definitions, row data, and the Grid component. The grid also needs a parent container with an explicit height because it fills the available space inside that container.
For example, a vendor grid can start with a couple of column definitions and an array of vendor records:
import { Grid, type ColumnDefinition } from "@gp-grid/react"; const columns: ColumnDefinition[] = [ { field: "name", cellDataType: "text", headerName: "Vendor", width: 220 }, { field: "rating", cellDataType: "number", headerName: "Rating", width: 100 }, ]; <div style={{ height: "520px" }}> <Grid columns={columns} rowData={vendors} rowHeight={56} /> </div> Here, columns defines which fields appear and how they are displayed, while vendors supplies the records. The rowHeight property sets the height of each data row.
In STREET BITES, regular React components handle the controls around each grid, including search fields, filters, view tabs, and dataset selectors. gp-grid handles the actual data-grid experience.
Implementing gp-grid Across the Three Main Pages
I used gp-grid on three STREET BITES pages: the Vendor Directory, Food Explorer, and Festival Schedule. Each grid handles a different type of information, so I could work with vendor records, food catalogs, and event schedules in one application.
Vendor Directory: Managing and Exploring Food Vendors
The Vendor Directory contains 10,000 fictional food vendors, with summary cards showing 10,000 total vendors, 8,242 currently serving, 1819 featured vendors, and an average rating of 4.30.
The gp-grid table displays each vendor's photo, name, city, cuisine, country, festival zone, stall number, rating, review count, number of dishes, average price, and availability status. Above it, visitors can search the directory, choose a dataset size, and filter vendors by cuisine, country, zone, status, minimum rating, or featured status.
The page also includes three views: Directory, Grouped, and Pivot, giving the vendor data different ways to be explored.
Food Explorer: Creating an Interactive Dish Catalog
The Food Explorer contains 5,000 fictional dishes from different countries and cuisines. Three featured dishes, Tteokbokki, Bulgogi Bao, and Elote, appear above the main catalog, giving visitors a quick look at some of the festival's popular food options.
The Full Menu grid displays dish thumbnails, names, short descriptions, prices, cuisines, countries, dietary categories, spice levels, ratings, popularity scores, and availability. Visitors can narrow the catalog using filters for cuisine, country, diet, price, spice level, and status.
This page also gives the grid a more visual role, with food thumbnails, colorful dietary badges, flame icons, and popularity indicators appearing alongside the dish information.
Festival Schedule: Organizing Events and Activities
The Festival Schedule brings together 72 events taking place across the festival's three days. Its overview cards show 72 total events, 60 upcoming, 3 live now, and 9 completed, with an On Now banner highlighting current activities.
The gp-grid table displays each event's time, name, category, stage, host, status, featured indicator, and festival day. Visitors can switch between Day 1 (Friday, June 12), Day 2 (Saturday, June 13), Day 3 (Sunday, June 14), and All Days. Additional filters cover event category, stage, and status.
This gives visitors a practical way to explore cooking demonstrations, competitions, workshops, chef appearances, tastings, and live performances throughout the festival.
gp-grid Features I Tested in a Real React Application
Sorting and Multi-Column Sorting
Sorting works across all three grids. Clicking a column header sorts its records, while holding Shift and clicking another header adds a secondary sort. The headers display sort arrows and numbered badges to show the sorting order. For example, I can sort vendors by cuisine and then by rating to organize vendors within each cuisine. Large datasets also use Web Worker sorting by default through the client data source's useWorker option.
Filtering and Search
I used two filtering layers: page-level controls above each grid and the filter popup available from individual column headers. The popup supports type-specific operators for text, numbers, and dates, along with checkbox-based value selection and grouped AND/OR conditions. Filters applied to different columns combine with AND, giving visitors more control over the records they see.
Custom Cell Renderers
Custom cell renderers made a big difference to the visual experience. I used them for vendor photos, city and cuisine details, dish thumbnails, dietary badges, star ratings, price labels, spice flames, popularity bars, host avatars, and status pills. Pairing a renderer with a valueFormatter also helps keep filtering and copied values consistent with what users see.
Inline Editing
I added an Organizer mode toggle to enable editing across the vendor, dish, and event grids. Columns become editable when configured with editable: true. Users can start editing with a double-click, Enter, F2, or by typing. Enter commits a change, Tab commits and moves to the next cell, and Escape cancels it. A fill handle also copies values across a dragged range. Changes update the application state, so related page content stays in sync.
Row Selection and Data Comparison
The Vendors and Food Explorer pages include selection checkboxes, allowing visitors to select up to four records. The selected vendors or dishes then appear in a comparison panel, where their details are displayed side by side. I connected grid selection to React state, so the panel updates as soon as the selection changes. gp-grid also supports cell and range selection through mouse and keyboard interactions.
Row Grouping and Aggregation
The Vendors page includes a Grouped view that organizes records into expandable groups by cuisine, country, or festival zone. The Schedule page also supports grouping events by day, category, or stage. gp-grid can display aggregates and group totals, calculated locally or loaded from a server. This makes large collections easier to navigate while keeping related records together.
Pivoting
The Pivot view gives festival organizers a quick overview of vendor availability. I configured cuisines as rows, availability statuses as columns, and vendor counts as values. This creates a useful summary of how many vendors in each cuisine are Open, Busy, Sold Out, or Closed. The view uses gp-grid's pivot functionality, so the result is an actual grid pivot, not a manually assembled table.
Virtual Scrolling
gp-grid uses reusable DOM slots for virtual scrolling. As visitors move through a dataset, the grid recycles these slots and renders the visible rows with a small overscan buffer. The Vendors and Food Explorer pages include dataset selectors, allowing visitors to switch between different list sizes. This provides a practical way to explore how the grids handle longer catalogs without rendering every record at once.
Live Data Updates
The Schedule page includes a Live updates toggle that simulates changes during the festival. Events move between Upcoming, Live, and Completed, while the On Now banner and summary counts update accordingly. Vendor availability also changes between Open, Busy, Sold Out, and Closed. These updates modify the underlying records and application state, keeping the grid and related interface elements consistent.
Column Resizing, Reordering, and Pinning
Visitors can customize the grid layout by dragging column headers to reorder them, resizing columns from their edges, and using the pin icon to keep important columns on the left or right. The pin control cycles between left, right, and unpinned states. These interactions are useful when a grid contains many fields and visitors want to keep key information visible while exploring other columns.
Keyboard Navigation and Editing Experience
Keyboard navigation supports arrow keys, Shift+Arrow, Tab, Enter, Home/End, and Ctrl+Home/End. Users can start editing with Enter or F2, cancel with Escape, and copy or paste using Ctrl+C and Ctrl+V. For example, an organizer can move to a vendor's stall number, edit it, and commit the change without using the mouse. The grid also provides ARIA grid roles and keyboard support, although full accessibility compliance should not be assumed.
Dark Mode
I also implemented dark mode for the gp-grid tables in STREET BITES. The grid's appearance changes to a dark theme, adapting elements such as cell backgrounds, text, borders, and column headers while keeping the data easy to read. This gives users a more comfortable way to view the tables in low-light environments and shows how the grid can be styled to fit different interface themes.
Responsive Tables
I also checked how the gp-grid tables behave on smaller screens. The tables remain usable on mobile devices and narrower viewports, allowing visitors to browse the data without the layout becoming difficult to navigate.
This is important for STREET BITES because visitors may want to check vendors, explore dishes, or view the festival schedule from their phones. The grid keeps the data accessible across different screen sizes.
Performance and Development Experience
gp-grid uses slot-based virtual scrolling, recycling DOM slots as users move through a dataset and rendering visible rows with a small overscan buffer. In STREET BITES, the Vendors and Food Explorer pages include dataset selectors, with 10,000 vendors and 5,000 dishes shown in the current project.
For a separate performance reference, gp-grid's published benchmark tested one million rows in Chrome using @gp-grid/react 0.19.0. It reported an average of 56.2 FPS while scrolling, zero dropped frames, approximately 255 MB of heap memory after loading, and 652 ms for ascending sorting. These are gp-grid's benchmark results, not measurements from STREET BITES. The project provides a pnpm bench command for reproducing its tests.
Integration with React and TypeScript
The integration felt smooth throughout development. Installing the package, defining columns, connecting data, adding custom renderers, and wiring interactions to React state were all straightforward. The built-in TypeScript types also meant I could work with typed columns and records without installing separate @types packages.
I also liked that the same column model carries across the React, Vue, and Angular integrations. Developers working with more than one of these frameworks can transfer much of their grid configuration knowledge.
What Worked Well
Having sorting, filtering, editing, selection, grouping, pivoting, and virtualization available in one open-source package made the implementation easier to organize. Custom renderers were another strong point: they helped the grids match STREET BITES' visual identity, with food thumbnails, vendor photos, ratings, and colorful badges.
The package also has zero external dependencies, and gp-grid provides feature guides and an official agent skill for AI coding assistants.
Challenges and Limitations
There are a few things worth considering:
- Library maturity: gp-grid is a young project at version 1.0.0, with a smaller community and fewer third-party tutorials than established alternatives.
- Accessibility: it supports ARIA grid roles and keyboard navigation, but full accessibility qualification is still planned, so teams with strict requirements should test with assistive technology.
- Implementation detail: narrow column widths can truncate headers, so allow enough space for longer labels.
Practical Tips Before You Start
- Give the grid container an explicit height.
- Import the stylesheet once at the application root.
- Pair
cellRendererwithvalueFormatterwhen displayed values need consistent formatting. - Use a stable
getRowIdfor live data, and consider server-side data for very large datasets.
Who Should Use gp-grid?
gp-grid is worth considering if you're building a React, Vue, or Angular application that needs advanced data-grid features without a paid feature tier. It can suit admin interfaces, analytics tools, inventory systems, and applications that handle large tabular datasets.
It's also a good option for developers who want TypeScript support, custom cell rendering, editing, grouping, pivoting, and virtual scrolling in one package. Teams evaluating it for production should test it with their own data and requirements, especially if they need a mature ecosystem or extensive accessibility validation.
Frequently Asked Questions
Is gp-grid suitable for production React applications?It can be, with sensible evaluation. gp-grid is Apache 2.0, TypeScript-native, and offers a React integration alongside Vue and Angular support. It covered the grid requirements in STREET BITES, but it's a young project at version 1.0.0. Test it with your own data and pin the version you adopt.
Does gp-grid support sorting, filtering, and inline editing?
Yes. All three are built in. In STREET BITES, column headers support sorting and Shift+click multi-column sorting. Filters combine page-level controls with column filter popups, while Organizer mode enables inline editing through double-click, Enter, or F2.
Can a React data grid handle one million rows?
Yes, with virtualization. gp-grid uses slot-based virtual scrolling to render visible rows. In its published one-million-row benchmark, it averaged 56.2 FPS with zero dropped frames and used approximately 255 MB of memory after loading. These are the project's benchmark results, not measurements from STREET BITES. For datasets of 10 million rows or more, the performance guide recommends server-side data.
Does gp-grid support row grouping and pivoting?
Yes. Both are included features. Row grouping organizes records into expandable groups with aggregates and totals. Pivoting turns data dimensions into columns to create summary views. In STREET BITES, I used a pivot view to display vendor counts by cuisine and availability status.
Is gp-grid free and open source?
Yes. gp-grid is released under the Apache 2.0 license, which permits commercial use, modification, and distribution with the required notices. Its features are included without an Enterprise tier or feature-based paywalls. You can also support the project through its optional donations.
Final Thoughts
Building STREET BITES gave me a practical way to explore gp-grid across vendor records, food catalogs, and festival schedules. I could use its sorting, filtering, editing, grouping, pivoting, and virtualization capabilities in scenarios that made sense for the application.
I came away with a positive impression of its React integration and the range of features available under an open-source license. Its young ecosystem is worth considering before adopting it for a large production system, but gp-grid is a promising option for developers who need a capable data grid without feature-based licensing restrictions.
If you're evaluating a React data grid for your next project, I'd recommend trying gp-grid with a dataset and workflow similar to your own.
| Thanks for reading! 🙏🏻 I hope you found this useful ✅ Please react and follow for more 😍 Made with 💙 by Hadil Ben Abdallah |    |
|---|
