apex-grid 2.0.0 → 3.0.0

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.
Files changed (156) hide show
  1. package/README.md +26 -23
  2. package/components/grid.d.ts +26 -22
  3. package/components/grid.js +34 -52
  4. package/components/grid.js.map +1 -1
  5. package/components/header.js +7 -13
  6. package/components/header.js.map +1 -1
  7. package/components/toolbar.js +13 -29
  8. package/components/toolbar.js.map +1 -1
  9. package/controllers/state.d.ts +15 -1
  10. package/controllers/state.js +11 -1
  11. package/controllers/state.js.map +1 -1
  12. package/custom-elements.json +228 -242
  13. package/define.js.map +1 -1
  14. package/docs/assets/hierarchy.js +1 -1
  15. package/docs/assets/highlight.css +9 -2
  16. package/docs/assets/icons.js +1 -1
  17. package/docs/assets/icons.svg +1 -1
  18. package/docs/assets/main.js +4 -4
  19. package/docs/assets/navigation.js +1 -1
  20. package/docs/assets/search.js +1 -1
  21. package/docs/assets/style.css +3 -3
  22. package/docs/classes/ApexGrid.html +86 -87
  23. package/docs/functions/setup.html +11 -17
  24. package/docs/hierarchy.html +1 -1
  25. package/docs/index.html +87 -47
  26. package/docs/interfaces/ApexCellValueChangedEvent.html +5 -5
  27. package/docs/interfaces/ApexCellValueChangingEvent.html +6 -6
  28. package/docs/interfaces/ApexColumnMovedEvent.html +4 -4
  29. package/docs/interfaces/ApexColumnMovingEvent.html +5 -5
  30. package/docs/interfaces/ApexColumnPinnedEvent.html +3 -3
  31. package/docs/interfaces/ApexColumnPinningEvent.html +4 -4
  32. package/docs/interfaces/ApexDetailContext.html +4 -4
  33. package/docs/interfaces/ApexFilteredEvent.html +3 -3
  34. package/docs/interfaces/ApexFilteringEvent.html +3 -3
  35. package/docs/interfaces/ApexGridEventMap.html +13 -13
  36. package/docs/interfaces/ApexHeaderContext.html +3 -3
  37. package/docs/interfaces/ApexPageChangedEvent.html +5 -5
  38. package/docs/interfaces/ApexPageChangingEvent.html +5 -5
  39. package/docs/interfaces/ApexQuickFilterChangedEvent.html +2 -2
  40. package/docs/interfaces/ApexQuickFilterChangingEvent.html +3 -3
  41. package/docs/interfaces/ApexRowEditEndedEvent.html +3 -3
  42. package/docs/interfaces/ApexRowEditStartedEvent.html +2 -2
  43. package/docs/interfaces/ApexRowExpandedEvent.html +4 -4
  44. package/docs/interfaces/ApexRowExpandingEvent.html +5 -5
  45. package/docs/interfaces/ApexRowSelectedEvent.html +4 -4
  46. package/docs/interfaces/ApexRowSelectingEvent.html +5 -5
  47. package/docs/interfaces/ApexTreeRowExpandedEvent.html +4 -4
  48. package/docs/interfaces/ApexTreeRowExpandingEvent.html +5 -5
  49. package/docs/interfaces/BaseApexCellContext.html +6 -6
  50. package/docs/interfaces/BaseApexEditorContext.html +8 -8
  51. package/docs/interfaces/BaseColumnConfiguration.html +34 -15
  52. package/docs/interfaces/BaseColumnSortConfiguration.html +3 -3
  53. package/docs/interfaces/BaseFilterExpression.html +4 -4
  54. package/docs/interfaces/BaseSortExpression.html +3 -3
  55. package/docs/interfaces/CSVExportOptions.html +9 -9
  56. package/docs/interfaces/ColumnFilterConfiguration.html +2 -2
  57. package/docs/interfaces/DataPipelineConfiguration.html +3 -3
  58. package/docs/interfaces/ExportFormat.html +10 -0
  59. package/docs/interfaces/ExportOptions.html +6 -6
  60. package/docs/interfaces/GridEditingConfiguration.html +4 -4
  61. package/docs/interfaces/GridExpansionConfiguration.html +5 -5
  62. package/docs/interfaces/GridSelectionConfiguration.html +4 -4
  63. package/docs/interfaces/GridSortConfiguration.html +3 -3
  64. package/docs/interfaces/GridTreeConfiguration.html +5 -5
  65. package/docs/interfaces/PaginationConfiguration.html +6 -6
  66. package/docs/interfaces/PaginationState.html +5 -5
  67. package/docs/media/LICENSE +80 -0
  68. package/docs/media/_tokens.scss +106 -0
  69. package/docs/media/package.json +14 -12
  70. package/docs/modules.html +1 -1
  71. package/docs/types/ApexCellContext.html +1 -1
  72. package/docs/types/ApexEditorContext.html +1 -1
  73. package/docs/types/BasePropertyType.html +1 -1
  74. package/docs/types/BaseSortComparer.html +1 -1
  75. package/docs/types/ColumnConfiguration.html +1 -1
  76. package/docs/types/ColumnDropPosition.html +1 -1
  77. package/docs/types/ColumnSortConfiguration.html +1 -1
  78. package/docs/types/DataPipelineHook.html +1 -1
  79. package/docs/types/DataPipelineParams.html +4 -4
  80. package/docs/types/DataType.html +18 -1
  81. package/docs/types/ExportSource.html +1 -1
  82. package/docs/types/FilterCriteria.html +1 -1
  83. package/docs/types/FilterExpression.html +1 -1
  84. package/docs/types/Keys.html +1 -1
  85. package/docs/types/PropertyType.html +1 -1
  86. package/docs/types/SortComparer.html +1 -1
  87. package/docs/types/SortExpression.html +1 -1
  88. package/docs/types/SortState.html +1 -1
  89. package/index.d.ts +1 -1
  90. package/index.js.map +1 -1
  91. package/internal/column-types.js +161 -1
  92. package/internal/column-types.js.map +1 -1
  93. package/internal/export.d.ts +12 -4
  94. package/internal/export.js.map +1 -1
  95. package/internal/feature-module.d.ts +27 -0
  96. package/internal/feature-module.js +2 -0
  97. package/internal/feature-module.js.map +1 -0
  98. package/internal/icons.d.ts +7 -0
  99. package/internal/icons.js +11 -0
  100. package/internal/icons.js.map +1 -1
  101. package/internal/index.d.ts +20 -0
  102. package/internal/index.js +6 -0
  103. package/internal/index.js.map +1 -0
  104. package/internal/types.d.ts +54 -5
  105. package/internal/types.js.map +1 -1
  106. package/operations/filter/tree.d.ts +1 -1
  107. package/operations/filter/types.js.map +1 -1
  108. package/operations/sort/types.js.map +1 -1
  109. package/package.json +5 -1
  110. package/setup.d.ts +19 -26
  111. package/setup.js +4 -2
  112. package/setup.js.map +1 -1
  113. package/styles/_checkbox.css.js +3 -0
  114. package/styles/_checkbox.css.js.map +1 -0
  115. package/styles/_tokens.css.js +3 -0
  116. package/styles/_tokens.css.js.map +1 -0
  117. package/styles/body-cell/body-cell.css.js +1 -1
  118. package/styles/body-cell/body-cell.css.js.map +1 -1
  119. package/styles/body-cell/cell-renderers.css.js +3 -0
  120. package/styles/body-cell/cell-renderers.css.js.map +1 -0
  121. package/styles/body-row/body-row.css.js +1 -1
  122. package/styles/body-row/body-row.css.js.map +1 -1
  123. package/styles/filter-row/filter-row.css.js +1 -1
  124. package/styles/filter-row/filter-row.css.js.map +1 -1
  125. package/styles/grid/_grid.base.css.js +1 -1
  126. package/styles/grid/_grid.base.css.js.map +1 -1
  127. package/styles/grid/grid.css.js +3 -0
  128. package/styles/grid/grid.css.js.map +1 -0
  129. package/styles/header-cell/header-cell.css.js +1 -1
  130. package/styles/header-cell/header-cell.css.js.map +1 -1
  131. package/styles/header-row/header-row.base.css.js +1 -1
  132. package/styles/header-row/header-row.base.css.js.map +1 -1
  133. package/styles/paginator/paginator.css.js +1 -1
  134. package/styles/paginator/paginator.css.js.map +1 -1
  135. package/styles/toolbar/toolbar.css.js +1 -1
  136. package/styles/toolbar/toolbar.css.js.map +1 -1
  137. package/docs/interfaces/XLSXExportOptions.html +0 -17
  138. package/docs/media/publish.yml +0 -111
  139. package/internal/theming.d.ts +0 -34
  140. package/internal/theming.js +0 -123
  141. package/internal/theming.js.map +0 -1
  142. package/internal/xlsx.d.ts +0 -22
  143. package/internal/xlsx.js +0 -228
  144. package/internal/xlsx.js.map +0 -1
  145. package/styles/grid/themes/light/grid.bootstrap.css.js +0 -3
  146. package/styles/grid/themes/light/grid.bootstrap.css.js.map +0 -1
  147. package/styles/grid/themes/light/grid.fluent.css.js +0 -3
  148. package/styles/grid/themes/light/grid.fluent.css.js.map +0 -1
  149. package/styles/grid/themes/light/grid.indigo.css.js +0 -3
  150. package/styles/grid/themes/light/grid.indigo.css.js.map +0 -1
  151. package/styles/grid/themes/light/grid.material.css.js +0 -3
  152. package/styles/grid/themes/light/grid.material.css.js.map +0 -1
  153. /package/styles/{grid/themes/light/grid.bootstrap.css.d.ts → _checkbox.css.d.ts} +0 -0
  154. /package/styles/{grid/themes/light/grid.fluent.css.d.ts → _tokens.css.d.ts} +0 -0
  155. /package/styles/{grid/themes/light/grid.indigo.css.d.ts → body-cell/cell-renderers.css.d.ts} +0 -0
  156. /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><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>
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>&lt;apex-grid&gt;</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><ul>
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 / XLSX export</strong> — programmatic methods plus an optional toolbar dropdown.</li>
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>&lt;apex-grid-toolbar&gt;</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> — Bootstrap / Fluent / Indigo / Material themes via <code>igniteui-webcomponents</code>, with light and dark variants.</li>
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=&quot;grid&quot;</code> / <code>role=&quot;treegrid&quot;</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><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><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">&#39;apex-grid&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">&#39;igniteui-webcomponents/themes/light/bootstrap.css&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">setup</span><span class="hl-1">({ </span><span class="hl-2">theme:</span><span class="hl-1"> </span><span class="hl-3">&#39;bootstrap&#39;</span><span class="hl-1"> });</span>
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">&#39;apex-grid&#39;</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>&lt;apex-grid&gt;</code>, calls <code>configureTheme('bootstrap')</code>, and adopts a default host stylesheet (<code>height: 100%; min-height: 240px</code>). The Ignite UI theme CSS still has to be imported by you — bundlers can't dynamically import CSS portably.</p>
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><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">&#39;lit&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">&#39;apex-grid/define&#39;</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">&#39;apex-grid&#39;</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">&#39;Ada Lovelace&#39;</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">&#39;Carl Sagan&#39;</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">&#39;Grace Hopper&#39;</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">&lt;</span><span class="hl-6">User</span><span class="hl-1">&gt;[] = [</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">&#39;id&#39;</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;number&#39;</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">&#39;ID&#39;</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">&#39;80px&#39;</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">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;string&#39;</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">&#39;Name&#39;</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">&#39;240px&#39;</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">&#39;age&#39;</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;number&#39;</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">&#39;Age&#39;</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">&#39;100px&#39;</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">&#39;subscribed&#39;</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;boolean&#39;</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">&#39;Subscribed&#39;</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">&#39;140px&#39;</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">`&lt;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">&gt;&lt;/apex-grid&gt;`</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">&#39;app&#39;</span><span class="hl-1">)!,</span><br/><span class="hl-1">);</span>
32
+ <p>That single call registers <code>&lt;apex-grid&gt;</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">&#39;lit&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">&#39;apex-grid/define&#39;</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">&#39;apex-grid&#39;</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">&#39;Ada Lovelace&#39;</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">&#39;Carl Sagan&#39;</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">&#39;Grace Hopper&#39;</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">&lt;</span><span class="hl-6">User</span><span class="hl-1">&gt;[] = [</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">&#39;id&#39;</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;number&#39;</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">&#39;ID&#39;</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">&#39;80px&#39;</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">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;string&#39;</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">&#39;Name&#39;</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">&#39;240px&#39;</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">&#39;age&#39;</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;number&#39;</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">&#39;Age&#39;</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">&#39;100px&#39;</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">&#39;subscribed&#39;</span><span class="hl-1">, </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-3">&#39;boolean&#39;</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">&#39;Subscribed&#39;</span><span class="hl-1">, </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-3">&#39;140px&#39;</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">`&lt;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">&gt;&lt;/apex-grid&gt;`</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">&#39;app&#39;</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">&lt;</span><span class="hl-10">style</span><span class="hl-9">&gt;</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">&lt;/</span><span class="hl-10">style</span><span class="hl-9">&gt;</span><br/><span class="hl-9">&lt;</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">&quot;app&quot;</span><span class="hl-9">&gt;&lt;/</span><span class="hl-10">div</span><span class="hl-9">&gt;</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><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 &quot;runs&quot; but renders broken (no borders, no filter UI, or only a few collapsed rows).</p>
37
- <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><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>
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 &quot;runs&quot; 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><pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">&#39;apex-grid/define&#39;</span><span class="hl-1">;</span>
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">&#39;apex-grid/define&#39;</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,16 @@
46
54
  </code><button type="button">Copy</button></pre>
