Data grid

YuktaiGrid (React) and yuktai.renderGrid (plain HTML): search, sort, pages, selection, CSV export, five WCAG themes, Telugu UI, keyboard navigation and an optional Rust engine. Set the options for your project below; the grid and the code change together.

Playground

Set it up for your data

Data

Engine

View

Theme

Language

Rows per page

Loading the grid…

Your code

Copy this into your project. Replace the sample rows with your own data.

app/staff/page.tsx

// generated

staff.html

<!-- generated -->

Control the grid from code

Everything the toolbar does is also a method. Each button runs the call shown on it against the grid above.

Grid API

app/staff/StaffGrid.tsx

"use client"
import { useGrid } from "@yuktishaalaa/yuktai"

// useGrid gives you the same search / sort / paging state to build your own table.
export function StaffTable({ rows, columns }) {
  const grid = useGrid({ data: rows, columns, engine: "auto", pagination: { pageSize: 10 } })
  return (
    <>
      <input value={grid.searchQuery} onChange={(e) => grid.setSearchQuery(e.target.value)} aria-label="Search staff" />
      <button onClick={() => grid.toggleSort("salary")}>Sort by salary</button>
      <p>{grid.filteredCount} of {grid.totalCount} rows · page {grid.page} of {grid.totalPages}</p>
      <ul>{grid.displayedData.map((r) => <li key={r.id}>{r.name}</li>)}</ul>
    </>
  )
}

app.js

const grid = yuktai.renderGrid("#staff", { data: rows, columns, rowKey: "id" })

grid.search("Pune"); grid.sortBy("salary", "desc"); grid.clearSort()
grid.setFilters([{ key: "salary", operator: "greaterThan", value: 100000 }]); grid.clearFilters()
grid.highlight(["1001"]); grid.select(["1001", "1002"]); grid.getSelectedRows()
grid.goToPage(3); grid.nextPage(); grid.setPageSize(50)
grid.setTheme("high-contrast"); grid.setView("card"); grid.setLoading(true)
grid.refresh(newRows); grid.exportCSV(); grid.biSummary(); grid.anomalies()
grid.engine            // "rust" or "ts": the engine in use
grid.getSearchTime()   // { query, ms, rows, engine } of the last search or sort

Options

Grid options (React prop or renderGrid option)
Option	What it does
data, columns, rowKey	Rows, columns and the ID field (default "id")
columns[]	key, label, type ("text", "number", "date", "boolean", "badge"), align, sortable, render(value, row), hiddenOnMobile, width
engine	"ts" (default), "rust" or "auto" (Rust from 10,000 rows). Same results; Rust is faster on big data
showSearchTime, onSearchTime	Shows "· 0.9 ms · Rust" after each search or sort, and/or calls you with { query, ms, rows, engine }
view, mobileBreakpoint	"table", "card" or "auto" (cards below 640 px)
theme	default, high-contrast, dark, color-blind, dyslexia
locale	"en-IN", "en-US" or "te-IN" (Telugu labels and messages)
pagination	{ pageSize, showSizeChanger, sizeOptions } or false
search, selectable	false turns each one off
exportable	Vanilla only: false hides the CSV button
agentic	Vanilla: true or { title, examples }. React: useAgenticGrid + AgenticGridBar (see Grid agents)
ai, inputLanguage, customRules	Built-in assistant with voice input and your own phrases in any language
webmcp, toolName, toolDescriptions	Expose the 11 grid tools to browser AI agents
selectedKeys, highlightIds, onRowClick, onSelectionChange, onSortChange	State and events
loading, empty, label, className	Loading state, empty message, accessible name, CSS class

Keyboard

Tab into the table, then use the arrow keys to move between cells. Only one cell is in the Tab order.
Home / End: first or last cell in the row. Ctrl+Home / Ctrl+End: first or last cell in the table.
Page Up / Page Down change the page. Space selects a row. Enter sorts (on a header) or opens the row.