apex-grid 2.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +51 -0
- package/README.md +32 -22
- package/components/grid.d.ts +69 -40
- package/components/grid.js +34 -52
- package/components/grid.js.map +1 -1
- package/components/header.js +7 -13
- package/components/header.js.map +1 -1
- package/components/toolbar.js +13 -29
- package/components/toolbar.js.map +1 -1
- package/controllers/state.d.ts +15 -1
- package/controllers/state.js +11 -1
- package/controllers/state.js.map +1 -1
- package/custom-elements.json +320 -242
- package/define.js.map +1 -1
- package/docs/assets/hierarchy.js +1 -1
- package/docs/assets/highlight.css +9 -2
- package/docs/assets/icons.js +1 -1
- package/docs/assets/icons.svg +1 -1
- package/docs/assets/main.js +4 -4
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/assets/style.css +3 -3
- package/docs/classes/ApexGrid.html +115 -93
- package/docs/functions/setup.html +11 -17
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +91 -47
- package/docs/interfaces/ApexCellValueChangedEvent.html +5 -5
- package/docs/interfaces/ApexCellValueChangingEvent.html +6 -6
- package/docs/interfaces/ApexColumnMovedEvent.html +4 -4
- package/docs/interfaces/ApexColumnMovingEvent.html +5 -5
- package/docs/interfaces/ApexColumnPinnedEvent.html +3 -3
- package/docs/interfaces/ApexColumnPinningEvent.html +4 -4
- package/docs/interfaces/ApexDetailContext.html +4 -4
- package/docs/interfaces/ApexFilteredEvent.html +3 -3
- package/docs/interfaces/ApexFilteringEvent.html +3 -3
- package/docs/interfaces/ApexGridEventMap.html +21 -16
- package/docs/interfaces/ApexHeaderContext.html +3 -3
- package/docs/interfaces/ApexPageChangedEvent.html +5 -5
- package/docs/interfaces/ApexPageChangingEvent.html +5 -5
- package/docs/interfaces/ApexQuickFilterChangedEvent.html +2 -2
- package/docs/interfaces/ApexQuickFilterChangingEvent.html +3 -3
- package/docs/interfaces/ApexRowEditEndedEvent.html +3 -3
- package/docs/interfaces/ApexRowEditStartedEvent.html +2 -2
- package/docs/interfaces/ApexRowExpandedEvent.html +4 -4
- package/docs/interfaces/ApexRowExpandingEvent.html +5 -5
- package/docs/interfaces/ApexRowSelectedEvent.html +4 -4
- package/docs/interfaces/ApexRowSelectingEvent.html +5 -5
- package/docs/interfaces/ApexTreeRowExpandedEvent.html +4 -4
- package/docs/interfaces/ApexTreeRowExpandingEvent.html +5 -5
- package/docs/interfaces/BaseApexCellContext.html +6 -6
- package/docs/interfaces/BaseApexEditorContext.html +8 -8
- package/docs/interfaces/BaseColumnConfiguration.html +34 -15
- package/docs/interfaces/BaseColumnSortConfiguration.html +3 -3
- package/docs/interfaces/BaseFilterExpression.html +4 -4
- package/docs/interfaces/BaseSortExpression.html +3 -3
- package/docs/interfaces/CSVExportOptions.html +9 -9
- package/docs/interfaces/ColumnFilterConfiguration.html +2 -2
- package/docs/interfaces/DataPipelineConfiguration.html +3 -3
- package/docs/interfaces/ExportFormat.html +10 -0
- package/docs/interfaces/ExportOptions.html +6 -6
- package/docs/interfaces/GridEditingConfiguration.html +4 -4
- package/docs/interfaces/GridExpansionConfiguration.html +5 -5
- package/docs/interfaces/GridSelectionConfiguration.html +4 -4
- package/docs/interfaces/GridSortConfiguration.html +3 -3
- package/docs/interfaces/GridTreeConfiguration.html +5 -5
- package/docs/interfaces/PaginationConfiguration.html +6 -6
- package/docs/interfaces/PaginationState.html +5 -5
- package/docs/media/LICENSE +80 -0
- package/docs/media/_tokens.scss +106 -0
- package/docs/media/package.json +14 -12
- package/docs/modules.html +1 -1
- package/docs/types/ApexCellContext.html +1 -1
- package/docs/types/ApexEditorContext.html +1 -1
- package/docs/types/BasePropertyType.html +1 -1
- package/docs/types/BaseSortComparer.html +1 -1
- package/docs/types/ColumnConfiguration.html +1 -1
- package/docs/types/ColumnDropPosition.html +1 -1
- package/docs/types/ColumnSortConfiguration.html +1 -1
- package/docs/types/DataPipelineHook.html +1 -1
- package/docs/types/DataPipelineParams.html +4 -4
- package/docs/types/DataType.html +18 -1
- package/docs/types/ExportSource.html +1 -1
- package/docs/types/FilterCriteria.html +1 -1
- package/docs/types/FilterExpression.html +1 -1
- package/docs/types/Keys.html +1 -1
- package/docs/types/PropertyType.html +1 -1
- package/docs/types/SortComparer.html +1 -1
- package/docs/types/SortExpression.html +1 -1
- package/docs/types/SortState.html +1 -1
- package/index.d.ts +1 -1
- package/index.js.map +1 -1
- package/internal/column-types.js +161 -1
- package/internal/column-types.js.map +1 -1
- package/internal/export.d.ts +12 -4
- package/internal/export.js.map +1 -1
- package/internal/feature-module.d.ts +27 -0
- package/internal/feature-module.js +2 -0
- package/internal/feature-module.js.map +1 -0
- package/internal/icons.d.ts +7 -0
- package/internal/icons.js +11 -0
- package/internal/icons.js.map +1 -1
- package/internal/index.d.ts +20 -0
- package/internal/index.js +6 -0
- package/internal/index.js.map +1 -0
- package/internal/types.d.ts +54 -5
- package/internal/types.js.map +1 -1
- package/operations/filter/tree.d.ts +1 -1
- package/operations/filter/types.js.map +1 -1
- package/operations/sort/types.js.map +1 -1
- package/package.json +5 -1
- package/setup.d.ts +19 -26
- package/setup.js +4 -2
- package/setup.js.map +1 -1
- package/styles/_checkbox.css.js +3 -0
- package/styles/_checkbox.css.js.map +1 -0
- package/styles/_tokens.css.js +3 -0
- package/styles/_tokens.css.js.map +1 -0
- package/styles/body-cell/body-cell.css.js +1 -1
- package/styles/body-cell/body-cell.css.js.map +1 -1
- package/styles/body-cell/cell-renderers.css.js +3 -0
- package/styles/body-cell/cell-renderers.css.js.map +1 -0
- package/styles/body-row/body-row.css.js +1 -1
- package/styles/body-row/body-row.css.js.map +1 -1
- package/styles/filter-row/filter-row.css.js +1 -1
- package/styles/filter-row/filter-row.css.js.map +1 -1
- package/styles/grid/_grid.base.css.js +1 -1
- package/styles/grid/_grid.base.css.js.map +1 -1
- package/styles/grid/grid.css.js +3 -0
- package/styles/grid/grid.css.js.map +1 -0
- package/styles/header-cell/header-cell.css.js +1 -1
- package/styles/header-cell/header-cell.css.js.map +1 -1
- package/styles/header-row/header-row.base.css.js +1 -1
- package/styles/header-row/header-row.base.css.js.map +1 -1
- package/styles/paginator/paginator.css.js +1 -1
- package/styles/paginator/paginator.css.js.map +1 -1
- package/styles/toolbar/toolbar.css.js +1 -1
- package/styles/toolbar/toolbar.css.js.map +1 -1
- package/docs/interfaces/XLSXExportOptions.html +0 -17
- package/docs/media/publish.yml +0 -111
- package/internal/theming.d.ts +0 -34
- package/internal/theming.js +0 -123
- package/internal/theming.js.map +0 -1
- package/internal/xlsx.d.ts +0 -22
- package/internal/xlsx.js +0 -228
- package/internal/xlsx.js.map +0 -1
- package/styles/grid/themes/light/grid.bootstrap.css.js +0 -3
- package/styles/grid/themes/light/grid.bootstrap.css.js.map +0 -1
- package/styles/grid/themes/light/grid.fluent.css.js +0 -3
- package/styles/grid/themes/light/grid.fluent.css.js.map +0 -1
- package/styles/grid/themes/light/grid.indigo.css.js +0 -3
- package/styles/grid/themes/light/grid.indigo.css.js.map +0 -1
- package/styles/grid/themes/light/grid.material.css.js +0 -3
- package/styles/grid/themes/light/grid.material.css.js.map +0 -1
- /package/styles/{grid/themes/light/grid.bootstrap.css.d.ts → _checkbox.css.d.ts} +0 -0
- /package/styles/{grid/themes/light/grid.fluent.css.d.ts → _tokens.css.d.ts} +0 -0
- /package/styles/{grid/themes/light/grid.indigo.css.d.ts → body-cell/cell-renderers.css.d.ts} +0 -0
- /package/styles/grid/{themes/light/grid.material.css.d.ts → grid.css.d.ts} +0 -0
package/docs/index.html
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>apex-grid</title><meta name="description" content="Documentation for apex-grid"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">apex-grid</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>apex-grid</h1></div><div class="tsd-panel tsd-typography"><h1 id="apex-grid" class="tsd-anchor-link">Apex Grid<a href="#apex-grid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>apex-grid</title><meta name="description" content="Documentation for apex-grid"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">apex-grid</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>apex-grid</h1></div><div class="tsd-panel tsd-typography"><h1 id="apex-grid" class="tsd-anchor-link">Apex Grid<a href="#apex-grid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1>
|
|
2
|
+
<p><a href="https://github.com/apexcharts/apex-grid/actions/workflows/node.js.yml"><img src="https://github.com/apexcharts/apex-grid/actions/workflows/node.js.yml/badge.svg?branch=main" alt="Node.js CI"></a>
|
|
2
3
|
<a href="https://coveralls.io/github/apexcharts/apex-grid?branch=main"><img src="https://coveralls.io/repos/github/apexcharts/apex-grid/badge.svg?branch=main" alt="Coverage Status"></a>
|
|
3
4
|
<a href="https://www.npmjs.com/package/apex-grid"><img src="https://img.shields.io/npm/v/apex-grid.svg" alt="npm"></a></p>
|
|
4
5
|
<p>A Lit-based, framework-agnostic web component data grid. Ships as a single custom element <code><apex-grid></code> with a rich, opt-in feature set and full TypeScript types.</p>
|
|
5
|
-
<h2 id="features" class="tsd-anchor-link">Features<a href="#features" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
6
|
+
<h2 id="features" class="tsd-anchor-link">Features<a href="#features" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
7
|
+
<ul>
|
|
6
8
|
<li><strong>Row virtualization</strong> via <code>@lit-labs/virtualizer</code> — only ~20 rows in the DOM at any time, regardless of dataset size.</li>
|
|
7
9
|
<li><strong>Sorting</strong> — single or multi-column, tri-state (asc / desc / none), per-column comparers.</li>
|
|
8
10
|
<li><strong>Filtering</strong> — per-column filter chips with string / number / boolean / date operands, plus a quick-filter (global search) input.</li>
|
|
@@ -14,31 +16,37 @@
|
|
|
14
16
|
<li><strong>Row selection</strong> — single or multiple, optional checkbox column, full programmatic API.</li>
|
|
15
17
|
<li><strong>Row expansion (master-detail)</strong> — opt-in chevron column with a <code>detailTemplate</code>.</li>
|
|
16
18
|
<li><strong>Tree data (nested rows)</strong> — AG Grid–style <code>getDataPath</code> pattern over a flat array.</li>
|
|
17
|
-
<li><strong>CSV
|
|
19
|
+
<li><strong>CSV export</strong> — programmatic method plus an optional toolbar dropdown. (Excel/XLSX export is in <code>apex-grid-enterprise</code>.)</li>
|
|
18
20
|
<li><strong>Toolbar</strong> — opt-in <code><apex-grid-toolbar></code> with debounced quick filter and export menu.</li>
|
|
19
21
|
<li><strong>Templating</strong> — slot-based templates for cells, headers, editors, and detail panels.</li>
|
|
20
|
-
<li><strong>Theming</strong> —
|
|
22
|
+
<li><strong>Theming</strong> — styled out-of-the-box; fully customizable through <code>--ag-*</code> CSS custom properties (no theme import or build step). Auto-matches an <code>igniteui-webcomponents</code> host app when one is present.</li>
|
|
21
23
|
<li><strong>Accessibility</strong> — WCAG 2.2 AA semantics (<code>role="grid"</code> / <code>role="treegrid"</code>, <code>aria-rowcount</code>, <code>aria-colcount</code>, focus + keyboard navigation).</li>
|
|
22
24
|
<li><strong>Provenance-signed npm releases</strong> with OIDC trusted publishing.</li>
|
|
23
25
|
</ul>
|
|
24
26
|
<hr>
|
|
25
|
-
<h2 id="quick-start" class="tsd-anchor-link">Quick Start<a href="#quick-start" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
27
|
+
<h2 id="quick-start" class="tsd-anchor-link">Quick Start<a href="#quick-start" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
28
|
+
<h3 id="one-call-setup" class="tsd-anchor-link">One-call setup<a href="#one-call-setup" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
29
|
+
<pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">setup</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'apex-grid'</span><span class="hl-1">;</span><br/><br/><span class="hl-4">setup</span><span class="hl-1">();</span>
|
|
26
30
|
</code><button type="button">Copy</button></pre>
|
|
27
31
|
|
|
28
|
-
<p>That single call registers <code><apex-grid></code
|
|
29
|
-
<h3 id="render-the-grid" class="tsd-anchor-link">Render the grid<a href="#render-the-grid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
32
|
+
<p>That single call registers <code><apex-grid></code> and adopts a default host stylesheet (<code>height: 100%; min-height: 240px</code>). The grid is styled out-of-the-box — no theme CSS import is required.</p>
|
|
33
|
+
<h3 id="render-the-grid" class="tsd-anchor-link">Render the grid<a href="#render-the-grid" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
34
|
+
<pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">html</span><span class="hl-1">, </span><span class="hl-2">render</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'lit'</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">'apex-grid/define'</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-0">type</span><span class="hl-1"> { </span><span class="hl-2">ColumnConfiguration</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'apex-grid'</span><span class="hl-1">;</span><br/><br/><span class="hl-5">type</span><span class="hl-1"> </span><span class="hl-6">User</span><span class="hl-1"> = { </span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-6">number</span><span class="hl-1">; </span><span class="hl-2">name</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">; </span><span class="hl-2">age</span><span class="hl-1">: </span><span class="hl-6">number</span><span class="hl-1">; </span><span class="hl-2">subscribed</span><span class="hl-1">: </span><span class="hl-6">boolean</span><span class="hl-1"> };</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">data</span><span class="hl-1">: </span><span class="hl-6">User</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Ada Lovelace'</span><span class="hl-1">, </span><span class="hl-2">age:</span><span class="hl-1"> </span><span class="hl-8">36</span><span class="hl-1">, </span><span class="hl-2">subscribed:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Carl Sagan'</span><span class="hl-1">, </span><span class="hl-2">age:</span><span class="hl-1"> </span><span class="hl-8">62</span><span class="hl-1">, </span><span class="hl-2">subscribed:</span><span class="hl-1"> </span><span class="hl-5">false</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Grace Hopper'</span><span class="hl-1">, </span><span class="hl-2">age:</span><span class="hl-1"> </span><span class="hl-8">85</span><span class="hl-1">, </span><span class="hl-2">subscribed:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">columns</span><span class="hl-1">: </span><span class="hl-6">ColumnConfiguration</span><span class="hl-1"><</span><span class="hl-6">User</span><span class="hl-1">>[] = [</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'id'</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">'number'</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">'ID'</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">'80px'</span><span class="hl-1">, </span><span class="hl-2">sort:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">filter:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">'string'</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">'Name'</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">'240px'</span><span class="hl-1">, </span><span class="hl-2">sort:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">filter:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'age'</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">'number'</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">'Age'</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">'100px'</span><span class="hl-1">, </span><span class="hl-2">sort:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">filter:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'subscribed'</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">'boolean'</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">'Subscribed'</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">'140px'</span><span class="hl-1">, </span><span class="hl-2">sort:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">filter:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-4">render</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-4">html</span><span class="hl-3">`<apex-grid .data=</span><span class="hl-5">${</span><span class="hl-2">data</span><span class="hl-5">}</span><span class="hl-3"> .columns=</span><span class="hl-5">${</span><span class="hl-2">columns</span><span class="hl-5">}</span><span class="hl-3">></apex-grid>`</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">document</span><span class="hl-1">.</span><span class="hl-4">getElementById</span><span class="hl-1">(</span><span class="hl-3">'app'</span><span class="hl-1">)!,</span><br/><span class="hl-1">);</span>
|
|
30
35
|
</code><button type="button">Copy</button></pre>
|
|
31
36
|
|
|
32
37
|
<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">style</span><span class="hl-9">></span><br/><span class="hl-11"> </span><span class="hl-10">apex-grid</span><span class="hl-11"> { </span><span class="hl-12">height</span><span class="hl-11">: </span><span class="hl-8">480px</span><span class="hl-11">; }</span><br/><span class="hl-9"></</span><span class="hl-10">style</span><span class="hl-9">></span><br/><span class="hl-9"><</span><span class="hl-10">div</span><span class="hl-1"> </span><span class="hl-12">id</span><span class="hl-1">=</span><span class="hl-13">"app"</span><span class="hl-9">></</span><span class="hl-10">div</span><span class="hl-9">></span>
|
|
33
38
|
</code><button type="button">Copy</button></pre>
|
|
34
39
|
|
|
35
40
|
<hr>
|
|
36
|
-
<h2 id="manual-setup-four-steps" class="tsd-anchor-link">Manual setup (four steps)<a href="#manual-setup-four-steps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
37
|
-
<
|
|
41
|
+
<h2 id="manual-setup-four-steps" class="tsd-anchor-link">Manual setup (four steps)<a href="#manual-setup-four-steps" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
42
|
+
<p>If you'd rather not use <code>setup()</code>, this is what it does under the hood. Skipping any step produces a grid that "runs" but renders broken (no borders, no filter UI, or only a few collapsed rows).</p>
|
|
43
|
+
<h3 id="1-install" class="tsd-anchor-link">1. Install<a href="#1-install" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
44
|
+
<pre><code class="bash"><span class="hl-4">npm</span><span class="hl-1"> </span><span class="hl-3">install</span><span class="hl-1"> </span><span class="hl-3">apex-grid</span><span class="hl-1"> </span><span class="hl-3">lit</span>
|
|
38
45
|
</code><button type="button">Copy</button></pre>
|
|
39
46
|
|
|
40
47
|
<p><code>igniteui-webcomponents</code> ships as a transitive dependency — no separate install.</p>
|
|
41
|
-
<h3 id="2-register-the-custom-element" class="tsd-anchor-link">2. Register the custom element<a href="#2-register-the-custom-element" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
48
|
+
<h3 id="2-register-the-custom-element" class="tsd-anchor-link">2. Register the custom element<a href="#2-register-the-custom-element" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
49
|
+
<pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">'apex-grid/define'</span><span class="hl-1">;</span>
|
|
42
50
|
</code><button type="button">Copy</button></pre>
|
|
43
51
|
|
|
44
52
|
<p>Equivalent long form:</p>
|
|
@@ -46,13 +54,20 @@
|
|
|
46
54
|
</code><button type="button">Copy</button></pre>
|
|
47
55
|
|
|
48
56
|
<p>Without this, <code><apex-grid></code> is an inert unknown element.</p>
|
|
49
|
-
<h3 id="3-
|
|
50
|
-
<
|
|
57
|
+
<h3 id="3-optional-customize-the-look" class="tsd-anchor-link">3. (Optional) Customize the look<a href="#3-optional-customize-the-look" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
58
|
+
<p>The grid is styled out-of-the-box — there is no theme to import. Customize it by overriding the <code>--ag-*</code> CSS custom properties on <code>apex-grid</code> (or any ancestor); a one-line brand override cascades to every tint:</p>
|
|
59
|
+
<pre><code class="css"><span class="hl-10">apex-grid</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-12">--ag-brand</span><span class="hl-1">: </span><span class="hl-14">#7c3aed</span><span class="hl-1">; </span><span class="hl-15">/* selection, focus, accents */</span><br/><span class="hl-1"> </span><span class="hl-12">--ag-brand-strong</span><span class="hl-1">: </span><span class="hl-14">#6d28d9</span><span class="hl-1">; </span><span class="hl-15">/* hover / pressed */</span><br/><span class="hl-1"> </span><span class="hl-12">--ag-radius</span><span class="hl-1">: </span><span class="hl-8">12px</span><span class="hl-1">; </span><span class="hl-15">/* outer card radius */</span><br/><span class="hl-1"> </span><span class="hl-12">--ag-row-h</span><span class="hl-1">: </span><span class="hl-8">40px</span><span class="hl-1">; </span><span class="hl-15">/* row height */</span><br/><span class="hl-1">}</span>
|
|
60
|
+
</code><button type="button">Copy</button></pre>
|
|
61
|
+
|
|
62
|
+
<p>See <a href="media/_tokens.scss"><code>src/styles/_tokens.scss</code></a> for the full token list (brand, surfaces, text, semantic state colors, typography, spacing, motion).</p>
|
|
63
|
+
<p><strong>Grid edge / shadow.</strong> By default the grid shows a flat 1px hairline edge (no drop shadow). Control it with the <code>--ag-grid-shadow</code> hook — this is an opt-in override, not one of the <code>_tokens.scss</code> defaults:</p>
|
|
64
|
+
<pre><code class="css"><span class="hl-10">apex-grid</span><span class="hl-1"> { </span><span class="hl-12">--ag-grid-shadow</span><span class="hl-1">: </span><span class="hl-4">var</span><span class="hl-1">(</span><span class="hl-12">--ag-shadow-card</span><span class="hl-1">); } </span><span class="hl-15">/* elevated floating-card look */</span><br/><span class="hl-10">apex-grid</span><span class="hl-1"> { </span><span class="hl-12">--ag-grid-shadow</span><span class="hl-1">: </span><span class="hl-14">none</span><span class="hl-1">; } </span><span class="hl-15">/* remove the edge entirely */</span>
|
|
51
65
|
</code><button type="button">Copy</button></pre>
|
|
52
66
|
|
|
53
|
-
<p>
|
|
54
|
-
<h3 id="4-size-the-host" class="tsd-anchor-link">4. Size the host<a href="#4-size-the-host" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
55
|
-
<
|
|
67
|
+
<p>If you embed the grid alongside <code>igniteui-webcomponents</code>, the brand tokens automatically re-tint from the igniteui palette (<code>--ig-primary-500</code>) — no configuration needed.</p>
|
|
68
|
+
<h3 id="4-size-the-host" class="tsd-anchor-link">4. Size the host<a href="#4-size-the-host" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
69
|
+
<p><code>@lit-labs/virtualizer</code> requires a <strong>bounded height</strong>. Without one, the virtualizer collapses to its natural content height (~150px) and only a few rows ever render.</p>
|
|
70
|
+
<pre><code class="css"><span class="hl-10">apex-grid</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-12">height</span><span class="hl-1">: </span><span class="hl-8">480px</span><span class="hl-1">; </span><span class="hl-15">/* any explicit pixel height; % works if the parent has a height */</span><br/><span class="hl-1">}</span>
|
|
56
71
|
</code><button type="button">Copy</button></pre>
|
|
57
72
|
|
|
58
73
|
<div class="tsd-alert tsd-alert-tip"><div class="tsd-alert-title"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><use href="assets/icons.svg#icon-alertTip"></use></svg><span>Tip</span></div><p>
|
|
@@ -61,7 +76,8 @@
|
|
|
61
76
|
<div class="tsd-alert tsd-alert-important"><div class="tsd-alert-title"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><use href="assets/icons.svg#icon-alertImportant"></use></svg><span>Important</span></div><p>
|
|
62
77
|
<strong>Do not set <code>display</code> on <code><apex-grid></code>.</strong> The component declares <code>:host { display: grid }</code> internally for its track layout (header / filter / body). Any consumer rule that sets <code>display</code> (including <code>block</code>, <code>flex</code>, <code>inline-block</code>) collapses the grid. If you accidentally do this, the grid emits a one-shot <code>console.warn</code> at startup pointing here.</p>
|
|
63
78
|
</div>
|
|
64
|
-
<h3 id="what-success-looks-like" class="tsd-anchor-link">What success looks like<a href="#what-success-looks-like" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
79
|
+
<h3 id="what-success-looks-like" class="tsd-anchor-link">What success looks like<a href="#what-success-looks-like" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
80
|
+
<p>With the element registered and the host sized, you should see:</p>
|
|
65
81
|
<ul>
|
|
66
82
|
<li><strong>Visible borders</strong> between rows and columns.</li>
|
|
67
83
|
<li><strong>Sort arrows</strong> (↕) next to each header when <code>sort: true</code>.</li>
|
|
@@ -69,7 +85,8 @@
|
|
|
69
85
|
<li><strong>Hover state</strong> on rows.</li>
|
|
70
86
|
<li><strong>Smooth scrolling</strong> — DevTools shows only ~20 <code><apex-grid-row></code> elements at any time.</li>
|
|
71
87
|
</ul>
|
|
72
|
-
<h3 id="troubleshooting" class="tsd-anchor-link">Troubleshooting<a href="#troubleshooting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
88
|
+
<h3 id="troubleshooting" class="tsd-anchor-link">Troubleshooting<a href="#troubleshooting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
89
|
+
<table>
|
|
73
90
|
<thead>
|
|
74
91
|
<tr>
|
|
75
92
|
<th>What you see</th>
|
|
@@ -78,8 +95,8 @@
|
|
|
78
95
|
</thead>
|
|
79
96
|
<tbody>
|
|
80
97
|
<tr>
|
|
81
|
-
<td>
|
|
82
|
-
<td>Step 3 —
|
|
98
|
+
<td>Want a different look / brand color</td>
|
|
99
|
+
<td>Step 3 — override the <code>--ag-*</code> CSS variables</td>
|
|
83
100
|
</tr>
|
|
84
101
|
<tr>
|
|
85
102
|
<td>Only ~3 rows visible regardless of data size</td>
|
|
@@ -96,20 +113,25 @@
|
|
|
96
113
|
</tbody>
|
|
97
114
|
</table>
|
|
98
115
|
<hr>
|
|
99
|
-
<h2 id="features-in-depth" class="tsd-anchor-link">Features in depth<a href="#features-in-depth" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
100
|
-
<
|
|
116
|
+
<h2 id="features-in-depth" class="tsd-anchor-link">Features in depth<a href="#features-in-depth" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
117
|
+
<p>Each feature below is fully opt-in — you only pay for what you turn on. Snippets assume <code>const grid = document.querySelector('apex-grid')!</code>.</p>
|
|
118
|
+
<h3 id="sorting" class="tsd-anchor-link">Sorting<a href="#sorting" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
119
|
+
<pre><code class="ts"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">columns</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-2">sort:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> }, </span><span class="hl-15">// UI sort + tri-state</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'age'</span><span class="hl-1">, </span><span class="hl-2">sort:</span><span class="hl-1"> { </span><span class="hl-2">direction:</span><span class="hl-1"> </span><span class="hl-3">'desc'</span><span class="hl-1"> } }, </span><span class="hl-15">// initial state</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">sortConfiguration</span><span class="hl-1"> = { </span><span class="hl-2">multiple:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">triState:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> };</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">sort</span><span class="hl-1">({ </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'age'</span><span class="hl-1">, </span><span class="hl-2">direction:</span><span class="hl-1"> </span><span class="hl-3">'asc'</span><span class="hl-1"> });</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">clearSort</span><span class="hl-1">(); </span><span class="hl-15">// or grid.clearSort('age')</span>
|
|
101
120
|
</code><button type="button">Copy</button></pre>
|
|
102
121
|
|
|
103
122
|
<p>Events: <code>sorting</code> (cancellable), <code>sorted</code>.</p>
|
|
104
|
-
<h3 id="filtering" class="tsd-anchor-link">Filtering<a href="#filtering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
123
|
+
<h3 id="filtering" class="tsd-anchor-link">Filtering<a href="#filtering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
124
|
+
<pre><code class="ts"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">columns</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-2">filter:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> }, </span><span class="hl-15">// UI filter chip</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'age'</span><span class="hl-1">, </span><span class="hl-2">filter:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">'number'</span><span class="hl-1"> }, </span><span class="hl-15">// operands by type</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">StringOperands</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'apex-grid'</span><span class="hl-1">;</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">filter</span><span class="hl-1">({ </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-2">condition:</span><span class="hl-1"> </span><span class="hl-2">StringOperands</span><span class="hl-1">.</span><span class="hl-2">contains</span><span class="hl-1">, </span><span class="hl-2">searchTerm:</span><span class="hl-1"> </span><span class="hl-3">'Ada'</span><span class="hl-1"> });</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">clearFilter</span><span class="hl-1">();</span>
|
|
105
125
|
</code><button type="button">Copy</button></pre>
|
|
106
126
|
|
|
107
127
|
<p>Operand classes: <code>StringOperands</code>, <code>NumberOperands</code>, <code>BooleanOperands</code>. Events: <code>filtering</code> (cancellable), <code>filtered</code>.</p>
|
|
108
|
-
<h3 id="quick-filter-global-search" class="tsd-anchor-link">Quick filter (global search)<a href="#quick-filter-global-search" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
128
|
+
<h3 id="quick-filter-global-search" class="tsd-anchor-link">Quick filter (global search)<a href="#quick-filter-global-search" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
129
|
+
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">showQuickFilter</span><span class="hl-1"> = </span><span class="hl-5">true</span><span class="hl-1">; </span><span class="hl-15">// renders the toolbar input</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">quickFilter</span><span class="hl-1"> = </span><span class="hl-3">'ada'</span><span class="hl-1">; </span><span class="hl-15">// or: await grid.setQuickFilter('ada')</span>
|
|
109
130
|
</code><button type="button">Copy</button></pre>
|
|
110
131
|
|
|
111
132
|
<p>Custom matcher via <code>dataPipelineConfiguration.quickFilter</code>. Events: <code>quickFilterChanging</code> (cancellable), <code>quickFilterChanged</code>. Attribute: <code>show-quick-filter</code>, <code>quick-filter</code>.</p>
|
|
112
|
-
<h3 id="pagination" class="tsd-anchor-link">Pagination<a href="#pagination" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
133
|
+
<h3 id="pagination" class="tsd-anchor-link">Pagination<a href="#pagination" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
134
|
+
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">pagination</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">pageSize:</span><span class="hl-1"> </span><span class="hl-8">25</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">pageSizeOptions:</span><span class="hl-1"> [</span><span class="hl-8">10</span><span class="hl-1">, </span><span class="hl-8">25</span><span class="hl-1">, </span><span class="hl-8">50</span><span class="hl-1">, </span><span class="hl-8">100</span><span class="hl-1">],</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">gotoPage</span><span class="hl-1">(</span><span class="hl-8">2</span><span class="hl-1">);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">setPageSize</span><span class="hl-1">(</span><span class="hl-8">50</span><span class="hl-1">);</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">nextPage</span><span class="hl-1">(); </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">previousPage</span><span class="hl-1">(); </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">firstPage</span><span class="hl-1">(); </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">lastPage</span><span class="hl-1">();</span>
|
|
113
135
|
</code><button type="button">Copy</button></pre>
|
|
114
136
|
|
|
115
137
|
<p>Remote mode:</p>
|
|
@@ -117,11 +139,13 @@
|
|
|
117
139
|
</code><button type="button">Copy</button></pre>
|
|
118
140
|
|
|
119
141
|
<p>Properties: <code>page</code>, <code>pageSize</code>, <code>pageCount</code>, <code>totalItems</code>, <code>pageItems</code>. Events: <code>pageChanging</code> (cancellable), <code>pageChanged</code>.</p>
|
|
120
|
-
<h3 id="column-pinning" class="tsd-anchor-link">Column pinning<a href="#column-pinning" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
142
|
+
<h3 id="column-pinning" class="tsd-anchor-link">Column pinning<a href="#column-pinning" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
143
|
+
<pre><code class="ts"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">columns</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'id'</span><span class="hl-1">, </span><span class="hl-2">pinned:</span><span class="hl-1"> </span><span class="hl-3">'start'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'actions'</span><span class="hl-1">, </span><span class="hl-2">pinned:</span><span class="hl-1"> </span><span class="hl-3">'end'</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">pinColumn</span><span class="hl-1">(</span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-3">'start'</span><span class="hl-1">);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">unpinColumn</span><span class="hl-1">(</span><span class="hl-3">'name'</span><span class="hl-1">); </span><span class="hl-15">// or pinColumn('name', null)</span>
|
|
121
144
|
</code><button type="button">Copy</button></pre>
|
|
122
145
|
|
|
123
146
|
<p>The source <code>columns</code> array is <strong>not</strong> reordered — only the visual render order changes. Read <code>grid.displayColumns</code> for the render order. Events: <code>columnPinning</code> (cancellable), <code>columnPinned</code>.</p>
|
|
124
|
-
<h3 id="column-reordering" class="tsd-anchor-link">Column reordering<a href="#column-reordering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
147
|
+
<h3 id="column-reordering" class="tsd-anchor-link">Column reordering<a href="#column-reordering" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
148
|
+
<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">apex-grid</span><span class="hl-1"> </span><span class="hl-12">column-reordering</span><span class="hl-9">></</span><span class="hl-10">apex-grid</span><span class="hl-9">></span>
|
|
125
149
|
</code><button type="button">Copy</button></pre>
|
|
126
150
|
|
|
127
151
|
<p>Or programmatic:</p>
|
|
@@ -129,34 +153,43 @@
|
|
|
129
153
|
</code><button type="button">Copy</button></pre>
|
|
130
154
|
|
|
131
155
|
<p>Per-column opt-out: <code>{ key: 'id', reorderable: false }</code>. Reordering is constrained to the column's own pinning group (start / unpinned / end). Events: <code>columnMoving</code> (cancellable), <code>columnMoved</code>. Attribute: <code>column-reordering</code>.</p>
|
|
132
|
-
<h3 id="inline-editing" class="tsd-anchor-link">Inline editing<a href="#inline-editing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
156
|
+
<h3 id="inline-editing" class="tsd-anchor-link">Inline editing<a href="#inline-editing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
157
|
+
<pre><code class="ts"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">columns</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-2">editable:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'age'</span><span class="hl-1">, </span><span class="hl-2">editable:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">'number'</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">editing</span><span class="hl-1"> = { </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">mode:</span><span class="hl-1"> </span><span class="hl-3">'cell'</span><span class="hl-1">, </span><span class="hl-2">trigger:</span><span class="hl-1"> </span><span class="hl-3">'doubleClick'</span><span class="hl-1"> };</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">editCell</span><span class="hl-1">(</span><span class="hl-8">0</span><span class="hl-1">, </span><span class="hl-3">'name'</span><span class="hl-1">);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">commitEdit</span><span class="hl-1">();</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">cancelEdit</span><span class="hl-1">();</span>
|
|
133
158
|
</code><button type="button">Copy</button></pre>
|
|
134
159
|
|
|
135
160
|
<p><code>mode: 'row'</code> puts all editable cells in the row into edit together. Properties: <code>editingCell</code>, <code>editingRow</code>. Events: <code>cellValueChanging</code> (cancellable), <code>cellValueChanged</code>, plus <code>rowEditStarted</code> / <code>rowEditEnded</code> in row mode.</p>
|
|
136
|
-
<h3 id="row-selection" class="tsd-anchor-link">Row selection<a href="#row-selection" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
161
|
+
<h3 id="row-selection" class="tsd-anchor-link">Row selection<a href="#row-selection" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
162
|
+
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">selection</span><span class="hl-1"> = { </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">mode:</span><span class="hl-1"> </span><span class="hl-3">'multiple'</span><span class="hl-1">, </span><span class="hl-2">showCheckboxColumn:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> };</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">selectRow</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">]);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">toggleRowSelection</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">1</span><span class="hl-1">]);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">selectAllRows</span><span class="hl-1">();</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">clearSelection</span><span class="hl-1">();</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">selectedRows</span><span class="hl-1">; </span><span class="hl-15">// snapshot</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">selectedRows</span><span class="hl-1"> = [</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">2</span><span class="hl-1">]]; </span><span class="hl-15">// replace selection (goes through `rowSelecting`)</span>
|
|
137
163
|
</code><button type="button">Copy</button></pre>
|
|
138
164
|
|
|
139
165
|
<p>Events: <code>rowSelecting</code> (cancellable), <code>rowSelected</code>.</p>
|
|
140
|
-
<h3 id="row-expansion-master-detail" class="tsd-anchor-link">Row expansion (master-detail)<a href="#row-expansion-master-detail" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
166
|
+
<h3 id="row-expansion-master-detail" class="tsd-anchor-link">Row expansion (master-detail)<a href="#row-expansion-master-detail" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
167
|
+
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">expansion</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">detailTemplate</span><span class="hl-2">:</span><span class="hl-1"> ({ </span><span class="hl-2">data</span><span class="hl-1"> }) </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-4">html</span><span class="hl-3">`<order-summary .order=</span><span class="hl-5">${</span><span class="hl-2">data</span><span class="hl-5">}</span><span class="hl-3">></order-summary>`</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">isExpandable</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">row</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">row</span><span class="hl-1">.</span><span class="hl-2">hasDetails</span><span class="hl-1">,</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">expandRow</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">]);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">toggleRowExpansion</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">]);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">expandAllRows</span><span class="hl-1">();</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">collapseAllRows</span><span class="hl-1">();</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">expandedRows</span><span class="hl-1">; </span><span class="hl-15">// snapshot</span>
|
|
141
168
|
</code><button type="button">Copy</button></pre>
|
|
142
169
|
|
|
143
170
|
<p>Events: <code>rowExpanding</code> (cancellable), <code>rowExpanded</code>.</p>
|
|
144
|
-
<h3 id="tree-data-nested-rows" class="tsd-anchor-link">Tree data (nested rows)<a href="#tree-data-nested-rows" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
145
|
-
<
|
|
171
|
+
<h3 id="tree-data-nested-rows" class="tsd-anchor-link">Tree data (nested rows)<a href="#tree-data-nested-rows" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
172
|
+
<p>The data array stays <strong>flat</strong>. The grid derives the hierarchy from a <code>getDataPath(row)</code> callback that returns the path from root to that row — AG Grid's "tree data" pattern.</p>
|
|
173
|
+
<pre><code class="ts"><span class="hl-5">type</span><span class="hl-1"> </span><span class="hl-6">Person</span><span class="hl-1"> = { </span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-6">number</span><span class="hl-1">; </span><span class="hl-2">name</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">; </span><span class="hl-2">title</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">; </span><span class="hl-2">path</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">[] };</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">data</span><span class="hl-1">: </span><span class="hl-6">Person</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Adrian'</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'CEO'</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">'Adrian'</span><span class="hl-1">] },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Bryan'</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'VP Eng'</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">'Adrian'</span><span class="hl-1">, </span><span class="hl-3">'Bryan'</span><span class="hl-1">] },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Cara'</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Manager'</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">'Adrian'</span><span class="hl-1">, </span><span class="hl-3">'Bryan'</span><span class="hl-1">, </span><span class="hl-3">'Cara'</span><span class="hl-1">] },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">tree</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">getDataPath</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">row</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">row</span><span class="hl-1">.</span><span class="hl-2">path</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">defaultExpanded:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-15">// boolean | number — depth to expand</span><br/><span class="hl-1"> </span><span class="hl-2">groupColumnKey:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-15">// which column shows the chevron + indent</span><br/><span class="hl-1"> </span><span class="hl-2">childIndent:</span><span class="hl-1"> </span><span class="hl-8">20</span><span class="hl-1">, </span><span class="hl-15">// px per depth level</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">toggleTreeRow</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">]);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">expandAllTreeRows</span><span class="hl-1">();</span>
|
|
146
174
|
</code><button type="button">Copy</button></pre>
|
|
147
175
|
|
|
148
176
|
<p>Methods: <code>toggleTreeRow</code>, <code>expandTreeRow</code>, <code>collapseTreeRow</code>, <code>expandAllTreeRows</code>, <code>collapseAllTreeRows</code>, <code>isTreeRowExpanded</code>. Events: <code>treeRowExpanding</code> (cancellable), <code>treeRowExpanded</code>. When tree mode is active, the host element advertises <code>role="treegrid"</code>.</p>
|
|
149
|
-
<h3 id="csv
|
|
150
|
-
<
|
|
177
|
+
<h3 id="csv-export" class="tsd-anchor-link">CSV export<a href="#csv-export" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
178
|
+
<p>Programmatic:</p>
|
|
179
|
+
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">exportToCSV</span><span class="hl-1">(); </span><span class="hl-15">// downloads data.csv</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">exportToCSV</span><span class="hl-1">({ </span><span class="hl-2">filename:</span><span class="hl-1"> </span><span class="hl-3">'users'</span><span class="hl-1">, </span><span class="hl-2">source:</span><span class="hl-1"> </span><span class="hl-3">'selected'</span><span class="hl-1"> });</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">text</span><span class="hl-1"> = </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">exportToCSV</span><span class="hl-1">({ </span><span class="hl-2">filename:</span><span class="hl-1"> </span><span class="hl-3">''</span><span class="hl-1"> }); </span><span class="hl-15">// no download, returns the string</span>
|
|
151
180
|
</code><button type="button">Copy</button></pre>
|
|
152
181
|
|
|
153
|
-
<p><code>source</code> can be <code>'view'</code> (default — post-filter/post-sort), <code>'page'</code>, <code>'selected'</code>, or <code>'all'</code>. Per-column opt-out: <code>{ key: 'secret', exportable: false }</code
|
|
182
|
+
<p><code>source</code> can be <code>'view'</code> (default — post-filter/post-sort), <code>'page'</code>, <code>'selected'</code>, or <code>'all'</code>. Per-column opt-out: <code>{ key: 'secret', exportable: false }</code>.</p>
|
|
183
|
+
<blockquote>
|
|
184
|
+
<p><strong>XLSX (Excel) export</strong> moved to <a href="https://www.npmjs.com/package/apex-grid-enterprise"><code>apex-grid-enterprise</code></a> in v3. <code><apex-grid-enterprise></code> adds <code>grid.exportToXLSX(...)</code> and an "Export XLSX" entry to this same toolbar menu. CSV stays free.</p>
|
|
185
|
+
</blockquote>
|
|
154
186
|
<p>Toolbar dropdown:</p>
|
|
155
187
|
<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">apex-grid</span><span class="hl-1"> </span><span class="hl-12">show-export</span><span class="hl-9">></</span><span class="hl-10">apex-grid</span><span class="hl-9">></span>
|
|
156
188
|
</code><button type="button">Copy</button></pre>
|
|
157
189
|
|
|
158
|
-
<p>Renders a download icon in the toolbar's trailing actions area; the menu has "Export CSV"
|
|
159
|
-
<h3 id="toolbar" class="tsd-anchor-link">Toolbar<a href="#toolbar" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
190
|
+
<p>Renders a download icon in the toolbar's trailing actions area; the menu has an "Export CSV" entry (the enterprise grid adds "Export XLSX"). Toolbar <code>exportFilename</code> overrides the default <code>data</code> filename. Attribute: <code>show-export</code>.</p>
|
|
191
|
+
<h3 id="toolbar" class="tsd-anchor-link">Toolbar<a href="#toolbar" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
192
|
+
<p>Rendered automatically above the header row when at least one of <code>show-quick-filter</code> or <code>show-export</code> is on. CSS parts:</p>
|
|
160
193
|
<table>
|
|
161
194
|
<thead>
|
|
162
195
|
<tr>
|
|
@@ -200,13 +233,16 @@
|
|
|
200
233
|
</tbody>
|
|
201
234
|
</table>
|
|
202
235
|
<p>Search input has a <code>debounce</code> attribute (default <code>200</code>ms).</p>
|
|
203
|
-
<h3 id="theming" class="tsd-anchor-link">Theming<a href="#theming" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
236
|
+
<h3 id="theming" class="tsd-anchor-link">Theming<a href="#theming" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
237
|
+
<p>The grid styles itself through <code>--ag-*</code> CSS custom properties — override them on <code>apex-grid</code> (or any ancestor) to rebrand; see <a href="media/_tokens.scss"><code>src/styles/_tokens.scss</code></a> for the full list. When <code>igniteui-webcomponents</code> is present, the brand tokens auto-tint from its palette.</p>
|
|
204
238
|
<p>Style with CSS parts on the grid, paginator, and toolbar:</p>
|
|
205
239
|
<pre><code class="css"><span class="hl-10">apex-grid</span><span class="hl-1">::part(paginator) { </span><span class="hl-12">background</span><span class="hl-1">: </span><span class="hl-4">var</span><span class="hl-1">(</span><span class="hl-12">--surface-2</span><span class="hl-1">); }</span><br/><span class="hl-10">apex-grid-toolbar</span><span class="hl-1">::part(</span><span class="hl-10">search-input</span><span class="hl-1">) { </span><span class="hl-12">font-family</span><span class="hl-1">: </span><span class="hl-4">var</span><span class="hl-1">(</span><span class="hl-12">--font-mono</span><span class="hl-1">); }</span>
|
|
206
240
|
</code><button type="button">Copy</button></pre>
|
|
207
241
|
|
|
208
242
|
<hr>
|
|
209
|
-
<h2 id="api-reference" class="tsd-anchor-link">API Reference<a href="#api-reference" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
243
|
+
<h2 id="api-reference" class="tsd-anchor-link">API Reference<a href="#api-reference" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
244
|
+
<h3 id="properties" class="tsd-anchor-link">Properties<a href="#properties" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
245
|
+
<table>
|
|
210
246
|
<thead>
|
|
211
247
|
<tr>
|
|
212
248
|
<th>Property</th>
|
|
@@ -362,10 +398,12 @@
|
|
|
362
398
|
</tr>
|
|
363
399
|
</tbody>
|
|
364
400
|
</table>
|
|
365
|
-
<h3 id="methods" class="tsd-anchor-link">Methods<a href="#methods" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
401
|
+
<h3 id="methods" class="tsd-anchor-link">Methods<a href="#methods" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
402
|
+
<pre><code class="ts"><span class="hl-4">sort</span><span class="hl-1">(</span><span class="hl-2">expr</span><span class="hl-1">): </span><span class="hl-5">void</span><br/><span class="hl-4">filter</span><span class="hl-1">(</span><span class="hl-2">expr</span><span class="hl-1">): </span><span class="hl-5">void</span><br/><span class="hl-4">clearSort</span><span class="hl-1">(</span><span class="hl-2">key</span><span class="hl-1">?): </span><span class="hl-5">void</span><br/><span class="hl-4">clearFilter</span><span class="hl-1">(</span><span class="hl-2">key</span><span class="hl-1">?): </span><span class="hl-5">void</span><br/><span class="hl-4">setQuickFilter</span><span class="hl-1">(</span><span class="hl-2">value</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><br/><span class="hl-4">getColumn</span><span class="hl-1">(</span><span class="hl-2">keyOrIndex</span><span class="hl-1">): </span><span class="hl-2">ColumnConfiguration</span><span class="hl-1"><</span><span class="hl-7">T</span><span class="hl-1">> | </span><span class="hl-5">undefined</span><br/><span class="hl-4">updateColumns</span><span class="hl-1">(</span><span class="hl-2">columns</span><span class="hl-1">): </span><span class="hl-5">void</span><br/><span class="hl-4">pinColumn</span><span class="hl-1">(</span><span class="hl-2">key</span><span class="hl-1">, </span><span class="hl-3">'start'</span><span class="hl-1"> | </span><span class="hl-3">'end'</span><span class="hl-1"> | </span><span class="hl-5">null</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><span class="hl-4">unpinColumn</span><span class="hl-1">(</span><span class="hl-2">key</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><span class="hl-4">moveColumn</span><span class="hl-1">(</span><span class="hl-2">fromKey</span><span class="hl-1">, </span><span class="hl-2">toKey</span><span class="hl-1">, </span><span class="hl-3">'before'</span><span class="hl-1"> | </span><span class="hl-3">'after'</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><br/><span class="hl-4">gotoPage</span><span class="hl-1">(</span><span class="hl-2">page</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><span class="hl-4">setPageSize</span><span class="hl-1">(</span><span class="hl-2">size</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><span class="hl-4">nextPage</span><span class="hl-1">(); </span><span class="hl-4">previousPage</span><span class="hl-1">(); </span><span class="hl-4">firstPage</span><span class="hl-1">(); </span><span class="hl-4">lastPage</span><span class="hl-1">()</span><br/><br/><span class="hl-4">editCell</span><span class="hl-1">(</span><span class="hl-2">rowIndex</span><span class="hl-1">, </span><span class="hl-2">columnKey</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><span class="hl-4">editRow</span><span class="hl-1">(</span><span class="hl-2">rowIndex</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><span class="hl-4">commitEdit</span><span class="hl-1">(): </span><span class="hl-6">Promise</span><span class="hl-1"><</span><span class="hl-2">boolean</span><span class="hl-1">></span><br/><span class="hl-4">cancelEdit</span><span class="hl-1">(): </span><span class="hl-5">void</span><br/><br/><span class="hl-4">selectRow</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">); </span><span class="hl-4">deselectRow</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">); </span><span class="hl-4">toggleRowSelection</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">)</span><br/><span class="hl-4">selectAllRows</span><span class="hl-1">(); </span><span class="hl-4">clearSelection</span><span class="hl-1">(); </span><span class="hl-4">isRowSelected</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">)</span><br/><br/><span class="hl-4">expandRow</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">); </span><span class="hl-4">collapseRow</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">); </span><span class="hl-4">toggleRowExpansion</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">)</span><br/><span class="hl-4">expandAllRows</span><span class="hl-1">(); </span><span class="hl-4">collapseAllRows</span><span class="hl-1">(); </span><span class="hl-4">isRowExpanded</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">)</span><br/><br/><span class="hl-4">toggleTreeRow</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">); </span><span class="hl-4">expandTreeRow</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">); </span><span class="hl-4">collapseTreeRow</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">)</span><br/><span class="hl-4">expandAllTreeRows</span><span class="hl-1">(); </span><span class="hl-4">collapseAllTreeRows</span><span class="hl-1">(); </span><span class="hl-4">isTreeRowExpanded</span><span class="hl-1">(</span><span class="hl-2">row</span><span class="hl-1">)</span><br/><br/><span class="hl-4">exportToCSV</span><span class="hl-1">(</span><span class="hl-2">options</span><span class="hl-1">?): </span><span class="hl-2">string</span><br/><span class="hl-4">exportAs</span><span class="hl-1">(</span><span class="hl-2">formatId</span><span class="hl-1">, </span><span class="hl-2">options</span><span class="hl-1">?): </span><span class="hl-5">void</span><span class="hl-1"> </span><span class="hl-15">// toolbar dispatch; 'csv' (community), 'xlsx' (enterprise)</span>
|
|
366
403
|
</code><button type="button">Copy</button></pre>
|
|
367
404
|
|
|
368
|
-
<h3 id="events" class="tsd-anchor-link">Events<a href="#events" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
405
|
+
<h3 id="events" class="tsd-anchor-link">Events<a href="#events" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
406
|
+
<p>All events bubble and are composed across shadow boundaries. Names ending in <code>-ing</code> are cancellable.</p>
|
|
369
407
|
<table>
|
|
370
408
|
<thead>
|
|
371
409
|
<tr>
|
|
@@ -433,8 +471,10 @@
|
|
|
433
471
|
</tbody>
|
|
434
472
|
</table>
|
|
435
473
|
<p>Programmatic <code>sort()</code> / <code>filter()</code> calls are silent — only UI-initiated changes emit <code>sorting</code> / <code>filtering</code>.</p>
|
|
436
|
-
<h3 id="attributes" class="tsd-anchor-link">Attributes<a href="#attributes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3
|
|
437
|
-
<
|
|
474
|
+
<h3 id="attributes" class="tsd-anchor-link">Attributes<a href="#attributes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
475
|
+
<p><code>auto-generate</code>, <code>quick-filter</code>, <code>show-quick-filter</code>, <code>show-export</code>, <code>column-reordering</code>.</p>
|
|
476
|
+
<h3 id="css-parts" class="tsd-anchor-link">CSS parts<a href="#css-parts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
477
|
+
<table>
|
|
438
478
|
<thead>
|
|
439
479
|
<tr>
|
|
440
480
|
<th>Component</th>
|
|
@@ -457,7 +497,8 @@
|
|
|
457
497
|
</tbody>
|
|
458
498
|
</table>
|
|
459
499
|
<hr>
|
|
460
|
-
<h2 id="framework-integration" class="tsd-anchor-link">Framework integration<a href="#framework-integration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
500
|
+
<h2 id="framework-integration" class="tsd-anchor-link">Framework integration<a href="#framework-integration" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
501
|
+
<p><code><apex-grid></code> is a standard custom element. Bind properties (not attributes) for <code>data</code> / <code>columns</code>:</p>
|
|
461
502
|
<table>
|
|
462
503
|
<thead>
|
|
463
504
|
<tr>
|
|
@@ -489,10 +530,12 @@
|
|
|
489
530
|
</tbody>
|
|
490
531
|
</table>
|
|
491
532
|
<hr>
|
|
492
|
-
<h2 id="local-development" class="tsd-anchor-link">Local development<a href="#local-development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
533
|
+
<h2 id="local-development" class="tsd-anchor-link">Local development<a href="#local-development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
534
|
+
<pre><code class="bash"><span class="hl-4">git</span><span class="hl-1"> </span><span class="hl-3">clone</span><span class="hl-1"> </span><span class="hl-3">https://github.com/apexcharts/apex-grid.git</span><br/><span class="hl-4">cd</span><span class="hl-1"> </span><span class="hl-3">apex-grid</span><br/><span class="hl-4">npm</span><span class="hl-1"> </span><span class="hl-3">install</span><br/><span class="hl-4">npm</span><span class="hl-1"> </span><span class="hl-3">start</span><span class="hl-1"> </span><span class="hl-15"># demo at http://localhost:5173</span><br/><span class="hl-4">npm</span><span class="hl-1"> </span><span class="hl-3">test</span><span class="hl-1"> </span><span class="hl-15"># web-test-runner</span><br/><span class="hl-4">npm</span><span class="hl-1"> </span><span class="hl-3">run</span><span class="hl-1"> </span><span class="hl-3">lint</span><br/><span class="hl-4">npm</span><span class="hl-1"> </span><span class="hl-3">run</span><span class="hl-1"> </span><span class="hl-3">build</span><span class="hl-1"> </span><span class="hl-15"># builds dist/ + custom-elements.json + typedoc</span>
|
|
493
535
|
</code><button type="button">Copy</button></pre>
|
|
494
536
|
|
|
495
|
-
<h2 id="releasing" class="tsd-anchor-link">Releasing<a href="#releasing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
537
|
+
<h2 id="releasing" class="tsd-anchor-link">Releasing<a href="#releasing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
538
|
+
<p>Releases are automated by <a href=".github/workflows/publish.yml">.github/workflows/publish.yml</a>:</p>
|
|
496
539
|
<ol>
|
|
497
540
|
<li>Bump <code>"version"</code> in <a href="media/package.json">package.json</a> — the single source of truth. The build injects it into <code>dist/package.json</code>.</li>
|
|
498
541
|
<li>Commit with a message starting with <code>release:</code> and the same version, e.g. <code>release: 2.0.0</code> or <code>release: 2.0.0-rc.1</code>.</li>
|
|
@@ -500,5 +543,6 @@
|
|
|
500
543
|
</ol>
|
|
501
544
|
<p>The workflow then verifies the version triple-match, runs lint + tests + build, publishes <code>dist/</code> to npm with <code>--provenance</code> (OIDC trusted publishing — no token in secrets), and creates a <code>vX.Y.Z</code> git tag and GitHub Release with auto-generated notes. Pre-release versions (containing <code>-</code>) publish under the <code>next</code> dist-tag; stable versions under <code>latest</code>.</p>
|
|
502
545
|
<p>Any push whose head commit does not start with <code>release:</code> is a no-op for the workflow.</p>
|
|
503
|
-
<h2 id="license" class="tsd-anchor-link">License<a href="#license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2
|
|
504
|
-
|
|
546
|
+
<h2 id="license" class="tsd-anchor-link">License<a href="#license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
547
|
+
<p>See <a href="media/LICENSE">LICENSE</a>.</p>
|
|
548
|
+
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#apex-grid"><span>Apex <wbr/>Grid</span></a><ul><li><a href="#features"><span>Features</span></a></li><li><a href="#quick-start"><span>Quick <wbr/>Start</span></a></li><li><ul><li><a href="#one-call-setup"><span>One-<wbr/>call setup</span></a></li><li><a href="#render-the-grid"><span>Render the grid</span></a></li></ul></li><li><a href="#manual-setup-four-steps"><span>Manual setup (four steps)</span></a></li><li><ul><li><a href="#1-install"><span>1. <wbr/>Install</span></a></li><li><a href="#2-register-the-custom-element"><span>2. <wbr/>Register the custom element</span></a></li><li><a href="#3-optional-customize-the-look"><span>3. (<wbr/>Optional) <wbr/>Customize the look</span></a></li><li><a href="#4-size-the-host"><span>4. <wbr/>Size the host</span></a></li><li><a href="#what-success-looks-like"><span>What success looks like</span></a></li><li><a href="#troubleshooting"><span>Troubleshooting</span></a></li></ul></li><li><a href="#features-in-depth"><span>Features in depth</span></a></li><li><ul><li><a href="#sorting"><span>Sorting</span></a></li><li><a href="#filtering"><span>Filtering</span></a></li><li><a href="#quick-filter-global-search"><span>Quick filter (global search)</span></a></li><li><a href="#pagination"><span>Pagination</span></a></li><li><a href="#column-pinning"><span>Column pinning</span></a></li><li><a href="#column-reordering"><span>Column reordering</span></a></li><li><a href="#inline-editing"><span>Inline editing</span></a></li><li><a href="#row-selection"><span>Row selection</span></a></li><li><a href="#row-expansion-master-detail"><span>Row expansion (master-<wbr/>detail)</span></a></li><li><a href="#tree-data-nested-rows"><span>Tree data (nested rows)</span></a></li><li><a href="#csv-export"><span>CSV export</span></a></li><li><a href="#toolbar"><span>Toolbar</span></a></li><li><a href="#theming"><span>Theming</span></a></li></ul></li><li><a href="#api-reference"><span>API <wbr/>Reference</span></a></li><li><ul><li><a href="#properties"><span>Properties</span></a></li><li><a href="#methods"><span>Methods</span></a></li><li><a href="#events"><span>Events</span></a></li><li><a href="#attributes"><span>Attributes</span></a></li><li><a href="#css-parts"><span>CSS parts</span></a></li></ul></li><li><a href="#framework-integration"><span>Framework integration</span></a></li><li><a href="#local-development"><span>Local development</span></a></li><li><a href="#releasing"><span>Releasing</span></a></li><li><a href="#license"><span>License</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">apex-grid</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|