47
55
 
48
56
  <p>Without this, <code>&lt;apex-grid&gt;</code> is an inert unknown element.</p>
49
- <h3 id="3-load-a-theme" class="tsd-anchor-link">3. Load a theme<a href="#3-load-a-theme" 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><p>The grid's filter dropdowns and sort indicators come from <code>igniteui-webcomponents</code>. Both the CSS import <strong>and</strong> the <code>configureTheme()</code> call are required:</p>
50
- <pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">configureTheme</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">&#39;igniteui-webcomponents&#39;</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">&#39;igniteui-webcomponents/themes/light/bootstrap.css&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">configureTheme</span><span class="hl-1">(</span><span class="hl-3">&#39;bootstrap&#39;</span><span class="hl-1">); </span><span class="hl-14">// &#39;bootstrap&#39; | &#39;material&#39; | &#39;fluent&#39; | &#39;indigo&#39;</span>
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>
51
60
  </code><button type="button">Copy</button></pre>
52
61
 
53
- <p>For dark mode, swap <code>light</code> → <code>dark</code> in the import path. The name passed to <code>configureTheme()</code> must match the imported CSS file.</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><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>
55
- <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-14">/* any explicit pixel height; % works if the parent has a height */</span><br/><span class="hl-1">}</span>
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>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>
64
+ <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>
65
+ <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>
66
+ <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
67
  </code><button type="button">Copy</button></pre>
