Data grid

<ema-grid> is the workhorse of the system: client or server data, pagination, search, per-column filters, grouping with aggregates, drill-down details, inline editing, full keyboard navigation, column resize / show-hide, icon and badge cells, and proper two-axis scrolling with a sticky header.

Client-side grid (all features)

200 rows generated in the browser. Try everything:

• Search in the toolbar · Filters button toggles the per-column filter row — click the small operator button in any filter cell to pick the comparison (contains / equals / greater / between / empty …) based on the column's data type
• Group button groups by Region or Status (collapsible groups, sum/avg aggregates)
• Columns button shows/hides columns · drag the edge of a header to resize
• Click the chevron for drill-down details · checkboxes for selection
• Click a cell, then navigate with ↑↓←→, press Enter on Customer / Status / Amount to edit inline (green-marked cells are dirty), Esc cancels, Tab commits and moves on, PageUp/PageDown switch pages, Space selects

Server-side grid

Set .source to an async function instead of .data. The grid sends a query object (page, page size, sort, filters, search, groupBy) on every change, shows a loading overlay, ignores stale responses, and renders whatever the server returns. This demo simulates an API with 350ms latency over 5,000 records.

Column definition

Advanced column filters

Every filter cell has an operator button (the small symbol on the left). Click it to choose the comparison; the available operators depend on the column's filter type. "Between" shows a second range input; "Is empty / not empty" applies immediately without a value.

Filter state is structured — each active filter is { op, value, value2, type }. In server mode the same objects arrive in query.filters, so your backend can map operators to SQL/queries. For mock backends, reuse the grid's own matcher:

grid.source = async ({ filters, ...q }) => {
  let rows = DB;
  for (const [key, f] of Object.entries(filters)) {
    rows = rows.filter((r) => EMA.gridFilterMatch(f, r[key]));   // honors op/value/value2/type
  }
  // …sort, paginate, return {rows, total}
};

Grid attributes & properties

Events

Keyboard reference