2e:null 2f:["$","title",null,{"children":"HyperGrid | David Eads | Observable"}] 34:Ta43,md`## Example invocations \`\`\`js // No options HyperGrid(data) // Basic options HyperGrid(data, {tableHeight: 500}) // Custom columns HyperGrid(data, { columns: [{ name: "sum", formatter: d => d.a + d.b }] }); \`\`\` ## Overriding styles You can import HyperGrid with replacement styles, but you'll need to style everything yourself. See the \`hypergridStyle\` variable in this notebook for a starting point or check out the [override demo](https://observablehq.com/@chicagoreporter/hypergrid-style-override-example). \`\`\`js import { HyperGrid } with { html\`\` as hypergridStyle } from "@chicagoreporter/hypergrid" \`\`\` ## Column formatting **Warning:** If \`columns\` are specifed as an option, *only* the columns specified in the options will be drawn. If columns are not specified, the data must be an array of objects with the same columns and the grid will be drawn with keys as columns and equal column widths. This all or nothing approach lets us handle the simple case effectively while providing maximum flexibility for more complex cases or datasets. Column formatters must be a function that takes the active row, the column definition, row index, and entire dataset as parameters: \`\`\`js { ... formatter: (row, column, index, data) => html\`Row number $\{index\} - $\{row.first_name\}\` } \`\`\` ## API - **data** \`Array