EliteGrid 0.2.0: a modular TypeScript data grid (77 kB, zero deps, 32 features)
We've been building EliteGrid, a TypeScript data grid for React, Vue and plain JavaScript. 0.2.0 is out on npm today, launching as the Community edition. It's the biggest release so far, and it's a breaking one, so here's what changed and why. The problem with most grids Most grids ship every feature whether you use it or not, and configure them with a pile of flat boolean options like…
EliteGrid 0.2.0, a modular TypeScript data grid compatible with React, Vue and plain JavaScript, has been released on npm today as the Community edition. This is the most substantial release yet, and it introduces breaking changes. The main issues with most grids are that they include every feature regardless of whether you use it, and they are configured with many flat boolean options. EliteGrid aims to address these issues by only shipping the code you need and by providing a config that reads like English.
The core of EliteGrid is a modular architecture, with each feature being an independent plugin on a shared event bus. There are 16 plugins in total, eight of them mandatory, and the React adapter alone is 55 kB gzipped when all modules are registered, with a grand total of 77 kB. Notably, there are zero runtime dependencies.
Upgrading from version 0.1.x is as simple as adding a single line of code: modules: [AllModules]. This allows users to either import all modules or selectively import only the ones they require.
The configuration API is now grouped, with each feature living in its own typed namespace. For example, to create a grid, you would use:
```javascript
import { createGrid, Grid, AllModules } from '@elitegrid/react';
const grid = createGrid({
data: rows,
columns: columns,
rowId: id,
modules: [AllModules],
sorting: { multiSort: true },
filtering: { debounceMs: 300 },
grouping: { model: ['department'] },
pagination: { enabled: true, pageSize: 25 },
selection: { mode: 'multiple' },
editing: { enabled: true },
export: { filename: 'team' },
appearance: { theme: 'auto' },
events: {
onEditCommit: (id, field, value) => save(id, field, value),
},
});
```
This configuration approach ensures that all types are inferred, making a typo a compile error instead of a runtime surprise.
Version 0.2.0 introduces 32 features, including row grouping with various aggregate functions, virtualization for large datasets, five cell editors, custom cell and header renderers, set filter, floating filters, global search, column menu, context menu, clipboard copy, detail rows, row drag, pinned rows, row numbers, infinite scroll, batch transactions, saved state, and internationalization (i18n).
The library supports React 18/19, Vue 3, and vanilla JavaScript as first-class citizens, and all three have a shared parity test suite. With 4,973 passing tests, EliteGrid is quite robust.
Accessibility is built into EliteGrid by default, adhering to WCAG 2.1 AA standards. It includes full ARIA grid pattern, keyboard navigation, screen reader announcements, prefers-reduced-motion support, and Windows High Contrast support. This is all configured out of the box, so users can start using EliteGrid immediately without worrying about accessibility.
You can try EliteGrid in your browser at https://elitegrid.dev/playground, where you'll find six live demos, such as a trading blotter, 100k-SKU inventory, and 85-column telemetry. The documentation is also available at https://elitegrid.dev/docs, featuring three 22-chapter manuals, one per adapter.
The Community edition is free to use. The next major release, 0.3, will include Angular and Svelte adapters. The team is eager to hear what additional features users would like to see in a data grid that their current tools may lack.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
