apex-grid 1.1.0 → 2.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 (206) hide show
  1. package/LICENSE +76 -5
  2. package/README.md +520 -10
  3. package/components/cell.d.ts +39 -0
  4. package/components/cell.js +334 -5
  5. package/components/cell.js.map +1 -1
  6. package/components/filter-row.d.ts +7 -5
  7. package/components/filter-row.js +151 -68
  8. package/components/filter-row.js.map +1 -1
  9. package/components/grid.d.ts +948 -1
  10. package/components/grid.js +403 -13
  11. package/components/grid.js.map +1 -1
  12. package/components/header-row.d.ts +21 -1
  13. package/components/header-row.js +140 -7
  14. package/components/header-row.js.map +1 -1
  15. package/components/header.d.ts +7 -0
  16. package/components/header.js +151 -25
  17. package/components/header.js.map +1 -1
  18. package/components/paginator.d.ts +56 -0
  19. package/components/paginator.js +148 -0
  20. package/components/paginator.js.map +1 -0
  21. package/components/row.d.ts +21 -2
  22. package/components/row.js +185 -10
  23. package/components/row.js.map +1 -1
  24. package/components/toolbar.d.ts +60 -0
  25. package/components/toolbar.js +275 -0
  26. package/components/toolbar.js.map +1 -0
  27. package/components/virtualizer.js +1 -1
  28. package/components/virtualizer.js.map +1 -1
  29. package/controllers/data-operation.d.ts +14 -0
  30. package/controllers/data-operation.js +19 -2
  31. package/controllers/data-operation.js.map +1 -1
  32. package/controllers/dom.d.ts +37 -1
  33. package/controllers/dom.js +176 -9
  34. package/controllers/dom.js.map +1 -1
  35. package/controllers/editing.d.ts +130 -0
  36. package/controllers/editing.js +197 -0
  37. package/controllers/editing.js.map +1 -0
  38. package/controllers/expansion.d.ts +68 -0
  39. package/controllers/expansion.js +126 -0
  40. package/controllers/expansion.js.map +1 -0
  41. package/controllers/navigation.d.ts +17 -6
  42. package/controllers/navigation.js +24 -8
  43. package/controllers/navigation.js.map +1 -1
  44. package/controllers/pagination.d.ts +102 -0
  45. package/controllers/pagination.js +106 -0
  46. package/controllers/pagination.js.map +1 -0
  47. package/controllers/reorder.d.ts +78 -0
  48. package/controllers/reorder.js +124 -0
  49. package/controllers/reorder.js.map +1 -0
  50. package/controllers/selection.d.ts +109 -0
  51. package/controllers/selection.js +168 -0
  52. package/controllers/selection.js.map +1 -0
  53. package/controllers/sort.js +28 -0
  54. package/controllers/sort.js.map +1 -1
  55. package/controllers/state.d.ts +32 -0
  56. package/controllers/state.js +37 -0
  57. package/controllers/state.js.map +1 -1
  58. package/controllers/tree.d.ts +87 -0
  59. package/controllers/tree.js +0 -0
  60. package/controllers/tree.js.map +1 -0
  61. package/custom-elements.json +6142 -992
  62. package/docs/assets/hierarchy.js +1 -1
  63. package/docs/assets/highlight.css +70 -14
  64. package/docs/assets/navigation.js +1 -1
  65. package/docs/assets/search.js +1 -1
  66. package/docs/classes/ApexGrid.html +316 -19
  67. package/docs/functions/setup.html +22 -0
  68. package/docs/hierarchy.html +1 -1
  69. package/docs/index.html +503 -9
  70. package/docs/interfaces/ApexCellValueChangedEvent.html +11 -0
  71. package/docs/interfaces/ApexCellValueChangingEvent.html +13 -0
  72. package/docs/interfaces/ApexColumnMovedEvent.html +8 -0
  73. package/docs/interfaces/ApexColumnMovingEvent.html +11 -0
  74. package/docs/interfaces/ApexColumnPinnedEvent.html +6 -0
  75. package/docs/interfaces/ApexColumnPinningEvent.html +8 -0
  76. package/docs/interfaces/ApexDetailContext.html +8 -0
  77. package/docs/interfaces/ApexFilteredEvent.html +1 -1
  78. package/docs/interfaces/ApexFilteringEvent.html +3 -3
  79. package/docs/interfaces/ApexGridEventMap.html +58 -7
  80. package/docs/interfaces/ApexHeaderContext.html +1 -1
  81. package/docs/interfaces/ApexPageChangedEvent.html +10 -0
  82. package/docs/interfaces/ApexPageChangingEvent.html +10 -0
  83. package/docs/interfaces/ApexQuickFilterChangedEvent.html +4 -0
  84. package/docs/interfaces/ApexQuickFilterChangingEvent.html +6 -0
  85. package/docs/interfaces/ApexRowEditEndedEvent.html +6 -0
  86. package/docs/interfaces/ApexRowEditStartedEvent.html +4 -0
  87. package/docs/interfaces/ApexRowExpandedEvent.html +8 -0
  88. package/docs/interfaces/ApexRowExpandingEvent.html +11 -0
  89. package/docs/interfaces/ApexRowSelectedEvent.html +8 -0
  90. package/docs/interfaces/ApexRowSelectingEvent.html +11 -0
  91. package/docs/interfaces/ApexTreeRowExpandedEvent.html +8 -0
  92. package/docs/interfaces/ApexTreeRowExpandingEvent.html +10 -0
  93. package/docs/interfaces/BaseApexCellContext.html +9 -3
  94. package/docs/interfaces/BaseApexEditorContext.html +19 -0
  95. package/docs/interfaces/BaseColumnConfiguration.html +65 -10
  96. package/docs/interfaces/BaseColumnSortConfiguration.html +1 -1
  97. package/docs/interfaces/BaseFilterExpression.html +1 -1
  98. package/docs/interfaces/BaseSortExpression.html +1 -1
  99. package/docs/interfaces/CSVExportOptions.html +22 -0
  100. package/docs/interfaces/ColumnFilterConfiguration.html +1 -1
  101. package/docs/interfaces/DataPipelineConfiguration.html +13 -4
  102. package/docs/interfaces/ExportOptions.html +15 -0
  103. package/docs/interfaces/GridEditingConfiguration.html +10 -0
  104. package/docs/interfaces/GridExpansionConfiguration.html +15 -0
  105. package/docs/interfaces/GridSelectionConfiguration.html +11 -0
  106. package/docs/interfaces/GridSortConfiguration.html +1 -1
  107. package/docs/interfaces/GridTreeConfiguration.html +33 -0
  108. package/docs/interfaces/PaginationConfiguration.html +18 -0
  109. package/docs/interfaces/PaginationState.html +10 -0
  110. package/docs/interfaces/XLSXExportOptions.html +17 -0
  111. package/docs/media/package.json +83 -0
  112. package/docs/media/publish.yml +111 -0
  113. package/docs/modules.html +1 -1
  114. package/docs/types/ApexCellContext.html +1 -1
  115. package/docs/types/ApexEditorContext.html +2 -0
  116. package/docs/types/BasePropertyType.html +1 -1
  117. package/docs/types/BaseSortComparer.html +1 -1
  118. package/docs/types/ColumnConfiguration.html +1 -1
  119. package/docs/types/ColumnDropPosition.html +2 -0
  120. package/docs/types/ColumnSortConfiguration.html +1 -1
  121. package/docs/types/DataPipelineHook.html +1 -1
  122. package/docs/types/DataPipelineParams.html +3 -3
  123. package/docs/types/DataType.html +30 -2
  124. package/docs/types/EditMode.html +6 -0
  125. package/docs/types/EditTrigger.html +4 -0
  126. package/docs/types/ExportCellValue.html +5 -0
  127. package/docs/types/ExportSource.html +8 -0
  128. package/docs/types/FilterCriteria.html +1 -1
  129. package/docs/types/FilterExpression.html +1 -1
  130. package/docs/types/Keys.html +1 -1
  131. package/docs/types/PaginationMode.html +6 -0
  132. package/docs/types/PinPosition.html +5 -0
  133. package/docs/types/PropertyType.html +1 -1
  134. package/docs/types/SelectionMode.html +7 -0
  135. package/docs/types/SortComparer.html +1 -1
  136. package/docs/types/SortExpression.html +1 -1
  137. package/docs/types/SortState.html +1 -1
  138. package/docs/types/SortingDirection.html +1 -1
  139. package/index.d.ts +5 -2
  140. package/index.js +1 -0
  141. package/index.js.map +1 -1
  142. package/internal/column-types.d.ts +94 -0
  143. package/internal/column-types.js +268 -0
  144. package/internal/column-types.js.map +1 -0
  145. package/internal/export.d.ts +106 -0
  146. package/internal/export.js +122 -0
  147. package/internal/export.js.map +1 -0
  148. package/internal/flip.d.ts +80 -0
  149. package/internal/flip.js +52 -0
  150. package/internal/flip.js.map +1 -0
  151. package/internal/icons.d.ts +24 -0
  152. package/internal/icons.js +134 -0
  153. package/internal/icons.js.map +1 -0
  154. package/internal/tags.d.ts +2 -0
  155. package/internal/tags.js +2 -0
  156. package/internal/tags.js.map +1 -1
  157. package/internal/theming.js +1 -1
  158. package/internal/theming.js.map +1 -1
  159. package/internal/types.d.ts +424 -3
  160. package/internal/types.js.map +1 -1
  161. package/internal/utils.d.ts +24 -1
  162. package/internal/utils.js +48 -7
  163. package/internal/utils.js.map +1 -1
  164. package/internal/xlsx.d.ts +22 -0
  165. package/internal/xlsx.js +228 -0
  166. package/internal/xlsx.js.map +1 -0
  167. package/operations/pagination.d.ts +19 -0
  168. package/operations/pagination.js +12 -0
  169. package/operations/pagination.js.map +1 -0
  170. package/operations/quick-filter.d.ts +21 -0
  171. package/operations/quick-filter.js +26 -0
  172. package/operations/quick-filter.js.map +1 -0
  173. package/package.json +6 -5
  174. package/setup.d.ts +58 -0
  175. package/setup.js +29 -0
  176. package/setup.js.map +1 -0
  177. package/styles/body-cell/body-cell.css.js +1 -1
  178. package/styles/body-cell/body-cell.css.js.map +1 -1
  179. package/styles/body-row/body-row.css.js +1 -1
  180. package/styles/body-row/body-row.css.js.map +1 -1
  181. package/styles/filter-row/filter-row.css.js +1 -1
  182. package/styles/filter-row/filter-row.css.js.map +1 -1
  183. package/styles/grid/_grid.base.css.js +1 -1
  184. package/styles/grid/_grid.base.css.js.map +1 -1
  185. package/styles/grid/themes/light/grid.bootstrap.css.js +1 -1
  186. package/styles/grid/themes/light/grid.bootstrap.css.js.map +1 -1
  187. package/styles/grid/themes/light/grid.fluent.css.js +1 -1
  188. package/styles/grid/themes/light/grid.fluent.css.js.map +1 -1
  189. package/styles/grid/themes/light/grid.indigo.css.js +1 -1
  190. package/styles/grid/themes/light/grid.indigo.css.js.map +1 -1
  191. package/styles/grid/themes/light/grid.material.css.js +1 -1
  192. package/styles/grid/themes/light/grid.material.css.js.map +1 -1
  193. package/styles/header-cell/header-cell.css.js +1 -1
  194. package/styles/header-cell/header-cell.css.js.map +1 -1
  195. package/styles/header-row/header-row.base.css.js +1 -1
  196. package/styles/header-row/header-row.base.css.js.map +1 -1
  197. package/styles/paginator/paginator.css.d.ts +1 -0
  198. package/styles/paginator/paginator.css.js +3 -0
  199. package/styles/paginator/paginator.css.js.map +1 -0
  200. package/styles/toolbar/toolbar.css.d.ts +1 -0
  201. package/styles/toolbar/toolbar.css.js +3 -0
  202. package/styles/toolbar/toolbar.css.js.map +1 -0
  203. package/styles.css +17 -0
  204. package/internal/icon-registry.d.ts +0 -1
  205. package/internal/icon-registry.js +0 -29
  206. package/internal/icon-registry.js.map +0 -1