57
68
 
58
69
  <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 +72,8 @@
61
72
  <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
73
  <strong>Do not set <code>display</code> on <code>&lt;apex-grid&gt;</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
74
  </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><p>When all four steps are in place you should see:</p>
75
+ <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>
76
+ <p>With the element registered and the host sized, you should see:</p>
65
77
  <ul>
66
78
  <li><strong>Visible borders</strong> between rows and columns.</li>
67
79
  <li><strong>Sort arrows</strong> (↕) next to each header when <code>sort: true</code>.</li>
@@ -69,7 +81,8 @@
69
81
  <li><strong>Hover state</strong> on rows.</li>
70
82
  <li><strong>Smooth scrolling</strong> — DevTools shows only ~20 <code>&lt;apex-grid-row&gt;</code> elements at any time.</li>
71
83
  </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><table>
84
+ <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>
85
+ <table>
73
86
  <thead>
74
87
  <tr>
75
88
  <th>What you see</th>
@@ -78,8 +91,8 @@
78
91
  </thead>
79
92
  <tbody>
80
93
  <tr>
81
- <td>Bare table, no borders, no filter UI</td>
82
- <td>Step 3 — theme CSS not imported or <code>configureTheme()</code> not called</td>
94
+ <td>Want a different look / brand color</td>
95
+ <td>Step 3 — override the <code>--ag-*</code> CSS variables</td>
83
96
  </tr>
