Getting started
Quick Start
OmniGrid is a data grid built on a framework-agnostic core: the engine owns rows, columns, state, viewport geometry, and virtualization, with no DOM and no framework imports. Optional behavior ships as plugins — free Base plugins like sorting, filtering, and selection, plus commercial Pro plugins for grouping, tree data, and export. Thin adapters bind the same core to any current UI stack. This guide demonstrates the React adapter.
Install adapter
Install the React wrapper. It brings the framework-agnostic grid core with it, so the component is ready to use in a React application.
Describe your columns
Create a ColumnDef for each visible field. Give every column a stable id, then choose its field, width, or flex behavior. Formatters, cell renderers, visibility, sorting, and cell alignment are configured here; the align property affects only cell content.
Connect the data
Pass any array of rows to the data prop: a local static dataset, an asynchronous response, or generated data. The row type and the column fields should describe the same shape, which keeps the configuration predictable and type-safe.
Write the minimal integration
Render the OmniGrid component with column definitions and a data array. When no height is provided, the React wrapper grows to fit the grid; provide a height when you want a scrollable, virtualized viewport.
Install plugins
Install only the plugins needed by the grid. Sorting and selection are separate packages, so features stay opt-in and the base grid remains small.
Attach plugins
Create the plugin instances once and pass them through the plugins prop. Sorting adds header sorting, while selection adds row highlighting and optional checkboxes. That is the complete integration: install the wrapper, configure columns and data, add the plugins you need, and the grid is ready.
The result
Run it live
A compact minion register with sorting and selection enabled. Click a column header to sort, or use the checkboxes to select rows. The same setup also works with larger datasets and a fixed height when you need viewport virtualization.