apex-grid 3.6.0 → 4.0.0-beta.2
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 +301 -0
- package/LICENSE.md +2 -1
- package/README.md +117 -18
- package/components/cell.d.ts +13 -1
- package/components/cell.js +28 -13
- package/components/cell.js.map +1 -1
- package/components/grid.d.ts +175 -28
- package/components/grid.js +183 -63
- package/components/grid.js.map +1 -1
- package/components/header-row.d.ts +0 -6
- package/components/header-row.js +1 -19
- package/components/header-row.js.map +1 -1
- package/components/header.js +39 -2
- package/components/header.js.map +1 -1
- package/components/paginator.d.ts +20 -5
- package/components/paginator.js +54 -17
- package/components/paginator.js.map +1 -1
- package/components/row.js +149 -40
- package/components/row.js.map +1 -1
- package/components/toolbar.d.ts +5 -1
- package/components/toolbar.js +4 -1
- package/components/toolbar.js.map +1 -1
- package/components/virtualize-rows.d.ts +38 -0
- package/components/virtualize-rows.js +286 -0
- package/components/virtualize-rows.js.map +1 -0
- package/components/virtualizer.d.ts +71 -1
- package/components/virtualizer.js +105 -29
- package/components/virtualizer.js.map +1 -1
- package/controllers/dom.d.ts +10 -3
- package/controllers/dom.js +5 -5
- package/controllers/dom.js.map +1 -1
- package/controllers/navigation.d.ts +63 -0
- package/controllers/navigation.js +295 -21
- package/controllers/navigation.js.map +1 -1
- package/controllers/pagination.d.ts +7 -6
- package/controllers/pagination.js +27 -28
- package/controllers/pagination.js.map +1 -1
- package/controllers/row-pin.d.ts +6 -0
- package/controllers/row-pin.js +8 -2
- package/controllers/row-pin.js.map +1 -1
- package/controllers/row-reorder.d.ts +12 -4
- package/controllers/row-reorder.js +20 -6
- package/controllers/row-reorder.js.map +1 -1
- package/controllers/selection.d.ts +32 -10
- package/controllers/selection.js +33 -10
- package/controllers/selection.js.map +1 -1
- package/controllers/sort.js +2 -3
- package/controllers/sort.js.map +1 -1
- package/controllers/state.d.ts +18 -5
- package/controllers/state.js +53 -46
- package/controllers/state.js.map +1 -1
- package/custom-elements.json +1762 -339
- package/docs/assets/hierarchy.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/classes/ApexGrid.html +166 -66
- package/docs/classes/ApexGridPaginator.html +39 -8
- package/docs/classes/ApexGridToolbar.html +9 -5
- package/docs/functions/localize.html +2 -2
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +123 -20
- package/docs/interfaces/ApexPageChangedEvent.html +3 -1
- package/docs/interfaces/BaseApexCellContext.html +18 -5
- package/docs/interfaces/BaseApexEditorContext.html +20 -5
- package/docs/interfaces/BaseFilterExpression.html +1 -1
- package/docs/interfaces/CSVExportOptions.html +1 -1
- package/docs/interfaces/DataPipelineConfiguration.html +4 -9
- package/docs/interfaces/ExportOptions.html +1 -1
- package/docs/interfaces/GridSelectionConfiguration.html +19 -4
- package/docs/interfaces/PaginationConfiguration.html +11 -4
- package/docs/interfaces/PaginationState.html +4 -2
- package/docs/media/_token-values.scss +42 -16
- package/docs/media/package.json +12 -4
- package/docs/types/DataPipelineParams.html +2 -2
- package/docs/types/PaginationMode.html +5 -4
- package/docs/variables/EN_LOCALE.html +2 -2
- package/i18n/en.d.ts +2 -0
- package/i18n/en.js +2 -0
- package/i18n/en.js.map +1 -1
- package/i18n/es.js +2 -0
- package/i18n/es.js.map +1 -1
- package/ignite-ui.d.ts +1 -0
- package/ignite-ui.js +4 -0
- package/ignite-ui.js.map +1 -0
- package/internal/column-types.d.ts +11 -1
- package/internal/column-types.js +8 -6
- package/internal/column-types.js.map +1 -1
- package/internal/design-system.d.ts +32 -0
- package/internal/design-system.js +66 -0
- package/internal/design-system.js.map +1 -0
- package/internal/export.d.ts +6 -0
- package/internal/export.js +4 -0
- package/internal/export.js.map +1 -1
- package/internal/feature-module.d.ts +7 -0
- package/internal/feature-module.js.map +1 -1
- package/internal/flip.d.ts +28 -16
- package/internal/flip.js +42 -10
- package/internal/flip.js.map +1 -1
- package/internal/icons.d.ts +2 -16
- package/internal/icons.js +0 -8
- package/internal/icons.js.map +1 -1
- package/internal/ignite-ui.d.ts +10 -0
- package/internal/ignite-ui.js +118 -0
- package/internal/ignite-ui.js.map +1 -0
- package/internal/index.d.ts +4 -2
- package/internal/index.js +3 -2
- package/internal/index.js.map +1 -1
- package/internal/types.d.ts +75 -19
- package/internal/types.js.map +1 -1
- package/operations/filter/types.d.ts +1 -1
- package/operations/filter/types.js.map +1 -1
- package/package.json +7 -2
- package/styles/_token-blocks.css.d.ts +1 -0
- package/styles/_token-blocks.css.js +3 -0
- package/styles/_token-blocks.css.js.map +1 -0
- 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-cell/cell-renderers.css.js +1 -1
- package/styles/body-cell/cell-renderers.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/document-tokens.css.js +1 -1
- package/styles/document-tokens.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/ignite-ui/ignite-ui-dark.css.d.ts +1 -0
- package/styles/ignite-ui/ignite-ui-dark.css.js +3 -0
- package/styles/ignite-ui/ignite-ui-dark.css.js.map +1 -0
- package/styles/ignite-ui/ignite-ui-document.css.d.ts +1 -0
- package/styles/ignite-ui/ignite-ui-document.css.js +3 -0
- package/styles/ignite-ui/ignite-ui-document.css.js.map +1 -0
- package/styles/ignite-ui/ignite-ui.css.d.ts +1 -0
- package/styles/ignite-ui/ignite-ui.css.js +3 -0
- package/styles/ignite-ui/ignite-ui.css.js.map +1 -0
- package/styles/paginator/paginator.css.js +1 -1
- package/styles/paginator/paginator.css.js.map +1 -1
- package/styles/toolbar/toolbar.css.js +1 -1
- package/styles/toolbar/toolbar.css.js.map +1 -1
- package/tokens.css +14 -15
- package/operations/pagination.d.ts +0 -19
- package/operations/pagination.js +0 -12
- package/operations/pagination.js.map +0 -1
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="1151" 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="1163" 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="1026" 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="1006" 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="1327" 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)
|
|
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), and follows the <code>--apx-*</code> tokens shared by every Apex product. One import (<code>apex-grid/ignite-ui</code>) makes it follow an Ignite UI theme, light or dark.</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>
|
|
@@ -70,11 +70,14 @@
|
|
|
70
70
|
<pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">'apex-grid/tokens.css'</span><span class="hl-1">;</span>
|
|
71
71
|
</code><button type="button">Copy</button></pre>
|
|
72
72
|
|
|
73
|
-
<p>The grid renders the same without the sheet; it carries the defaults as fallbacks.
|
|
73
|
+
<p>The grid renders the same without the sheet; it carries the defaults as fallbacks. Four groups have no root default, so page CSS reading them needs its own fallback:</p>
|
|
74
74
|
<ul>
|
|
75
|
-
<li><code>--ag-brand</code> and <code>--ag-brand-strong</code>, so an Ignite UI palette set on any ancestor
|
|
75
|
+
<li><code>--ag-brand</code> and <code>--ag-brand-strong</code>, so a family <code>--apx-accent</code> (or, with the Ignite UI add-on, an Ignite UI palette) set on any ancestor still reaches the grid (see below).</li>
|
|
76
|
+
<li><code>--ag-font</code>, for the same reason (<code>--apx-font-family</code>, an Ignite UI font).</li>
|
|
77
|
+
<li><code>--ag-overlay</code> and <code>--ag-overlay-text</code> (and <code>--ag-dark-overlay</code>, <code>--ag-dark-overlay-text</code>): unset, the enterprise popups keep their own colours (see below).</li>
|
|
76
78
|
<li>The derived washes <code>--ag-brand-soft</code>, <code>--ag-brand-softer</code>, <code>--ag-brand-line</code>, <code>--ag-row-hover</code> and <code>--ag-surface-alt</code>. The grid mixes them from the brand and surface in effect, so they follow a brand set on an ancestor. Set them only to override the mix.</li>
|
|
77
79
|
</ul>
|
|
80
|
+
<p>The root defaults of the text, line and surface tokens are written as their family chain (<code>--ag-text: var(--apx-fore, #111827)</code>), so they follow a family token set on <code>:root</code> (see below).</p>
|
|
78
81
|
<p><strong>Dark mode.</strong> <code>theme="dark"</code> reads its own colour inputs, <code>--ag-dark-*</code> (<code>--ag-dark-surface</code>, <code>--ag-dark-text</code>, <code>--ag-dark-hairline</code>, <code>--ag-dark-shadow-card</code>, and so on), so a light palette set on a shared ancestor never puts a white surface under the dark theme's light text. Sizing, typography, motion, the brand and the base state colours are shared by both modes. To theme both from one place, set both palettes:</p>
|
|
79
82
|
<pre><code class="css"><span class="hl-16">.dashboard</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-12">--ag-brand</span><span class="hl-1">: </span><span class="hl-14">#7c3aed</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-12">--ag-surface</span><span class="hl-1">: </span><span class="hl-14">#fdfcff</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-12">--ag-dark-surface</span><span class="hl-1">: </span><span class="hl-14">#140f24</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
80
83
|
</code><button type="button">Copy</button></pre>
|
|
@@ -84,7 +87,25 @@
|
|
|
84
87
|
<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">theme</span><span class="hl-1">~=</span><span class="hl-3">'dark'</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-dark-shadow-card</span><span class="hl-1">); } </span><span class="hl-15">/* the same, for dark grids */</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>
|
|
85
88
|
</code><button type="button">Copy</button></pre>
|
|
86
89
|
|
|
87
|
-
<p>
|
|
90
|
+
<p><strong>Enterprise popups.</strong> <code>--ag-overlay</code> and <code>--ag-overlay-text</code> colour the popups of <code>apex-grid-enterprise</code> (filter builder, set filter, AI panel, tool panel, status bar); dark grids read <code>--ag-dark-overlay</code> and <code>--ag-dark-overlay-text</code>. Set both: the popup lines, muted text and hover wash are mixed from the two. Unset, each popup keeps its built-in colours.</p>
|
|
91
|
+
<p><strong>Family tokens (<code>--apx-*</code>).</strong> The grid also reads the tokens every Apex product shares, ranked below its own: <code>--apx-accent</code> (brand), <code>--apx-fore</code> (text), <code>--apx-grid</code> (gridlines, row borders, header separator), <code>--apx-surface</code> (card and row background), <code>--apx-font-family</code> and <code>--apx-radius-factor</code>. An <code>--ag-*</code> or <code>--ag-dark-*</code> token you set wins over them, and they apply to light and dark grids alike. The brand, font and radius factor reach the grid from any ancestor. Text, lines and surface have root defaults, which resolve on <code>:root</code>: they follow a family token set on <code>:root</code> (or, with the Ignite UI add-on, which lifts those defaults, on any ancestor). <code>--apx-radius-factor</code> scales <code>--ag-radius</code>, <code>--ag-radius-sm</code> and <code>--ag-radius-xs</code> while it is set; at 1 nothing changes, the pill shape stays round, and a multi-value radius (<code>--ag-radius: 12px 12px 0 0</code>) works only without a factor.</p>
|
|
92
|
+
<p><code>tokens="off"</code> on a grid (or <code>grid.tokens = false</code>) keeps it off the family tokens and the content it renders too. One limit without the Ignite UI add-on: an <code>--apx-fore</code>, <code>--apx-grid</code> or <code>--apx-surface</code> set on <code>:root</code> has already resolved into the text, line and surface root defaults there, which every grid reads, so that grid still shows it; set the matching <code>--ag-*</code> tokens on it, or set the family tokens on the elements they are meant for.</p>
|
|
93
|
+
<pre><code class="css"><span class="hl-16">:root</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-12">--apx-accent</span><span class="hl-1">: </span><span class="hl-14">#7c3aed</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-12">--apx-font-family</span><span class="hl-1">: </span><span class="hl-3">'Source Sans 3'</span><span class="hl-1">, </span><span class="hl-14">sans-serif</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-12">--apx-radius-factor</span><span class="hl-1">: </span><span class="hl-8">0.5</span><span class="hl-1">;</span><br/><span class="hl-1">}</span>
|
|
94
|
+
</code><button type="button">Copy</button></pre>
|
|
95
|
+
|
|
96
|
+
<p><strong>Ignite UI.</strong> To follow an Ignite UI theme, import the add-on once:</p>
|
|
97
|
+
<pre><code class="ts"><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-3">'apex-grid/ignite-ui'</span><span class="hl-1">;</span>
|
|
98
|
+
</code><button type="button">Copy</button></pre>
|
|
99
|
+
|
|
100
|
+
<p>Every grid on the page, in the document or in any shadow root, then follows the Ignite UI theme the page loads, including grids that connected before the import: the brand (<code>--ig-primary-*</code>), text and muted text, gridlines and the pinned-column edge (the gray ramp), the header (<code>--ig-surface-raised</code>, Ignite UI 7.5 and later), the state colours, the font, and the enterprise popups (<code>--ig-surface-overlay</code> on 7.5 and later, else the grid's own popup colours). The card and row surfaces keep the grid's own light or dark background. Without the add-on the grid reads no <code>--ig-*</code> token, and an Ignite UI stylesheet changes nothing.</p>
|
|
101
|
+
<ul>
|
|
102
|
+
<li><strong>Ranking:</strong> an <code>--ag-*</code> token you set, then the family <code>--apx-*</code> tokens, then Ignite UI, then the built-in values.</li>
|
|
103
|
+
<li><strong>Mode:</strong> a grid without <code>theme="dark"</code> or <code>theme="light"</code> follows the Ignite UI variant (<code>--ig-theme-variant</code>) declared on <code>:root</code> or any ancestor (as Ignite UI themes do), and a theme swap live. <code>theme="light"</code> keeps a grid light (text and lines then keep the built-in values, since a dark theme's grays are light) and <code>theme="dark"</code> keeps it dark. Where the browser has no container style queries, grids follow the document's variant.</li>
|
|
104
|
+
<li><strong>Per grid:</strong> <code>design-system="off"</code> (the <code>designSystem</code> property set to <code>false</code>) turns the Ignite UI colours and font off (the variant still picks the mode); <code>tokens="off"</code> (<code>tokens = false</code>) turns off the family tokens and Ignite UI, the variant included, for the grid and the content it renders.</li>
|
|
105
|
+
<li><strong>Root defaults:</strong> while the add-on is loaded, the tokens that follow Ignite UI (text, lines, surfaces, header, state colours, pinned edge) leave the root defaults, as <code>--ag-brand</code> and <code>--ag-font</code> always have, so page CSS that reads one gives its own fallback: <code>var(--ag-text, #111827)</code>.</li>
|
|
106
|
+
<li><strong>Other products:</strong> each takes its own add-on. For the <code>apex-grid-enterprise</code> chart panel to read the theme itself, also import <code>apexcharts/features/ignite-ui</code> (ApexCharts releases that ship it); the grid never loads it, since it themes every chart on the page. Without it the panel chart takes the grid's colours, which follow the theme.</li>
|
|
107
|
+
<li><strong>Bundles:</strong> the add-on registers on a shared <code>globalThis</code> slot, so it reaches every grid even when the grid and the add-on come from separately built bundles.</li>
|
|
108
|
+
</ul>
|
|
88
109
|
<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>
|
|
89
110
|
<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>
|
|
90
111
|
<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>
|
|
@@ -132,6 +153,9 @@
|
|
|
132
153
|
</tr>
|
|
133
154
|
</tbody>
|
|
134
155
|
</table>
|
|
156
|
+
<div class="tsd-alert tsd-alert-note"><div class="tsd-alert-title"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><use href="assets/icons.svg#icon-alertNote"></use></svg><span>Note</span></div><p>
|
|
157
|
+
Rows whose text wraps change height while the grid resizes or scrolls, and the browser can defer the resulting row layout by one frame. It reports each deferral as a window <code>error</code> event with the message "ResizeObserver loop completed with undelivered notifications" (older browsers say "ResizeObserver loop limit exceeded"). The event is benign, so the first grid to connect adds one window <code>error</code> listener that cancels any message containing "ResizeObserver loop" (Safari then stops logging it) and stops the listeners added after it from seeing it. Every other error passes through untouched. Listeners added before the first grid connects, such as error monitoring set up at page start, still receive it, and the same message raised by your own code is quieted as well, since the browser does not say which observer raised it.</p>
|
|
158
|
+
</div>
|
|
135
159
|
<hr>
|
|
136
160
|
<h2 id="features-in-depth" class="tsd-anchor-link">Features in depth<a href="#features-in-depth" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>
|
|
137
161
|
<p>Each feature below is fully opt-in: you only pay for what you turn on. Snippets assume <code>const grid = document.querySelector('apex-grid')!</code>.</p>
|
|
@@ -156,11 +180,19 @@
|
|
|
156
180
|
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">pagination</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">pageSize:</span><span class="hl-1"> </span><span class="hl-8">25</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">pageSizeOptions:</span><span class="hl-1"> [</span><span class="hl-8">10</span><span class="hl-1">, </span><span class="hl-8">25</span><span class="hl-1">, </span><span class="hl-8">50</span><span class="hl-1">, </span><span class="hl-8">100</span><span class="hl-1">],</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">gotoPage</span><span class="hl-1">(</span><span class="hl-8">2</span><span class="hl-1">);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">setPageSize</span><span class="hl-1">(</span><span class="hl-8">50</span><span class="hl-1">);</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">nextPage</span><span class="hl-1">(); </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">previousPage</span><span class="hl-1">(); </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">firstPage</span><span class="hl-1">(); </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">lastPage</span><span class="hl-1">();</span>
|
|
157
181
|
</code><button type="button">Copy</button></pre>
|
|
158
182
|
|
|
159
|
-
<p>
|
|
183
|
+
<p>The paginator never clips its controls: on a narrow grid it drops the page size select first, then the first and last buttons, so previous and next stay reachable. <code>paginator: 'compact'</code> always uses that narrow layout ("start-end of total", previous, "page / count", next), for example in a small dashboard tile:</p>
|
|
184
|
+
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">pagination</span><span class="hl-1"> = { </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">pageSize:</span><span class="hl-1"> </span><span class="hl-8">5</span><span class="hl-1">, </span><span class="hl-2">paginator:</span><span class="hl-1"> </span><span class="hl-3">'compact'</span><span class="hl-1"> };</span>
|
|
185
|
+
</code><button type="button">Copy</button></pre>
|
|
186
|
+
|
|
187
|
+
<p>Style it through the grid with <code>apex-grid::part(...)</code>: <code>paginator-host</code> (the element), <code>paginator</code>, <code>paginator-size</code>, <code>paginator-info</code>, <code>paginator-controls</code>, <code>paginator-page</code>, and <code>paginator-button</code> on each button, which also carries <code>paginator-first</code>, <code>paginator-prev</code>, <code>paginator-next</code> or <code>paginator-last</code>:</p>
|
|
188
|
+
<pre><code class="css"><span class="hl-10">apex-grid</span><span class="hl-1">::part(</span><span class="hl-10">paginator-first</span><span class="hl-1">),</span><br/><span class="hl-10">apex-grid</span><span class="hl-1">::part(</span><span class="hl-10">paginator-last</span><span class="hl-1">) { </span><span class="hl-12">display</span><span class="hl-1">: </span><span class="hl-14">none</span><span class="hl-1">; }</span>
|
|
189
|
+
</code><button type="button">Copy</button></pre>
|
|
190
|
+
|
|
191
|
+
<p>Remote mode: the grid does not slice <code>data</code>, it renders whatever <code>data</code> holds as the current page. Fetch the page on <code>pageChanged</code>, and keep <code>pagination.totalItems</code> at the number of rows the server holds for the current filter (update it when a server side filter changes that number), so the paginator can count the pages:</p>
|
|
160
192
|
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">pagination</span><span class="hl-1"> = { </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">mode:</span><span class="hl-1"> </span><span class="hl-3">'remote'</span><span class="hl-1">, </span><span class="hl-2">pageSize:</span><span class="hl-1"> </span><span class="hl-8">25</span><span class="hl-1">, </span><span class="hl-2">totalItems:</span><span class="hl-1"> </span><span class="hl-8">1280</span><span class="hl-1"> };</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">addEventListener</span><span class="hl-1">(</span><span class="hl-3">'pageChanged'</span><span class="hl-1">, </span><span class="hl-5">async</span><span class="hl-1"> (</span><span class="hl-2">e</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-4">fetchPage</span><span class="hl-1">(</span><span class="hl-2">e</span><span class="hl-1">.</span><span class="hl-2">detail</span><span class="hl-1">.</span><span class="hl-2">page</span><span class="hl-1">, </span><span class="hl-2">e</span><span class="hl-1">.</span><span class="hl-2">detail</span><span class="hl-1">.</span><span class="hl-2">pageSize</span><span class="hl-1">);</span><br/><span class="hl-1">});</span>
|
|
161
193
|
</code><button type="button">Copy</button></pre>
|
|
162
194
|
|
|
163
|
-
<p>Properties: <code>page</code>, <code>pageSize</code>, <code>pageCount</code>, <code>totalItems</code>, <code>pageItems</code>. Events: <code>pageChanging</code> (cancellable), <code>pageChanged</code>.</p>
|
|
195
|
+
<p>Properties: <code>page</code>, <code>pageSize</code>, <code>pageCount</code>, <code>totalItems</code>, <code>pageItems</code>. <code>totalItems</code> is the post-filter, post-sort row count; with pagination enabled it counts the rows paged through, without pinned rows, which show on every page (in remote mode, the <code>pagination.totalItems</code> you supplied), and <code>pageChanged</code> carries the same number in <code>detail.totalItems</code>. Events: <code>pageChanging</code> (cancellable), <code>pageChanged</code>.</p>
|
|
164
196
|
<h3 id="column-pinning" class="tsd-anchor-link">Column pinning<a href="#column-pinning" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
165
197
|
<pre><code class="ts"><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">columns</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'id'</span><span class="hl-1">, </span><span class="hl-2">pinned:</span><span class="hl-1"> </span><span class="hl-3">'start'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-3">'actions'</span><span class="hl-1">, </span><span class="hl-2">pinned:</span><span class="hl-1"> </span><span class="hl-3">'end'</span><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">pinColumn</span><span class="hl-1">(</span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-3">'start'</span><span class="hl-1">);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">unpinColumn</span><span class="hl-1">(</span><span class="hl-3">'name'</span><span class="hl-1">); </span><span class="hl-15">// or pinColumn('name', null)</span>
|
|
166
198
|
</code><button type="button">Copy</button></pre>
|
|
@@ -181,6 +213,12 @@
|
|
|
181
213
|
</code><button type="button">Copy</button></pre>
|
|
182
214
|
|
|
183
215
|
<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>
|
|
216
|
+
<h3 id="hiding-the-header" class="tsd-anchor-link">Hiding the header<a href="#hiding-the-header" 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>
|
|
217
|
+
<p>For a compact table, such as a short dashboard tile, leave out the header rows and give their room to the data rows:</p>
|
|
218
|
+
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">showHeader</span><span class="hl-1"> = </span><span class="hl-5">false</span><span class="hl-1">; </span><span class="hl-15">// or <apex-grid show-header="false"></span>
|
|
219
|
+
</code><button type="button">Copy</button></pre>
|
|
220
|
+
|
|
221
|
+
<p>The column header row, the column group row and the filter panel take no space, paint nothing and take no pointer, and the built-in header controls leave the tab order, so resizing, the column menu and drag reorder are unavailable while the header is hidden (an open column menu closes). A focusable control you render in a <code>headerTemplate</code> stays in the tab order: give it <code>tabindex="-1"</code> while the header is hidden. The column header row stays in the accessibility tree, so screen readers still announce the column names, and <code>aria-rowcount</code> and <code>aria-rowindex</code> do not change. Sort, filter, column widths and the current page are kept and come back unchanged with <code>grid.showHeader = true</code>. Attribute: <code>show-header</code>.</p>
|
|
184
222
|
<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>
|
|
185
223
|
<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>
|
|
186
224
|
</code><button type="button">Copy</button></pre>
|
|
@@ -264,9 +302,21 @@ it moves. Keys, with editing enabled where relevant:</p>
|
|
|
264
302
|
continues from where you were. Sorting, filtering, selection, paging, row
|
|
265
303
|
pinning, reorder, expansion, and undo / redo are announced through a polite
|
|
266
304
|
live region, and every announcement and control label is localizable (the
|
|
267
|
-
<code>announce.*</code> and <code>header.*</code> locale keys)
|
|
268
|
-
<code>
|
|
269
|
-
<code>aria-
|
|
305
|
+
<code>announce.*</code> and <code>header.*</code> locale keys).</p>
|
|
306
|
+
<p>The <code>grid</code> role (<code>treegrid</code> for tree data, master-detail and other expandable
|
|
307
|
+
rows), <code>aria-rowcount</code>, <code>aria-colcount</code> and <code>aria-multiselectable</code> sit on the
|
|
308
|
+
element exposed as <code>part="table"</code> inside the shadow root, not on the
|
|
309
|
+
<code><apex-grid></code> host. It holds only the header rows and the body, so the toolbar,
|
|
310
|
+
paginator and live region around it are not read as table content. It gets a
|
|
311
|
+
localized <code>aria-label</code> ("Data grid") unless you put <code>aria-label</code> or
|
|
312
|
+
<code>aria-labelledby</code> on the host, which then names it. An <code>aria-describedby</code> on
|
|
313
|
+
the host becomes its description. The references are resolved when the grid
|
|
314
|
+
renders, so if you add the referenced element later (a heading shown
|
|
315
|
+
conditionally), set the attribute again afterwards to pick it up.</p>
|
|
316
|
+
<blockquote>
|
|
317
|
+
<p>Changed in 4.0.0: the role and the row and column counts used to be on the
|
|
318
|
+
host. Query <code>grid.shadowRoot.querySelector('[part~="table"]')</code> instead.</p>
|
|
319
|
+
</blockquote>
|
|
270
320
|
<blockquote>
|
|
271
321
|
<p>Changed in 3.4.0: Home / End used to jump to the first / last row; they now
|
|
272
322
|
stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
@@ -285,6 +335,7 @@ stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
|
285
335
|
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">selection</span><span class="hl-1"> = { </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">, </span><span class="hl-2">mode:</span><span class="hl-1"> </span><span class="hl-3">'multiple'</span><span class="hl-1">, </span><span class="hl-2">showCheckboxColumn:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> };</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">selectRow</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">]);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">toggleRowSelection</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">1</span><span class="hl-1">]);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">selectAllRows</span><span class="hl-1">();</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">clearSelection</span><span class="hl-1">();</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">selectedRows</span><span class="hl-1">; </span><span class="hl-15">// snapshot</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">selectedRows</span><span class="hl-1"> = [</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">2</span><span class="hl-1">]]; </span><span class="hl-15">// replace selection (goes through `rowSelecting`)</span>
|
|
286
336
|
</code><button type="button">Copy</button></pre>
|
|
287
337
|
|
|
338
|
+
<p>Every row is selectable by default, pinned rows included. <code>selection.isRowSelectable: (row) => boolean</code> keeps rows out of the selection (a pinned total row, for example): such a row renders no checkbox and no <code>aria-selected</code>, every selection path skips it (clicks, Space, Select all, <code>selectRow</code>, <code>selectedRows = ...</code>, <code>setState</code>), and the header checkbox counts only selectable rows. Reassigning <code>selection</code> or <code>data</code> drops selected rows the predicate now rejects; a selected row it comes to reject otherwise (pinned or edited in place) keeps its checkbox until deselected.</p>
|
|
288
339
|
<p>Events: <code>rowSelecting</code> (cancellable), <code>rowSelected</code>.</p>
|
|
289
340
|
<h3 id="row-pinning-top-bottom" class="tsd-anchor-link">Row pinning (top / bottom)<a href="#row-pinning-top-bottom" 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>
|
|
290
341
|
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">rowPinning</span><span class="hl-1"> = { </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1"> };</span><br/><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">pinRow</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">], </span><span class="hl-3">'top'</span><span class="hl-1">);</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">pinRow</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">5</span><span class="hl-1">], </span><span class="hl-3">'bottom'</span><span class="hl-1">);</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">unpinRow</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">]);</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">pinnedRows</span><span class="hl-1">; </span><span class="hl-15">// { top: T[], bottom: T[] }</span>
|
|
@@ -306,7 +357,7 @@ stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
|
306
357
|
<pre><code class="ts"><span class="hl-5">type</span><span class="hl-1"> </span><span class="hl-6">Person</span><span class="hl-1"> = { </span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-6">number</span><span class="hl-1">; </span><span class="hl-2">name</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">; </span><span class="hl-2">title</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">; </span><span class="hl-2">path</span><span class="hl-1">: </span><span class="hl-6">string</span><span class="hl-1">[] };</span><br/><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">data</span><span class="hl-1">: </span><span class="hl-6">Person</span><span class="hl-1">[] = [</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Adrian'</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'CEO'</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">'Adrian'</span><span class="hl-1">] },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">2</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Bryan'</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'VP Eng'</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">'Adrian'</span><span class="hl-1">, </span><span class="hl-3">'Bryan'</span><span class="hl-1">] },</span><br/><span class="hl-1"> { </span><span class="hl-2">id:</span><span class="hl-1"> </span><span class="hl-8">3</span><span class="hl-1">, </span><span class="hl-2">name:</span><span class="hl-1"> </span><span class="hl-3">'Cara'</span><span class="hl-1">, </span><span class="hl-2">title:</span><span class="hl-1"> </span><span class="hl-3">'Manager'</span><span class="hl-1">, </span><span class="hl-2">path:</span><span class="hl-1"> [</span><span class="hl-3">'Adrian'</span><span class="hl-1">, </span><span class="hl-3">'Bryan'</span><span class="hl-1">, </span><span class="hl-3">'Cara'</span><span class="hl-1">] },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">tree</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">enabled:</span><span class="hl-1"> </span><span class="hl-5">true</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-4">getDataPath</span><span class="hl-2">:</span><span class="hl-1"> (</span><span class="hl-2">row</span><span class="hl-1">) </span><span class="hl-5">=></span><span class="hl-1"> </span><span class="hl-2">row</span><span class="hl-1">.</span><span class="hl-2">path</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">defaultExpanded:</span><span class="hl-1"> </span><span class="hl-8">1</span><span class="hl-1">, </span><span class="hl-15">// boolean | number, depth to expand</span><br/><span class="hl-1"> </span><span class="hl-2">groupColumnKey:</span><span class="hl-1"> </span><span class="hl-3">'name'</span><span class="hl-1">, </span><span class="hl-15">// which column shows the chevron + indent</span><br/><span class="hl-1"> </span><span class="hl-2">childIndent:</span><span class="hl-1"> </span><span class="hl-8">20</span><span class="hl-1">, </span><span class="hl-15">// px per depth level</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">toggleTreeRow</span><span class="hl-1">(</span><span class="hl-2">data</span><span class="hl-1">[</span><span class="hl-8">0</span><span class="hl-1">]);</span><br/><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">expandAllTreeRows</span><span class="hl-1">();</span>
|
|
307
358
|
</code><button type="button">Copy</button></pre>
|
|
308
359
|
|
|
309
|
-
<p>Methods: <code>toggleTreeRow</code>, <code>expandTreeRow</code>, <code>collapseTreeRow</code>, <code>expandAllTreeRows</code>, <code>collapseAllTreeRows</code>, <code>isTreeRowExpanded</code>. Events: <code>treeRowExpanding</code> (cancellable), <code>treeRowExpanded</code>. When tree mode is active, the
|
|
360
|
+
<p>Methods: <code>toggleTreeRow</code>, <code>expandTreeRow</code>, <code>collapseTreeRow</code>, <code>expandAllTreeRows</code>, <code>collapseAllTreeRows</code>, <code>isTreeRowExpanded</code>. Events: <code>treeRowExpanding</code> (cancellable), <code>treeRowExpanded</code>. When tree mode is active, the grid's <code>part="table"</code> element advertises <code>role="treegrid"</code>.</p>
|
|
310
361
|
<h3 id="csv-export" class="tsd-anchor-link">CSV export<a href="#csv-export" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
311
362
|
<p>Programmatic:</p>
|
|
312
363
|
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">exportToCSV</span><span class="hl-1">(); </span><span class="hl-15">// downloads data.csv</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">exportToCSV</span><span class="hl-1">({ </span><span class="hl-2">filename:</span><span class="hl-1"> </span><span class="hl-3">'users'</span><span class="hl-1">, </span><span class="hl-2">source:</span><span class="hl-1"> </span><span class="hl-3">'selected'</span><span class="hl-1"> });</span><br/><span class="hl-5">const</span><span class="hl-1"> </span><span class="hl-7">text</span><span class="hl-1"> = </span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">exportToCSV</span><span class="hl-1">({ </span><span class="hl-2">filename:</span><span class="hl-1"> </span><span class="hl-3">''</span><span class="hl-1"> }); </span><span class="hl-15">// no download, returns the string</span>
|
|
@@ -322,7 +373,7 @@ stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
|
322
373
|
|
|
323
374
|
<p>Renders a download icon in the toolbar's trailing actions area; the menu has an "Export CSV" entry (the enterprise grid adds "Export XLSX"). Toolbar <code>exportFilename</code> overrides the default <code>data</code> filename. Attribute: <code>show-export</code>.</p>
|
|
324
375
|
<h3 id="toolbar" class="tsd-anchor-link">Toolbar<a href="#toolbar" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
325
|
-
<p>Rendered automatically above the header row when at least one of <code>show-quick-filter</code> or <code>show-export</code> is on. CSS parts:</p>
|
|
376
|
+
<p>Rendered automatically above the header row when at least one of <code>show-quick-filter</code> or <code>show-export</code> is on. The grid re-exports its CSS parts, so <code>apex-grid::part(name)</code> reaches them:</p>
|
|
326
377
|
<table>
|
|
327
378
|
<thead>
|
|
328
379
|
<tr>
|
|
@@ -332,6 +383,10 @@ stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
|
332
383
|
</thead>
|
|
333
384
|
<tbody>
|
|
334
385
|
<tr>
|
|
386
|
+
<td><code>toolbar-host</code></td>
|
|
387
|
+
<td>The <code><apex-grid-toolbar></code> element</td>
|
|
388
|
+
</tr>
|
|
389
|
+
<tr>
|
|
335
390
|
<td><code>toolbar</code></td>
|
|
336
391
|
<td>Root container</td>
|
|
337
392
|
</tr>
|
|
@@ -352,8 +407,16 @@ stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
|
352
407
|
<td>Trailing actions area</td>
|
|
353
408
|
</tr>
|
|
354
409
|
<tr>
|
|
355
|
-
<td><code>
|
|
356
|
-
<td>
|
|
410
|
+
<td><code>toolbar-action</code></td>
|
|
411
|
+
<td>A host-contributed action button</td>
|
|
412
|
+
</tr>
|
|
413
|
+
<tr>
|
|
414
|
+
<td><code>export</code></td>
|
|
415
|
+
<td>Export menu wrapper</td>
|
|
416
|
+
</tr>
|
|
417
|
+
<tr>
|
|
418
|
+
<td><code>export-trigger</code>, <code>export-icon</code>, <code>export-caret</code></td>
|
|
419
|
+
<td>Export menu button and its icons</td>
|
|
357
420
|
</tr>
|
|
358
421
|
<tr>
|
|
359
422
|
<td><code>export-menu</code></td>
|
|
@@ -367,9 +430,9 @@ stay within the row. Use Ctrl/Cmd+Home / Ctrl/Cmd+End for the grid corners.</p>
|
|
|
367
430
|
</table>
|
|
368
431
|
<p>Search input has a <code>debounce</code> attribute (default <code>200</code>ms).</p>
|
|
369
432
|
<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>
|
|
370
|
-
<p>The grid styles itself through <code>--ag-*</code> CSS custom properties; override them on <code>apex-grid</code> or any ancestor (shadow hosts included) to rebrand, and use <code>--ag-dark-*</code> for dark grids. See <a href="#3-optional-customize-the-look">Customize the look</a> and <a href="media/_token-values.scss"><code>src/styles/_token-values.scss</code></a> for the full list.
|
|
433
|
+
<p>The grid styles itself through <code>--ag-*</code> CSS custom properties; override them on <code>apex-grid</code> or any ancestor (shadow hosts included) to rebrand, and use <code>--ag-dark-*</code> for dark grids. See <a href="#3-optional-customize-the-look">Customize the look</a> and <a href="media/_token-values.scss"><code>src/styles/_token-values.scss</code></a> for the full list. The grid also follows the family <code>--apx-*</code> tokens, and an Ignite UI theme with the opt-in <code>apex-grid/ignite-ui</code> add-on (both under Customize the look).</p>
|
|
371
434
|
<p>Style with CSS parts on the grid, paginator, and toolbar:</p>
|
|
372
|
-
<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
|
|
435
|
+
<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</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>
|
|
373
436
|
</code><button type="button">Copy</button></pre>
|
|
374
437
|
|
|
375
438
|
<p>Body rows re-export these parts, so <code>apex-grid::part(name)</code> reaches them:</p>
|
|
@@ -438,6 +501,22 @@ on the side the cursor actually crossed.</p>
|
|
|
438
501
|
</code><button type="button">Copy</button></pre>
|
|
439
502
|
|
|
440
503
|
<p>When <code>coordinateHints</code> is on, the grid shows a leading row-number gutter (1, 2, 3, and so on) and A / B / C column-letter chips in the headers, so cell references are discoverable (a spreadsheet-style look). Set it directly for a persistent spreadsheet look. <code>apex-grid-enterprise</code> turns it on by default for any grid that has an <code>allowFormula</code> column, so the gutter is reserved up front and entering a formula never shifts the layout. Reflected to the <code>coordinate-hints</code> attribute (default <code>false</code>).</p>
|
|
504
|
+
<h3 id="row-recycling" class="tsd-anchor-link">Row recycling<a href="#row-recycling" 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>
|
|
505
|
+
<pre><code class="ts"><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-2">rowRecycling</span><span class="hl-1"> = </span><span class="hl-5">false</span><span class="hl-1">; </span><span class="hl-15">// opt out</span>
|
|
506
|
+
</code><button type="button">Copy</button></pre>
|
|
507
|
+
|
|
508
|
+
<pre><code class="html"><span class="hl-9"><</span><span class="hl-10">apex-grid</span><span class="hl-1"> </span><span class="hl-12">row-recycling</span><span class="hl-1">=</span><span class="hl-13">"false"</span><span class="hl-9">></</span><span class="hl-10">apex-grid</span><span class="hl-9">></span>
|
|
509
|
+
</code><button type="button">Copy</button></pre>
|
|
510
|
+
|
|
511
|
+
<p>On by default. A scroll, sort or filter re-binds the rendered body rows to the records now in view instead of building new rows, which makes long jumps and sorts cheaper on large grids. A row element, and its cells, then shows another record later, so cell and editor templates follow these rules:</p>
|
|
512
|
+
<ul>
|
|
513
|
+
<li>Derive everything a template renders from its context on each render, and keep no state in the elements it creates.</li>
|
|
514
|
+
<li>Read <code>ctx.data</code> for the record, also after an <code>await</code>. <code>ctx.row</code> and <code>ctx.parent</code> are row and cell elements that may show another record by then, so do not hold them across an <code>await</code>.</li>
|
|
515
|
+
<li>Wrap a template that has to keep element state in <code>keyed(ctx.data, ...)</code> from <code>lit/directives/keyed.js</code>. The state then never shows on the wrong record, but it is rebuilt every time the row shows another record, including after a sort or <code>moveRow</code>.</li>
|
|
516
|
+
<li>Code that holds <code>grid.rows</code> elements across a scroll or a sort should read each element's <code>data</code> again rather than assume it still shows the same record.</li>
|
|
517
|
+
</ul>
|
|
518
|
+
<p>Set <code>rowRecycling</code> to <code>false</code> (or the <code>row-recycling="false"</code> attribute) to restore record-keyed rows, where each row element stays with its record. Do that for templates that must keep element state across a sort or a move, such as some third-party widgets.</p>
|
|
519
|
+
<p>Detail templates are different: their content follows its record into whichever row shows it, and keeps its DOM state (typed text, a nested grid's sort) across a scroll within the rendered rows, a sort or a <code>moveRow</code>, so it needs neither <code>keyed()</code> nor the opt-out. It is rebuilt when the record leaves the rendered rows or is collapsed, as before. <code>ctx.parent</code> in a detail context is the grid itself. A grid created inside a <code>detailTemplate</code> has its own <code>rowRecycling</code> setting, so set it there too when you opt out.</p>
|
|
441
520
|
<h3 id="state-persistence" class="tsd-anchor-link">State & persistence<a href="#state-persistence" 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>
|
|
442
521
|
<p><code>getState()</code> returns a JSON-safe snapshot of the grid's restorable view and <code>setState()</code> applies one back. The snapshot covers column layout (order, width, pinning, visibility), sort, filter, quick filter, pagination, selection, expansion, tree expansion, pinned rows, the manual drag-reorder order, and any feature-module state (enterprise grouping / pivot / aggregation / ranges). Functions and templates are never serialized: sort comparers, filter condition functions, and cell/header/editor templates re-bind from the live <code>columns</code> config on restore (filter conditions are captured by operand name).</p>
|
|
443
522
|
<pre><code class="js"><span class="hl-15">// Save and restore a view.</span><br/><span class="hl-2">localStorage</span><span class="hl-1">.</span><span class="hl-4">setItem</span><span class="hl-1">(</span><span class="hl-3">'view'</span><span class="hl-1">, </span><span class="hl-7">JSON</span><span class="hl-1">.</span><span class="hl-4">stringify</span><span class="hl-1">(</span><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">getState</span><span class="hl-1">()));</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">setState</span><span class="hl-1">(</span><span class="hl-7">JSON</span><span class="hl-1">.</span><span class="hl-4">parse</span><span class="hl-1">(</span><span class="hl-2">localStorage</span><span class="hl-1">.</span><span class="hl-4">getItem</span><span class="hl-1">(</span><span class="hl-3">'view'</span><span class="hl-1">)));</span><br/><br/><span class="hl-15">// Persist automatically: stateChanged fires (debounced) after every settled</span><br/><span class="hl-15">// change, and only while something is listening.</span><br/><span class="hl-2">grid</span><span class="hl-1">.</span><span class="hl-4">addEventListener</span><span class="hl-1">(</span><span class="hl-3">'stateChanged'</span><span class="hl-1">, (</span><span class="hl-2">e</span><span class="hl-1">) </span><span class="hl-5">=></span><br/><span class="hl-1"> </span><span class="hl-2">localStorage</span><span class="hl-1">.</span><span class="hl-4">setItem</span><span class="hl-1">(</span><span class="hl-3">'view'</span><span class="hl-1">, </span><span class="hl-7">JSON</span><span class="hl-1">.</span><span class="hl-4">stringify</span><span class="hl-1">(</span><span class="hl-2">e</span><span class="hl-1">.</span><span class="hl-2">detail</span><span class="hl-1">.</span><span class="hl-2">state</span><span class="hl-1">))</span><br/><span class="hl-1">);</span>
|
|
@@ -488,7 +567,7 @@ on the side the cursor actually crossed.</p>
|
|
|
488
567
|
<td><code>dataPipelineConfiguration</code></td>
|
|
489
568
|
<td><code>DataPipelineConfiguration<T></code></td>
|
|
490
569
|
<td></td>
|
|
491
|
-
<td>Custom sort
|
|
570
|
+
<td>Custom sort, filter and quick filter hooks</td>
|
|
492
571
|
</tr>
|
|
493
572
|
<tr>
|
|
494
573
|
<td><code>pagination</code></td>
|
|
@@ -575,6 +654,30 @@ on the side the cursor actually crossed.</p>
|
|
|
575
654
|
<td>Show the always-visible column-menu (kebab) button on headers; <code>false</code> hides it</td>
|
|
576
655
|
</tr>
|
|
577
656
|
<tr>
|
|
657
|
+
<td><code>showHeader</code></td>
|
|
658
|
+
<td><code>boolean</code></td>
|
|
659
|
+
<td><code>true</code></td>
|
|
660
|
+
<td><code>false</code> hides the header rows (kept for screen readers). Attr <code>show-header="false"</code></td>
|
|
661
|
+
</tr>
|
|
662
|
+
<tr>
|
|
663
|
+
<td><code>designSystem</code></td>
|
|
664
|
+
<td><code>boolean</code></td>
|
|
665
|
+
<td><code>true</code></td>
|
|
666
|
+
<td>With the <code>apex-grid/ignite-ui</code> add-on, <code>false</code> turns the Ignite UI colours and font off for this grid (the variant still picks the mode). Reflected as <code>design-system="off"</code></td>
|
|
667
|
+
</tr>
|
|
668
|
+
<tr>
|
|
669
|
+
<td><code>tokens</code></td>
|
|
670
|
+
<td><code>boolean</code></td>
|
|
671
|
+
<td><code>true</code></td>
|
|
672
|
+
<td><code>false</code> turns the family <code>--apx-*</code> tokens (and, with the add-on, Ignite UI) off for this grid and its content. Reflected as <code>tokens="off"</code></td>
|
|
673
|
+
</tr>
|
|
674
|
+
<tr>
|
|
675
|
+
<td><code>rowRecycling</code></td>
|
|
676
|
+
<td><code>boolean</code></td>
|
|
677
|
+
<td><code>true</code></td>
|
|
678
|
+
<td>Re-binds body row elements across records on scroll, sort and filter; <code>false</code> restores record-keyed rows. See <a href="#row-recycling">Row recycling</a>. Attr <code>row-recycling="false"</code></td>
|
|
679
|
+
</tr>
|
|
680
|
+
<tr>
|
|
578
681
|
<td><code>rowId</code></td>
|
|
579
682
|
<td><code>(row: T) => string | number</code></td>
|
|
580
683
|
<td></td>
|
|
@@ -753,7 +856,7 @@ on the side the cursor actually crossed.</p>
|
|
|
753
856
|
</table>
|
|
754
857
|
<p>Programmatic <code>sort()</code> / <code>filter()</code> calls are silent; only UI-initiated changes emit <code>sorting</code> / <code>filtering</code>.</p>
|
|
755
858
|
<h3 id="attributes" class="tsd-anchor-link">Attributes<a href="#attributes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
756
|
-
<p><code>auto-generate</code>, <code>quick-filter</code>, <code>show-quick-filter</code>, <code>show-export</code>, <code>column-reordering</code>, <code>coordinate-hints</code
|
|
859
|
+
<p><code>auto-generate</code>, <code>quick-filter</code>, <code>show-quick-filter</code>, <code>show-export</code>, <code>column-reordering</code>, <code>coordinate-hints</code>, <code>show-header</code>, <code>row-recycling</code>. Theming: <code>theme</code> (<code>dark</code>, <code>light</code>, <code>tinted</code>), <code>tokens="off"</code> and, with the <code>apex-grid/ignite-ui</code> add-on, <code>design-system="off"</code> (see <a href="#3-optional-customize-the-look">Customize the look</a>).</p>
|
|
757
860
|
<h3 id="css-parts" class="tsd-anchor-link">CSS parts<a href="#css-parts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>
|
|
758
861
|
<table>
|
|
759
862
|
<thead>
|
|
@@ -765,11 +868,11 @@ on the side the cursor actually crossed.</p>
|
|
|
765
868
|
<tbody>
|
|
766
869
|
<tr>
|
|
767
870
|
<td><code><apex-grid-toolbar></code></td>
|
|
768
|
-
<td><code>toolbar</code>, <code>toolbar-search</code>, <code>search-field</code>, <code>search-icon</code>, <code>search-input</code>, <code>toolbar-actions</code>, <code>export-trigger</code>, <code>export-menu</code>, <code>export-menu-item</code
|
|
871
|
+
<td><code>toolbar</code>, <code>toolbar-search</code>, <code>search-field</code>, <code>search-icon</code>, <code>search-input</code>, <code>toolbar-actions</code>, <code>toolbar-action</code>, <code>export</code>, <code>export-trigger</code>, <code>export-icon</code>, <code>export-caret</code>, <code>export-menu</code>, <code>export-menu-item</code> (re-exported by the grid, which names the element <code>toolbar-host</code>)</td>
|
|
769
872
|
</tr>
|
|
770
873
|
<tr>
|
|
771
874
|
<td><code><apex-grid-paginator></code></td>
|
|
772
|
-
<td><code>paginator</code>, <code>paginator-size</code>, <code>paginator-info</code>, <code>paginator-controls</code>, <code>paginator-page</code
|
|
875
|
+
<td><code>paginator</code>, <code>paginator-size</code>, <code>paginator-info</code>, <code>paginator-controls</code>, <code>paginator-page</code>, <code>paginator-button</code>, <code>paginator-first</code>, <code>paginator-prev</code>, <code>paginator-next</code>, <code>paginator-last</code> (re-exported by the grid, which names the element <code>paginator-host</code>)</td>
|
|
773
876
|
</tr>
|
|
774
877
|
<tr>
|
|
775
878
|
<td><code><apex-grid-cell></code></td>
|
|
@@ -826,4 +929,4 @@ on the side the cursor actually crossed.</p>
|
|
|
826
929
|
<p>Any push whose head commit does not start with <code>release:</code> is a no-op for the workflow.</p>
|
|
827
930
|
<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>
|
|
828
931
|
<p>See <a href="LICENSE">LICENSE</a>.</p>
|
|
829
|
-
</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>
|
|
932
|
+
</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="#hiding-the-header"><span>Hiding the header</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="#row-recycling"><span>Row recycling</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>
|
|
@@ -6,5 +6,7 @@
|
|
|
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 tsd-is-inherited"><h3 class="tsd-anchor-link" id="page"><span>page</span><a href="#page" 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">page</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The current page (zero-based).</p>
|
|
7
7
|
</div><aside class="tsd-sources"><p>Inherited from <a href="PaginationState.html">PaginationState</a>.<a href="PaginationState.html#page">page</a></p></aside></section><section class="tsd-panel tsd-member tsd-is-inherited"><h3 class="tsd-anchor-link" id="pagecount"><span>page<wbr/>Count</span><a href="#pagecount" 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">pageCount</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The total number of pages.</p>
|
|
8
8
|
</div><aside class="tsd-sources"><p>Inherited from <a href="PaginationState.html">PaginationState</a>.<a href="PaginationState.html#pagecount">pageCount</a></p></aside></section><section class="tsd-panel tsd-member tsd-is-inherited"><h3 class="tsd-anchor-link" id="pagesize"><span>page<wbr/>Size</span><a href="#pagesize" 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">pageSize</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The number of records per page.</p>
|
|
9
|
-
</div><aside class="tsd-sources"><p>Inherited from <a href="PaginationState.html">PaginationState</a>.<a href="PaginationState.html#pagesize">pageSize</a></p></aside></section><section class="tsd-panel tsd-member tsd-is-inherited"><h3 class="tsd-anchor-link" id="totalitems"><span>total<wbr/>Items</span><a href="#totalitems" 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">totalItems</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The
|
|
9
|
+
</div><aside class="tsd-sources"><p>Inherited from <a href="PaginationState.html">PaginationState</a>.<a href="PaginationState.html#pagesize">pageSize</a></p></aside></section><section class="tsd-panel tsd-member tsd-is-inherited"><h3 class="tsd-anchor-link" id="totalitems"><span>total<wbr/>Items</span><a href="#totalitems" 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">totalItems</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The post-filter, post-sort row count. With pagination enabled, the rows paged
|
|
10
|
+
through: rows pinned to the top or bottom (they show on every page) are left out.
|
|
11
|
+
In <code>'remote'</code> mode, the <a href="PaginationConfiguration.html#totalitems" class="tsd-kind-property">PaginationConfiguration.totalItems</a> you supplied.</p>
|
|
10
12
|
</div><aside class="tsd-sources"><p>Inherited from <a href="PaginationState.html">PaginationState</a>.<a href="PaginationState.html#totalitems">totalItems</a></p></aside></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="#page" class="tsd-is-inherited"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>page</span></a><a href="#pagecount" class="tsd-is-inherited"><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/>Count</span></a><a href="#pagesize" class="tsd-is-inherited"><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/>Size</span></a><a href="#totalitems" class="tsd-is-inherited"><svg class="tsd-kind-icon" viewBox="0 0 24 24" aria-label="Property"><use href="../assets/icons.svg#icon-1024"></use></svg><span>total<wbr/>Items</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>
|