84
97
  <tr>
85
98
  <td>Only ~3 rows visible regardless of data size</td>
@@ -96,20 +109,25 @@
96
109
  </tbody>
97
110
  </table>
98
111
  <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><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>
100
- <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><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">&#39;name&#39;</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-14">// 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">&#39;age&#39;</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">&#39;desc&#39;</span><span class="hl-1"> } }, </span><span class="hl-14">// 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">&#39;age&#39;</span><span class="hl-1">, </span><span class="hl-2">direction:</span><span class="hl-1"> </span><span class="hl-3">&#39;asc&#39;</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-14">// or grid.clearSort(&#39;age&#39;)</span>
112
+ <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>
113
+ <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>
114
+ <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>
115
+ <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">&#39;name&#39;</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">&#39;age&#39;</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">&#39;desc&#39;</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">&#39;age&#39;</span><span class="hl-1">, </span><span class="hl-2">direction:</span><span class="hl-1"> </span><span class="hl-3">&#39;asc&#39;</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(&#39;age&#39;)</span>
101
116
  </code><button type="button">Copy</button></pre>
102
117
 
103
118
  <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><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">&#39;name&#39;</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-14">// 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">&#39;age&#39;</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">&#39;number&#39;</span><span class="hl-1"> }, </span><span class="hl-14">// 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">&#39;apex-grid&#39;</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">&#39;name&#39;</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">&#39;Ada&#39;</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>
