apex-grid 3.4.0 → 3.5.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.
- package/CHANGELOG.md +101 -0
- package/README.md +45 -6
- package/components/grid.d.ts +127 -0
- package/components/grid.js +25 -0
- package/components/grid.js.map +1 -1
- package/components/header-row.js +8 -0
- package/components/header-row.js.map +1 -1
- package/components/header.js +5 -3
- package/components/header.js.map +1 -1
- package/components/row.js +32 -4
- package/components/row.js.map +1 -1
- package/components/virtualizer.d.ts +5 -1
- package/components/virtualizer.js +72 -2
- package/components/virtualizer.js.map +1 -1
- package/controllers/navigation.d.ts +1 -0
- package/controllers/navigation.js +10 -5
- package/controllers/navigation.js.map +1 -1
- package/controllers/reorder.js +4 -2
- package/controllers/reorder.js.map +1 -1
- package/controllers/state.d.ts +9 -3
- package/controllers/state.js +11 -1
- package/controllers/state.js.map +1 -1
- package/custom-elements.json +439 -181
- package/docs/assets/hierarchy.js +1 -1
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/classes/ApexGrid.html +586 -0
- package/docs/classes/ApexGridPaginator.html +36 -0
- package/docs/classes/ApexGridToolbar.html +67 -0
- package/docs/functions/localize.html +2 -2
- package/docs/functions/setup.html +1 -2
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +33 -6
- package/docs/interfaces/ApexCellValidationFailedEvent.html +1 -1
- package/docs/interfaces/ApexCellValueChangedEvent.html +1 -1
- package/docs/interfaces/ApexCellValueChangingEvent.html +2 -2
- package/docs/interfaces/ApexColumnMovedEvent.html +2 -2
- package/docs/interfaces/ApexColumnMovingEvent.html +1 -1
- package/docs/interfaces/ApexDetailContext.html +2 -2
- package/docs/interfaces/ApexGridEventMap.html +5 -5
- package/docs/interfaces/ApexRowMovingEvent.html +1 -1
- package/docs/interfaces/ApexRowPinningEvent.html +1 -1
- package/docs/interfaces/BaseApexCellContext.html +1 -1
- package/docs/interfaces/BaseApexEditorContext.html +1 -1
- package/docs/interfaces/BaseColumnConfiguration.html +3 -3
- package/docs/interfaces/CSVExportOptions.html +2 -2
- package/docs/interfaces/DataPipelineConfiguration.html +2 -2
- package/docs/interfaces/EditingHistoryConfiguration.html +1 -1
- package/docs/interfaces/ExportFormat.html +2 -2
- package/docs/interfaces/ExportOptions.html +1 -1
- package/docs/interfaces/GridRowPinningConfiguration.html +1 -1
- package/docs/interfaces/GridRowReorderingConfiguration.html +2 -2
- package/docs/interfaces/PaginationConfiguration.html +1 -1
- package/docs/interfaces/PaginationState.html +1 -1
- package/docs/media/_tokens.scss +29 -8
- package/docs/media/package.json +3 -4
- package/docs/media/state-persistence.html +0 -10
- package/docs/modules.html +1 -1
- package/docs/types/DataPipelineParams.html +2 -2
- package/docs/types/EditMode.html +2 -2
- package/docs/types/GridLocaleText.html +1 -1
- package/docs/types/PaginationMode.html +1 -1
- package/docs/variables/EN_LOCALE.html +3 -3
- package/docs/variables/esLocale.html +1 -1
- package/i18n/en.d.ts +14 -0
- package/i18n/en.js +14 -0
- package/i18n/en.js.map +1 -1
- package/i18n/es.js +14 -0
- package/i18n/es.js.map +1 -1
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/internal/feature-module.d.ts +22 -0
- package/internal/feature-module.js +5 -0
- package/internal/feature-module.js.map +1 -1
- package/internal/index.d.ts +2 -2
- package/internal/index.js +1 -1
- package/internal/index.js.map +1 -1
- package/internal/utils.d.ts +14 -0
- package/internal/utils.js +5 -0
- package/internal/utils.js.map +1 -1
- package/package.json +1 -2
- package/setup.d.ts +12 -11
- package/setup.js +12 -4
- package/setup.js.map +1 -1
- package/styles/_common.css.js +1 -1
- package/styles/_common.css.js.map +1 -1
- package/styles/_tokens.css.js +1 -1
- package/styles/_tokens.css.js.map +1 -1
- package/styles/body-cell/body-cell.css.js +1 -1
- package/styles/body-cell/body-cell.css.js.map +1 -1
- package/styles/body-row/body-row.css.js +1 -1
- package/styles/body-row/body-row.css.js.map +1 -1
- package/styles/filter-row/filter-row.css.js +1 -1
- package/styles/filter-row/filter-row.css.js.map +1 -1
- package/styles/grid/_grid.base.css.js +1 -1
- package/styles/grid/_grid.base.css.js.map +1 -1
- package/styles/grid/grid.css.js +1 -1
- package/styles/grid/grid.css.js.map +1 -1
- package/styles/group-header-row/group-header-row.css.js +1 -1
- package/styles/group-header-row/group-header-row.css.js.map +1 -1
- package/styles/header-cell/header-cell.css.js +1 -1
- package/styles/header-cell/header-cell.css.js.map +1 -1
- package/styles/header-row/header-row.base.css.js +1 -1
- package/styles/header-row/header-row.base.css.js.map +1 -1
- package/styles/paginator/paginator.css.js +1 -1
- package/styles/paginator/paginator.css.js.map +1 -1
- package/styles/toolbar/toolbar.css.js +1 -1
- package/styles/toolbar/toolbar.css.js.map +1 -1
|
@@ -5,8 +5,7 @@ out-of-the-box via <code>--ag-*</code> CSS custom properties — no theme import
|
|
|
5
5
|
(<code>import 'apex-grid/define'</code> + host CSS). Idempotent — safe to call more
|
|
6
6
|
than once; host styles are adopted only on the first call.</p>
|
|
7
7
|
<p>Customize the look by overriding <code>--ag-*</code> CSS variables (see the README).
|
|
8
|
-
The deprecated ApexGridSetupOptions.theme option
|
|
9
|
-
igniteui-webcomponents and does not change the grid's appearance.</p>
|
|
8
|
+
The deprecated ApexGridSetupOptions.theme option is inert.</p>
|
|
10
9
|
</div><div class="tsd-tag-example"><h4 class="tsd-anchor-link" id="example">Example<a href="#example" 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></h4><pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">setup</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">'apex-grid'</span><span class="hl-1">;</span><br/><span class="hl-4">setup</span><span class="hl-1">();</span>
|
|
11
10
|
</code><button type="button">Copy</button></pre>
|
|
12
11
|
|
package/docs/hierarchy.html
CHANGED
|
@@ -1 +1 @@
|
|
|
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><h2>Hierarchy Summary</h2><ul class="tsd-full-hierarchy"><li data-refl="
|
|
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><h2>Hierarchy Summary</h2><ul class="tsd-full-hierarchy"><li data-refl="1004" id="BaseApexCellContext"><a href="interfaces/BaseApexCellContext.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="assets/icons.svg#icon-256"></use></svg>BaseApexCellContext</a><ul><li data-refl="1015" id="BaseApexEditorContext"><a href="interfaces/BaseApexEditorContext.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="assets/icons.svg#icon-256"></use></svg>BaseApexEditorContext</a></li></ul></li></ul><ul class="tsd-full-hierarchy"><li data-refl="879" id="ExportOptions"><a href="interfaces/ExportOptions.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="assets/icons.svg#icon-256"></use></svg>ExportOptions</a><ul><li data-refl="860" id="CSVExportOptions"><a href="interfaces/CSVExportOptions.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="assets/icons.svg#icon-256"></use></svg>CSVExportOptions</a></li></ul></li></ul><ul class="tsd-full-hierarchy"><li data-refl="1172" id="PaginationState"><a href="interfaces/PaginationState.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="assets/icons.svg#icon-256"></use></svg>PaginationState</a><ul><li data-refl="84" id="ApexPageChangedEvent"><a href="interfaces/ApexPageChangedEvent.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Interface"><use href="assets/icons.svg#icon-256"></use></svg>ApexPageChangedEvent</a></li></ul></li></ul></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></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>
|
package/docs/index.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
<li><strong>CSV export</strong>: programmatic method plus an optional toolbar dropdown. (Excel/XLSX export is in <code>apex-grid-enterprise</code>.)</li>
|
|
27
27
|
<li><strong>Toolbar</strong>: opt-in <code><apex-grid-toolbar></code> with debounced quick filter and export menu.</li>
|
|
28
28
|
<li><strong>Templating</strong>: slot-based templates for cells, headers, editors, and detail panels.</li>
|
|
29
|
-
<li><strong>Theming</strong>: styled out-of-the-box; fully customizable through <code>--ag-*</code> CSS custom properties (no theme import or build step). Auto-
|
|
29
|
+
<li><strong>Theming</strong>: styled out-of-the-box; fully customizable through <code>--ag-*</code> CSS custom properties (no theme import or build step). Auto-tints to an Ignite UI host app's palette when one is present, with no dependency on it.</li>
|
|
30
30
|
<li><strong>Accessibility</strong>: WCAG 2.2 AA semantics (<code>role="grid"</code> / <code>role="treegrid"</code>, <code>aria-rowcount</code>, <code>aria-colcount</code>, focus + keyboard navigation).</li>
|
|
31
31
|
<li><strong>Provenance-signed npm releases</strong> with OIDC trusted publishing.</li>
|
|
32
32
|
</ul>
|
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
<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>
|
|
52
52
|
</code><button type="button">Copy</button></pre>
|
|
53
53
|
|
|
54
|
-
<p><code>igniteui-webcomponents</code> ships as a transitive dependency; no separate install.</p>
|
|
55
54
|
<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>
|
|
56
55
|
<pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">'apex-grid/define'</span><span class="hl-1">;</span>
|
|
57
56
|
</code><button type="button">Copy</button></pre>
|
|
@@ -71,7 +70,7 @@
|
|
|
71
70
|
<pre><code class="css"><span class="hl-10">apex-grid</span><span class="hl-1"> { </span><span class="hl-12">--ag-grid-shadow</span><span class="hl-1">: </span><span class="hl-4">var</span><span class="hl-1">(</span><span class="hl-12">--ag-shadow-card</span><span class="hl-1">); } </span><span class="hl-15">/* elevated floating-card look */</span><br/><span class="hl-10">apex-grid</span><span class="hl-1"> { </span><span class="hl-12">--ag-grid-shadow</span><span class="hl-1">: </span><span class="hl-14">none</span><span class="hl-1">; } </span><span class="hl-15">/* remove the edge entirely */</span>
|
|
72
71
|
</code><button type="button">Copy</button></pre>
|
|
73
72
|
|
|
74
|
-
<p>If you embed the grid
|
|
73
|
+
<p>If you embed the grid in an Ignite UI app, the brand tokens automatically re-tint from its palette: they read <code>--ig-primary-500</code> with the grid's own default as the fallback. That is a plain CSS variable lookup, so the grid neither depends on nor bundles Ignite UI.</p>
|
|
75
74
|
<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>
|
|
76
75
|
<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>
|
|
77
76
|
<pre><code class="css"><span class="hl-10">apex-grid</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-12">height</span><span class="hl-1">: </span><span class="hl-8">480px</span><span class="hl-1">; </span><span class="hl-15">/* any explicit pixel height; % works if the parent has a height */</span><br/><span class="hl-1">}</span>
|
|
@@ -167,7 +166,7 @@
|
|
|
167
166
|
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">columnSeparator</span><span class="hl-1"> = </span><span class="hl-5">false</span><span class="hl-1">; </span><span class="hl-15">// hide the dividers</span>
|
|
168
167
|
</code><button type="button">Copy</button></pre>
|
|
169
168
|
|
|
170
|
-
<p>Theme the line with <code>--ag-header-separator</code> (or the <code>--header-separator-color</code>
|
|
169
|
+
<p>Theme the line with <code>--ag-header-separator</code> (or the <code>--header-separator-color</code> override hook) and set its vertical inset with <code>--apex-header-separator-inset</code>. Because the default is <code>true</code>, disable it through the property rather than markup (a default-on boolean attribute cannot be turned off by attribute alone). Attribute: <code>column-separator</code>.</p>
|
|
171
170
|
<h3 id="column-groups-spanning-headers" class="tsd-anchor-link">Column groups (spanning headers)<a href="#column-groups-spanning-headers" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
172
171
|
<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">'first'</span><span class="hl-1">, </span><span class="hl-2">group:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'last'</span><span class="hl-1">, </span><span class="hl-2">group:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'city'</span><span class="hl-1">, </span><span class="hl-2">group:</span><span class="hl-1"> </span><span class="hl-3">'address'</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">'zip'</span><span class="hl-1">, </span><span class="hl-2">group:</span><span class="hl-1"> </span><span class="hl-3">'address'</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">columnGroups</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-3">'name'</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">'Name'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-3">'address'</span><span class="hl-1">, </span><span class="hl-2">headerText:</span><span class="hl-1"> </span><span class="hl-3">'Address'</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span>
|
|
173
172
|
</code><button type="button">Copy</button></pre>
|
|
@@ -178,6 +177,19 @@
|
|
|
178
177
|
</code><button type="button">Copy</button></pre>
|
|
179
178
|
|
|
180
179
|
<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>
|
|
180
|
+
<p>For programmatic writes, <code>applyEdits()</code> takes many cells at once:</p>
|
|
181
|
+
<pre><code class="ts"><span class="hl-5">const</span><span class="hl-1"> { </span><span class="hl-7">applied</span><span class="hl-1">, </span><span class="hl-7">invalid</span><span class="hl-1">, </span><span class="hl-7">skipped</span><span class="hl-1"> } = </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">applyEdits</span><span class="hl-1">([</span><br/><span class="hl-1"> { </span><span class="hl-2">rowIndex:</span><span class="hl-1"> </span><span class="hl-8">0</span><span class="hl-1">, </span><span class="hl-2">column:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-3">'Ada'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">rowIndex:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">column:</span><span class="hl-1"> </span><span class="hl-3">'age'</span><span class="hl-1">, </span><span class="hl-2">value:</span><span class="hl-1"> </span><span class="hl-8">36</span><span class="hl-1"> },</span><br/><span class="hl-1">]);</span>
|
|
182
|
+
</code><button type="button">Copy</button></pre>
|
|
183
|
+
|
|
184
|
+
<p>Each write goes through the same choke point interactive editing uses, so it
|
|
185
|
+
emits <code>cellValueChanging</code> / <code>cellValueChanged</code> and runs the column's validators.
|
|
186
|
+
What differs from looping over <code>editCell</code> + <code>commitEdit</code> is that the whole batch
|
|
187
|
+
lands as <strong>one</strong> undo step and triggers <strong>one</strong> pipeline run — a thousand
|
|
188
|
+
round-trips would otherwise mean a thousand undo entries and a thousand
|
|
189
|
+
re-renders. The returned tally splits <code>applied</code> from <code>unchanged</code>, <code>invalid</code>,
|
|
190
|
+
<code>cancelled</code>, and <code>skipped</code>, so a rejected batch is distinguishable from a no-op
|
|
191
|
+
one. Edits naming a row out of range or a column the user could not edit either
|
|
192
|
+
are skipped rather than throwing.</p>
|
|
181
193
|
<h3 id="keyboard-navigation-and-accessibility" class="tsd-anchor-link">Keyboard navigation and accessibility<a href="#keyboard-navigation-and-accessibility" 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>
|
|
182
194
|
<p>The grid body is a single tab stop: Tab enters the grid, and the active cell
|
|
183
195
|
holds real focus (a roving tabindex), so screen readers follow the cursor as
|
|
@@ -335,11 +347,26 @@ stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
|
335
347
|
</table>
|
|
336
348
|
<p>Search input has a <code>debounce</code> attribute (default <code>200</code>ms).</p>
|
|
337
349
|
<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>
|
|
338
|
-
<p>The grid styles itself through <code>--ag-*</code> CSS custom properties; override them on <code>apex-grid</code> (or any ancestor) to rebrand; see <a href="media/_tokens.scss"><code>src/styles/_tokens.scss</code></a> for the full list.
|
|
350
|
+
<p>The grid styles itself through <code>--ag-*</code> CSS custom properties; override them on <code>apex-grid</code> (or any ancestor) to rebrand; see <a href="media/_tokens.scss"><code>src/styles/_tokens.scss</code></a> for the full list. Where an Ignite UI palette is present, the brand tokens auto-tint from <code>--ig-primary-500</code>.</p>
|
|
339
351
|
<p>Style with CSS parts on the grid, paginator, and toolbar:</p>
|
|
340
352
|
<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>
|
|
341
353
|
</code><button type="button">Copy</button></pre>
|
|
342
354
|
|
|
355
|
+
<h3 id="right-to-left" class="tsd-anchor-link">Right-to-left<a href="#right-to-left" 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>
|
|
356
|
+
<p>Set <code>dir="rtl"</code> on the grid or any ancestor and the whole grid mirrors — no
|
|
357
|
+
separate stylesheet, build flag, or option:</p>
|
|
358
|
+
<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">html</span><span class="hl-1"> </span><span class="hl-12">dir</span><span class="hl-1">=</span><span class="hl-13">"rtl"</span><span class="hl-9">></span><br/><span class="hl-1"> </span><span class="hl-9"><</span><span class="hl-10">apex-grid</span><span class="hl-1"> </span><span class="hl-12">id</span><span class="hl-1">=</span><span class="hl-13">"grid"</span><span class="hl-9">></</span><span class="hl-10">apex-grid</span><span class="hl-9">></span><br/><span class="hl-9"></</span><span class="hl-10">html</span><span class="hl-9">></span>
|
|
359
|
+
</code><button type="button">Copy</button></pre>
|
|
360
|
+
|
|
361
|
+
<p>The stylesheets are written entirely in logical properties (<code>inline-size</code>,
|
|
362
|
+
<code>inset-inline-start</code>, <code>border-inline-end</code>, …), so layout, pinning, and the fill
|
|
363
|
+
handle follow the text direction on their own. The direction is read from the
|
|
364
|
+
<em>computed</em> style, so inheriting it from <code><html></code> or a wrapper works as well as
|
|
365
|
+
setting it on the grid.</p>
|
|
366
|
+
<p>Behaviour that reasons in physical directions mirrors too: ArrowLeft moves to the
|
|
367
|
+
next column rather than the previous one, column resize grows the column as the
|
|
368
|
+
pointer moves toward the (now left-hand) inline-end edge, and a column drag drops
|
|
369
|
+
on the side the cursor actually crossed.</p>
|
|
343
370
|
<h3 id="spreadsheet-coordinates" class="tsd-anchor-link">Spreadsheet coordinates<a href="#spreadsheet-coordinates" 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>
|
|
344
371
|
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">coordinateHints</span><span class="hl-1"> = </span><span class="hl-5">true</span><span class="hl-1">;</span>
|
|
345
372
|
</code><button type="button">Copy</button></pre>
|
|
@@ -736,4 +763,4 @@ stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
|
736
763
|
<p>Any push whose head commit does not start with <code>release:</code> is a no-op for the workflow.</p>
|
|
737
764
|
<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>
|
|
738
765
|
<p>See <a href="media/LICENSE">LICENSE</a>.</p>
|
|
739
|
-
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#apex-grid"><span>Apex <wbr/>Grid</span></a><ul><li><a href="#features"><span>Features</span></a></li><li><a href="#quick-start"><span>Quick <wbr/>Start</span></a></li><li><ul><li><a href="#one-call-setup"><span>One-<wbr/>call setup</span></a></li><li><a href="#render-the-grid"><span>Render the grid</span></a></li></ul></li><li><a href="#manual-setup-four-steps"><span>Manual setup (four steps)</span></a></li><li><ul><li><a href="#1-install"><span>1. <wbr/>Install</span></a></li><li><a href="#2-register-the-custom-element"><span>2. <wbr/>Register the custom element</span></a></li><li><a href="#3-optional-customize-the-look"><span>3. (<wbr/>Optional) <wbr/>Customize the look</span></a></li><li><a href="#4-size-the-host"><span>4. <wbr/>Size the host</span></a></li><li><a href="#what-success-looks-like"><span>What success looks like</span></a></li><li><a href="#troubleshooting"><span>Troubleshooting</span></a></li></ul></li><li><a href="#features-in-depth"><span>Features in depth</span></a></li><li><ul><li><a href="#sorting"><span>Sorting</span></a></li><li><a href="#filtering"><span>Filtering</span></a></li><li><a href="#quick-filter-global-search"><span>Quick filter (global search)</span></a></li><li><a href="#pagination"><span>Pagination</span></a></li><li><a href="#column-pinning"><span>Column pinning</span></a></li><li><a href="#column-reordering"><span>Column reordering</span></a></li><li><a href="#column-separators"><span>Column separators</span></a></li><li><a href="#column-groups-spanning-headers"><span>Column groups (spanning headers)</span></a></li><li><a href="#inline-editing"><span>Inline editing</span></a></li><li><a href="#keyboard-navigation-and-accessibility"><span>Keyboard navigation and accessibility</span></a></li><li><a href="#cell-validation"><span>Cell validation</span></a></li><li><a href="#undo-redo"><span>Undo / redo</span></a></li><li><a href="#row-selection"><span>Row selection</span></a></li><li><a href="#row-pinning-top-bottom"><span>Row pinning (top / bottom)</span></a></li><li><a href="#row-drag-reorder"><span>Row drag-<wbr/>reorder</span></a></li><li><a href="#row-expansion-master-detail"><span>Row expansion (master-<wbr/>detail)</span></a></li><li><a href="#tree-data-nested-rows"><span>Tree data (nested rows)</span></a></li><li><a href="#csv-export"><span>CSV export</span></a></li><li><a href="#toolbar"><span>Toolbar</span></a></li><li><a href="#theming"><span>Theming</span></a></li><li><a href="#spreadsheet-coordinates"><span>Spreadsheet coordinates</span></a></li><li><a href="#state-persistence"><span>State & persistence</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>
|
|
766
|
+
</div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#apex-grid"><span>Apex <wbr/>Grid</span></a><ul><li><a href="#features"><span>Features</span></a></li><li><a href="#quick-start"><span>Quick <wbr/>Start</span></a></li><li><ul><li><a href="#one-call-setup"><span>One-<wbr/>call setup</span></a></li><li><a href="#render-the-grid"><span>Render the grid</span></a></li></ul></li><li><a href="#manual-setup-four-steps"><span>Manual setup (four steps)</span></a></li><li><ul><li><a href="#1-install"><span>1. <wbr/>Install</span></a></li><li><a href="#2-register-the-custom-element"><span>2. <wbr/>Register the custom element</span></a></li><li><a href="#3-optional-customize-the-look"><span>3. (<wbr/>Optional) <wbr/>Customize the look</span></a></li><li><a href="#4-size-the-host"><span>4. <wbr/>Size the host</span></a></li><li><a href="#what-success-looks-like"><span>What success looks like</span></a></li><li><a href="#troubleshooting"><span>Troubleshooting</span></a></li></ul></li><li><a href="#features-in-depth"><span>Features in depth</span></a></li><li><ul><li><a href="#sorting"><span>Sorting</span></a></li><li><a href="#filtering"><span>Filtering</span></a></li><li><a href="#quick-filter-global-search"><span>Quick filter (global search)</span></a></li><li><a href="#pagination"><span>Pagination</span></a></li><li><a href="#column-pinning"><span>Column pinning</span></a></li><li><a href="#column-reordering"><span>Column reordering</span></a></li><li><a href="#column-separators"><span>Column separators</span></a></li><li><a href="#column-groups-spanning-headers"><span>Column groups (spanning headers)</span></a></li><li><a href="#inline-editing"><span>Inline editing</span></a></li><li><a href="#keyboard-navigation-and-accessibility"><span>Keyboard navigation and accessibility</span></a></li><li><a href="#cell-validation"><span>Cell validation</span></a></li><li><a href="#undo-redo"><span>Undo / redo</span></a></li><li><a href="#row-selection"><span>Row selection</span></a></li><li><a href="#row-pinning-top-bottom"><span>Row pinning (top / bottom)</span></a></li><li><a href="#row-drag-reorder"><span>Row drag-<wbr/>reorder</span></a></li><li><a href="#row-expansion-master-detail"><span>Row expansion (master-<wbr/>detail)</span></a></li><li><a href="#tree-data-nested-rows"><span>Tree data (nested rows)</span></a></li><li><a href="#csv-export"><span>CSV export</span></a></li><li><a href="#toolbar"><span>Toolbar</span></a></li><li><a href="#theming"><span>Theming</span></a></li><li><a href="#right-to-left"><span>Right-<wbr/>to-<wbr/>left</span></a></li><li><a href="#spreadsheet-coordinates"><span>Spreadsheet coordinates</span></a></li><li><a href="#state-persistence"><span>State & persistence</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>
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<a href="#rowindex" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Index</span></a>
|
|
6
6
|
<a href="#value" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>value</span></a>
|
|
7
7
|
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="data"><span>data</span><a href="#data" 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><div class="tsd-signature"><span class="tsd-kind-property">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The data record being edited (a live reference to the row in
|
|
8
|
-
ApexGrid.data).</p>
|
|
8
|
+
<a href="../classes/ApexGrid.html#data" class="tsd-kind-property">ApexGrid.data</a>).</p>
|
|
9
9
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="errors"><span>errors</span><a href="#errors" 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><div class="tsd-signature"><span class="tsd-kind-property">errors</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">readonly</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div><div class="tsd-comment tsd-typography"><p>The collected validator error messages.</p>
|
|
10
10
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="key"><span>key</span><a href="#key" 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><div class="tsd-signature"><span class="tsd-kind-property">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The column key of the rejected cell.</p>
|
|
11
11
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowindex"><span>row<wbr/>Index</span><a href="#rowindex" 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><div class="tsd-signature"><span class="tsd-kind-property">rowIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The view-relative row index of the rejected cell.</p>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<a href="#rowindex" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Index</span></a>
|
|
5
5
|
<a href="#value" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>value</span></a>
|
|
6
6
|
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="data"><span>data</span><a href="#data" 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><div class="tsd-signature"><span class="tsd-kind-property">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The data record after the change (a live reference to the row in
|
|
7
|
-
ApexGrid.data).</p>
|
|
7
|
+
<a href="../classes/ApexGrid.html#data" class="tsd-kind-property">ApexGrid.data</a>).</p>
|
|
8
8
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="key"><span>key</span><a href="#key" 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><div class="tsd-signature"><span class="tsd-kind-property">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The column key of the edited cell.</p>
|
|
9
9
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowindex"><span>row<wbr/>Index</span><a href="#rowindex" 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><div class="tsd-signature"><span class="tsd-kind-property">rowIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The view-relative row index after the change.</p>
|
|
10
10
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="value"><span>value</span><a href="#value" 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><div class="tsd-signature"><span class="tsd-kind-property">value</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">unknown</span></div><div class="tsd-comment tsd-typography"><p>The applied value.</p>
|
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
<a href="#oldvalue" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>old<wbr/>Value</span></a>
|
|
6
6
|
<a href="#rowindex" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Index</span></a>
|
|
7
7
|
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="data"><span>data</span><a href="#data" 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><div class="tsd-signature"><span class="tsd-kind-property">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The data record being edited (a live reference to the row in
|
|
8
|
-
ApexGrid.data).</p>
|
|
8
|
+
<a href="../classes/ApexGrid.html#data" class="tsd-kind-property">ApexGrid.data</a>).</p>
|
|
9
9
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="key"><span>key</span><a href="#key" 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><div class="tsd-signature"><span class="tsd-kind-property">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The column key of the edited cell.</p>
|
|
10
10
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="newvalue"><span>new<wbr/>Value</span><a href="#newvalue" 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><div class="tsd-signature"><span class="tsd-kind-property">newValue</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">unknown</span></div><div class="tsd-comment tsd-typography"><p>The candidate new value.</p>
|
|
11
11
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="oldvalue"><span>old<wbr/>Value</span><a href="#oldvalue" 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><div class="tsd-signature"><span class="tsd-kind-property">oldValue</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">unknown</span></div><div class="tsd-comment tsd-typography"><p>The value before the edit.</p>
|
|
12
|
-
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowindex"><span>row<wbr/>Index</span><a href="#rowindex" 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><div class="tsd-signature"><span class="tsd-kind-property">rowIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The view-relative row index (matches ApexGrid.pageItems).</p>
|
|
12
|
+
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowindex"><span>row<wbr/>Index</span><a href="#rowindex" 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><div class="tsd-signature"><span class="tsd-kind-property">rowIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The view-relative row index (matches <a href="../classes/ApexGrid.html#pageitems" class="tsd-kind-accessor">ApexGrid.pageItems</a>).</p>
|
|
13
13
|
</div></section></section></details></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"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#data"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>data</span></a><a href="#key"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>key</span></a><a href="#newvalue"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>new<wbr/>Value</span></a><a href="#oldvalue"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>old<wbr/>Value</span></a><a href="#rowindex"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Index</span></a></div></details></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>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
</div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">ApexColumnMovedEvent</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span> <span class="tsd-signature-symbol">{</span><br/> <a class="tsd-kind-property" href="#fromindex">fromIndex</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#key">key</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#toindex">toIndex</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="t"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li></ul></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-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><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="#fromindex" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>from<wbr/>Index</span></a>
|
|
3
3
|
<a href="#key" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>key</span></a>
|
|
4
4
|
<a href="#toindex" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>to<wbr/>Index</span></a>
|
|
5
|
-
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="fromindex"><span>from<wbr/>Index</span><a href="#fromindex" 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><div class="tsd-signature"><span class="tsd-kind-property">fromIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The original index in ApexGrid.columns
|
|
5
|
+
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="fromindex"><span>from<wbr/>Index</span><a href="#fromindex" 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><div class="tsd-signature"><span class="tsd-kind-property">fromIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The original index in <a href="../classes/ApexGrid.html#columns" class="tsd-kind-property">ApexGrid.columns</a>.</p>
|
|
6
6
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="key"><span>key</span><a href="#key" 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><div class="tsd-signature"><span class="tsd-kind-property">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The column that was moved.</p>
|
|
7
|
-
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="toindex"><span>to<wbr/>Index</span><a href="#toindex" 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><div class="tsd-signature"><span class="tsd-kind-property">toIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The resolved index in ApexGrid.columns after the move.</p>
|
|
7
|
+
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="toindex"><span>to<wbr/>Index</span><a href="#toindex" 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><div class="tsd-signature"><span class="tsd-kind-property">toIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The resolved index in <a href="../classes/ApexGrid.html#columns" class="tsd-kind-property">ApexGrid.columns</a> after the move.</p>
|
|
8
8
|
</div></section></section></details></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"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#fromindex"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>from<wbr/>Index</span></a><a href="#key"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>key</span></a><a href="#toindex"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>to<wbr/>Index</span></a></div></details></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>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<a href="#key" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>key</span></a>
|
|
4
4
|
<a href="#position" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>position</span></a>
|
|
5
5
|
<a href="#tokey" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>to<wbr/>Key</span></a>
|
|
6
|
-
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="fromindex"><span>from<wbr/>Index</span><a href="#fromindex" 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><div class="tsd-signature"><span class="tsd-kind-property">fromIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The current index of the moving column in ApexGrid.columns
|
|
6
|
+
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="fromindex"><span>from<wbr/>Index</span><a href="#fromindex" 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><div class="tsd-signature"><span class="tsd-kind-property">fromIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The current index of the moving column in <a href="../classes/ApexGrid.html#columns" class="tsd-kind-property">ApexGrid.columns</a>.</p>
|
|
7
7
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="key"><span>key</span><a href="#key" 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><div class="tsd-signature"><span class="tsd-kind-property">key</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The column being moved.</p>
|
|
8
8
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="position"><span>position</span><a href="#position" 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><div class="tsd-signature"><span class="tsd-kind-property">position</span><span class="tsd-signature-symbol">:</span> <a href="../types/ColumnDropPosition.html" class="tsd-signature-type tsd-kind-type-alias">ColumnDropPosition</a></div><div class="tsd-comment tsd-typography"><p>Whether the dragged column is being placed before or after <code>toKey</code>.</p>
|
|
9
9
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="tokey"><span>to<wbr/>Key</span><a href="#tokey" 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><div class="tsd-signature"><span class="tsd-kind-property">toKey</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-keyword">keyof</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The target column key. The dragged column will be placed <code>position</code>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
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>ApexDetailContext | 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"><ul class="tsd-breadcrumb" aria-label="Breadcrumb"><li><a href="" aria-current="page">ApexDetailContext</a></li></ul><h1>Interface ApexDetailContext<T></h1></div><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>Context passed to <a href="GridExpansionConfiguration.html#detailtemplate" class="tsd-kind-property">GridExpansionConfiguration.detailTemplate</a>.</p>
|
|
2
|
-
</div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">ApexDetailContext</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span> <span class="tsd-signature-symbol">{</span><br/> <a class="tsd-kind-property" href="#data">data</a><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#parent">parent</a><span class="tsd-signature-symbol">:</span> <
|
|
2
|
+
</div></section><div class="tsd-signature"><span class="tsd-signature-keyword">interface</span> <span class="tsd-kind-interface">ApexDetailContext</span><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span><span class="tsd-signature-symbol">></span> <span class="tsd-signature-symbol">{</span><br/> <a class="tsd-kind-property" href="#data">data</a><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#parent">parent</a><span class="tsd-signature-symbol">:</span> <a href="../classes/ApexGrid.html" class="tsd-signature-type tsd-kind-class">ApexGrid</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">;</span><br/> <a class="tsd-kind-property" href="#rowindex">rowIndex</a><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">;</span><br/><span class="tsd-signature-symbol">}</span></div><section class="tsd-panel"><h4>Type Parameters</h4><ul class="tsd-type-parameter-list"><li><span id="t"><span class="tsd-kind-type-parameter">T</span> <span class="tsd-signature-keyword">extends</span> <span class="tsd-signature-type">object</span></span></li></ul></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-accordion" open><summary class="tsd-accordion-summary tsd-index-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><h5 class="tsd-index-heading uppercase">Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="#data" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>data</span></a>
|
|
3
3
|
<a href="#parent" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>parent</span></a>
|
|
4
4
|
<a href="#rowindex" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Index</span></a>
|
|
5
5
|
</div></section></div></details></section></section><details class="tsd-panel-group tsd-member-group tsd-accordion" open><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg><h2>Properties</h2></summary><section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="data"><span>data</span><a href="#data" 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><div class="tsd-signature"><span class="tsd-kind-property">data</span><span class="tsd-signature-symbol">:</span> <a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a></div><div class="tsd-comment tsd-typography"><p>The row data for the expanded row.</p>
|
|
6
|
-
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="parent"><span>parent</span><a href="#parent" 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><div class="tsd-signature"><span class="tsd-kind-property">parent</span><span class="tsd-signature-symbol">:</span> <
|
|
6
|
+
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="parent"><span>parent</span><a href="#parent" 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><div class="tsd-signature"><span class="tsd-kind-property">parent</span><span class="tsd-signature-symbol">:</span> <a href="../classes/ApexGrid.html" class="tsd-signature-type tsd-kind-class">ApexGrid</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>The grid element. Useful for emitting events back from the detail.</p>
|
|
7
7
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowindex"><span>row<wbr/>Index</span><a href="#rowindex" 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><div class="tsd-signature"><span class="tsd-kind-property">rowIndex</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The view-relative row index of the master row.</p>
|
|
8
8
|
</div></section></section></details></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"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Properties"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Properties</summary><div><a href="#data"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>data</span></a><a href="#parent"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>parent</span></a><a href="#rowindex"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Index</span></a></div></details></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>
|
|
@@ -37,7 +37,7 @@ row-mode, and bulk (paste / fill) edits.</p>
|
|
|
37
37
|
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks">Remarks<a href="#remarks" 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></h4><p>Cancellable — <code>preventDefault()</code> rolls back the candidate value. In row
|
|
38
38
|
edit mode the event still fires per-cell at commit time.</p>
|
|
39
39
|
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="columnmoved"><span>column<wbr/>Moved</span><a href="#columnmoved" 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><div class="tsd-signature"><span class="tsd-kind-property">columnMoved</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexColumnMovedEvent.html" class="tsd-signature-type tsd-kind-interface">ApexColumnMovedEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted after a column has been moved.</p>
|
|
40
|
-
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="columnmoving"><span>column<wbr/>Moving</span><a href="#columnmoving" 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><div class="tsd-signature"><span class="tsd-kind-property">columnMoving</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexColumnMovingEvent.html" class="tsd-signature-type tsd-kind-interface">ApexColumnMovingEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted before a column is moved through the UI or ApexGrid.moveColumn
|
|
40
|
+
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="columnmoving"><span>column<wbr/>Moving</span><a href="#columnmoving" 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><div class="tsd-signature"><span class="tsd-kind-property">columnMoving</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexColumnMovingEvent.html" class="tsd-signature-type tsd-kind-interface">ApexColumnMovingEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted before a column is moved through the UI or <a href="../classes/ApexGrid.html#movecolumn" class="tsd-kind-method">ApexGrid.moveColumn</a>.</p>
|
|
41
41
|
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-1">Remarks<a href="#remarks-1" 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></h4><p>Cancellable — calling <code>preventDefault()</code> aborts the move. The event detail
|
|
42
42
|
carries the source column key, its current array index, the target column
|
|
43
43
|
key and the drop position.</p>
|
|
@@ -59,7 +59,7 @@ can enable or disable its buttons.</p>
|
|
|
59
59
|
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="quickfilterchanged"><span>quick<wbr/>Filter<wbr/>Changed</span><a href="#quickfilterchanged" 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><div class="tsd-signature"><span class="tsd-kind-property">quickFilterChanged</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexQuickFilterChangedEvent.html" class="tsd-signature-type tsd-kind-interface">ApexQuickFilterChangedEvent</a><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted after a quick-filter change has been applied and the pipeline has run.</p>
|
|
60
60
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="quickfilterchanging"><span>quick<wbr/>Filter<wbr/>Changing</span><a href="#quickfilterchanging" 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><div class="tsd-signature"><span class="tsd-kind-property">quickFilterChanging</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexQuickFilterChangingEvent.html" class="tsd-signature-type tsd-kind-interface">ApexQuickFilterChangingEvent</a><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted before the quick-filter value is applied.</p>
|
|
61
61
|
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-5">Remarks<a href="#remarks-5" 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></h4><p>Cancellable — calling <code>preventDefault()</code> aborts the change. The value can
|
|
62
|
-
be replaced inside the listener by reassigning ApexGrid.quickFilter
|
|
62
|
+
be replaced inside the listener by reassigning <a href="../classes/ApexGrid.html#quickfilter" class="tsd-kind-property">ApexGrid.quickFilter</a>.</p>
|
|
63
63
|
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="roweditended"><span>row<wbr/>Edit<wbr/>Ended</span><a href="#roweditended" 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><div class="tsd-signature"><span class="tsd-kind-property">rowEditEnded</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexRowEditEndedEvent.html" class="tsd-signature-type tsd-kind-interface">ApexRowEditEndedEvent</a><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted when a row leaves edit mode, with <code>committed</code> reporting whether
|
|
64
64
|
pending edits were applied (row edit mode only).</p>
|
|
65
65
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="roweditstarted"><span>row<wbr/>Edit<wbr/>Started</span><a href="#roweditstarted" 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><div class="tsd-signature"><span class="tsd-kind-property">rowEditStarted</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexRowEditStartedEvent.html" class="tsd-signature-type tsd-kind-interface">ApexRowEditStartedEvent</a><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted when a row enters edit mode (row edit mode only).</p>
|
|
@@ -69,7 +69,7 @@ pending edits were applied (row edit mode only).</p>
|
|
|
69
69
|
every expansion-mutating call (toggle, expand-all, programmatic
|
|
70
70
|
<code>expandedRows = ...</code>).</p>
|
|
71
71
|
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowmoved"><span>row<wbr/>Moved</span><a href="#rowmoved" 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><div class="tsd-signature"><span class="tsd-kind-property">rowMoved</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexRowMovingEvent.html" class="tsd-signature-type tsd-kind-interface">ApexRowMovingEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted after a row has been moved.</p>
|
|
72
|
-
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowmoving"><span>row<wbr/>Moving</span><a href="#rowmoving" 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><div class="tsd-signature"><span class="tsd-kind-property">rowMoving</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexRowMovingEvent.html" class="tsd-signature-type tsd-kind-interface">ApexRowMovingEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted before a row is moved via drag, keyboard, or ApexGrid.moveRow
|
|
72
|
+
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowmoving"><span>row<wbr/>Moving</span><a href="#rowmoving" 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><div class="tsd-signature"><span class="tsd-kind-property">rowMoving</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexRowMovingEvent.html" class="tsd-signature-type tsd-kind-interface">ApexRowMovingEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted before a row is moved via drag, keyboard, or <a href="../classes/ApexGrid.html#moverow" class="tsd-kind-method">ApexGrid.moveRow</a>.</p>
|
|
73
73
|
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-7">Remarks<a href="#remarks-7" 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></h4><p>Cancellable — <code>preventDefault()</code> aborts the move.</p>
|
|
74
74
|
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowpinned"><span>row<wbr/>Pinned</span><a href="#rowpinned" 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><div class="tsd-signature"><span class="tsd-kind-property">rowPinned</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexRowPinningEvent.html" class="tsd-signature-type tsd-kind-interface">ApexRowPinningEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted after a row's pin state has changed.</p>
|
|
75
75
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="rowpinning"><span>row<wbr/>Pinning</span><a href="#rowpinning" 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><div class="tsd-signature"><span class="tsd-kind-property">rowPinning</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexRowPinningEvent.html" class="tsd-signature-type tsd-kind-interface">ApexRowPinningEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted before a row is pinned, moved between bands, or unpinned.</p>
|
|
@@ -86,7 +86,7 @@ Returns the sort expression which will be used for the operation.</p>
|
|
|
86
86
|
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-10">Remarks<a href="#remarks-10" 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></h4><p>The event is cancellable which prevents the operation from being applied.
|
|
87
87
|
The expression can be modified prior to the operation running.</p>
|
|
88
88
|
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="statechanged"><span>state<wbr/>Changed</span><a href="#statechanged" 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><div class="tsd-signature"><span class="tsd-kind-property">stateChanged</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexStateChangedEvent.html" class="tsd-signature-type tsd-kind-interface">ApexStateChangedEvent</a><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted (debounced, after the render pipeline settles) whenever the grid's
|
|
89
|
-
restorable state changes, carrying the new ApexGrid.getState
|
|
89
|
+
restorable state changes, carrying the new <a href="../classes/ApexGrid.html#getstate" class="tsd-kind-method">ApexGrid.getState</a>
|
|
90
90
|
snapshot. The single signal for persistence (save the snapshot) or for
|
|
91
91
|
re-prompting an AI layer. The payload is only computed while at least one
|
|
92
92
|
<code>stateChanged</code> listener is attached, so it is zero-cost otherwise.</p>
|
|
@@ -95,7 +95,7 @@ interaction. To avoid a save loop, compare the snapshot to your last-saved
|
|
|
95
95
|
one before persisting (identical snapshots never fire a second time).</p>
|
|
96
96
|
</div></div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="treerowexpanded"><span>tree<wbr/>Row<wbr/>Expanded</span><a href="#treerowexpanded" 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><div class="tsd-signature"><span class="tsd-kind-property">treeRowExpanded</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexTreeRowExpandedEvent.html" class="tsd-signature-type tsd-kind-interface">ApexTreeRowExpandedEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted after a tree-row expansion change has been applied.</p>
|
|
97
97
|
</div></section><section class="tsd-panel tsd-member"><h3 class="tsd-anchor-link" id="treerowexpanding"><span>tree<wbr/>Row<wbr/>Expanding</span><a href="#treerowexpanding" 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><div class="tsd-signature"><span class="tsd-kind-property">treeRowExpanding</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CustomEvent</span><span class="tsd-signature-symbol"><</span><a href="ApexTreeRowExpandingEvent.html" class="tsd-signature-type tsd-kind-interface">ApexTreeRowExpandingEvent</a><span class="tsd-signature-symbol"><</span><a class="tsd-signature-type tsd-kind-type-parameter" href="#t">T</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Emitted before the tree-row expansion set changes.</p>
|
|
98
|
-
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-12">Remarks<a href="#remarks-12" 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></h4><p>Fires only when ApexGrid.tree is enabled and a row's tree
|
|
98
|
+
</div><div class="tsd-comment tsd-typography"><div class="tsd-tag-remarks"><h4 class="tsd-anchor-link" id="remarks-12">Remarks<a href="#remarks-12" 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></h4><p>Fires only when <a href="../classes/ApexGrid.html#tree" class="tsd-kind-property">ApexGrid.tree</a> is enabled and a row's tree
|
|
99
99
|
expansion is toggled (via the chevron, the public API, or
|
|
100
100
|
<code>expand-all/collapse-all</code>). Cancellable.</p>
|
|
101
101
|
</div></div></section></section></details></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"><details open class="tsd-accordion tsd-page-navigation-section"><summary class="tsd-accordion-summary" data-key="section-Events"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Events</summary><div><a href="#cellvalidationfailed"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>cell<wbr/>Validation<wbr/>Failed</span></a><a href="#cellvaluechanged"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>cell<wbr/>Value<wbr/>Changed</span></a><a href="#cellvaluechanging"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>cell<wbr/>Value<wbr/>Changing</span></a><a href="#columnmoved"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>column<wbr/>Moved</span></a><a href="#columnmoving"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>column<wbr/>Moving</span></a><a href="#columnpinned"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>column<wbr/>Pinned</span></a><a href="#columnpinning"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>column<wbr/>Pinning</span></a><a href="#filtered"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>filtered</span></a><a href="#filtering"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>filtering</span></a><a href="#historychanged"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>history<wbr/>Changed</span></a><a href="#pagechanged"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>page<wbr/>Changed</span></a><a href="#pagechanging"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>page<wbr/>Changing</span></a><a href="#quickfilterchanged"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>quick<wbr/>Filter<wbr/>Changed</span></a><a href="#quickfilterchanging"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>quick<wbr/>Filter<wbr/>Changing</span></a><a href="#roweditended"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Edit<wbr/>Ended</span></a><a href="#roweditstarted"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Edit<wbr/>Started</span></a><a href="#rowexpanded"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Expanded</span></a><a href="#rowexpanding"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Expanding</span></a><a href="#rowmoved"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Moved</span></a><a href="#rowmoving"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Moving</span></a><a href="#rowpinned"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Pinned</span></a><a href="#rowpinning"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Pinning</span></a><a href="#rowselected"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Selected</span></a><a href="#rowselecting"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>row<wbr/>Selecting</span></a><a href="#sorted"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>sorted</span></a><a href="#sorting"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>sorting</span></a><a href="#statechanged"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>state<wbr/>Changed</span></a><a href="#treerowexpanded"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>tree<wbr/>Row<wbr/>Expanded</span></a><a href="#treerowexpanding"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>tree<wbr/>Row<wbr/>Expanding</span></a></div></details></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>
|