ui-grid

Discord Community

UI Grid — 5.x

The modern web data grid for Angular, React, and Web Components. Every feature is free and open source.

Rust, WASM implementation, egui, and native adapter source and documentation live in orneryd/uiGrid.

v5.x + is in use by my other project, NornicDB, in the web ui components (It's a high-performance golang graph+vector database if you want to take a look)

A from-scratch rewrite of the original by the original author. Same gridOptions / columnDefs / onRegisterApi api surface, modern Angular signals internals, and zero legacy baggage.

Just like the original grid, it will NEVER be monetized. This is purely my contribution to the greater community.

It proves that the datagrid cabal wants you to think it's hard to write a data grid. Well, it's not, and nobody should be paying to group data.

Live Demo & Docs | npm | Rust Project | Used by NornicDB

---

Why Remastered?

• Original authorship — built by the same engineer who created AngularJS ui-grid, with a decade of hindsight on what worked and what didn't
• Familiar API — if you used the original ui-grid, you already know this one: gridOptions, columnDefs, onRegisterApi, gridApi.core.*
• Modern internals — shared vanilla web component core with Shadow DOM encapsulation; Angular and React wrappers are thin bridges that project framework templates into the vanilla element via slot-based portals
• No legacy — no $scope, no Bower, no Grunt, no jQuery, no module system from 2013

---

Feature Comparison

Everything below ships free and MIT-licensed. No enterprise tier, no license keys, no per-developer fees.

Feature UI Grid ag-Grid Community ag-Grid Enterprise Vaadin Grid Kendo UI Syncfusion Sorting Free Free — Free Paid Community* Filtering Free Free — Free Paid Community* Row Grouping Free — ~$999/dev/yr — Paid Community* Tree Data Free — ~$999/dev/yr Free Paid Community* Master/Detail Rows Free — ~$999/dev/yr — Paid Community* Inline Cell Editing Free Free — Pro ~$159/dev/mo Paid Community* Row Selection Free Free — Free Paid Community* Column Resizing Free Free — Free Paid Community* CSV Export Free Free — — Paid Community* Excel Export Free — ~$999/dev/yr — Paid Community* PDF Export Free — ~$999/dev/yr — Paid Community* Virtual Scrolling Free Free — Free Paid Community* Pagination Free Free — Free Paid Community* Column Pinning Free Free — Free Paid Community* Column Reordering Free Free — Free Paid Community* Save/Restore State Free Free — — Paid — Infinite Scroll Free Free — Free Paid Community* Keyboard Cell Nav Free Free — — Paid Community* Row Edit (dirty/save) Free — — — — — Cell Validation Free — — — — — CSV/JSON Import Free — — — — — Shadow DOM Free — — — — — Web Component Build Free — — Native — — Feature Tree-Shaking Free — — — — — SSR Support Free — ~$999/dev/yr — — — i18n (6 locales built-in) Free Free — Free Paid Community* React Yes Wrapper Wrapper No Wrapper Wrapper Angular Yes Wrapper Wrapper No Wrapper Wrapper License MIT MIT Commercial Apache/Comm. Commercial Comm./Community Price $0 $0 ~$999/dev/yr $159/dev/mo (Pro) ~$799/dev/yr See below

Bold = features where UI Grid gives you for free what competitors charge for or don't offer at all.

Syncfusion Community license is free for companies with <$1M annual revenue, ≤5 developers, and ≤$3M outside capital. Their paid tier requires a custom quote. Kendo UI ranges $799–$1,299/dev/yr depending on support level. Prices are approximate and subject to change.

---

Quick Start

npm install @ornery/ui-grid

Angular Component

…

React

npm install @ornery/ui-grid-react @ornery/ui-grid-core @ornery/ui-grid-vanilla

import { UiGrid } from '@ornery/ui-grid-react';
import type { GridOptions } from '@ornery/ui-grid-core';

function MyGrid() {
  const options: GridOptions = {
    id: 'my-grid',
    data: [
      { name: 'Alice', role: 'Engineer', salary: 120000 },
      { name: 'Bob', role: 'Designer', salary: 95000 },
    ],
    columnDefs: [
      { name: 'name' },
      { name: 'role' },
      { name: 'salary', type: 'number', align: 'end' },
    ],
  };

  return <UiGrid options={options} />;
}

Web Components (Vanilla)

The grid's rendering engine is a framework-free custom element (<ui-grid-element>) built on @ornery/ui-grid-core with pure DOM rendering and Shadow DOM encapsulation. Both the Angular and React wrappers are thin bridges around this same element — they mount <ui-grid-element>, pass options, and project framework-specific templates into it via a slot-based portal system.

npm install @ornery/ui-grid-vanilla @ornery/ui-grid-core

No-bundler browser usage is supported by the browser bundle. It includes the core runtime and registers <ui-grid-element> when loaded:

<script type="module" src="./ui-grid-element.js"></script>

<ui-grid-element
  grid-id="static-grid"
  enable-sorting
  enable-filtering
  column-defs='[{"name":"name"},{"name":"role"}]'
  data='[{"name":"Alice","role":"Engineer"}]'
>
</ui-grid-element>

When building from this repo, npm run build:vanilla writes that file to projects/ui-grid-vanilla/dist/browser/ui-grid-element.js. Use that browser bundle for static script-tag consumption; projects/ui-grid-vanilla/dist/index.js is CommonJS and projects/ui-grid-vanilla/dist/index.mjs is the package ESM entry for bundlers or import-map setups.

Declarative HTML usage:

<ui-grid-element
  grid-id="vanilla-demo"
  title="Team Roster"
  enable-sorting
  enable-filtering
  column-defs='[
    { "name": "name" },
    { "name": "role" },
    { "name": "salary", "type": "number", "align": "end" }
  ]'
  data='[
    { "name": "Alice", "role": "Engineer", "salary": 120000 },
    { "name": "Bob", "role": "Designer", "salary": 95000 }
  ]'
