DzGrid

What it is

DzGrid shows rows of data in a table people can work in: sort by a column, filter, search, select, edit, move rows, group them, export them to a file. It is written from scratch in TypeScript, in layers you can take separately:

• @dzgrid/core — the calculations: sorting, filtering, grouping, trees, pivots, editing, the state. No DOM, no clock, no dependency: it runs in a browser, a worker or a server.
• @dzgrid/dom — draws the grid in any page. Every feature is its own entry (@dzgrid/dom/filters, @dzgrid/dom/export…): a page pays only for what it imports.
• @dzgrid/theme — the look, as CSS variables: light and dark, densities, contrast checked.
• @dzgrid/angular and @dzgrid/element — the same grid as an Angular component or a Web Component.

The grid below is a real one, drawn by the library on this page. Sort by a title, filter from a title’s menu, tick rows, move with the arrow keys; switch the site to dark and the grid follows.

Made-up data: 60 packets of seeds.

Designed in, not added

Rows by id, never by position

Every row has a stable id (getRowId). Commands, selection and focus follow the row through sorts, filters and new data.

Bad input never throws

A column it cannot read, a date without its offset, a server answer out of shape: each becomes a Problem you can log, and the grid keeps working.

Right to left and time zones

Logical sides only, so Arabic or Hebrew pages need no other CSS. Calendar days and instants are different column types, shown in the zone you choose.

Keyboards and screen readers

The WAI-ARIA grid pattern, one tab stop, a keyboard way for every action, sorts and filters said aloud; the grid’s own texts ship in English, French and Arabic.

Start here

TypeScriptcreateGrid in any page, no framework.

AngularThe dz-grid component, Angular 19 to 22.

Web Componentdz-grid for plain HTML or any framework.