Features

The grid alone shows, scrolls, sorts and selects rows. Everything else is a feature: imported from its own entry and given in features, so an application loads only what it uses. Most features need their texts, spread into the grid’s messages, and some need a style sheet from @dzgrid/theme, loaded after dzgrid.css.

import { createGrid } from '@dzgrid/dom';
import { pagination } from '@dzgrid/dom/pagination';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_PAGINATION } from '@dzgrid/dom/locales/en-pagination';

type Row = { id: string; name: string };

createGrid<Row>(document.getElementById('grid')!, {
  rows: [{ id: 'r1', name: 'First' }],
  columns: [{ id: 'name', header: 'Name' }],
  getRowId: (r) => r.id,
  pagination: { pageSize: 50 },
  messages: { ...EN, text: { ...EN.text, ...EN_PAGINATION.text } },
  features: [pagination()],
});

Function	Import	What it does
pagination	@dzgrid/dom/pagination	A footer under the rows: what is selected, where you are, and the pager.
quickSearch	@dzgrid/dom/search	A search field of your page filters the rows on every visible column.
csvExport	@dzgrid/dom/export	Write the grid's rows to a CSV, Excel or JSON file from your own button.
badge	@dzgrid/dom/parts	A ready cell part: a status shown as a small framed label with a tone.
cellBoolean	@dzgrid/dom/parts	A ready cell part for yes / no columns: a mark and the word, in the grid’s language.
rules	@dzgrid/dom/rules	Selection rules: some rows cannot be ticked, and the user is told why.
tree	@dzgrid/dom/tree	Rows shown as a tree, from a parent id, nested children or a path: indent, chevrons and keys.
lazyChildren	@dzgrid/dom/tree-lazy	Tree children loaded by your code or a server the first time their parent opens.
detail	@dzgrid/dom/detail	A panel under a row, opened by a chevron: any content of yours, or a whole grid.
nestedGrid	@dzgrid/dom/detail	A ready detail part: a whole grid of its own inside each master’s panel.
edit	@dzgrid/dom/edit	Holds the edits: save, refusals, undo and redo, and rows out of order after an edit.
editors	@dzgrid/dom/editors	The fields that edit a cell: text, number, day, date and time, yes / no, a list, or your own.
listEditor	@dzgrid/dom/editors-list	The list field of the editors: pick a value among the column’s options, with the keyboard or a click.
filters	@dzgrid/dom/filters	Column filters: a filter button and a popup in each header, and an optional row of filter fields.
range	@dzgrid/dom/range	Blocks of cells: take a rectangle with the keys or the mouse, copy it, paste into it.
fill	@dzgrid/dom/fill	The fill handle: copy a block on, or continue a series, by the mouse or the keys.
columns	@dzgrid/dom/columns	Move columns by dragging their headers or with the keyboard, and size them from the keyboard.
columnMenu	@dzgrid/dom/column-menu	The ⋮ menu on each column header: sort, pin, size, move, hide, choose, reset.
contextMenu	@dzgrid/dom/context-menu	The cell menu: copy, paste, fill, undo, pin, export, and your own items, on a right-click or a key.
statusBar	@dzgrid/dom/statusbar	A strip under the rows with the block's count, sum, mean, min and max, and row counts if you ask.
find	@dzgrid/dom/find	Ctrl+F inside the grid: a find bar that marks every match and walks from one to the next.
rowDrag	@dzgrid/dom/row-drag	Move rows by a grip, by the keys or by the menu; the grid tells where, your data decides.
dock	@dzgrid/dom/dock	Areas beside and under the rows for the columns chooser, the filters panel and your own panels.
pivot	@dzgrid/dom/pivot	A pivot table on top of grouping: the values of a column become columns, with a total at each crossing.
pivotBar	@dzgrid/dom/pivot-bar	The pivot’s bar: Rows, Columns and Values, each a row of chips the user rearranges.
rowNumbers	@dzgrid/dom/row-numbers	Numbers 1, 2, 3 at the start of every row, in the order shown; a click takes the row.
grouping	@dzgrid/dom/grouping	Rows gathered under group rows, one level per column, with totals.
groupZone	@dzgrid/dom/group-zone	The Group by band above the rows: one chip per grouping column, to drag, move or remove.
filtersPanel	@dzgrid/dom/filters-panel	Every column’s filter in one side panel, with a column search and Clear all filters.
columnsChooser	@dzgrid/dom/columns-panel	A window to show, hide and order the columns, with a search box.
gridState	@dzgrid/dom/state	Read and restore the grid's state — columns, sort, filters, page, dock — in storage or in the address.
pinnedRows	@dzgrid/dom/pinned-rows	Rows that stay in view: some under the headers, some at the foot of the grid.
autoHeight	@dzgrid/dom/auto-height	Rows as tall as their tallest wrapped cell.
rowGaps	@dzgrid/dom/row-gaps	An empty space above some rows, to see at a glance where a category starts.
print	@dzgrid/dom/print	Print the rows as they are on screen, as a real table: headers on each page, no row cut.
printOnMenu	@dzgrid/dom/print-menu	The browser's own print command (Ctrl+P, the File menu) prints the whole grid as a table.
freshRows	@dzgrid/dom/fresh-rows	Rows a refresh brought are marked for a few seconds and counted once to a screen reader.
motion	@dzgrid/dom/motion-gsap	Rows that glide after a sort, a flash on a changed value, popups that fade in — with GSAP, which you install.
totalsRow	@dzgrid/dom/totals-row	A Total row always in view at the bottom of the grid, from each column’s total.
verticalHeaders	@dzgrid/dom/vertical-headers	Column titles written upwards, so narrow columns stay narrow.
theming	@dzgrid/dom/theme	Writes the theme setting as CSS variables and draws your own icons, both live.
wrappedHeaders	@dzgrid/dom/wrapped-headers	Long column titles on several lines; the title row grows to the tallest.
columnHover	@dzgrid/dom/column-hover	Marks the column under the mouse, so your style sheet can tint it.
responsive	@dzgrid/dom/responsive	Columns that do not fit move into lines under each row instead of scrolling sideways.
fileImport	@dzgrid/dom/import	Read a CSV or Excel file dropped on the grid, or picked with your button, into rows you decide about.
spans	@dzgrid/dom/spans	Cells spanning rows and columns: merged values, spans from the data, full-width rows, grouped headers.
groups	@dzgrid/dom/groups	Header groups that open and close, showing fewer columns when closed.
slots	@dzgrid/dom/slots	Lets your parts draw the column titles, the overlay, the busy mark and the tooltip.