119
+ <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>
120
+ <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">&#39;name&#39;</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">&#39;age&#39;</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">&#39;number&#39;</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">&#39;apex-grid&#39;</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">&#39;name&#39;</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">&#39;Ada&#39;</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
121
  </code><button type="button">Copy</button></pre>
106
122
 
107
123
  <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><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-14">// 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">&#39;ada&#39;</span><span class="hl-1">; </span><span class="hl-14">// or: await grid.setQuickFilter(&#39;ada&#39;)</span>
124
+ <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>
125
+ <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">&#39;ada&#39;</span><span class="hl-1">; </span><span class="hl-15">// or: await grid.setQuickFilter(&#39;ada&#39;)</span>
109
126
  </code><button type="button">Copy</button></pre>
110
127
 
111
128
  <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><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>
129
+ <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>
130
+ <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
131
  </code><button type="button">Copy</button></pre>
114
132
 
115
133
  <p>Remote mode:</p>
@@ -117,11 +135,13 @@
117
135
  </code><button type="button">Copy</button></pre>
118
136
 
119
137
  <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><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">&#39;id&#39;</span><span class="hl-1">, </span><span class="hl-2">pinned:</span><span class="hl-1"> </span><span class="hl-3">&#39;start&#39;</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">&#39;name&#39;</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">&#39;actions&#39;</span><span class="hl-1">, </span><span class="hl-2">pinned:</span><span class="hl-1"> </span><span class="hl-3">&#39;end&#39;</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">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;start&#39;</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">&#39;name&#39;</span><span class="hl-1">); </span><span class="hl-14">// or pinColumn(&#39;name&#39;, null)</span>
