The data grid is a native table that sorts, filters, pages and edits. Describe the columns, pass the rows, and each cell is formatted by type for the locale: numbers, currencies, dates, yes and no, and labels for enum values.
Its state lives in models you can bind, save and send to a server: sort, filters, search, page, selected, and columnState for the widths, order, pins and hidden columns people choose. Without pages, only the rows in view are rendered, so 100,000 rows scroll like ten.
Every cell is reachable from the keyboard, and each column’s panel sorts, filters, pins, moves, fits and hides it.
Search, sort and pages
Type to search every column. Click a header to sort, and Shift-click to add a second column. nuiGridCell draws the status, and exportCsv() hands over what’s shown.
Selection
selection="multiple" adds checkboxes and binds the keys of the selected rows. Shift-click selects a range; the header box selects every row that matches.
Editing
Double-click a cell, press Enter or just type. validate keeps the editor open with a message; a committed edit updates rows and emits cellEdit.
100,000 rows
Without pages, only the rows in view are rendered. Pinned columns stay at the edges, and columnState keeps the layout people make.
Server data
In server mode the grid shows rows as they come and reports each change in queryChange. Set loading while you fetch.