Hello grid

A minimal JavaScript data grid setup

createGrid(el, { columns, rows }) is the whole surface area for a first grid: an element, a column list, and an array of records. There is no build step, no bundler configuration and no dependency to install first, which matters most in the moment a developer is deciding whether a JavaScript data grid is worth adopting at all rather than reaching for a table of <div>s. Columns can be declared with just a field and the grid infers a reasonable type, width and comparator from the values it sees, so the ten-line version and the fully typed version are the same API, not two different modes. Rows are a plain array; there is no schema to register before data can render. Rendering itself uses the same virtual scrolling the larger demos exercise, so the initial paint cost stays proportional to the rows visible in the viewport, not the rows supplied, even before a dataset is large enough for that to matter. Keyboard focus lands on the grid as a single tab stop, with arrow keys moving the active cell, which means accessibility is not something added after the columns are configured but a property of createGrid itself. The result is a working, sortable, keyboard-navigable grid before any option beyond columns and rows has been touched.

How do I create a data grid in JavaScript with no framework?

Call createGrid(el, { columns, rows }) against a container element, a column array describing each field, and a row array of plain objects. No React, Vue or build tooling is required; the function attaches the grid directly to the element and renders from the data given. Column types, widths and sort behaviour can be left unset and Lattice Grid infers them from the row values.