138
+ <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>
139
+ <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">&#39;id&#39;</span><span class="hl-1">, </span><span class="hl-2">pinned:</span><span class="hl-1"> </span><span class="hl-3">&#39;start&#39;</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">&#39;name&#39;</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">&#39;actions&#39;</span><span class="hl-1">, </span><span class="hl-2">pinned:</span><span class="hl-1"> </span><span class="hl-3">&#39;end&#39;</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">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;start&#39;</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">&#39;name&#39;</span><span class="hl-1">); </span><span class="hl-15">// or pinColumn(&#39;name&#39;, null)</span>
121
140
  </code><button type="button">Copy</button></pre>
122
141
 
123
142
  <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><pre><code class="html"><span class="hl-9">&lt;</span><span class="hl-10">apex-grid</span><span class="hl-1"> </span><span class="hl-12">column-reordering</span><span class="hl-9">&gt;&lt;/</span><span class="hl-10">apex-grid</span><span class="hl-9">&gt;</span>
143
+ <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>
144
+ <pre><code class="html"><span class="hl-9">&lt;</span><span class="hl-10">apex-grid</span><span class="hl-1"> </span><span class="hl-12">column-reordering</span><span class="hl-9">&gt;&lt;/</span><span class="hl-10">apex-grid</span><span class="hl-9">&gt;</span>
125
145
  </code><button type="button">Copy</button></pre>
126
146
 
127
147
  <p>Or programmatic:</p>
@@ -129,34 +149,43 @@
129
149
  </code><button type="button">Copy</button></pre>
130
150
 
131
151
  <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><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">&#39;name&#39;</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">&#39;age&#39;</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">&#39;number&#39;</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">&#39;cell&#39;</span><span class="hl-1">, </span><span class="hl-2">trigger:</span><span class="hl-1"> </span><span class="hl-3">&#39;doubleClick&#39;</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">&#39;name&#39;</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>
152
+ <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>
153
+ <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">&#39;name&#39;</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">&#39;age&#39;</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">&#39;number&#39;</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">&#39;cell&#39;</span><span class="hl-1">, </span><span class="hl-2">trigger:</span><span class="hl-1"> </span><span class="hl-3">&#39;doubleClick&#39;</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">&#39;name&#39;</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
154
  </code><button type="button">Copy</button></pre>
134
155
 
135
156
  <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><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">&#39;multiple&#39;</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-14">// 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-14">// replace selection (goes through `rowSelecting`)</span>
157
+ <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>
158
+ <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">&#39;multiple&#39;</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
159
  </code><button type="button">Copy</button></pre>
138
160
 
139
161
  <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><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">=&gt;</span><span class="hl-1"> </span><span class="hl-4">html</span><span class="hl-3">`&lt;order-summary .order=</span><span class="hl-5">${</span><span class="hl-2">data</span><span class="hl-5">}</span><span class="hl-3">&gt;&lt;/order-summary&gt;`</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">=&gt;</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-14">// snapshot</span>
162
+ <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>
163
+ <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">=&gt;</span><span class="hl-1"> </span><span class="hl-4">html</span><span class="hl-3">`&lt;order-summary .order=</span><span class="hl-5">${</span><span class="hl-2">data</span><span class="hl-5">}</span><span class="hl-3">&gt;&lt;/order-summary&gt;`</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">=&gt;</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
164
  </code><button type="button">Copy</button></pre>
142
165
 
143
166
  <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><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 &quot;tree data&quot; pattern.</p>
145
- <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">&#39;Adrian&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;CEO&#39;</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">&#39;Adrian&#39;</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">&#39;Bryan&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;VP Eng&#39;</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">&#39;Adrian&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;Bryan&#39;</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">&#39;Cara&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;Manager&#39;</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">&#39;Adrian&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;Bryan&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;Cara&#39;</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">=&gt;</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-14">// 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">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-14">// 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-14">// 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>
167
+ <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>
168
+ <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 &quot;tree data&quot; pattern.</p>
169
+ <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">&#39;Adrian&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;CEO&#39;</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">&#39;Adrian&#39;</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">&#39;Bryan&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;VP Eng&#39;</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">&#39;Adrian&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;Bryan&#39;</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">&#39;Cara&#39;</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">&#39;Manager&#39;</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">&#39;Adrian&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;Bryan&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;Cara&#39;</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">=&gt;</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">&#39;name&#39;</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
170
  </code><button type="button">Copy</button></pre>
