Data Display

Table

Native table with caption, sticky header, and hover row highlight.

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

Quick start

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

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

renderTable({ columns: [{ key: 'name', label: 'Name' }], rows: [{ name: 'Alice Johnson' }] });

Examples

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

Team members

Native <table> with caption, thead/tbody, sticky header.

Live render

Team members
Name	Role	Status
Alice Johnson	Admin	Active
Bob Smith	Editor	Active
Carol Davis	Viewer	Inactive

Source

renderTable({
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'role', label: 'Role' },
  ],
  rows: [
    { name: 'Alice Johnson', role: 'Admin' },
    { name: 'Bob Smith', role: 'Editor' },
  ],
  caption: 'Team members',
})

Live filter

Type a query and only matching rows stay visible.

Live render

Filter

Team members
Name	Role	Status
Alice Johnson	Admin	Active
Bob Smith	Editor	Active
Carol Davis	Viewer	Inactive
Dan Lee	Editor	Active
Eve Martinez	Admin	Active

Source

const query = signal('');

effect(() => {
  for (const row of slot.querySelectorAll('tbody tr')) {
    row.hidden = !row.textContent.toLowerCase().includes(query());
  }
});

input.oninput = (e) => query.set(e.target.value.toLowerCase());

Options

Arguments accepted by renderTable().

renderTable option reference
Option	Type	Default	Description
`columns`	`{ key, label }[]`	`—`	Column definitions.
`rows`	`object[]`	`—`	Row data, keyed by column.
`caption`	`string`	`''`	Caption text.