package/docs/index.html CHANGED
@@ -1,10 +1,504 @@
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></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-data-component-grid" class="tsd-anchor-link">Apex data component grid<a href="#apex-data-component-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/apexgrid/actions/workflows/node.js.yml"><img src="https://github.com/apexcharts/apexgrid/actions/workflows/node.js.yml/badge.svg" alt="Node.js CI"></a>
2
- <a href="https://coveralls.io/github/apexcharts/apexgrid?branch=master"><img src="https://coveralls.io/repos/github/apexcharts/apexgrid/badge.svg?branch=master" alt="Coverage Status"></a></p>
3
- <p>This is still a <strong>very</strong> early proof of concept for a web component based data grid.</p>
4
- <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><ol>
5
- <li>Clone the repository.</li>
6
- <li>Run <code>npm install</code></li>
7
- <li>Play and explore the codebase.</li>
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>
2
+ <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
+ <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
+ <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
+ <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
+ <li><strong>Sorting</strong> — single or multi-column, tri-state (asc / desc / none), per-column comparers.</li>
8
+ <li><strong>Filtering</strong> — per-column filter chips with string / number / boolean / date operands, plus a quick-filter (global search) input.</li>
9
+ <li><strong>Pagination</strong> — local slicing or remote mode with a <code>pageChanging</code> / <code>pageChanged</code> event pair; built-in <code>&lt;apex-grid-paginator&gt;</code>.</li>
10
+ <li><strong>Column pinning</strong> — pin to start or end; visual reordering only, source <code>columns</code> array is preserved.</li>
11
+ <li><strong>Column reordering</strong> — drag-and-drop with per-column opt-out, constrained to the column's pinning group.</li>
12
+ <li><strong>Column resizing</strong> — pointer-driven, with a min-width safeguard.</li>
13
+ <li><strong>Inline editing</strong> — cell or row mode, click or double-click trigger, per-column opt-in.</li>
14
+ <li><strong>Row selection</strong> — single or multiple, optional checkbox column, full programmatic API.</li>
15
+ <li><strong>Row expansion (master-detail)</strong> — opt-in chevron column with a <code>detailTemplate</code>.</li>
16
+ <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>
18
+ <li><strong>Toolbar</strong> — opt-in <code>&lt;apex-grid-toolbar&gt;</code> with debounced quick filter and export menu.</li>
19
+ <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>
21
+ <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
+ <li><strong>Provenance-signed npm releases</strong> with OIDC trusted publishing.</li>
23
+ </ul>
24
+ <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>
26
+ </code><button type="button">Copy</button></pre>
27
+
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>
30
+ </code><button type="button">Copy</button></pre>
31
+
32
+ <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
+ </code><button type="button">Copy</button></pre>
34
+
35
+ <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>
38
+ </code><button type="button">Copy</button></pre>
39
+
40
+ <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>
42
+ </code><button type="button">Copy</button></pre>
43
+
44
+ <p>Equivalent long form:</p>
45
+ <pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">ApexGrid</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">ApexGrid</span><span class="hl-1">.</span><span class="hl-4">register</span><span class="hl-1">();</span>
46
+ </code><button type="button">Copy</button></pre>
47
+
48
+ <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>
51
+ </code><button type="button">Copy</button></pre>
52
+
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>
56
+ </code><button type="button">Copy</button></pre>
57
+
58
+ <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>
59
+ <code>import 'apex-grid/styles.css'</code> ships a default rule that sets <code>height: 100%</code> with a <code>min-height: 240px</code> fallback.</p>
60
+ </div>
61
+ <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
+ <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
+ </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>
65
+ <ul>
66
+ <li><strong>Visible borders</strong> between rows and columns.</li>
67
+ <li><strong>Sort arrows</strong> (↕) next to each header when <code>sort: true</code>.</li>
68
+ <li>A <strong>filter row</strong> below the headers with a &quot;Filter&quot; chip per column when <code>filter: true</code>.</li>
69
+ <li><strong>Hover state</strong> on rows.</li>
70
+ <li><strong>Smooth scrolling</strong> — DevTools shows only ~20 <code>&lt;apex-grid-row&gt;</code> elements at any time.</li>
71
+ </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>
73
+ <thead>
74
+ <tr>
75
+ <th>What you see</th>
76
+ <th>Likely cause</th>
77
+ </tr>
78
+ </thead>
79
+ <tbody>
80
+ <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>
83
+ </tr>
84
+ <tr>
85
+ <td>Only ~3 rows visible regardless of data size</td>
86
+ <td>Step 4 — no bounded height, <strong>or</strong> consumer CSS sets <code>display</code> on <code>&lt;apex-grid&gt;</code> (check console for the warning)</td>
87
+ </tr>
88
+ <tr>
89
+ <td><code>&lt;apex-grid&gt;</code> blank tag in DOM</td>
90
+ <td>Step 2 — element not registered</td>
91
+ </tr>
92
+ <tr>
93
+ <td>Columns shown as literal <code>[object Object]</code></td>
94
+ <td><code>columns=</code> used as an attribute — must be a <strong>property</strong> (<code>.columns=${...}</code> in Lit, <code>[columns]=</code> in Angular, <code>:columns.prop=</code> in Vue, <code>el.columns = ...</code> in vanilla JS)</td>
95
+ </tr>
96
+ </tbody>
97
+ </table>
98
+ <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>
101
+ </code><button type="button">Copy</button></pre>
102
+
103
+ <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>
105
+ </code><button type="button">Copy</button></pre>
106
+
107
+ <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>
109
+ </code><button type="button">Copy</button></pre>
110
+
111
+ <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>
113
+ </code><button type="button">Copy</button></pre>
114
+
115
+ <p>Remote mode:</p>
116
+ <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><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;remote&#39;</span><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><span class="hl-2">totalItems:</span><span class="hl-1"> </span><span class="hl-8">1280</span><span class="hl-1"> };</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">addEventListener</span><span class="hl-1">(</span><span class="hl-3">&#39;pageChanged&#39;</span><span class="hl-1">, </span><span class="hl-5">async</span><span class="hl-1"> (</span><span class="hl-2">e</span><span class="hl-1">) </span><span class="hl-5">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-4">fetchPage</span><span class="hl-1">(</span><span class="hl-2">e</span><span class="hl-1">.</span><span class="hl-2">detail</span><span class="hl-1">.</span><span class="hl-2">page</span><span class="hl-1">, </span><span class="hl-2">e</span><span class="hl-1">.</span><span class="hl-2">detail</span><span class="hl-1">.</span><span class="hl-2">pageSize</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
117
+ </code><button type="button">Copy</button></pre>
118
+
119
+ <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>
121
+ </code><button type="button">Copy</button></pre>
122
+
123
+ <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>
125
+ </code><button type="button">Copy</button></pre>
126
+
127
+ <p>Or programmatic:</p>
128
+ <pre><code class="ts"><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">moveColumn</span><span class="hl-1">(</span><span class="hl-3">&#39;email&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;name&#39;</span><span class="hl-1">, </span><span class="hl-3">&#39;after&#39;</span><span class="hl-1">);</span>
129
+ </code><button type="button">Copy</button></pre>
130
+
131
+ <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>
133
+ </code><button type="button">Copy</button></pre>
134
+
135
+ <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>
137
+ </code><button type="button">Copy</button></pre>
138
+
139
+ <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>
141
+ </code><button type="button">Copy</button></pre>
142
+
143
+ <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>
146
+ </code><button type="button">Copy</button></pre>
147
+
148
+ <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>
151
+ </code><button type="button">Copy</button></pre>
152
+
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>
154
+ <p>Toolbar dropdown:</p>
155
+ <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
+ </code><button type="button">Copy</button></pre>
157
+
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>
160
+ <table>
161
+ <thead>
162
+ <tr>
163
+ <th>Part</th>
164
+ <th>What</th>
165
+ </tr>
166
+ </thead>
167
+ <tbody>
168
+ <tr>
169
+ <td><code>toolbar</code></td>
170
+ <td>Root container</td>
171
+ </tr>
172
+ <tr>
173
+ <td><code>toolbar-search</code></td>
174
+ <td>Quick-filter input wrapper</td>
175
+ </tr>
176
+ <tr>
177
+ <td><code>search-field</code></td>
178
+ <td>The bordered input field</td>
179
+ </tr>
180
+ <tr>
181
+ <td><code>search-icon</code>, <code>search-input</code></td>
182
+ <td>Leading icon, input element</td>
183
+ </tr>
184
+ <tr>
185
+ <td><code>toolbar-actions</code></td>
186
+ <td>Trailing actions area</td>
187
+ </tr>
188
+ <tr>
189
+ <td><code>export-trigger</code></td>
190
+ <td>Export menu button</td>
191
+ </tr>
192
+ <tr>
193
+ <td><code>export-menu</code></td>
194
+ <td>Dropdown panel</td>
195
+ </tr>
196
+ <tr>
197
+ <td><code>export-menu-item</code></td>
198
+ <td>Menu item</td>
199
+ </tr>
200
+ </tbody>
201
+ </table>
202
+ <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>
204
+ <p>Style with CSS parts on the grid, paginator, and toolbar:</p>
205
+ <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
+ </code><button type="button">Copy</button></pre>
207
+
208
+ <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>
210
+ <thead>
211
+ <tr>
212
+ <th>Property</th>
213
+ <th>Type</th>
214
+ <th>Default</th>
215
+ <th>Notes</th>
216
+ </tr>
217
+ </thead>
218
+ <tbody>
219
+ <tr>
220
+ <td><code>data</code></td>
221
+ <td><code>T[]</code></td>
222
+ <td><code>[]</code></td>
223
+ <td>Source records (property only)</td>
224
+ </tr>
225
+ <tr>
226
+ <td><code>columns</code></td>
227
+ <td><code>ColumnConfiguration&lt;T&gt;[]</code></td>
228
+ <td><code>[]</code></td>
229
+ <td>Column configuration (property only)</td>
230
+ </tr>
231
+ <tr>
232
+ <td><code>autoGenerate</code></td>
233
+ <td><code>boolean</code></td>
234
+ <td><code>false</code></td>
235
+ <td>Infer columns from <code>data[0]</code> keys. Attr <code>auto-generate</code></td>
236
+ </tr>
237
+ <tr>
238
+ <td><code>sortConfiguration</code></td>
239
+ <td><code>GridSortConfiguration</code></td>
240
+ <td><code>{ multiple, triState }</code></td>
241
+ <td></td>
242
+ </tr>
243
+ <tr>
244
+ <td><code>dataPipelineConfiguration</code></td>
245
+ <td><code>DataPipelineConfiguration&lt;T&gt;</code></td>
246
+ <td>—</td>
247
+ <td>Custom sort/filter/pagination hooks</td>
248
+ </tr>
249
+ <tr>
250
+ <td><code>pagination</code></td>
251
+ <td><code>PaginationConfiguration</code></td>
252
+ <td>—</td>
253
+ <td></td>
254
+ </tr>
255
+ <tr>
256
+ <td><code>quickFilter</code></td>
257
+ <td><code>string</code></td>
258
+ <td><code>''</code></td>
259
+ <td>Attr <code>quick-filter</code></td>
260
+ </tr>
261
+ <tr>
262
+ <td><code>showQuickFilter</code></td>
263
+ <td><code>boolean</code></td>
264
+ <td><code>false</code></td>
265
+ <td>Attr <code>show-quick-filter</code></td>
266
+ </tr>
267
+ <tr>
268
+ <td><code>showExport</code></td>
269
+ <td><code>boolean</code></td>
270
+ <td><code>false</code></td>
271
+ <td>Attr <code>show-export</code></td>
272
+ </tr>
273
+ <tr>
274
+ <td><code>columnReordering</code></td>
275
+ <td><code>boolean</code></td>
276
+ <td><code>false</code></td>
277
+ <td>Attr <code>column-reordering</code></td>
278
+ </tr>
279
+ <tr>
280
+ <td><code>editing</code></td>
281
+ <td><code>GridEditingConfiguration</code></td>
282
+ <td>—</td>
283
+ <td></td>
284
+ </tr>
285
+ <tr>
286
+ <td><code>selection</code></td>
287
+ <td><code>GridSelectionConfiguration</code></td>
288
+ <td>—</td>
289
+ <td></td>
290
+ </tr>
291
+ <tr>
292
+ <td><code>expansion</code></td>
293
+ <td><code>GridExpansionConfiguration&lt;T&gt;</code></td>
294
+ <td>—</td>
295
+ <td></td>
296
+ </tr>
297
+ <tr>
298
+ <td><code>tree</code></td>
299
+ <td><code>GridTreeConfiguration&lt;T&gt;</code></td>
300
+ <td>—</td>
301
+ <td></td>
302
+ </tr>
303
+ <tr>
304
+ <td><code>sortExpressions</code></td>
305
+ <td><code>SortExpression&lt;T&gt;[]</code></td>
306
+ <td>—</td>
307
+ <td>Get/set</td>
308
+ </tr>
309
+ <tr>
310
+ <td><code>filterExpressions</code></td>
311
+ <td><code>FilterExpression&lt;T&gt;[]</code></td>
312
+ <td>—</td>
313
+ <td>Get/set</td>
314
+ </tr>
315
+ <tr>
316
+ <td><code>selectedRows</code></td>
317
+ <td><code>T[]</code></td>
318
+ <td>—</td>
319
+ <td>Get/set</td>
320
+ </tr>
321
+ <tr>
322
+ <td><code>expandedRows</code></td>
323
+ <td><code>T[]</code></td>
324
+ <td>—</td>
325
+ <td>Get/set</td>
326
+ </tr>
327
+ <tr>
328
+ <td><code>page</code>, <code>pageSize</code>, <code>pageCount</code>, <code>totalItems</code></td>
329
+ <td><code>number</code></td>
330
+ <td>—</td>
331
+ <td></td>
332
+ </tr>
333
+ <tr>
334
+ <td><code>pageItems</code></td>
335
+ <td><code>readonly T[]</code></td>
336
+ <td>—</td>
337
+ <td>Currently rendered slice</td>
338
+ </tr>
339
+ <tr>
340
+ <td><code>dataView</code></td>
341
+ <td><code>readonly T[]</code></td>
342
+ <td>—</td>
343
+ <td>Post-filter, post-sort</td>
344
+ </tr>
345
+ <tr>
346
+ <td><code>displayColumns</code></td>
347
+ <td><code>readonly ColumnConfiguration&lt;T&gt;[]</code></td>
348
+ <td>—</td>
349
+ <td>Render order (pinned start → unpinned → pinned end)</td>
350
+ </tr>
351
+ <tr>
352
+ <td><code>editingCell</code></td>
353
+ <td><code>{ rowIndex, columnKey } | null</code></td>
354
+ <td>—</td>
355
+ <td></td>
356
+ </tr>
357
+ <tr>
358
+ <td><code>editingRow</code></td>
359
+ <td><code>number | null</code></td>
360
+ <td>—</td>
361
+ <td>Row-mode only</td>
362
+ </tr>
363
+ </tbody>
364
+ </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>
366
+ </code><button type="button">Copy</button></pre>
367
+
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>
369
+ <table>
370
+ <thead>
371
+ <tr>
372
+ <th>Event</th>
373
+ <th>Cancellable</th>
374
+ <th>Detail</th>
375
+ </tr>
376
+ </thead>
377
+ <tbody>
378
+ <tr>
379
+ <td><code>sorting</code> / <code>sorted</code></td>
380
+ <td>yes / no</td>
381
+ <td><code>SortExpression&lt;T&gt;[]</code></td>
382
+ </tr>
383
+ <tr>
384
+ <td><code>filtering</code> / <code>filtered</code></td>
385
+ <td>yes / no</td>
386
+ <td><code>FilterExpression&lt;T&gt;[]</code></td>
387
+ </tr>
388
+ <tr>
389
+ <td><code>quickFilterChanging</code> / <code>quickFilterChanged</code></td>
390
+ <td>yes / no</td>
391
+ <td><code>{ value, nextValue? }</code></td>
392
+ </tr>
393
+ <tr>
394
+ <td><code>pageChanging</code> / <code>pageChanged</code></td>
395
+ <td>yes / no</td>
396
+ <td><code>{ page, pageSize, pageCount, totalItems }</code></td>
397
+ </tr>
398
+ <tr>
399
+ <td><code>columnPinning</code> / <code>columnPinned</code></td>
400
+ <td>yes / no</td>
401
+ <td><code>{ key, previous, next }</code> / <code>{ key, pinned }</code></td>
402
+ </tr>
403
+ <tr>
404
+ <td><code>columnMoving</code> / <code>columnMoved</code></td>
405
+ <td>yes / no</td>
406
+ <td><code>{ key, fromIndex, toKey, position }</code> / <code>{ key, fromIndex, toIndex }</code></td>
407
+ </tr>
408
+ <tr>
409
+ <td><code>cellValueChanging</code> / <code>cellValueChanged</code></td>
410
+ <td>yes / no</td>
411
+ <td><code>{ row, column, value, newValue }</code></td>
412
+ </tr>
413
+ <tr>
414
+ <td><code>rowEditStarted</code> / <code>rowEditEnded</code></td>
415
+ <td>no / no</td>
416
+ <td>row context</td>
417
+ </tr>
418
+ <tr>
419
+ <td><code>rowSelecting</code> / <code>rowSelected</code></td>
420
+ <td>yes / no</td>
421
+ <td><code>{ added, removed }</code></td>
422
+ </tr>
423
+ <tr>
424
+ <td><code>rowExpanding</code> / <code>rowExpanded</code></td>
425
+ <td>yes / no</td>
426
+ <td>row context</td>
427
+ </tr>
428
+ <tr>
429
+ <td><code>treeRowExpanding</code> / <code>treeRowExpanded</code></td>
430
+ <td>yes / no</td>
431
+ <td>row context</td>
432
+ </tr>
433
+ </tbody>
434
+ </table>
435
+ <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>
438
+ <thead>
439
+ <tr>
440
+ <th>Component</th>
441
+ <th>Parts</th>
442
+ </tr>
443
+ </thead>
444
+ <tbody>
445
+ <tr>
446
+ <td><code>&lt;apex-grid-toolbar&gt;</code></td>
447
+ <td><code>toolbar</code>, <code>toolbar-search</code>, <code>search-field</code>, <code>search-icon</code>, <code>search-input</code>, <code>toolbar-actions</code>, <code>export-trigger</code>, <code>export-menu</code>, <code>export-menu-item</code></td>
448
+ </tr>
449
+ <tr>
450
+ <td><code>&lt;apex-grid-paginator&gt;</code></td>
451
+ <td><code>paginator</code>, <code>paginator-size</code>, <code>paginator-info</code>, <code>paginator-controls</code>, <code>paginator-page</code></td>
452
+ </tr>
453
+ <tr>
454
+ <td><code>&lt;apex-grid-cell&gt;</code></td>
455
+ <td><code>cell</code>, <code>editor</code></td>
456
+ </tr>
457
+ </tbody>
458
+ </table>
459
+ <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>
461
+ <table>
462
+ <thead>
463
+ <tr>
464
+ <th>Framework</th>
465
+ <th>Syntax</th>
466
+ </tr>
467
+ </thead>
468
+ <tbody>
469
+ <tr>
470
+ <td>Lit</td>
471
+ <td><code>&lt;apex-grid .data=${data} .columns=${columns}&gt;</code></td>
472
+ </tr>
473
+ <tr>
474
+ <td>Angular</td>
475
+ <td><code>&lt;apex-grid [data]=&quot;data&quot; [columns]=&quot;columns&quot;&gt;</code> (use <code>CUSTOM_ELEMENTS_SCHEMA</code>)</td>
476
+ </tr>
477
+ <tr>
478
+ <td>Vue</td>
479
+ <td><code>&lt;apex-grid :data.prop=&quot;data&quot; :columns.prop=&quot;columns&quot;&gt;</code></td>
480
+ </tr>
481
+ <tr>
482
+ <td>React (19+)</td>
483
+ <td><code>&lt;apex-grid data={data} columns={columns}&gt;</code></td>
484
+ </tr>
485
+ <tr>
486
+ <td>Vanilla</td>
487
+ <td><code>el.data = data; el.columns = columns;</code></td>
488
+ </tr>
489
+ </tbody>
490
+ </table>
491
+ <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>
493
+ </code><button type="button">Copy</button></pre>
494
+
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>
496
+ <ol>
497
+ <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
+ <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>
499
+ <li>Push to <code>main</code>.</li>
8
500
  </ol>
9
- <h2 id="local-demo-with-vite" class="tsd-anchor-link">Local demo with Vite<a href="#local-demo-with-vite" 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>Run <code>npm start</code> to open the demo page in <code>demo/index.html</code></p>
10
- </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-data-component-grid"><span>Apex data component grid</span></a><ul><li><a href="#local-development"><span>Local <wbr/>Development</span></a></li><li><a href="#local-demo-with-vite"><span>Local demo with <wbr/>Vite</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>
501
+ <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
+ <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>