Skip to content

💎 Version 2.0.0

Choose a tag to compare

View all tags
@github-actions github-actions released this 22 May 20:05
· 12 commits to main since this release
v2.0.0
772d58d

Apex Grid 2.0.0 turns the grid from a sort-filter-virtualize primitive into a full-featured data grid. Pagination, editing, selection, expansion, tree data, drag-and-drop reordering, pinning, CSV/XLSX export, a toolbar with global search, a column-type registry with built-in select / rating / date / image types, and WCAG 2.2 AA semantics - all opt-in, all framework-agnostic.

Highlights

  • Tree data (nested rows) — flat-with-path hierarchical rows.
  • Row expansion (master-detail) — chevron column + arbitrary detailTemplate.
  • Row selection — single / multiple, optional checkbox column, full programmatic API.
  • Inline editing — cell or row mode, click or double-click trigger, per-column opt-in.
  • Pagination — local slicing or remote mode with cancellable events.
  • Column pinning — start or end, source array preserved.
  • Column reordering — animated drag-and-drop with per-column opt-out.
  • Quick filter — debounced global-search input.
  • CSV & XLSX export — zero runtime deps, programmatic API + optional toolbar dropdown.
  • Column-type registry — pluggable types with built-in select, rating, date, image.
  • WCAG 2.2 AA semantics — role="grid" / role="treegrid", aria-rowcount / aria-colcount, focus + keyboard navigation.
  • Native UI primitives — internal <igc-*> components replaced by native popover/chip/input/button/icon for smaller payload and better theming.

New features

Tree data (nested rows)

Flat data array; the grid derives hierarchy from a user-supplied getDataPath(row) callback — AG Grid's "tree data" pattern. The first visible data column (or one designated by groupColumnKey) renders a chevron toggle plus depth-based indentation. Host element advertises role="treegrid" when active.

grid.tree = {
  enabled: true,
  getDataPath: (row) => row.path,        // e.g. ['Adrian', 'Bryan']
  defaultExpanded: 1,                    // boolean | number — depth
  groupColumnKey: 'name',
  childIndent: 20,
};

Methods: toggleTreeRow, expandTreeRow, collapseTreeRow, expandAllTreeRows, collapseAllTreeRows, isTreeRowExpanded. Events: treeRowExpanding (cancellable), treeRowExpanded.

Row expansion (master-detail)

Opt-in chevron column rendering an arbitrary detail panel via detailTemplate. Distinct from tree data — expansion shows an arbitrary detail view; tree shows nested rows with the same column layout.

grid.expansion = {
  enabled: true,
  detailTemplate: ({ data }) => html`<order-summary .order=${data}></order-summary>`,
  isExpandable: (row) => row.hasDetails,
};

Methods: expandRow, collapseRow, toggleRowExpansion, expandAllRows, collapseAllRows, isRowExpanded, expandedRows (get/set). Events: rowExpanding (cancellable), rowExpanded.

Row selection

Single or multiple selection, optional built-in checkbox column. Selection still works programmatically and via the keyboard when the checkbox column is hidden.

grid.selection = { enabled: true, mode: 'multiple', showCheckboxColumn: true };
await grid.selectRow(data[0]);
await grid.toggleRowSelection(data[1]);
grid.selectedRows = [data[2]];     // setter goes through `rowSelecting`

Methods: selectRow, deselectRow, toggleRowSelection, selectAllRows, clearSelection, isRowSelected. Events: rowSelecting (cancellable), rowSelected.

Inline editing

Cell or row mode, click or double-click trigger. Per-column opt-in via editable: true. Programmatic commit/cancel.

grid.editing = { enabled: true, mode: 'cell', trigger: 'doubleClick' };
await grid.editCell(0, 'name');
await grid.commitEdit();

In row mode, all editable cells in the row enter edit together; commitEdit() flushes all pending values for the active row. Properties: editingCell, editingRow. Events: cellValueChanging (cancellable), cellValueChanged, rowEditStarted, rowEditEnded.

Pagination

Local slicing or remote mode. The remote mode emits paging events but does not slice — the consumer supplies the current page in response to pageChanged.

grid.pagination = {
  enabled: true,
  pageSize: 25,
  pageSizeOptions: [10, 25, 50, 100],
};
await grid.gotoPage(2);
await grid.setPageSize(50);