147
171
 
148
172
  <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=&quot;treegrid&quot;</code>.</p>
149
- <h3 id="csv--xlsx-export" class="tsd-anchor-link">CSV / XLSX export<a href="#csv--xlsx-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><p>Programmatic:</p>
150
- <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-14">// 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">&#39;users&#39;</span><span class="hl-1">, </span><span class="hl-2">source:</span><span class="hl-1"> </span><span class="hl-3">&#39;selected&#39;</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">&#39;&#39;</span><span class="hl-1"> }); </span><span class="hl-14">// no download, returns the string</span><br/><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">exportToXLSX</span><span class="hl-1">({ </span><span class="hl-2">filename:</span><span class="hl-1"> </span><span class="hl-3">&#39;users&#39;</span><span class="hl-1">, </span><span class="hl-2">sheetName:</span><span class="hl-1"> </span><span class="hl-3">&#39;Users&#39;</span><span class="hl-1"> });</span>
173
+ <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>
174
+ <p>Programmatic:</p>
175
+ <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">&#39;users&#39;</span><span class="hl-1">, </span><span class="hl-2">source:</span><span class="hl-1"> </span><span class="hl-3">&#39;selected&#39;</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">&#39;&#39;</span><span class="hl-1"> }); </span><span class="hl-15">// no download, returns the string</span>
151
176
  </code><button type="button">Copy</button></pre>
152
177
 
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>. XLSX preserves native cell types for numbers, booleans, and <code>Date</code> values.</p>
178
+ <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>
179
+ <blockquote>
180
+ <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>&lt;apex-grid-enterprise&gt;</code> adds <code>grid.exportToXLSX(...)</code> and an &quot;Export XLSX&quot; entry to this same toolbar menu. CSV stays free.</p>
181
+ </blockquote>
154
182
  <p>Toolbar dropdown:</p>
155
183
  <pre><code class="html"><span class="hl-9">&lt;</span><span class="hl-10">apex-grid</span><span class="hl-1"> </span><span class="hl-12">show-export</span><span class="hl-9">&gt;&lt;/</span><span class="hl-10">apex-grid</span><span class="hl-9">&gt;</span>
156
184
  </code><button type="button">Copy</button></pre>
157
185
 
158
- <p>Renders a download icon in the toolbar's trailing actions area; the menu has &quot;Export CSV&quot; and &quot;Export XLSX&quot; entries. Toolbar <code>exportFilename</code> overrides the default <code>data</code> filename. Attribute: <code>show-export</code>.</p>
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><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>
186
+ <p>Renders a download icon in the toolbar's trailing actions area; the menu has an &quot;Export CSV&quot; entry (the enterprise grid adds &quot;Export XLSX&quot;). Toolbar <code>exportFilename</code> overrides the default <code>data</code> filename. Attribute: <code>show-export</code>.</p>
187
+ <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>
188
+ <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
189
  <table>
161
190
  <thead>
162
191
  <tr>
@@ -200,13 +229,16 @@
200
229
  </tbody>
201
230
  </table>
202
231
  <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><p>Built-in themes: <code>bootstrap</code>, <code>material</code>, <code>fluent</code>, <code>indigo</code> — each with <code>light</code> and <code>dark</code> variants. Switch at runtime via <code>configureTheme(name)</code>.</p>
232
+ <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>
233
+ <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
234
  <p>Style with CSS parts on the grid, paginator, and toolbar:</p>
205
235
  <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
236
  </code><button type="button">Copy</button></pre>
207
237
 
208
238
  <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><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><table>
239
+ <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>
240
+ <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>
241
+ <table>
210
242
  <thead>
211
243
  <tr>
212
244
  <th>Property</th>
@@ -362,10 +394,12 @@
362
394
  </tr>