>
</ui-grid-element>

<script type="module">
  import { defineStandaloneUiGridElement } from '@ornery/ui-grid-vanilla';

  await defineStandaloneUiGridElement(); // registers <ui-grid-element>
</script>

Supported declarative inputs include boolean flags (enable-sorting, enable-filtering), scalar attributes (grid-id, title, row-height), and JSON attributes (column-defs, data).

For callbacks, function-valued column definitions, or high-frequency updates, use the options property:

import { mountVanillaUiGrid } from '@ornery/ui-grid-vanilla';

await mountVanillaUiGrid(document.getElementById('app'), {
  id: 'mounted-grid',
  data: [{ name: 'Alice', role: 'Engineer' }],
  columnDefs: [{ name: 'name' }, { name: 'role' }],
});

Features

• Sorting — click column headers to cycle asc/desc/none, custom comparators, programmatic API
• Filtering — per-column inputs with conditions: contains, exact, startsWith, endsWith, greaterThan, regex, custom predicates
• Row Grouping — nested multi-column grouping with collapsible group headers
• Tree View — hierarchical data with expand/collapse per node, arbitrary nesting depth
• Expandable Rows — master/detail pattern with custom templates (Angular ng-template, React render prop, or vanilla <template> slot)
• Cell Editing — inline spreadsheet-style editing with full keyboard navigation (Tab, Enter, Escape), edit-on-focus, Enter/Tab commit+move across editable columns
• Keyboard Cell Navigation — Arrow/Tab/Home/End navigation with wrap/clamp modes, focus persistence across re-renders, keyDownOverrides for custom key handling, full gridApi.cellNav surface
• Row Selection — click/shift/ctrl/drag-paint mouse selection, keyboard (Space, Ctrl+A), row-header checkbox column, select-all header, isRowSelectable hook, 13 options, 18 API methods, 3 events
• Column Resizing — drag column borders to resize, programmatic API, persisted via save/restore state
• Row Edit — dirty/saving/error row lifecycle with rowEditWaitInterval debounce, setSavePromise pattern, auto-retry on error, visual row state indicators
• Cell Validation — declarative per-column validators (built-in required, minLength, maxLength + custom), async validator support, invalid cell markers with error messages, gridApi.validate surface
• Pagination — client-side or external pagination with configurable page sizes
• Infinite Scroll — bi-directional infinite scrolling with loading state management, needLoadMoreData/needLoadMoreDataTop events, full public API
• Column Pinning — freeze columns left or right with CSS position: sticky, programmatic API, save/restore state
• Column Moving — HTML5 native drag-and-drop column reordering
• CSV Export — download visible/selected/all rows with formula-injection protection, full option matrix (separator, header filter, field callbacks, BOM compatibility)
• Excel Export — ExcelBuilder-compa