apex-grid@3.0.1

apex-grid@3.0.1 published to npm with provenance.

See the commit history for changes since the previous release.

apex-grid-enterprise@0.1.1

apex-grid-enterprise@0.1.1 published to npm with provenance.

See the commit history for changes since the previous release.

apex-grid 3.0.0

apex-grid 3.0.0 is a major release: a full visual refresh built on CSS
custom-property theming, and the start of a free/pro split — Excel export moves
to the new apex-grid-enterprise package.

⚠️ Breaking changes

Excel (XLSX) export moved to apex-grid-enterprise

exportToXLSX() and the toolbar "Export XLSX" entry are no longer in the
community package. CSV export stays free (exportToCSV()).

The toolbar export menu is now driven by a generic seam so derived grids can add
their own formats:

• get exportFormats(): ReadonlyArray<ExportFormat> — defaults to [{ id: 'csv', … }]
• exportAs(formatId, options) — the toolbar dispatches the chosen format here

Migration: if you used grid.exportToXLSX(...), switch to the enterprise
package:

npm install apex-grid-enterprise

import 'apex-grid-enterprise/define';
const grid = document.querySelector('apex-grid-enterprise');
grid.exportToXLSX({ filename: 'users', sheetName: 'Users' });

Changed

CSS-variable theming (no theme import)

The grid now styles itself out of the box through --ag-* custom properties.
There is no theme to import and no configureTheme() call. Rebrand by
overriding tokens on apex-grid (or any ancestor):

apex-grid {
  --ag-brand: #7c3aed;        /* selection, focus, accents */
  --ag-radius: 12px;          /* outer card radius */
  --ag-row-h: 40px;           /* row height */
}

When igniteui-webcomponents is present, brand tokens auto-tint from its
palette (--ig-primary-500).

Neutral restyle + flat edge by default

Grayscale chrome with brand color reserved for state/accents. The grid host no
longer paints a heavy floating-card shadow — it shows a flat 1px hairline
edge. Opt back into the elevated look with the new hook:

apex-grid { --ag-grid-shadow: var(--ag-shadow-card); } /* restore card */
apex-grid { --ag-grid-shadow: none; }                  /* no edge at all */

Install

npm install apex-grid lit igniteui-webcomponents

import 'apex-grid/define';

💎 Version 2.0.0

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.

---

v1.1.0

What's Changed

• Bumped minimum required Node version to 20
• Updated Lit packages to latest versions
• Updated to the latest Ignite UI web components version for UI elements used

Full Changelog: v1.0.1...v1.1.0

v1.0.1

chore: updated dependencies and manifest

v1.0.0

Rkaraivanov/pre release fixes (#18)

* feat: Pre-release refactoring and fixes

- Refactored auto-generation
- Refactored filter events and behaviors
- Fixed horizontal keyboard navigation
- Updated custom-elements manifest
- Include manifest and meta
- Various bug fixes

v1.0.0-rc.2

Grid and sub-components custom element registration (#16)

* feat: Component registration

- Updated dependencies
- Added more documentation
- API refactoring

v1.0.0-rc.1

ci: Updated node versions (#12)

v1.0.0-rc.0

API documentation (#9)

* docs: API documentation