363
395
  </tbody>
364
396
  </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><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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-7">T</span><span class="hl-1">&gt; | </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">&#39;start&#39;</span><span class="hl-1"> | </span><span class="hl-3">&#39;end&#39;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&#39;before&#39;</span><span class="hl-1"> | </span><span class="hl-3">&#39;after&#39;</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</span><br/><span class="hl-4">commitEdit</span><span class="hl-1">(): </span><span class="hl-6">Promise</span><span class="hl-1">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">exportToXLSX</span><span class="hl-1">(</span><span class="hl-2">options</span><span class="hl-1">?): </span><span class="hl-2">Uint8Array</span>
397
+ <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>
398
+ <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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-7">T</span><span class="hl-1">&gt; | </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">&#39;start&#39;</span><span class="hl-1"> | </span><span class="hl-3">&#39;end&#39;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&#39;before&#39;</span><span class="hl-1"> | </span><span class="hl-3">&#39;after&#39;</span><span class="hl-1">): </span><span class="hl-6">Promise</span><span class="hl-1">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</span><br/><span class="hl-4">commitEdit</span><span class="hl-1">(): </span><span class="hl-6">Promise</span><span class="hl-1">&lt;</span><span class="hl-2">boolean</span><span class="hl-1">&gt;</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; &#39;csv&#39; (community), &#39;xlsx&#39; (enterprise)</span>
366
399
  </code><button type="button">Copy</button></pre>
367
400
 
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><p>All events bubble and are composed across shadow boundaries. Names ending in <code>-ing</code> are cancellable.</p>
401
+ <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>
402
+ <p>All events bubble and are composed across shadow boundaries. Names ending in <code>-ing</code> are cancellable.</p>
369
403
  <table>
370
404
  <thead>
371
405
  <tr>
@@ -433,8 +467,10 @@
433
467
  </tbody>
434
468
  </table>
435
469
  <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><p><code>auto-generate</code>, <code>quick-filter</code>, <code>show-quick-filter</code>, <code>show-export</code>, <code>column-reordering</code>.</p>
437
- <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><table>
470
+ <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>
471
+ <p><code>auto-generate</code>, <code>quick-filter</code>, <code>show-quick-filter</code>, <code>show-export</code>, <code>column-reordering</code>.</p>
472
+ <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>
473
+ <table>
438
474
  <thead>
439
475
  <tr>
440
476
  <th>Component</th>
@@ -457,7 +493,8 @@
457
493
  </tbody>
458
494
  </table>
459
495
  <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><p><code>&lt;apex-grid&gt;</code> is a standard custom element. Bind properties (not attributes) for <code>data</code> / <code>columns</code>:</p>
496
+ <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>
497
+ <p><code>&lt;apex-grid&gt;</code> is a standard custom element. Bind properties (not attributes) for <code>data</code> / <code>columns</code>:</p>
461
498
  <table>
462
499
  <thead>
463
500
  <tr>
@@ -489,10 +526,12 @@
489
526
  </tbody>
490
527
  </table>
491
528
  <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><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-14"># 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-14"># 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-14"># builds dist/ + custom-elements.json + typedoc</span>
529
+ <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>
530
+ <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
531
  </code><button type="button">Copy</button></pre>
494
532
 
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><p>Releases are automated by <a href="media/publish.yml">.github/workflows/publish.yml</a>:</p>
533
+ <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>
534
+ <p>Releases are automated by <a href=".github/workflows/publish.yml">.github/workflows/publish.yml</a>:</p>
496
535
  <ol>
497
536
  <li>Bump <code>&quot;version&quot;</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
537
  <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 +539,6 @@
500
539
  </ol>
501
540
  <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
541
  <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><p>See <a href="LICENSE.md">LICENSE.md</a>.</p>
504
- </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-load-a-theme"><span>3. <wbr/>Load a theme</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--xlsx-export"><span>CSV / <wbr/>XLSX 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>
542
+ <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>
543
+ <p>See <a href="media/LICENSE">LICENSE</a>.</p>
544
+ </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>