What is Datagrid?

Datagrid is a data table component for web applications. It is built for large data sets and business applications, where users need to sort, filter, group, edit and export data.

It consists of two layers:

• @datagrid/core – a framework agnostic core written in TypeScript. It manages the data pipeline (filtering, sorting, grouping, aggregation, pagination), the column model, selection, focus, editing, keyboard and mouse interaction and the virtualization of rows and columns.
• @datagrid/vue-ui – the Vue 3 component. It renders what the core calculates and offers a Vue friendly API with props, events, v-model bindings and slots.
• @datagrid/react-ui – the React component with the same features, see React.

Optional packages:

• @datagrid/export – Excel (xlsx) and PDF export (CSV export is built into the core).

Features

Area	Features
Rendering	row and column virtualization, content based or fixed row heights, auto height columns, column groups (multi level headers)
Columns	column types, default column definition, reusable column types, formatters, resizing, moving, pinning (left/right), hiding, autosize, flex sizing, column menu, column chooser
Data	client side and server side data, stable row ids, reactive updates, tree data
Sorting	multi column sorting, custom sort functions, natural sort order, custom sorting order, initial sort
Filtering	typed floating filters (text, number, date, set, boolean), operators, combined conditions, shorthand syntax (>10, 1..5), custom filter functions, global quick filter
Grouping	row grouping by drag & drop or API, aggregations (sum, avg, min, max, count, first, last, custom), total row
Selection	row selection, checkbox column, select all, cell range selection, selectable rows / cells
Editing	text, number, date, select, checkbox and textarea editors, custom editors, value parser and setter, validation, typing starts editing
Clipboard	copy and paste of cell ranges (tab separated, compatible with Excel and Google Sheets)
Layout	pinned top and bottom rows, master / detail rows, pagination, toolbar and footer slots, loading and empty overlays
Accessibility	ARIA grid roles, keyboard navigation (arrows, page up/down, home/end, tab), focus management
Customization	slots and components for cells, headers, filters, editors and group rows; cell and row classes and styles, themes and CSS variables, localization (en, de)
API	complete grid API, state saving and restoring, events for everything, headless usage

Philosophy

• Lightweight: no runtime dependencies besides Vue (and a tiny deep equal helper). The complete grid is around 50 kB gzipped including styles.
• Sensible defaults: a grid with sorting and filtering needs a few lines of configuration. Everything else is opt-in.
• Configurable: nearly every behavior can be changed with options, functions or slots.
• Framework agnostic: the core does not depend on Vue. Other framework adapters can be built on top of it.

Browser support

All evergreen browsers (Chrome, Edge, Firefox, Safari) of the last two years. The styles use color-mix() and :has().