Data Display

Data Grid

Sortable, selectable grid built on native table; initDataGrid adds sorting, selection and arrow-key cell navigation.

Element: <table>
Module: @basenative/components
Function: renderDataGrid

Quick start

Import the render function and call it from your server template.

import { renderDataGrid } from '@basenative/components';

renderDataGrid({
  columns: [{ key: 'task', label: 'Task', sortable: true }],
  rows: [{ id: 1, task: 'Design token system' }],
  sortBy: 'task',
  sortDir: 'asc',
});

Examples

Each block is a real server render — no mockups, no virtual DOM.

Sortable, selectable rows

Native table: click a sortable header to sort, the checkbox column selects rows, and the arrow keys move between cells.

Live render

Project tasks
		Priority	Status
Design token system	Alice	High	Done
Signal reactivity	Bob	High	Done
Server rendering	Carol	Medium	Active
Client hydration	Dan	Medium	Pending
Component library	Alice	Low	Active

Showing 1–5 of 5

Source

renderDataGrid({ columns, rows, sortBy, sortDir, selectable: true })

Options

Arguments accepted by renderDataGrid().

renderDataGrid option reference
Option	Type	Default	Description
`columns`	`{ key, label, sortable? }[]`	`—`	Column definitions.
`rows`	`object[]`	`—`	Row data.
`sortBy`	`string`	`''`	Active sort column key.
`sortDir`	`'asc' \| 'desc'`	`'asc'`	Active sort direction.
`selectable`	`boolean`	`false`	Adds a checkbox column.