Features

Data Grid

Data Grid is the first advanced feature page in the 1.8.0 docs. It shows how richer table behavior can sit on top of the same Tiny Engine runtime and config flow.

Markup

The grid host follows the same attribute-driven model as the rest of Tiny Engine. You can keep server-rendered table markup and progressively enhance it with search, sorting, and toolbar actions.

data-grid.html

<section app-data-grid app-data-grid-sortable="true">
  <header class="toolbar">
    <input ref="search" type="search" placeholder="Filter rows" />
    <button ref="reset" type="button">Reset</button>
  </header>

  <table ref="table">
    <thead>
      <tr>
        <th data-column="name">Name</th>
        <th data-column="role">Role</th>
        <th data-column="status">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Ada</td><td>Admin</td><td>Active</td></tr>
      <tr><td>Ben</td><td>Editor</td><td>Invited</td></tr>
      <tr><td>Cleo</td><td>Viewer</td><td>Active</td></tr>
    </tbody>
  </table>
</section>

Bootstrap

Register the grid feature, keep the usual DX flags enabled, and prefer hydration: true when enhancing pre-rendered tables.

bootstrap.ts

import { UI } from "tiny-engine-core";
import { DataGrid } from "tiny-engine-pro";

UI.config({
  prefix: "app",
  debug: true,
  warnings: true,
  hydration: true,
});

UI.register("data-grid", DataGrid);
UI.init();
UI.observe();

Feature focus

Data Grid is for record-heavy screens: user directories, order lists, inventory tables, billing history, and internal dashboards. Start with semantic table markup, then layer in feature behavior for search, sorting, row actions, and richer table ergonomics.

Why use it

Keep using core capsules for lighter interactions like tabs, dropdowns, and modals. Move to Data Grid when the table itself becomes the product surface and needs reusable structure instead of one-off DOM scripting.