Properties: page, pageSize, pageCount, totalItems, pageItems. Methods: gotoPage, setPageSize, nextPage, previousPage, firstPage, lastPage. Events: pageChanging (cancellable), pageChanged. Renders a new <apex-grid-paginator> element with five CSS parts.

Column pinning

Pin to 'start' or 'end'. The source columns array is not reordered — only the visual render order changes (read grid.displayColumns for the render order).

await grid.pinColumn('name', 'start');
await grid.unpinColumn('name');

Events: columnPinning (cancellable), columnPinned.

Column reordering (drag-and-drop)

Pointer-driven, animated reordering constrained to the column's own pinning group. Per-column opt-out via reorderable: false.

<apex-grid column-reordering></apex-grid>
await grid.moveColumn('email', 'name', 'after');

Events: columnMoving (cancellable), columnMoved. Attribute: column-reordering.

Quick filter (global search)

Debounced (default 200ms) global search across visible columns. Custom matcher via dataPipelineConfiguration.quickFilter. Renders in the toolbar when show-quick-filter is on.

grid.showQuickFilter = true;
grid.quickFilter = 'ada';

Events: quickFilterChanging (cancellable), quickFilterChanged. Attributes: show-quick-filter, quick-filter.

CSV / XLSX export

Zero-runtime-dependency exporters. CSV writes a UTF-8 BOM so Excel opens with the right encoding. XLSX preserves native cell types for numbers, booleans, and Date values.

grid.exportToCSV();                                            // downloads data.csv
grid.exportToCSV({ filename: 'users', source: 'selected' });
const text = grid.exportToCSV({ filename: '' });               // string only

grid.exportToXLSX({ filename: 'users', sheetName: 'Users' });

source: 'view' (default), 'page', 'selected', 'all'. Per-column opt-out: exportable: false.

Toolbar UI: <apex-grid show-export> renders a download button with an "Export CSV / Export XLSX" dropdown.

Toolbar (<apex-grid-toolbar>)

Opt-in toolbar rendered above the header row when at least one of show-quick-filter or show-export is set. Eight CSS parts for theming: toolbar, toolbar-search, search-field, search-icon, search-input, toolbar-actions, export-trigger, export-menu, export-menu-item.

Column-type registry + built-in types

Declarative column-type registry. Built-in types added in this release: select, rating, date, image (plus the existing string / number / boolean). Each type supplies its own display and editor templates.

WCAG 2.2 AA semantics

The host element advertises role="grid" (or role="treegrid" in tree mode) with aria-rowcount and aria-colcount reflecting the live shape (header rows, filter row, selection/expansion extras, page slice). Focus + keyboard navigation polished; cell editors announce state changes via the grid's announce() channel.

Improvements

  • Native UI primitives. Internal use of igniteui-webcomponents shrunk to themes only - dropdowns are now native popovers, chips/inputs/buttons are native, icons are inline SVG. Smaller bundle, no icon-registry plumbing, easier to theme.
  • Editor + theme polish. Animated drag indicator, editor exit handling unified, theme tokens refined.

Documentation

  • README rewrite. New "Features" section, per-feature snippets, complete API reference (properties, methods, events, attributes, CSS parts), framework integration table (Lit / Angular / Vue / React / vanilla).

Build / release pipeline

  • Repo URL updated. Published package.json now references apexcharts/apex-grid (formerly apexgrid).

Migration from 1.x

Apex Grid 2.0.0 is mostly additive at the public-API level. The internal refactors (igc-* → native primitives) do not change the <apex-grid> element tag, its property/event surface, or the four-step setup. Existing 1.1.0 integrations should compile and render unchanged.

Verify if you customize the internals:

  • CSS selectors on internal igc-* elements — the dropdowns, chips, inputs, buttons, and icons inside the grid are no longer Ignite UI custom elements. Style via the documented CSS parts on <apex-grid>, <apex-grid-toolbar>, <apex-grid-paginator>, and <apex-grid-cell> instead.
  • Custom column types via direct class extension — column types now go through the declarative registry. Built-in types select, rating, date, image are supplied; consult src/components/cell-types for the pattern.
  • Branch rename. CI / contrib docs that reference master should point at main.
  • Required Node. No change — >=20 continues.

There are no public-API removals in this release.

Assets 2
Loading