EliteGrid 0.2.0: a modular TypeScript data grid (77 kB, zero deps, 32 features)

#typescript #react #vue #javascript

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 enableMultiColumnSorting. We wanted two things: only ship the code you actually use, and a config that reads like English.

1. Modular core

In 0.2.0, features are modules you import. The core is a microkernel where every feature is an independent plugin on a shared event bus, 16 plugins in total, eight of them mandatory.

The React adapter is 55 kB gzipped with no modules and 77 kB with every module registered. There are zero runtime dependencies.

Upgrading from 0.1.x is one line:

modules: [AllModules]   // or import only the ones you use

2. A grouped config API

Every feature lives in its own typed namespace:

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),
  },
})

export default function App() {
  return <Grid grid={grid} />
}

Config, events and plugins are fully type-inferred, so a typo is a compile error instead of a runtime surprise.

3. What's new in 0.2.0

32 features, including:

Row grouping with sum / avg / min / max / count
Row and column virtualization (no pagination needed for 100,000 rows)
Five cell editors, plus 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, i18n ## 4. Three adapters, one test suite

React 18/19, Vue 3 and vanilla JS are all first-class. One shared parity suite runs against all three, so behaviour that works in React works the same in Vue. The project has 4,973 passing tests.

5. Accessibility by default

WCAG 2.1 AA, the full ARIA grid pattern, keyboard navigation, screen reader announcements, prefers-reduced-motion and Windows High Contrast support. None of it needs configuring.

Try it

Playground: https://elitegrid.dev/playground
Six live demos (trading blotter, 100k-SKU inventory, 85-column telemetry): https://elitegrid.dev/demos
Docs (three 22-chapter manuals, one per adapter): https://elitegrid.dev/docs

npm i @elitegrid/react

The Community edition is free to use. Next up is 0.3 with Angular and Svelte adapters.

What would you want from a data grid that the ones you use today don't give you? We'd like to hear it in the comments.

DEV Community