Getting Started

Get up and running with @ornery/ui-grid in under five minutes.

Install

npm install @ornery/ui-grid

Peer dependencies: @angular/core, @angular/common, rxjs, tslib.

Minimal Angular Setup

The grid ships as a standalone component — no module imports required:

import { Component } from '@angular/core';
import { GridOptions, UiGridComponent } from '@ornery/ui-grid';

@Component({
  selector: 'app-my-grid',
  imports: [UiGridComponent],
  template: `<app-ui-grid [options]="gridOptions" />`,
})
export class MyGridComponent {
  gridOptions: 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' },
    ],
  };
}

Required GridOptions Fields

Field	Type	Description
id	string	Unique grid identifier (used for CSV filenames and row IDs)
data	readonly GridRecord[]	Array of row objects
columnDefs	readonly GridColumnDef[]	Column definitions — each needs at minimum a name

React

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

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

const options: GridOptions = {
  id: 'react-grid',
  data: [{ name: 'Alice', role: 'Engineer' }],
  columnDefs: [{ name: 'name' }, { name: 'role' }],
};

function App() {
  return <UiGrid options={options} />;
}

Web Components

The grid ships two distinct web component outputs. Both register a <ui-grid-element> custom element with the same GridOptions API. See Web Component for full details.

Angular-backed (@ornery/ui-grid)

Built with @angular/elements. Bundles the Angular runtime. Produced by npm run build:element:

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

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

Or assign the full options object when you need callbacks or function-valued configuration:

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

<ui-grid-element id="my-grid"></ui-grid-element>

<script type="module">
  const grid = document.querySelector('#my-grid');
  grid.options = {
    id: 'element-demo',
    data: [{ name: 'Alice', role: 'Engineer' }],
    columnDefs: [{ name: 'name' }, { name: 'role' }],
  };
</script>

Vanilla (@ornery/ui-grid-vanilla)

Framework-free, pure DOM with Shadow DOM. No Angular dependency:

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

Declarative setup now works directly in HTML:

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

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

  await defineStandaloneUiGridElement();
</script>

Or bind the same fields as individual JS properties:

<ui-grid-element id="my-grid"></ui-grid-element>

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

  await defineStandaloneUiGridElement();

  const grid = document.querySelector('#my-grid');
  grid.gridId = 'vanilla-props';
  grid.enableSorting = true;
  grid.enableFiltering = true;
  grid.columnDefs = [{ name: 'name' }, { name: 'role' }];
  grid.data = [{ name: 'Alice', role: 'Engineer' }];
</script>

The original bulk options property remains available when you need callbacks or function-valued configuration:

<ui-grid-element id="my-grid"></ui-grid-element>

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

  await defineStandaloneUiGridElement();

  document.querySelector('#my-grid').options = {
    id: 'vanilla-demo',
    data: [{ name: 'Alice', role: 'Engineer' }],
    columnDefs: [{ name: 'name' }, { name: 'role' }],
  };
</script>

Run the Demo Locally

git clone https://github.com/orneryd/uiGrid.git
cd uiGrid
npm ci
npm start

Open http://localhost:4200 to see the full demo with 100,000 rows, theming, and all features active. The live demo includes dedicated pages for Angular, React, Web Components, and Rust usage.

Run the Rust-backed Demo Locally

If you want to exercise the Rust/WASM engine directly in the browser:

npm run start:vanilla

Open http://127.0.0.1:4174/ to see the framework-agnostic vanilla demo that mounts the grid through the Rust-backed browser pipeline.

Next Steps

• Features — see everything the grid can do
• Theming — customize colors and layout via CSS custom properties
• API Reference — full GridOptions, GridColumnDef, and UiGridApi documentation
• Web Component — Angular-backed and vanilla web component outputs
• Rust / WASM — use the Rust pipeline in Angular, React, or vanilla hosts
• Rust / egui — native Rust ui-grid-egui adapter with pinning, export, and save/restore