{"$schema":"https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json","version":1.1,"tags":[{"name":"ids-about","attributes":[{"name":"aria-label-content","description":"Used for ARIA Labels and other content","values":[]},{"name":"app-name","description":"Set the app name property","values":[]},{"name":"product-name","description":"Set the product name property","values":[]},{"name":"product-version","description":"Set the product version property","values":[]},{"name":"device-specs","description":"Sets whether or not to display device information.","values":[]},{"name":"copyright-year","description":"Set the copyright year property","values":[]},{"name":"use-default-copyright","description":"Sets whether or not to display Legal Approved Infor Copyright Text","values":[]}],"description":{"kind":"markdown","value":"# ids-about\n\nProvides information about a product with copyright and browser information.\n\nids-about builds on top of the [ids-modal](../ids-modal/README.md)\n\n## Settings (Attributes)\n\n- `product-name` {string} product name information to display\n- `product-version` {string} semantic product version number\n- `copyright-year` {string} the year displayed in the copyright, defaults to current year\n- `use-default-copyright` {boolean} whether or not to display legal approved Infor copyright text\n- `device-specs` {boolean} whether or not to display device / browser information\n\n## Slots\n\n- `slot=\"icon\"` - appears at the top of the modal, centered\n- `slot=\"appName\"` - appears at the top of the modal, below icon, centered\n- `slot=\"content\"` - additional content appears below product name/version, about copyright\n\n## Features (With Code Examples)\n\nExample with application name, product name, product version and logo:\n\n```html\n\n \n Application Name\n Additional content\n\n```\n\nExample with only copyright text and browser/device information:\n\n```html\n\n\n```\n\nExample with custom copyright year, no application name or product information:\n\n```html\n\n\n```\n\nExample with no copyright info and no device information, but with product name/version:\n\n```html\n\n Application Name\n\n```\n\nThe component can be controlled with JavaScript:\n\n```js\nconst about = document.querySelector('#about-example');\n\nabout.productVersion = 'Changed version';\nabout.productName = 'Changed product';\nabout.copyrightYear = '2020';\nabout.deviceSpecs = false;\nabout.useDefaultCopyright = false;\n```\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Replace `.inforAboutDialog()` with `.about()` and notice that many of the names of the settings (e.g. productName to appName) to have changed so must be updated to the new settings.\n\n**4.x to 5.x**\n- About now uses all new markup and classes for web components (see above)\n- Cookies and full OS information (like version) has been removed to adhere to more modern browser standards and lack of availability of these features in modern browsers.\n- The `version` has been renamed to `productVersion`\n- The `close` method has been removed use `$('ids-about').visible = false` instead\n- The `destroy` method has been removed since everything is now cleaned up when removing the DOM element\n- The `close/open` events have been named to `show/hide`\n"}},{"name":"ids-action-sheet","attributes":[{"name":"overlay","values":[]},{"name":"cancel-btn","values":[]},{"name":"visible","description":"Set the visible attribute","values":[]},{"name":"cancel-btn-text","description":"Set the btn text attribute","values":[]}],"description":{"kind":"markdown","value":"# ids-action-sheet\n\n## Description\n\nThe IDS Action Sheet `ids-action-sheet` component displays a mobile-friendly view of a menu, which appears to roll out from the bottom of the viewport and can easily be selected by touch.\n\n## Use Cases\n\nThe main use case for the IDS Action Sheet component is to display a mobile-friendly menu. By default the action sheet only show on screens at the `sm` (600px) breakpoint. This could be expanded in the future or possibly disabled to allow for the action sheet to show on desktop screens.\n\n## Terminology\n\n- **ids-action-sheet**: The action sheet container. Consists of an `ids-overlay` and an unnamed `slot` which will contain the menu.\n- **cancel-button**: The cancel button will close the action sheet. The default text of the button is \"Cancel\", but can be override with the `cancelBtnText` attribute.\n\n## Features (With Code Examples)\n\n```html\n\n \n \n Option One\n Option Two\n Option Three\n \n \n\n```\n\n## States and Variations\n\n- **visible**: The state where the action sheet is visible. Can be set by the `visible` attribute.\n\n## Keyboard Guidelines\n\n- **Enter or Space**: The menu items as well as the cancel btn are actionable via the `Enter` and `Space` keys\n\n## Converting from Previous Versions (Breaking Changes)\n\n**4.x to 5.x**\n- Action Sheet now uses all new markup and classes for web components (see above)\n- Now called IdsActionSheet with a namespace\n- The tray feature has not been added it is now replaced by a floating action button.\n"}},{"name":"ids-accordion-common","description":{"kind":"markdown","value":"# ids-accordion\n\n## Description\n\nThe IDS Accordion component is a UI pattern that is comprised of a stacked list of elements. A basic accordion will consist of a `ids-accordion-header` which shows a title or summary of the `ids-accordion-panel` and acts as a control for expanding and collapsing. Note: Standalone Css is not available for this component.\n\n## Use Cases\n\n- Can be used to conserve space, by hiding information until needed. Accordions can be commonly seen on mobile sites and applications. It can help tell the user what the page is about and allows the user to select and see what is needed.\n- Can be used for navigation. The accordion is the main interactive element inside of the [App Menu](../ids-app-menu/README.md)\n\n## Terminology\n\n- **ids-accordion** Parent container for all accordions\n- **ids-accordion-panel** First child of and accordion. Contains the header and content area. Contains 2 slots, the `header` and the `pane`.\n- **ids-accordion-header** Typically used in the header slot, contains the title and acts as the control for expanding and collapsing.\n\n## Features (With Code Examples)\n\nStandard accordion, most commonly used:\n\n```html\n\n \n \n Warehouse Location\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain, deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Sort By\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Brand Name\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Material\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n\n```\n\n### Nested Accordions\n\nIt's possible to nest accordion structures. This is common in accordions used for navigation purposes, such as the ones applied to the [App Menu](../ids-app-menu/README.md).\n\nIn the example below, the \"My Benefits\", \"Dependents and Beneficiaries\", \"Life Events\", and \"Benefits Information\" panels are nested beneath the \"Benefits\" panel, which is nested beneath the \"Employee\" panel.\n\n```html\n\n \n \n \n Employee\n \n \n \n Benefits\n \n \n \n My Benefits\n \n \n \n \n Dependents and Beneficiaries\n \n \n \n \n Life Events\n \n \n \n \n Benefits Information\n \n \n \n \n\n```\n\n## Class Hierarchy\n\n- IdsAccordion\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n- IdsAccordionHeader\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n- IdsAccordionPanel\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n IdsEventsMixin\n\n## Settings (Attributes)\n\nWhen used as an attribute the settings are kebab case, when used in the JS they are camel case.\n\n### IdsAccordion\n\n- `headers` {Array} Reference to all inner Accordion Headers.\n- `panels` {Array} Reference to all inner Accordion Panels.\n- `focused` {HTMLElement} Reference to the currently-focused element within the accordion, if applicable.\n- `allowOnePane` {boolean} Sets Accordion to allow only one inner Accordion Panel to be expanded at a time.\n- `keepExpanderPlacement` {boolean} Sets the Accordion to display sub-level expander icons as carets.\n- `closeChildren` {boolean} When true, Children will be collapsed when their parent has been collapsed.\n- `borderless` {boolean} When set to `true`, removes borders from headers when expanded (root level) or always (nested levels). Can also be set on individual headers.\n- `hidden` {boolean} Hides the element from display.\n- `toggleOnIcon` {boolean} When set to `true`, restricts toggle behavior to only occur when clicking the expander icon, not the entire header area. This is useful when you need custom selection logic on the header without conflicting with the toggle behavior.\n\n### IdsAccordionHeader\n\n- `borderless` {boolean} When set to `true`, removes the bottom border from the header when expanded (root level) or always (nested). Default is `false` (border is shown).\n- `disabled` {boolean} When set to `true`, disables the header interaction.\n- `expanded` {boolean} Reflects whether the associated panel is expanded.\n- `expanderType` {string} Type of expander icon to use (`'caret'` or `'plus-minus'`).\n- `headerFill` {boolean} When set to `true`, adds a background fill to the header.\n- `hidden` {boolean} Hides the element from display.\n- `icon` {string} Icon to display in the header.\n- `selected` {boolean} When set to `true`, marks the header as selected.\n\n### IdsAccordionPanel\n\n- `hidden` {boolean} Hides the element from display.\n- `iconAlign` {string} Position of the caret icon (`'start'` or `'end'`). Default is `'end'`.\n\n### IdsAccordionSection\n\n- `hidden` {boolean} Hides the element from display.\n\n## Events\n\n- `selected` Fire at the time the ids-accordion-panel element is selected, used for App-Menu. Detail contains the element `elem`\n- `beforeexpanded` Fires on the ids-accordion-header before the panel begins to expand. Useful for performing actions before the animation starts.\n- `expanded` Fires on the ids-accordion-header immediately when the panel state changes to expanded. Detail contains the element `elem`\n- `afterexpanded` Fires on the ids-accordion-header after the expand animation completes. Useful for performing actions after the animation finishes.\n- `beforecollapsed` Fires on the ids-accordion-header before the panel begins to collapse. Useful for performing actions before the animation starts.\n- `collapsed` Fires on the ids-accordion-header immediately when the panel state changes to collapsed. Detail contains the element `elem`\n- `aftercollapsed` Fires on the ids-accordion-header after the collapse animation completes. Useful for performing actions after the animation finishes.\n\n### Event Examples\n\nListen for expand/collapse events on the accordion:\n\n```javascript\nconst accordion = document.querySelector('ids-accordion');\n\n// Fires before animation starts\naccordion.addEventListener('beforeexpanded', (e) => {\n console.log('Panel expanding:', e.target.id);\n});\n\n// Fires immediately when state changes\naccordion.addEventListener('expanded', (e) => {\n console.log('Panel expanded:', e.target.id);\n});\n\n// Fires after animation completes\naccordion.addEventListener('afterexpanded', (e) => {\n console.log('Expand animation complete:', e.target.id);\n});\n\n// Similar events for collapse\naccordion.addEventListener('beforecollapsed', (e) => {\n console.log('Panel collapsing:', e.target.id);\n});\n\naccordion.addEventListener('collapsed', (e) => {\n console.log('Panel collapsed:', e.target.id);\n});\n\naccordion.addEventListener('aftercollapsed', (e) => {\n console.log('Collapse animation complete:', e.target.id);\n});\n```\n\n## Methods\n\n- IdsAccordion\n - `navigate` Navigate to the next/prev panel\n- IdsAccordionPanel\n - `collapsePane` Collapse pane\n - `expandPane` Expand pane\n - `select` Select header and focus it\n - `focus` Set focus on header\n\n## Themeable Parts\n\n- `accordion` Accordion root element\n\n## States and Variations\n\nThe Accordion's headers support the following states:\n\n- Normal/Default: This is the default of an accordion.\n- Hover: Roll over an interactive element inside the accordion\n- Disabled: Disabled elements can be inside an accordion. These cards cannot be clicked, hovered or focused.\n- Focus: For accessibility. To give a user guidance when using a screen reader.\n- Active/Selected: After the pressed/clicked state, users are taken to the active state. This includes expanding or closing an accordion.\n\n## Keyboard Guidelines\n\n- **Shift+Tab**: Works the same as Tab, but in the opposite direction. When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion Header or Tab page. When focus reaches the last header/tab page, further key presses will have optionally wrap to the first header\n- **Up Arrow or Left Arrow**: When focus is on the tab or accordion header, a press of up/left will move focus to the previous logical accordion header or tab page. When focus reaches the first header/tab page, further key presses will optionally wrap to the last header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Down Arrow or Right Arrow**: When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion header or tab page. When focus reaches the last header/tab page, further key presses will optionally wrap to the first header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Enter or Space**: When focus is on an accordion header, this keystroke toggles the expansion of the corresponding panel. If collapsed, the panel is expanded, and its aria-expanded state is set to true. If expanded, the panel is collapsed and its aria-expanded state is set to false.\n\n## Accessibility\n\nThe IDS Accordion component has a `role=\"region\"` and a unique `title` is generated for each instance.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Replace `.inforAboutDialog()` with `.about()` and notice that many of the names of the settings (e.g. productName to appName) to have changed so must be updated to the new settings.\n- The initial markup is changed considerably from the previous version. Sync the markup using the markup above\n- Initialize the accordion plugin with .accordion() as opposed to `.inforAccordion()` or by using the page initializer\nonExpanded and onCollapsed option are done with events (expanded and collapsed)\n\n**4.x to 5.x**\n- Accordion now uses all new markup and classes for web components (see above)\n- Now called IdsAccordion with a namespace\n- The \"Panels\" examples are removed and deprecated as they should rarely be used.\n- The deprecated `displayChevron` setting is removed.\n- The `enableTooltips` removed and deprecated as not added as it seems no longer relevant.\n- The `expanderDisplay` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed.\n- The `rerouteOnLinkClick` option was removed and deprecated as is no longer needed as there are no links in the markup now.\n- The `source` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed in accordion but will be added to IdsAppMenu.\n- The `destroy` method has been removed since everything is now cleaned up when removing the DOM element\n"}},{"name":"ids-accordion-header","attributes":[{"name":"depth","values":[]},{"name":"color-variants","values":[]},{"name":"parent-has-icon","values":[]},{"name":"siblings-can-expand","values":[]},{"name":"text-node","values":[]},{"name":"panel","values":[]},{"name":"expanded","values":[]},{"name":"expander-type","values":[]},{"name":"icon","values":[]},{"name":"selected","values":[]},{"name":"accordion","values":[]},{"name":"hidden-by-filter","values":[]},{"name":"child-filter-match","values":[]},{"name":"disabled","description":"Sets disabled property","values":[]},{"name":"header-fill","description":"Gets header fill property","values":[]},{"name":"borderless","description":"Gets borderless property","values":[]}],"description":{"kind":"markdown","value":"# ids-accordion\n\n## Description\n\nThe IDS Accordion component is a UI pattern that is comprised of a stacked list of elements. A basic accordion will consist of a `ids-accordion-header` which shows a title or summary of the `ids-accordion-panel` and acts as a control for expanding and collapsing. Note: Standalone Css is not available for this component.\n\n## Use Cases\n\n- Can be used to conserve space, by hiding information until needed. Accordions can be commonly seen on mobile sites and applications. It can help tell the user what the page is about and allows the user to select and see what is needed.\n- Can be used for navigation. The accordion is the main interactive element inside of the [App Menu](../ids-app-menu/README.md)\n\n## Terminology\n\n- **ids-accordion** Parent container for all accordions\n- **ids-accordion-panel** First child of and accordion. Contains the header and content area. Contains 2 slots, the `header` and the `pane`.\n- **ids-accordion-header** Typically used in the header slot, contains the title and acts as the control for expanding and collapsing.\n\n## Features (With Code Examples)\n\nStandard accordion, most commonly used:\n\n```html\n\n \n \n Warehouse Location\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain, deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Sort By\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Brand Name\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Material\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n\n```\n\n### Nested Accordions\n\nIt's possible to nest accordion structures. This is common in accordions used for navigation purposes, such as the ones applied to the [App Menu](../ids-app-menu/README.md).\n\nIn the example below, the \"My Benefits\", \"Dependents and Beneficiaries\", \"Life Events\", and \"Benefits Information\" panels are nested beneath the \"Benefits\" panel, which is nested beneath the \"Employee\" panel.\n\n```html\n\n \n \n \n Employee\n \n \n \n Benefits\n \n \n \n My Benefits\n \n \n \n \n Dependents and Beneficiaries\n \n \n \n \n Life Events\n \n \n \n \n Benefits Information\n \n \n \n \n\n```\n\n## Class Hierarchy\n\n- IdsAccordion\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n- IdsAccordionHeader\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n- IdsAccordionPanel\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n IdsEventsMixin\n\n## Settings (Attributes)\n\nWhen used as an attribute the settings are kebab case, when used in the JS they are camel case.\n\n### IdsAccordion\n\n- `headers` {Array} Reference to all inner Accordion Headers.\n- `panels` {Array} Reference to all inner Accordion Panels.\n- `focused` {HTMLElement} Reference to the currently-focused element within the accordion, if applicable.\n- `allowOnePane` {boolean} Sets Accordion to allow only one inner Accordion Panel to be expanded at a time.\n- `keepExpanderPlacement` {boolean} Sets the Accordion to display sub-level expander icons as carets.\n- `closeChildren` {boolean} When true, Children will be collapsed when their parent has been collapsed.\n- `borderless` {boolean} When set to `true`, removes borders from headers when expanded (root level) or always (nested levels). Can also be set on individual headers.\n- `hidden` {boolean} Hides the element from display.\n- `toggleOnIcon` {boolean} When set to `true`, restricts toggle behavior to only occur when clicking the expander icon, not the entire header area. This is useful when you need custom selection logic on the header without conflicting with the toggle behavior.\n\n### IdsAccordionHeader\n\n- `borderless` {boolean} When set to `true`, removes the bottom border from the header when expanded (root level) or always (nested). Default is `false` (border is shown).\n- `disabled` {boolean} When set to `true`, disables the header interaction.\n- `expanded` {boolean} Reflects whether the associated panel is expanded.\n- `expanderType` {string} Type of expander icon to use (`'caret'` or `'plus-minus'`).\n- `headerFill` {boolean} When set to `true`, adds a background fill to the header.\n- `hidden` {boolean} Hides the element from display.\n- `icon` {string} Icon to display in the header.\n- `selected` {boolean} When set to `true`, marks the header as selected.\n\n### IdsAccordionPanel\n\n- `hidden` {boolean} Hides the element from display.\n- `iconAlign` {string} Position of the caret icon (`'start'` or `'end'`). Default is `'end'`.\n\n### IdsAccordionSection\n\n- `hidden` {boolean} Hides the element from display.\n\n## Events\n\n- `selected` Fire at the time the ids-accordion-panel element is selected, used for App-Menu. Detail contains the element `elem`\n- `beforeexpanded` Fires on the ids-accordion-header before the panel begins to expand. Useful for performing actions before the animation starts.\n- `expanded` Fires on the ids-accordion-header immediately when the panel state changes to expanded. Detail contains the element `elem`\n- `afterexpanded` Fires on the ids-accordion-header after the expand animation completes. Useful for performing actions after the animation finishes.\n- `beforecollapsed` Fires on the ids-accordion-header before the panel begins to collapse. Useful for performing actions before the animation starts.\n- `collapsed` Fires on the ids-accordion-header immediately when the panel state changes to collapsed. Detail contains the element `elem`\n- `aftercollapsed` Fires on the ids-accordion-header after the collapse animation completes. Useful for performing actions after the animation finishes.\n\n### Event Examples\n\nListen for expand/collapse events on the accordion:\n\n```javascript\nconst accordion = document.querySelector('ids-accordion');\n\n// Fires before animation starts\naccordion.addEventListener('beforeexpanded', (e) => {\n console.log('Panel expanding:', e.target.id);\n});\n\n// Fires immediately when state changes\naccordion.addEventListener('expanded', (e) => {\n console.log('Panel expanded:', e.target.id);\n});\n\n// Fires after animation completes\naccordion.addEventListener('afterexpanded', (e) => {\n console.log('Expand animation complete:', e.target.id);\n});\n\n// Similar events for collapse\naccordion.addEventListener('beforecollapsed', (e) => {\n console.log('Panel collapsing:', e.target.id);\n});\n\naccordion.addEventListener('collapsed', (e) => {\n console.log('Panel collapsed:', e.target.id);\n});\n\naccordion.addEventListener('aftercollapsed', (e) => {\n console.log('Collapse animation complete:', e.target.id);\n});\n```\n\n## Methods\n\n- IdsAccordion\n - `navigate` Navigate to the next/prev panel\n- IdsAccordionPanel\n - `collapsePane` Collapse pane\n - `expandPane` Expand pane\n - `select` Select header and focus it\n - `focus` Set focus on header\n\n## Themeable Parts\n\n- `accordion` Accordion root element\n\n## States and Variations\n\nThe Accordion's headers support the following states:\n\n- Normal/Default: This is the default of an accordion.\n- Hover: Roll over an interactive element inside the accordion\n- Disabled: Disabled elements can be inside an accordion. These cards cannot be clicked, hovered or focused.\n- Focus: For accessibility. To give a user guidance when using a screen reader.\n- Active/Selected: After the pressed/clicked state, users are taken to the active state. This includes expanding or closing an accordion.\n\n## Keyboard Guidelines\n\n- **Shift+Tab**: Works the same as Tab, but in the opposite direction. When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion Header or Tab page. When focus reaches the last header/tab page, further key presses will have optionally wrap to the first header\n- **Up Arrow or Left Arrow**: When focus is on the tab or accordion header, a press of up/left will move focus to the previous logical accordion header or tab page. When focus reaches the first header/tab page, further key presses will optionally wrap to the last header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Down Arrow or Right Arrow**: When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion header or tab page. When focus reaches the last header/tab page, further key presses will optionally wrap to the first header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Enter or Space**: When focus is on an accordion header, this keystroke toggles the expansion of the corresponding panel. If collapsed, the panel is expanded, and its aria-expanded state is set to true. If expanded, the panel is collapsed and its aria-expanded state is set to false.\n\n## Accessibility\n\nThe IDS Accordion component has a `role=\"region\"` and a unique `title` is generated for each instance.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Replace `.inforAboutDialog()` with `.about()` and notice that many of the names of the settings (e.g. productName to appName) to have changed so must be updated to the new settings.\n- The initial markup is changed considerably from the previous version. Sync the markup using the markup above\n- Initialize the accordion plugin with .accordion() as opposed to `.inforAccordion()` or by using the page initializer\nonExpanded and onCollapsed option are done with events (expanded and collapsed)\n\n**4.x to 5.x**\n- Accordion now uses all new markup and classes for web components (see above)\n- Now called IdsAccordion with a namespace\n- The \"Panels\" examples are removed and deprecated as they should rarely be used.\n- The deprecated `displayChevron` setting is removed.\n- The `enableTooltips` removed and deprecated as not added as it seems no longer relevant.\n- The `expanderDisplay` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed.\n- The `rerouteOnLinkClick` option was removed and deprecated as is no longer needed as there are no links in the markup now.\n- The `source` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed in accordion but will be added to IdsAppMenu.\n- The `destroy` method has been removed since everything is now cleaned up when removing the DOM element\n"}},{"name":"ids-accordion-panel","attributes":[{"name":"pane-open-listener","values":[]},{"name":"pane-close-listener","values":[]},{"name":"#cascaded-disabled-elements","description":"Tracks elements disabled by this cascade to preserve pre-existing disabled state.","values":[]},{"name":"color-variants","values":[]},{"name":"vetoable-event-types","values":[]},{"name":"content-alignment","description":"Sets a CSS class containing alignment rules for text/icons/images on this accordion panel","values":[]},{"name":"accordion","values":[]},{"name":"header","values":[]},{"name":"expander","values":[]},{"name":"pane","values":[]},{"name":"child-panels","values":[]},{"name":"has-parent-panel","values":[]},{"name":"parent-expanded","values":[]},{"name":"is-expandable","values":[]},{"name":"#expanded","values":[]},{"name":"expanded","description":"Get the expanded property","values":[]},{"name":"nested","values":[]},{"name":"disabled","description":"Sets disabled property","values":[]},{"name":"toggle-on-icon","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# ids-accordion\n\n## Description\n\nThe IDS Accordion component is a UI pattern that is comprised of a stacked list of elements. A basic accordion will consist of a `ids-accordion-header` which shows a title or summary of the `ids-accordion-panel` and acts as a control for expanding and collapsing. Note: Standalone Css is not available for this component.\n\n## Use Cases\n\n- Can be used to conserve space, by hiding information until needed. Accordions can be commonly seen on mobile sites and applications. It can help tell the user what the page is about and allows the user to select and see what is needed.\n- Can be used for navigation. The accordion is the main interactive element inside of the [App Menu](../ids-app-menu/README.md)\n\n## Terminology\n\n- **ids-accordion** Parent container for all accordions\n- **ids-accordion-panel** First child of and accordion. Contains the header and content area. Contains 2 slots, the `header` and the `pane`.\n- **ids-accordion-header** Typically used in the header slot, contains the title and acts as the control for expanding and collapsing.\n\n## Features (With Code Examples)\n\nStandard accordion, most commonly used:\n\n```html\n\n \n \n Warehouse Location\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain, deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Sort By\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Brand Name\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Material\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n\n```\n\n### Nested Accordions\n\nIt's possible to nest accordion structures. This is common in accordions used for navigation purposes, such as the ones applied to the [App Menu](../ids-app-menu/README.md).\n\nIn the example below, the \"My Benefits\", \"Dependents and Beneficiaries\", \"Life Events\", and \"Benefits Information\" panels are nested beneath the \"Benefits\" panel, which is nested beneath the \"Employee\" panel.\n\n```html\n\n \n \n \n Employee\n \n \n \n Benefits\n \n \n \n My Benefits\n \n \n \n \n Dependents and Beneficiaries\n \n \n \n \n Life Events\n \n \n \n \n Benefits Information\n \n \n \n \n\n```\n\n## Class Hierarchy\n\n- IdsAccordion\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n- IdsAccordionHeader\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n- IdsAccordionPanel\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n IdsEventsMixin\n\n## Settings (Attributes)\n\nWhen used as an attribute the settings are kebab case, when used in the JS they are camel case.\n\n### IdsAccordion\n\n- `headers` {Array} Reference to all inner Accordion Headers.\n- `panels` {Array} Reference to all inner Accordion Panels.\n- `focused` {HTMLElement} Reference to the currently-focused element within the accordion, if applicable.\n- `allowOnePane` {boolean} Sets Accordion to allow only one inner Accordion Panel to be expanded at a time.\n- `keepExpanderPlacement` {boolean} Sets the Accordion to display sub-level expander icons as carets.\n- `closeChildren` {boolean} When true, Children will be collapsed when their parent has been collapsed.\n- `borderless` {boolean} When set to `true`, removes borders from headers when expanded (root level) or always (nested levels). Can also be set on individual headers.\n- `hidden` {boolean} Hides the element from display.\n- `toggleOnIcon` {boolean} When set to `true`, restricts toggle behavior to only occur when clicking the expander icon, not the entire header area. This is useful when you need custom selection logic on the header without conflicting with the toggle behavior.\n\n### IdsAccordionHeader\n\n- `borderless` {boolean} When set to `true`, removes the bottom border from the header when expanded (root level) or always (nested). Default is `false` (border is shown).\n- `disabled` {boolean} When set to `true`, disables the header interaction.\n- `expanded` {boolean} Reflects whether the associated panel is expanded.\n- `expanderType` {string} Type of expander icon to use (`'caret'` or `'plus-minus'`).\n- `headerFill` {boolean} When set to `true`, adds a background fill to the header.\n- `hidden` {boolean} Hides the element from display.\n- `icon` {string} Icon to display in the header.\n- `selected` {boolean} When set to `true`, marks the header as selected.\n\n### IdsAccordionPanel\n\n- `hidden` {boolean} Hides the element from display.\n- `iconAlign` {string} Position of the caret icon (`'start'` or `'end'`). Default is `'end'`.\n\n### IdsAccordionSection\n\n- `hidden` {boolean} Hides the element from display.\n\n## Events\n\n- `selected` Fire at the time the ids-accordion-panel element is selected, used for App-Menu. Detail contains the element `elem`\n- `beforeexpanded` Fires on the ids-accordion-header before the panel begins to expand. Useful for performing actions before the animation starts.\n- `expanded` Fires on the ids-accordion-header immediately when the panel state changes to expanded. Detail contains the element `elem`\n- `afterexpanded` Fires on the ids-accordion-header after the expand animation completes. Useful for performing actions after the animation finishes.\n- `beforecollapsed` Fires on the ids-accordion-header before the panel begins to collapse. Useful for performing actions before the animation starts.\n- `collapsed` Fires on the ids-accordion-header immediately when the panel state changes to collapsed. Detail contains the element `elem`\n- `aftercollapsed` Fires on the ids-accordion-header after the collapse animation completes. Useful for performing actions after the animation finishes.\n\n### Event Examples\n\nListen for expand/collapse events on the accordion:\n\n```javascript\nconst accordion = document.querySelector('ids-accordion');\n\n// Fires before animation starts\naccordion.addEventListener('beforeexpanded', (e) => {\n console.log('Panel expanding:', e.target.id);\n});\n\n// Fires immediately when state changes\naccordion.addEventListener('expanded', (e) => {\n console.log('Panel expanded:', e.target.id);\n});\n\n// Fires after animation completes\naccordion.addEventListener('afterexpanded', (e) => {\n console.log('Expand animation complete:', e.target.id);\n});\n\n// Similar events for collapse\naccordion.addEventListener('beforecollapsed', (e) => {\n console.log('Panel collapsing:', e.target.id);\n});\n\naccordion.addEventListener('collapsed', (e) => {\n console.log('Panel collapsed:', e.target.id);\n});\n\naccordion.addEventListener('aftercollapsed', (e) => {\n console.log('Collapse animation complete:', e.target.id);\n});\n```\n\n## Methods\n\n- IdsAccordion\n - `navigate` Navigate to the next/prev panel\n- IdsAccordionPanel\n - `collapsePane` Collapse pane\n - `expandPane` Expand pane\n - `select` Select header and focus it\n - `focus` Set focus on header\n\n## Themeable Parts\n\n- `accordion` Accordion root element\n\n## States and Variations\n\nThe Accordion's headers support the following states:\n\n- Normal/Default: This is the default of an accordion.\n- Hover: Roll over an interactive element inside the accordion\n- Disabled: Disabled elements can be inside an accordion. These cards cannot be clicked, hovered or focused.\n- Focus: For accessibility. To give a user guidance when using a screen reader.\n- Active/Selected: After the pressed/clicked state, users are taken to the active state. This includes expanding or closing an accordion.\n\n## Keyboard Guidelines\n\n- **Shift+Tab**: Works the same as Tab, but in the opposite direction. When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion Header or Tab page. When focus reaches the last header/tab page, further key presses will have optionally wrap to the first header\n- **Up Arrow or Left Arrow**: When focus is on the tab or accordion header, a press of up/left will move focus to the previous logical accordion header or tab page. When focus reaches the first header/tab page, further key presses will optionally wrap to the last header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Down Arrow or Right Arrow**: When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion header or tab page. When focus reaches the last header/tab page, further key presses will optionally wrap to the first header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Enter or Space**: When focus is on an accordion header, this keystroke toggles the expansion of the corresponding panel. If collapsed, the panel is expanded, and its aria-expanded state is set to true. If expanded, the panel is collapsed and its aria-expanded state is set to false.\n\n## Accessibility\n\nThe IDS Accordion component has a `role=\"region\"` and a unique `title` is generated for each instance.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Replace `.inforAboutDialog()` with `.about()` and notice that many of the names of the settings (e.g. productName to appName) to have changed so must be updated to the new settings.\n- The initial markup is changed considerably from the previous version. Sync the markup using the markup above\n- Initialize the accordion plugin with .accordion() as opposed to `.inforAccordion()` or by using the page initializer\nonExpanded and onCollapsed option are done with events (expanded and collapsed)\n\n**4.x to 5.x**\n- Accordion now uses all new markup and classes for web components (see above)\n- Now called IdsAccordion with a namespace\n- The \"Panels\" examples are removed and deprecated as they should rarely be used.\n- The deprecated `displayChevron` setting is removed.\n- The `enableTooltips` removed and deprecated as not added as it seems no longer relevant.\n- The `expanderDisplay` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed.\n- The `rerouteOnLinkClick` option was removed and deprecated as is no longer needed as there are no links in the markup now.\n- The `source` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed in accordion but will be added to IdsAppMenu.\n- The `destroy` method has been removed since everything is now cleaned up when removing the DOM element\n"}},{"name":"ids-accordion-section","attributes":[{"name":"color-variants","values":[]},{"name":"disabled","description":"Sets disabled property","values":[]},{"name":"grow","description":"Sets grow property","values":[]},{"name":"pinned","description":"Sets pinned property","values":[]},{"name":"shrink","description":"Sets shrink property","values":[]}],"description":{"kind":"markdown","value":"# ids-accordion\n\n## Description\n\nThe IDS Accordion component is a UI pattern that is comprised of a stacked list of elements. A basic accordion will consist of a `ids-accordion-header` which shows a title or summary of the `ids-accordion-panel` and acts as a control for expanding and collapsing. Note: Standalone Css is not available for this component.\n\n## Use Cases\n\n- Can be used to conserve space, by hiding information until needed. Accordions can be commonly seen on mobile sites and applications. It can help tell the user what the page is about and allows the user to select and see what is needed.\n- Can be used for navigation. The accordion is the main interactive element inside of the [App Menu](../ids-app-menu/README.md)\n\n## Terminology\n\n- **ids-accordion** Parent container for all accordions\n- **ids-accordion-panel** First child of and accordion. Contains the header and content area. Contains 2 slots, the `header` and the `pane`.\n- **ids-accordion-header** Typically used in the header slot, contains the title and acts as the control for expanding and collapsing.\n\n## Features (With Code Examples)\n\nStandard accordion, most commonly used:\n\n```html\n\n \n \n Warehouse Location\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain, deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Sort By\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Brand Name\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Material\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n\n```\n\n### Nested Accordions\n\nIt's possible to nest accordion structures. This is common in accordions used for navigation purposes, such as the ones applied to the [App Menu](../ids-app-menu/README.md).\n\nIn the example below, the \"My Benefits\", \"Dependents and Beneficiaries\", \"Life Events\", and \"Benefits Information\" panels are nested beneath the \"Benefits\" panel, which is nested beneath the \"Employee\" panel.\n\n```html\n\n \n \n \n Employee\n \n \n \n Benefits\n \n \n \n My Benefits\n \n \n \n \n Dependents and Beneficiaries\n \n \n \n \n Life Events\n \n \n \n \n Benefits Information\n \n \n \n \n\n```\n\n## Class Hierarchy\n\n- IdsAccordion\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n- IdsAccordionHeader\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n- IdsAccordionPanel\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n IdsEventsMixin\n\n## Settings (Attributes)\n\nWhen used as an attribute the settings are kebab case, when used in the JS they are camel case.\n\n### IdsAccordion\n\n- `headers` {Array} Reference to all inner Accordion Headers.\n- `panels` {Array} Reference to all inner Accordion Panels.\n- `focused` {HTMLElement} Reference to the currently-focused element within the accordion, if applicable.\n- `allowOnePane` {boolean} Sets Accordion to allow only one inner Accordion Panel to be expanded at a time.\n- `keepExpanderPlacement` {boolean} Sets the Accordion to display sub-level expander icons as carets.\n- `closeChildren` {boolean} When true, Children will be collapsed when their parent has been collapsed.\n- `borderless` {boolean} When set to `true`, removes borders from headers when expanded (root level) or always (nested levels). Can also be set on individual headers.\n- `hidden` {boolean} Hides the element from display.\n- `toggleOnIcon` {boolean} When set to `true`, restricts toggle behavior to only occur when clicking the expander icon, not the entire header area. This is useful when you need custom selection logic on the header without conflicting with the toggle behavior.\n\n### IdsAccordionHeader\n\n- `borderless` {boolean} When set to `true`, removes the bottom border from the header when expanded (root level) or always (nested). Default is `false` (border is shown).\n- `disabled` {boolean} When set to `true`, disables the header interaction.\n- `expanded` {boolean} Reflects whether the associated panel is expanded.\n- `expanderType` {string} Type of expander icon to use (`'caret'` or `'plus-minus'`).\n- `headerFill` {boolean} When set to `true`, adds a background fill to the header.\n- `hidden` {boolean} Hides the element from display.\n- `icon` {string} Icon to display in the header.\n- `selected` {boolean} When set to `true`, marks the header as selected.\n\n### IdsAccordionPanel\n\n- `hidden` {boolean} Hides the element from display.\n- `iconAlign` {string} Position of the caret icon (`'start'` or `'end'`). Default is `'end'`.\n\n### IdsAccordionSection\n\n- `hidden` {boolean} Hides the element from display.\n\n## Events\n\n- `selected` Fire at the time the ids-accordion-panel element is selected, used for App-Menu. Detail contains the element `elem`\n- `beforeexpanded` Fires on the ids-accordion-header before the panel begins to expand. Useful for performing actions before the animation starts.\n- `expanded` Fires on the ids-accordion-header immediately when the panel state changes to expanded. Detail contains the element `elem`\n- `afterexpanded` Fires on the ids-accordion-header after the expand animation completes. Useful for performing actions after the animation finishes.\n- `beforecollapsed` Fires on the ids-accordion-header before the panel begins to collapse. Useful for performing actions before the animation starts.\n- `collapsed` Fires on the ids-accordion-header immediately when the panel state changes to collapsed. Detail contains the element `elem`\n- `aftercollapsed` Fires on the ids-accordion-header after the collapse animation completes. Useful for performing actions after the animation finishes.\n\n### Event Examples\n\nListen for expand/collapse events on the accordion:\n\n```javascript\nconst accordion = document.querySelector('ids-accordion');\n\n// Fires before animation starts\naccordion.addEventListener('beforeexpanded', (e) => {\n console.log('Panel expanding:', e.target.id);\n});\n\n// Fires immediately when state changes\naccordion.addEventListener('expanded', (e) => {\n console.log('Panel expanded:', e.target.id);\n});\n\n// Fires after animation completes\naccordion.addEventListener('afterexpanded', (e) => {\n console.log('Expand animation complete:', e.target.id);\n});\n\n// Similar events for collapse\naccordion.addEventListener('beforecollapsed', (e) => {\n console.log('Panel collapsing:', e.target.id);\n});\n\naccordion.addEventListener('collapsed', (e) => {\n console.log('Panel collapsed:', e.target.id);\n});\n\naccordion.addEventListener('aftercollapsed', (e) => {\n console.log('Collapse animation complete:', e.target.id);\n});\n```\n\n## Methods\n\n- IdsAccordion\n - `navigate` Navigate to the next/prev panel\n- IdsAccordionPanel\n - `collapsePane` Collapse pane\n - `expandPane` Expand pane\n - `select` Select header and focus it\n - `focus` Set focus on header\n\n## Themeable Parts\n\n- `accordion` Accordion root element\n\n## States and Variations\n\nThe Accordion's headers support the following states:\n\n- Normal/Default: This is the default of an accordion.\n- Hover: Roll over an interactive element inside the accordion\n- Disabled: Disabled elements can be inside an accordion. These cards cannot be clicked, hovered or focused.\n- Focus: For accessibility. To give a user guidance when using a screen reader.\n- Active/Selected: After the pressed/clicked state, users are taken to the active state. This includes expanding or closing an accordion.\n\n## Keyboard Guidelines\n\n- **Shift+Tab**: Works the same as Tab, but in the opposite direction. When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion Header or Tab page. When focus reaches the last header/tab page, further key presses will have optionally wrap to the first header\n- **Up Arrow or Left Arrow**: When focus is on the tab or accordion header, a press of up/left will move focus to the previous logical accordion header or tab page. When focus reaches the first header/tab page, further key presses will optionally wrap to the last header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Down Arrow or Right Arrow**: When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion header or tab page. When focus reaches the last header/tab page, further key presses will optionally wrap to the first header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Enter or Space**: When focus is on an accordion header, this keystroke toggles the expansion of the corresponding panel. If collapsed, the panel is expanded, and its aria-expanded state is set to true. If expanded, the panel is collapsed and its aria-expanded state is set to false.\n\n## Accessibility\n\nThe IDS Accordion component has a `role=\"region\"` and a unique `title` is generated for each instance.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Replace `.inforAboutDialog()` with `.about()` and notice that many of the names of the settings (e.g. productName to appName) to have changed so must be updated to the new settings.\n- The initial markup is changed considerably from the previous version. Sync the markup using the markup above\n- Initialize the accordion plugin with .accordion() as opposed to `.inforAccordion()` or by using the page initializer\nonExpanded and onCollapsed option are done with events (expanded and collapsed)\n\n**4.x to 5.x**\n- Accordion now uses all new markup and classes for web components (see above)\n- Now called IdsAccordion with a namespace\n- The \"Panels\" examples are removed and deprecated as they should rarely be used.\n- The deprecated `displayChevron` setting is removed.\n- The `enableTooltips` removed and deprecated as not added as it seems no longer relevant.\n- The `expanderDisplay` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed.\n- The `rerouteOnLinkClick` option was removed and deprecated as is no longer needed as there are no links in the markup now.\n- The `source` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed in accordion but will be added to IdsAppMenu.\n- The `destroy` method has been removed since everything is now cleaned up when removing the DOM element\n"}},{"name":"ids-accordion","attributes":[{"name":"header","values":[]},{"name":"previously-selected","values":[]},{"name":"color-variants","values":[]},{"name":"#content-observer","description":"Observes changes in the accordion tree","values":[]},{"name":"sections","values":[]},{"name":"headers","values":[]},{"name":"panels","values":[]},{"name":"focused","values":[]},{"name":"allow-one-pane","description":"Sets allowOnePane property","values":[]},{"name":"disabled","description":"Sets disabled property","values":[]},{"name":"keep-expander-placement","description":"Gets keepExpanderPlacement","values":[]},{"name":"close-children","description":"Gets collapse-children attribute value","values":[]},{"name":"borderless","description":"Gets borderless property","values":[]},{"name":"toggle-on-icon","description":"Gets toggle-on-icon property","values":[]},{"name":"on-language-change","description":"Respond to language changes","values":[]}],"description":{"kind":"markdown","value":"# ids-accordion\n\n## Description\n\nThe IDS Accordion component is a UI pattern that is comprised of a stacked list of elements. A basic accordion will consist of a `ids-accordion-header` which shows a title or summary of the `ids-accordion-panel` and acts as a control for expanding and collapsing. Note: Standalone Css is not available for this component.\n\n## Use Cases\n\n- Can be used to conserve space, by hiding information until needed. Accordions can be commonly seen on mobile sites and applications. It can help tell the user what the page is about and allows the user to select and see what is needed.\n- Can be used for navigation. The accordion is the main interactive element inside of the [App Menu](../ids-app-menu/README.md)\n\n## Terminology\n\n- **ids-accordion** Parent container for all accordions\n- **ids-accordion-panel** First child of and accordion. Contains the header and content area. Contains 2 slots, the `header` and the `pane`.\n- **ids-accordion-header** Typically used in the header slot, contains the title and acts as the control for expanding and collapsing.\n\n## Features (With Code Examples)\n\nStandard accordion, most commonly used:\n\n```html\n\n \n \n Warehouse Location\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain, deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Sort By\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Brand Name\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n \n \n Material\n \n \n Remix, optimize, \"B2B, iterate?\" Best-of-breed efficient beta-test; social cutting-edge: rich magnetic tagclouds\n front-end infomediaries viral authentic incentivize sexy extensible functionalities incentivize. Generate killer\n authentic grow vertical blogospheres, functionalities ecologies harness, \"tag solutions synergies exploit\n data-driven B2C open-source e-markets optimize create, enhance convergence create.\" Out-of-the-box strategize\n best-of-breed back-end, deploy design markets metrics. Content web services enhance leading-edge Cluetrain,\n deliverables dot-com scalable. User-centric morph, back-end, synthesize mesh, frictionless, exploit next-generation\n tag portals, e-commerce channels; integrate; recontextualize distributed revolutionize innovative eyeballs.\n \n \n\n```\n\n### Nested Accordions\n\nIt's possible to nest accordion structures. This is common in accordions used for navigation purposes, such as the ones applied to the [App Menu](../ids-app-menu/README.md).\n\nIn the example below, the \"My Benefits\", \"Dependents and Beneficiaries\", \"Life Events\", and \"Benefits Information\" panels are nested beneath the \"Benefits\" panel, which is nested beneath the \"Employee\" panel.\n\n```html\n\n \n \n \n Employee\n \n \n \n Benefits\n \n \n \n My Benefits\n \n \n \n \n Dependents and Beneficiaries\n \n \n \n \n Life Events\n \n \n \n \n Benefits Information\n \n \n \n \n\n```\n\n## Class Hierarchy\n\n- IdsAccordion\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n- IdsAccordionHeader\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsEventsMixin\n- IdsAccordionPanel\n - IdsElement\n- Mixins\n IdsColorVariantMixin\n IdsKeyboardMixin\n IdsLocaleMixin\n IdsEventsMixin\n\n## Settings (Attributes)\n\nWhen used as an attribute the settings are kebab case, when used in the JS they are camel case.\n\n### IdsAccordion\n\n- `headers` {Array} Reference to all inner Accordion Headers.\n- `panels` {Array} Reference to all inner Accordion Panels.\n- `focused` {HTMLElement} Reference to the currently-focused element within the accordion, if applicable.\n- `allowOnePane` {boolean} Sets Accordion to allow only one inner Accordion Panel to be expanded at a time.\n- `keepExpanderPlacement` {boolean} Sets the Accordion to display sub-level expander icons as carets.\n- `closeChildren` {boolean} When true, Children will be collapsed when their parent has been collapsed.\n- `borderless` {boolean} When set to `true`, removes borders from headers when expanded (root level) or always (nested levels). Can also be set on individual headers.\n- `hidden` {boolean} Hides the element from display.\n- `toggleOnIcon` {boolean} When set to `true`, restricts toggle behavior to only occur when clicking the expander icon, not the entire header area. This is useful when you need custom selection logic on the header without conflicting with the toggle behavior.\n\n### IdsAccordionHeader\n\n- `borderless` {boolean} When set to `true`, removes the bottom border from the header when expanded (root level) or always (nested). Default is `false` (border is shown).\n- `disabled` {boolean} When set to `true`, disables the header interaction.\n- `expanded` {boolean} Reflects whether the associated panel is expanded.\n- `expanderType` {string} Type of expander icon to use (`'caret'` or `'plus-minus'`).\n- `headerFill` {boolean} When set to `true`, adds a background fill to the header.\n- `hidden` {boolean} Hides the element from display.\n- `icon` {string} Icon to display in the header.\n- `selected` {boolean} When set to `true`, marks the header as selected.\n\n### IdsAccordionPanel\n\n- `hidden` {boolean} Hides the element from display.\n- `iconAlign` {string} Position of the caret icon (`'start'` or `'end'`). Default is `'end'`.\n\n### IdsAccordionSection\n\n- `hidden` {boolean} Hides the element from display.\n\n## Events\n\n- `selected` Fire at the time the ids-accordion-panel element is selected, used for App-Menu. Detail contains the element `elem`\n- `beforeexpanded` Fires on the ids-accordion-header before the panel begins to expand. Useful for performing actions before the animation starts.\n- `expanded` Fires on the ids-accordion-header immediately when the panel state changes to expanded. Detail contains the element `elem`\n- `afterexpanded` Fires on the ids-accordion-header after the expand animation completes. Useful for performing actions after the animation finishes.\n- `beforecollapsed` Fires on the ids-accordion-header before the panel begins to collapse. Useful for performing actions before the animation starts.\n- `collapsed` Fires on the ids-accordion-header immediately when the panel state changes to collapsed. Detail contains the element `elem`\n- `aftercollapsed` Fires on the ids-accordion-header after the collapse animation completes. Useful for performing actions after the animation finishes.\n\n### Event Examples\n\nListen for expand/collapse events on the accordion:\n\n```javascript\nconst accordion = document.querySelector('ids-accordion');\n\n// Fires before animation starts\naccordion.addEventListener('beforeexpanded', (e) => {\n console.log('Panel expanding:', e.target.id);\n});\n\n// Fires immediately when state changes\naccordion.addEventListener('expanded', (e) => {\n console.log('Panel expanded:', e.target.id);\n});\n\n// Fires after animation completes\naccordion.addEventListener('afterexpanded', (e) => {\n console.log('Expand animation complete:', e.target.id);\n});\n\n// Similar events for collapse\naccordion.addEventListener('beforecollapsed', (e) => {\n console.log('Panel collapsing:', e.target.id);\n});\n\naccordion.addEventListener('collapsed', (e) => {\n console.log('Panel collapsed:', e.target.id);\n});\n\naccordion.addEventListener('aftercollapsed', (e) => {\n console.log('Collapse animation complete:', e.target.id);\n});\n```\n\n## Methods\n\n- IdsAccordion\n - `navigate` Navigate to the next/prev panel\n- IdsAccordionPanel\n - `collapsePane` Collapse pane\n - `expandPane` Expand pane\n - `select` Select header and focus it\n - `focus` Set focus on header\n\n## Themeable Parts\n\n- `accordion` Accordion root element\n\n## States and Variations\n\nThe Accordion's headers support the following states:\n\n- Normal/Default: This is the default of an accordion.\n- Hover: Roll over an interactive element inside the accordion\n- Disabled: Disabled elements can be inside an accordion. These cards cannot be clicked, hovered or focused.\n- Focus: For accessibility. To give a user guidance when using a screen reader.\n- Active/Selected: After the pressed/clicked state, users are taken to the active state. This includes expanding or closing an accordion.\n\n## Keyboard Guidelines\n\n- **Shift+Tab**: Works the same as Tab, but in the opposite direction. When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion Header or Tab page. When focus reaches the last header/tab page, further key presses will have optionally wrap to the first header\n- **Up Arrow or Left Arrow**: When focus is on the tab or accordion header, a press of up/left will move focus to the previous logical accordion header or tab page. When focus reaches the first header/tab page, further key presses will optionally wrap to the last header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Down Arrow or Right Arrow**: When focus is on the tab or accordion header, a press of down/right will move focus to the next logical accordion header or tab page. When focus reaches the last header/tab page, further key presses will optionally wrap to the first header. This keystroke is also aware of how to traverse different levels of nested accordion panels.\n- **Enter or Space**: When focus is on an accordion header, this keystroke toggles the expansion of the corresponding panel. If collapsed, the panel is expanded, and its aria-expanded state is set to true. If expanded, the panel is collapsed and its aria-expanded state is set to false.\n\n## Accessibility\n\nThe IDS Accordion component has a `role=\"region\"` and a unique `title` is generated for each instance.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Replace `.inforAboutDialog()` with `.about()` and notice that many of the names of the settings (e.g. productName to appName) to have changed so must be updated to the new settings.\n- The initial markup is changed considerably from the previous version. Sync the markup using the markup above\n- Initialize the accordion plugin with .accordion() as opposed to `.inforAccordion()` or by using the page initializer\nonExpanded and onCollapsed option are done with events (expanded and collapsed)\n\n**4.x to 5.x**\n- Accordion now uses all new markup and classes for web components (see above)\n- Now called IdsAccordion with a namespace\n- The \"Panels\" examples are removed and deprecated as they should rarely be used.\n- The deprecated `displayChevron` setting is removed.\n- The `enableTooltips` removed and deprecated as not added as it seems no longer relevant.\n- The `expanderDisplay` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed.\n- The `rerouteOnLinkClick` option was removed and deprecated as is no longer needed as there are no links in the markup now.\n- The `source` option was removed and deprecated as it was used only by IdsAppMenu and is no longer needed in accordion but will be added to IdsAppMenu.\n- The `destroy` method has been removed since everything is now cleaned up when removing the DOM element\n"}},{"name":"ids-alert","attributes":[{"name":"color","description":"Set the alert color","values":[]},{"name":"disabled","description":"Sets the disabled state","values":[]},{"name":"icon","description":"Set the icon","values":[]},{"name":"size","description":"Set the size. May be large, normal/medium or small","values":[]},{"name":"#updating-label","values":[]},{"name":"label","description":"Set the label text","values":[]},{"name":"label-color","description":"Set the label color","values":[]},{"name":"aria-label","description":"Get the aria-label","values":[]}],"description":{"kind":"markdown","value":"# ids-alert\n\n## Description\n\nIDS Alert icons are special icons that indicate a status/error situation. They can are often used as one part of an error/alert/info message with accompanying text. Alerts help get users attention of something affecting an application, feature or a page. This component consists of different types such as `error`, `warning`, `success`, and `info` that represents the icon color for each status.\n\n## Use Cases\n\nTypically, these alerts are use to get attention of the status of your application. Use text along with the alert so that users that cant understand the color difference get the important alert information.\n\nAlerts should be used for error messages and warnings not as embellishments. For a softer status, something like an embellishment see icons component status colors. Note that the badges should not be used in place of alerts or status icons and do not support icons.\n\n## Terminology\n\n- **Type**: Type is basically the status of an alert.\n- **Icon**: Icon is the symbol of the alert.\n- **Color**: The type of alert color.\n\n## Feature (With the Code Examples)\n\nAn alert is created by using the `ids-alert` html custom element. It has a `icon` property to set the desire alert icon to use.\n\n```html\n\n\n\n```\n\nAn alert can be used in a disabled situation so comes with a disabled style\n\n```html\n\n```\n\nAn alert can have a tooltip\n\n```html\n\n```\n\nAn alert can use any icon, use the color setting with it to control the icon color\n\n```html\n\n```\n\nAn alert can have a label displayed next to the icon\n\n```html\n\n\n```\n\nAn alert label can have a custom color independent of the icon color, be aware that some colors may not have good color contrast for accessibility so we use normal label color by default.\n\n```html\n\n\n```\n\n## Class Hierarchy\n\n- IdsAlert\n - IdsElement\n- Mixins\n IdsEventsMixin\n\n## Settings (Attributes)\n\n- `icon` {boolean} Set the type of icon / alert to show options include 'alert' | 'success' | 'dirty' | 'error' | 'info' |'pending' | 'new' | 'in-progress' or any other icon in the icon set. For these other icons set the color property as well\n- `disabled` {boolean} Set alert to disabled\n- `tooltip` {string} Sets the string content for a tooltip, for error, success, info, alert the color of the tooltip will change\n- `color` {string} Sets the icon color between error, success, info, warning, caution, orange, purple\n- `label` {string} Sets the label text displayed next to the icon\n- `label-color` {string} Sets the label text color independently from the icon color\n- `aria-label` {string} Sets an accessible name for the alert. Use this when the icon and tooltip alone do not convey enough meaning to assistive technologies.\n\n## Themeable Parts\n\n- `icon` allows you to further style the icon element\n- `label` allows you to further style the label text element\n\n## States and Variations\n\n- Color\n- Size\n- Alert\n\n## Keyboard Guidelines\n\nAlert icons do not have tab stops or keyboard interaction on their own. However, they may be placed in a grid cell or other object that has tab focus.\n\n## Responsive Guidelines\n\n- Flows within its parent/placement and is usually centered vertically.\n\n## Accessibility\n\nThe traffic light colors are accessibility violations for contrast, however, the high contrast theme provides an alternative that passes. In addition, in context text should be used as color alone cannot provide the meaning. i.e. Do not use color alone to indicate a state.\n\nWhen an alert icon is used without a visible label or tooltip, use the `aria-label` attribute to provide an accessible name for screen readers.\n\n```html\n\n```\n\n## Converting from Previous Versions (Breaking Changes)\n\n**4.x to 5.x**\n- Alert now uses all new markup and classes for web components (see above)\n- The yellow alert is no longer available due to having poor contrast with the background.\n- The names of some alerts (icon setting) have changed\n"}},{"name":"ids-app-menu-container","attributes":[],"description":{"kind":"markdown","value":"# Ids App Menu\n\nThe Ids App Menu serves as primary navigation for an Infor Application, combining top level functions of the application with user authentication and access to changing roles.\n\nThe App Menu is built on top of [IdsDrawer](../ids-drawer/README.md) and generally utilizes an [IdsAccordion](../ids-accordion/README.md) and/or [IdsToolbar](../ids-toolbar/README.md) for its navigation features.\n\n## Use Cases\n\n- Top-level navigation for your application\n- Access to application-wide features\n- Access to different user roles\n\n## Terminology\n\n- **App Menu Branding** - A slotted area that can be used for application branding info, such as a logo. Its recommended to use the customer logo, not the infor logo.\n- **App Menu Content** - The primary slotted area that usually houses an [IdsAccordion](../ids-accordion/README.md) or some other navigation structure.\n- **App Menu Header** - A slotted area that can be used for extra navigation or text content that sits above the main App Menu content area.\n- **App Menu Footer** - A slotted area that can be used for extra navigation or text content that sits below the main App Menu content area.\n- **App Menu Search** - A slotted area that can be used for adding a search feature for App Menu functionality.\n- **App Menu User Info** - A slotted area that can contain information specific to the \"User\" accessing the application.\n\n## Features (with code samples)\n\nA barebones App Menu can consist of only an accordion for navigation:\n\n```html\n\n \n \n \n Employee\n \n \n \n \n Manager\n \n \n \n \n Recruiter\n \n \n \n\n```\n\nThe `keep-open` attribute forces menu to stay open, and the `ignore-keep-open` class will cause menu-items to bypass `keep-open` attribute.\n\nFor more examples of Accordion customization, please see [the Accordion documentation](../ids-accordion/README.md)\n\nFor app menu there is also an ability to put contents above like a masthead of module tabs. To do so include the `ids-app-menu-container` in the logic. See example [with-masthead](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/blob/main/src/components/ids-app-menu/demos/with-masthead.html)\n\n### Toolbars\n\nApp Menus can contain small [Toolbars](../ids-toolbar/README.md) that sit above and below the main navigation area. These toolbars will ideally contain supporting functions that are application-specific, but not necessarily the most important top-level features of the application.\n\nTo include these Toolbars, simply add them to the App Menu's markup with `[slot=\"header\"]` or `[slot=\"footer\"]`:\n\n```html\n\n \n \n \n Download\n \n \n Print\n \n \n Purchasing\n \n \n \n\n \n \n \n \n \n Settings\n \n \n Proxy as User\n \n \n About This Application\n \n \n Logout\n \n \n \n\n```\n\n### User Information and Roles\n\nApp Menus reserve two slots for specific user information:\n\n- Avatars (User photos)\n- Name\n\n```html\n\n \n \"Picture\n Richard Fairbanks\n\n```\n\n### Search Field\n\nApp Menus can apply filtering capability to their navigation accordion elements by adding an [IdsSearchField](../ids-search-field/README.md) component with `slot=\"search\"` applied:\n\n```html\n\n \n \n\n \n \n \n \n Employee\n \n \n \n \n Manager\n \n \n \n \n Recruiter\n \n \n \n\n```\n\nIn the previous example, when typing \"Re\" into the search field, the \"Employee\" and \"Manager\" accordion headers will be visually hidden. Removing the search field's value causes the filter to be reset, and all headers will be visible again.\n\nWhile a filter is applied, accordion headers that do not match the filter are tagged with a `hidden-by-filter` attribute.\n\nThis feature is also applied to nested accordion navigation. While filtered, headers that don't match the filter will be completely hidden if they have no matching children, but will appear \"faded out\" if they do contain at least one matching child. These headers are also tagged with a `child-filter-match` attribute.\n\n## States and Variations\n\nThe App Menu doesn't contain any states or variants of its own, but applies the following to its extensions and sub-components:\n\n- App Menu uses the `app-menu` style of [IdsDrawer]('../ids-drawer/README.md').\n- Any \"Top-Level\" [IdsAccordion](../ids-accordion/README.md) panels added to the App Menu receive the `app-menu` color variant\n- Any \"nested\" IdsAccordion panels added to the App Menu receive the `sub-app-menu` color variant.\n- Any [IdsButton](../ids-button/README.md) components inside the App Menu in any slot will be converted to the `alternate` color variant.\n\n## Keyboard Guidelines\n\n- **Escape**: When focus is on an element inside an open App Menu, the App Menu will close.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**4.x to 5.x**\n- Markup has changed to a custom element `\nSections are now slotted for easier use. Accordion is the main slot, and other areas (toolbars, user info, etc) are named slots.\n- Can now be imported as a single JS file and used with encapsulated styles\n- The names of some alerts (icon setting) have changed\n"}},{"name":"ids-app-menu","attributes":[{"name":"global-keydown-listener","values":[]},{"name":"#container","values":[]},{"name":"accordion","values":[]},{"name":"keep-open","description":"Gets whether the app menu should remain open when clicking outside.","values":[]},{"name":"is-filtered","values":[]},{"name":"filter-accordion","description":"Performs a filter operation on accordion panels","values":[]}],"description":{"kind":"markdown","value":"# Ids App Menu\n\nThe Ids App Menu serves as primary navigation for an Infor Application, combining top level functions of the application with user authentication and access to changing roles.\n\nThe App Menu is built on top of [IdsDrawer](../ids-drawer/README.md) and generally utilizes an [IdsAccordion](../ids-accordion/README.md) and/or [IdsToolbar](../ids-toolbar/README.md) for its navigation features.\n\n## Use Cases\n\n- Top-level navigation for your application\n- Access to application-wide features\n- Access to different user roles\n\n## Terminology\n\n- **App Menu Branding** - A slotted area that can be used for application branding info, such as a logo. Its recommended to use the customer logo, not the infor logo.\n- **App Menu Content** - The primary slotted area that usually houses an [IdsAccordion](../ids-accordion/README.md) or some other navigation structure.\n- **App Menu Header** - A slotted area that can be used for extra navigation or text content that sits above the main App Menu content area.\n- **App Menu Footer** - A slotted area that can be used for extra navigation or text content that sits below the main App Menu content area.\n- **App Menu Search** - A slotted area that can be used for adding a search feature for App Menu functionality.\n- **App Menu User Info** - A slotted area that can contain information specific to the \"User\" accessing the application.\n\n## Features (with code samples)\n\nA barebones App Menu can consist of only an accordion for navigation:\n\n```html\n\n \n \n \n Employee\n \n \n \n \n Manager\n \n \n \n \n Recruiter\n \n \n \n\n```\n\nThe `keep-open` attribute forces menu to stay open, and the `ignore-keep-open` class will cause menu-items to bypass `keep-open` attribute.\n\nFor more examples of Accordion customization, please see [the Accordion documentation](../ids-accordion/README.md)\n\nFor app menu there is also an ability to put contents above like a masthead of module tabs. To do so include the `ids-app-menu-container` in the logic. See example [with-masthead](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/blob/main/src/components/ids-app-menu/demos/with-masthead.html)\n\n### Toolbars\n\nApp Menus can contain small [Toolbars](../ids-toolbar/README.md) that sit above and below the main navigation area. These toolbars will ideally contain supporting functions that are application-specific, but not necessarily the most important top-level features of the application.\n\nTo include these Toolbars, simply add them to the App Menu's markup with `[slot=\"header\"]` or `[slot=\"footer\"]`:\n\n```html\n\n \n \n \n Download\n \n \n Print\n \n \n Purchasing\n \n \n \n\n \n \n \n \n \n Settings\n \n \n Proxy as User\n \n \n About This Application\n \n \n Logout\n \n \n \n\n```\n\n### User Information and Roles\n\nApp Menus reserve two slots for specific user information:\n\n- Avatars (User photos)\n- Name\n\n```html\n\n \n \"Picture\n Richard Fairbanks\n\n```\n\n### Search Field\n\nApp Menus can apply filtering capability to their navigation accordion elements by adding an [IdsSearchField](../ids-search-field/README.md) component with `slot=\"search\"` applied:\n\n```html\n\n \n \n\n \n \n \n \n Employee\n \n \n \n \n Manager\n \n \n \n \n Recruiter\n \n \n \n\n```\n\nIn the previous example, when typing \"Re\" into the search field, the \"Employee\" and \"Manager\" accordion headers will be visually hidden. Removing the search field's value causes the filter to be reset, and all headers will be visible again.\n\nWhile a filter is applied, accordion headers that do not match the filter are tagged with a `hidden-by-filter` attribute.\n\nThis feature is also applied to nested accordion navigation. While filtered, headers that don't match the filter will be completely hidden if they have no matching children, but will appear \"faded out\" if they do contain at least one matching child. These headers are also tagged with a `child-filter-match` attribute.\n\n## States and Variations\n\nThe App Menu doesn't contain any states or variants of its own, but applies the following to its extensions and sub-components:\n\n- App Menu uses the `app-menu` style of [IdsDrawer]('../ids-drawer/README.md').\n- Any \"Top-Level\" [IdsAccordion](../ids-accordion/README.md) panels added to the App Menu receive the `app-menu` color variant\n- Any \"nested\" IdsAccordion panels added to the App Menu receive the `sub-app-menu` color variant.\n- Any [IdsButton](../ids-button/README.md) components inside the App Menu in any slot will be converted to the `alternate` color variant.\n\n## Keyboard Guidelines\n\n- **Escape**: When focus is on an element inside an open App Menu, the App Menu will close.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**4.x to 5.x**\n- Markup has changed to a custom element `\nSections are now slotted for easier use. Accordion is the main slot, and other areas (toolbars, user info, etc) are named slots.\n- Can now be imported as a single JS file and used with encapsulated styles\n- The names of some alerts (icon setting) have changed\n"}},{"name":"ids-area-chart","attributes":[{"name":"selection-elements","description":"Return chart elements that get selection","values":[]},{"name":"default-selectable","values":[]},{"name":"marker-size","description":"Set the size of the markers (aka dots/ticks) in the chart","values":[]},{"name":"initialized","values":[]},{"name":"data-loaded","values":[]},{"name":"svg","values":[]},{"name":"canvas","values":[]},{"name":"empty-message","values":[]},{"name":"legend","values":[]},{"name":"section-widths","values":[]},{"name":"section-width","values":[]},{"name":"section-heights","values":[]},{"name":"section-height","values":[]},{"name":"resize-to-parent-height","values":[]},{"name":"resize-to-parent-width","values":[]},{"name":"datasource","description":"Reference to datasource API","values":[]},{"name":"vetoable-event-types","values":[]},{"name":"is-grouped","values":[]},{"name":"#x-max-text-width","description":"Max width for x-labels text","values":[]},{"name":"#y-max-text-width","description":"Max width for y-labels text","values":[]},{"name":"#resize-observer","description":"Holds the resize observer object","values":[]},{"name":"marker-data","description":"The marker data to use to draw the chart","values":[]},{"name":"#axis-labels-text","description":"Holds the axis labels text object","values":[]},{"name":"title","description":"Get the chart title","values":[]},{"name":"height","description":"Get the chart height","values":[]},{"name":"horizontal","description":"Get the horizontal orientation state","values":[]},{"name":"width","description":"Get the chart width","values":[]},{"name":"chart-container","description":"Get the chart container element","values":[]},{"name":"margins","description":"Get the chart margins","values":[]},{"name":"left-rotate-margin","description":"Get left rotate margin for rotated labels","values":[]},{"name":"right-rotate-margin","description":"Get right rotate margin for rotated labels","values":[]},{"name":"bottom-rotate-margin","description":"Get bottom rotate margin for rotated labels","values":[]},{"name":"axis-labels-margin","description":"Get axis labels margin values","values":[]},{"name":"text-widths","description":"Get text widths for chart dimensions","values":[]},{"name":"data","description":"Get the chart data","values":[]},{"name":"y-axis-min","description":"Get the minimum value on the y axis","values":[]},{"name":"ticks","description":"Get the number of ticks to show","values":[]},{"name":"show-tooltip","description":"Get the show tooltip state","values":[]},{"name":"show-vertical-grid-lines","description":"Get the show vertical grid lines state","values":[]},{"name":"show-horizontal-grid-lines","description":"Get the show horizontal grid lines state","values":[]},{"name":"colors","description":"Get the colors series being used in this chart","values":[]},{"name":"x-axis-formatter","description":"Get the x axis formatter","values":[]},{"name":"y-axis-formatter","description":"Get the y axis formatter","values":[]},{"name":"cubic-bezier","description":"Get a reusable snippet to ease the animation","values":[]},{"name":"animated","description":"Get the animation state","values":[]},{"name":"animation-speed","description":"Get the animation speed","values":[]},{"name":"align-xlabels","description":"Get the x axis label alignment","values":[]},{"name":"stacked","description":"Get the stacked state","values":[]},{"name":"axis-label-bottom","description":"Get the bottom axis label text","values":[]},{"name":"axis-label-end","description":"Get the end axis label text","values":[]},{"name":"axis-label-margin","description":"Get the margin for axis label text","values":[]},{"name":"axis-label-start","description":"Get the start axis label text","values":[]},{"name":"axis-label-top","description":"Get the top axis label text","values":[]},{"name":"rotate-name-labels","description":"Get the rotation for the axis name label text","values":[]},{"name":"use-log-scale","description":"Get the log scale state","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# ids-area-chart\n\n## Description\n\nAn area chart like a line chart is used to displays information as a series of data points connected by straight line segments. Often area charts are used to show trends. Area charts should generally have more than one series to make a comparison. Users can interact by clicking or tapping on areas to drill in on a certain series of data. Users can also interact by hovering data points to reveal additional information in a tooltip.\n\nIt may be easier to see and understand the data with the more colorful area chart instead of a line chart if the differences between your data values are large enough to be displayed visually.\n\n## Use Cases\n\n- Display large differences between your data points\n- Show multiple values over time\n- Plot data over a longer period of time\n- Explain how multiple data points relate to the total value\n\n## Usage Considerations\n\n- Do not show too many areas at once as it may be difficult to interpret.\n- Hover tooltips should only be used to reveal additional non-critical information.\n- Area (and line) charts should not be used not show different groups of data.\n\n## Terminology\n\n- **Marker**: A UI embellishments that shows the data points (i.e. the dots on a line chart).\n- **Area**: The filled / colored area of the lines below the marker\n- **Domain**: The domain is all x-values (the values of the graph from left to right)\n- **Range**: The domain is all y-values (the values of the graph from down to up)\n- **Scale**: The range of values in the graph (the values of the graph from down to up) and the amount of steps between each value.\n\n## Features (With Code Examples)\n\nAn area chart is defined with the custom element and width and height.\n\n```html\n\n```\n\nDatasets can be added to the area chart by passing in an array of objects. Each object must have a `data` and object with `name` and `values` to form the data points. Also a name should be given for each data object which will be used as the legend text. The `shortName` is used to show the short name of the legend text and the `abbrName` is used to show an even shorter name of the legend text in responsive situations.\n\n```js\nconst lineData2 = [{\n data: [{\n name: 'Jan',\n value: 1\n }, {\n name: 'Feb',\n value: 2\n }, {\n name: 'Mar',\n value: 3\n }, {\n name: 'Apr',\n value: 5\n }, {\n name: 'May',\n value: 7\n }, {\n name: 'Jun',\n value: 10\n }],\n name: 'Component A',\n shortName: 'Comp A',\n abbrName: 'A',\n}, {\n data: [{\n name: 'Jan',\n value: 0\n }, {\n name: 'Feb',\n value: 4\n }, {\n name: 'Mar',\n value: 2\n }, {\n name: 'Apr',\n value: 6\n }, {\n name: 'May',\n value: 8\n }, {\n name: 'Jun',\n value: 20\n }],\n name: 'Component B',\n shortName: 'Comp B',\n abbrName: 'B',\n}];\n\ndocument.querySelector('ids-line-chart').data = lineData;\n```\n\nAnother type of chart you can use is a sequential color chart. A sequence of colors is used to represent various concepts of range in low-high density, quantity, and concentration situations. I.E. The data is highly related and should be represented with a single color.\n\nTo achieve this it is recommended to use the `color` setting and pick one of the Ids Colors in the color palette and use variables in its range. For example:\n\n```js\n[{\n \"data\": [],\n \"name\": \"Component A\",\n \"color\": \"var(--ids-color-blue-60)\n }, {\n \"data\": [],\n \"name\": \"Component B\",\n \"shortName\": \"Comp B\",\n \"abbreviatedName\": \"B\",\n \"color\": \"var(--ids-color-blue-40)\"\n }, {\n \"data\": [{\n ],\n \"name\": \"Component C\",\n \"color\": \"var(--ids-color-blue-20)\"\n }]\n```\n\n## Class Hierarchy\n\n- IdsAreaChart\n - IdsLineChart\n - IdsAxisChart\n - IdsElement\n- Mixins\n IdsEventsMixin\n IdsLocaleMixin\n\n## Data Settings\n\n(See Line Chart and Axis Chart Settings for more information)\n\n## Settings\n\n(See Line Chart and Axis Chart Settings for more information)\n\n## Events\n\n(See Line Chart and Axis Chart Settings for more information)\n\n## Methods\n\n(See Line Chart and Axis Chart Settings for more information)\n\n## Themeable Parts\n\n- `svg` the outside svg element\n- `marker` each dots/marker element in the chart\n- `lines` each line element in the chart\n\n## Animation\n\nThe line rise along the y-axis from 0 to the appropriate values. The area below the line fills up as the line rises.\n\n## States and Variations\n\n(See Line Chart and Axis Chart Settings for more information)\n\n## Keyboard Guidelines\n\n(See Line Chart and Axis Chart Settings for more information)\n\n## Responsive Guidelines\n\n- The area chart will fill the size of its parent container and readjust when the window is resized.\n\n## Converting from Previous Versions (Breaking Changes)\n\n- 4.x: The area chart was added after version 3.6 so new in 4.x\n- 5.x: Area Chart have all new markup and classes for web components but the data is still the same except for a few changes.\n - `shortName` is now `shortName`\n - `abbreviatedName` is now `abbrName`\n\n## Accessibility Guidelines\n\n- 1.4.1 Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Ensure the color tags that indicate state like OK, cancel, ect have other ways to indicate that information.\n\n## Regional Considerations\n\nChart labels should be localized in the current language. The chart will flip in RTL mode. For some color blind users the svg patterns can be used.\n"}},{"name":"ids-action-panel","attributes":[{"name":"toolbar","values":[]},{"name":"z-count","values":[]},{"name":"should-update","values":[]},{"name":"on-button-click","values":[]},{"name":"ro","values":[]},{"name":"vetoable-event-types","values":[]},{"name":"#visible","values":[]},{"name":"global-keydown-listener","values":[]},{"name":"auto-focus","description":"Get whether to focus the first input element instead of the close button","values":[]},{"name":"focus-target","description":"Get whether to focus the target element for modal","values":[]},{"name":"aria-label-content","description":"Get the content for ARIA labels","values":[]},{"name":"buttons","description":"Get the currently slotted buttons","values":[]},{"name":"button-set","description":"Get the current button group","values":[]},{"name":"title-slot","description":"Get the slotted title element or the default title slot","values":[]},{"name":"modal-content-el","description":"Get the Modal's content wrapper element","values":[]},{"name":"fullsize","description":"Get the breakpoint at which the Modal will change from normal mode to fullsize mode","values":[]},{"name":"show-close-button","description":"Get whether the close button is shown","values":[]},{"name":"suppress-enter-key","description":"Get whether the Enter key is suppressed from dismissing the modal","values":[]},{"name":"close-button","description":"Get the close button element","values":[]},{"name":"overlay","description":"Sets the overlay element for the modal","values":[]},{"name":"message-title","description":"Sets the content of the message's title","values":[]},{"name":"scrollable","description":"Get the modal scrollable setting","values":[]},{"name":"visible","description":"Sets whether the Modal is visible","values":[]},{"name":"is-service-message","values":[]},{"name":"click-outside-to-close","description":"Set whether or not to allow the modal to close by clicking outside","values":[]},{"name":"height","description":"Get the modal height","values":[]},{"name":"width","description":"Get the modal width","values":[]},{"name":"overflow","description":"Get the overflow behavior for the modal content","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# ids-action-panel\n\nThe ids-action-panel displays complex forms inside of a [ids-modal](../ids-modal/README.md) area.\n\n## Features (With Code Examples)\n\nAction Panels with no content look similar to a modal, presenting a floating content area over top of the page:\n\n```html\n\n```\n\nOne main difference between the Modal and Action Panel is the `toolbar` slot. It's placed where the modal title normally appears, and is styled similar to that of the [ids-header]('../ids-header/README.md). The contents of this slot should be [ids-toolbar]('../ids-toolbar/README.md) marked for the `toolbar` slot:\n\n```html\n\n \n \n Company Information\n \n\n \n \n Save\n \n \n \n Close\n \n \n \n\n```\n\nSimilar to the modal, any content not marked for a slot will be present inside the main content area of the action panel:\n\n```html\n\n
\n \n \n None\n Template #1\n 3568\n \n \n\n \n
\n\n```\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Did not exist in 3.X, but any complex modals should be changed to use this.\n\n**4.x to 5.x**\n\n- 5.x: CAP is now a web component, and is functionally similar to [IdsModal](../ids-modal/README.md), using the same API and events. The construction of the Modal is declarative and done mostly through HTML markup.\n- Markup has changed to a custom element ``\n- Component is now fully defined in HTML Markup and using slots\n- To hide and show the CAP, use the `visible` property `$('ids-action-panel').visible = false`\n"}},{"name":"ids-avatar","attributes":[{"name":"type","description":"Set the type","values":[]},{"name":"value","description":"Set the value","values":[]},{"name":"user-status","description":"Set the user status","values":[]},{"name":"src","description":"Set the src","values":[]},{"name":"alt","description":"Set the alt","values":[]},{"name":"color","description":"Set the color","values":[]}],"description":{"kind":"markdown","value":"# ids-avatar\n\n## Description\n\nThe ids-avatar is similar to a `` HTML element, with advanced options for initials, modules and images. See more [usage details](https://design.infor.com/components/avatar).\n\n## Use Cases\n\n- Use avatars to help users easily recognize their own profiles or those of team members.\n- They’re typically placed in top bars or side panels, allowing quick access to profile settings or account menus.\n\n## Terminology\n\n- **Avatar**: The UX element that is the container for a module, initials or an image\n\n## Methods\n\n- `generateStatusIcon(SVGDefsElement | string)` Generates an HTML string containing the status icon based on the user's status.\n\n## Features (With Code Examples)\n\nFor an image type avatar\n\n```html\n\n```\n\nFor a module type avatar\n\n```html\nNS\n```\n\nFor a initials type avatar\n\n```html\nNS\n```\n\n## Types of Colors\n\n- Blue\n- Green\n- Orange\n- Red\n- Gray\n- Teal\n- Purple\n\nTo change color follow the template below\n\n```html\nNS\n```\n\n## Types of Statuses\n\n- Available\n- Away\n- Busy\n- Do Not Disturb\n- Unknown\n- Meeting\n\nTo change or add status follow the template below\n\n```html\nNS\n```\n\n## Settings\n\n- `type` {string} Sets whether avatar will be a module, initials or image, use `value='' | undefined | null`.\n- `value` {string} Sets value of the avatar, use `value='' | undefined | null`.\n- `src` {string} Sets src for the image of avatar, use `value='' | undefined | null`.\n- `alt` {string} Sets alt text in case the image is not available, use `value='' | undefined | null`.\n- `userStatus` {string} Sets the status of the avatar, use `value='' | undefined | null`.\n\n## Designs\n\n[Design Specs](https://www.figma.com/design/jtITSyWj4WgExjO6abjTpE/%5BIDS%5D-5.0-Library?m=auto&node-id=2-6&t=9araFmCahH9uWexX-1)"}},{"name":"ids-axis-chart","attributes":[{"name":"initialized","values":[]},{"name":"data-loaded","values":[]},{"name":"svg","values":[]},{"name":"canvas","values":[]},{"name":"empty-message","values":[]},{"name":"legend","values":[]},{"name":"section-widths","values":[]},{"name":"section-width","values":[]},{"name":"section-heights","values":[]},{"name":"section-height","values":[]},{"name":"resize-to-parent-height","values":[]},{"name":"resize-to-parent-width","values":[]},{"name":"datasource","description":"Reference to datasource API","values":[]},{"name":"vetoable-event-types","values":[]},{"name":"is-grouped","values":[]},{"name":"#x-max-text-width","description":"Max width for x-labels text","values":[]},{"name":"#y-max-text-width","description":"Max width for y-labels text","values":[]},{"name":"#resize-observer","description":"Holds the resize observer object","values":[]},{"name":"marker-data","description":"The marker data to use to draw the chart","values":[]},{"name":"#axis-labels-text","description":"Holds the axis labels text object","values":[]},{"name":"title","description":"Get the chart title","values":[]},{"name":"height","description":"Get the chart height","values":[]},{"name":"horizontal","description":"Get the horizontal orientation state","values":[]},{"name":"width","description":"Get the chart width","values":[]},{"name":"chart-container","description":"Get the chart container element","values":[]},{"name":"margins","description":"Get the chart margins","values":[]},{"name":"left-rotate-margin","description":"Get left rotate margin for rotated labels","values":[]},{"name":"right-rotate-margin","description":"Get right rotate margin for rotated labels","values":[]},{"name":"bottom-rotate-margin","description":"Get bottom rotate margin for rotated labels","values":[]},{"name":"axis-labels-margin","description":"Get axis labels margin values","values":[]},{"name":"text-widths","description":"Get text widths for chart dimensions","values":[]},{"name":"data","description":"Get the chart data","values":[]},{"name":"y-axis-min","description":"Get the minimum value on the y axis","values":[]},{"name":"ticks","description":"Get the number of ticks to show","values":[]},{"name":"show-tooltip","description":"Get the show tooltip state","values":[]},{"name":"show-vertical-grid-lines","description":"Get the show vertical grid lines state","values":[]},{"name":"show-horizontal-grid-lines","description":"Get the show horizontal grid lines state","values":[]},{"name":"colors","description":"Get the colors series being used in this chart","values":[]},{"name":"x-axis-formatter","description":"Get the x axis formatter","values":[]},{"name":"y-axis-formatter","description":"Get the y axis formatter","values":[]},{"name":"cubic-bezier","description":"Get a reusable snippet to ease the animation","values":[]},{"name":"animated","description":"Get the animation state","values":[]},{"name":"animation-speed","description":"Get the animation speed","values":[]},{"name":"align-xlabels","description":"Get the x axis label alignment","values":[]},{"name":"stacked","description":"Get the stacked state","values":[]},{"name":"axis-label-bottom","description":"Get the bottom axis label text","values":[]},{"name":"axis-label-end","description":"Get the end axis label text","values":[]},{"name":"axis-label-margin","description":"Get the margin for axis label text","values":[]},{"name":"axis-label-start","description":"Get the start axis label text","values":[]},{"name":"axis-label-top","description":"Get the top axis label text","values":[]},{"name":"rotate-name-labels","description":"Get the rotation for the axis name label text","values":[]},{"name":"use-log-scale","description":"Get the log scale state","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# ids-axis-chart\n\n## Description\n\nThe axis chart is a chart with an x-axis and y-axis. This is the base chart object used to make line, area, column and other charts. Generally it should not be used on its own but if you have a case of making some other chart it could be used.\n\n## Use Cases\n\n- When you want a chart with x and y axis and control over whats rendered in it.\n\n## Usage Considerations\n\n- Do not show too many lines at once as it may be difficult to interpret.\n- Hover tooltips should only be used to reveal additional non-critical information.\n\n## Terminology\n\n- **Marker**: A UI embellishments that shows the data points (i.e. the dots on a line chart).\n- **Domain**: The domain is all x-values (the values of the graph from left to right)\n- **Range**: The domain is all y-values (the values of the graph from down to up)\n- **Scale**: The range of values in the graph (the values of the graph from down to up) and the amount of steps between each value.\n- **Axis**: Charts typically have two axes that are used to measure and categorize data: a vertical axis (also known as value axis or y axis), and a horizontal axis (also known as category axis or x axis).\n\n## Features (With Code Examples)\n\nA axis chart is defined with a custom element with a width and height.\n\n```html\n\n```\n\nDatasets can be added to the line chart by passing in an array of objects. Each object must have a `data` and object with `name` and `values` from the data points. Also a name should be given for each data object which will be used as the legend text. The `shortName` is used to show the short name of the legend text and the `abbrName` is used to show an even shorter name of the legend text in responsive situations.\n\n```html\nconst dataset = [{\n data: [{\n name: 'Jan',\n value: 1\n }, {\n name: 'Feb',\n value: 2\n }, {\n name: 'Mar',\n value: 3\n }, {\n name: 'Apr',\n value: 5\n }, {\n name: 'May',\n value: 7\n }, {\n name: 'Jun',\n value: 10\n }],\n name: 'Component A',\n shortName: 'Comp A',\n abbrName: 'A',\n}];\n\ndocument.querySelector('ids-axis-chart').data = dataset;\n```\n\nInside the chart you should provide a chartTemplate that returns the inside (markers) of the chart as svg. The `lineMarkers` element will contain the correct points and position of the markers to use based on the data/height/width/margins of the chart.\n\n```js\nchartTemplate() {\n return `\n ${this.lineMarkers().markers}\n \n \n ${this.lineMarkers().lines}\n \n \n ${this.#areas()}\n `;\n}\n```\n\nYou can also customize the empty message contents but adding an `ids-empty-element` to the slot.\n\n```html\n\n \n\n```\n\nAnother type of chart you can use is a sequential color chart. A sequence of colors is used to represent various concepts of range in low-high density, quantity, and concentration situations. I.E. The data is highly related and should be represented with a single color.\n\nTo achieve this it is recommended to use the `color` setting and pick one of the Ids Colors in the color palette and use variables in its range. For example:\n\n```js\n[{\n \"data\": [],\n \"name\": \"Component A\",\n \"color\": \"var(--ids-color-blue-60)\n }, {\n \"data\": [],\n \"name\": \"Component B\",\n \"shortName\": \"Comp B\",\n \"abbreviatedName\": \"B\",\n \"color\": \"var(--ids-color-blue-40)\"\n }, {\n \"data\": [{\n ],\n \"name\": \"Component C\",\n \"color\": \"var(--ids-color-blue-20)\"\n }]\n```\n\nYou can add axis labels all around (bottom, end, start, top).\n\n```html\n\n```\n\nShowing component as horizontal orientation.\n\n```html\n\n```\n\n## Class Hierarchy\n\n- IdsAxisChart\n - IdsElement\n- Mixins\n IdsEventsMixin\n IdsLocaleMixin\n IdsChartLegendMixin\n IdsChartSelectionMixin\n\n## Data Settings\n\nThe following data attributes can be used on the data passed to a chart.\n\n- `data` {object} A data group with one or more `name` and `value` pairs.\n- `name` {string} The name for the legend text and tooltip representing the slice. If the name is left null or undefined the legend item will not be shown.\n- `shortName` {string} The short name of the legend text.\n- `abbrName` {string} A very short name of the legend text (one or two characters).\n- `color` {string} The color of this axis group. This can be either a hex value for example `#FF0000` or a color name like `red` or an ids variable like `var(--ids-color-blue-20)`.\n- `tooltip` {string} The custom tooltip string (as static text). See the tooltip section for more information.\n\n## Settings\n\n- `title` {string} Sets the internal title of the chart (for accessibility). It is recommended to mention the chart type for accessibility readout. For example: `Line chart showing invoice history`.\n- `height` {number|string} Generally this is calculated automatically but can be used to set a specific height. Can also be set to `'fluid'` to make the chart resize with its container, or `'inherit'` for similar behavior.\n- `width` {number|string} Generally this is calculated automatically but can be used to set a specific width. Can also be set to `'fluid'` to make the chart resize with its container, or `'inherit'` for similar behavior.\n- `textWidths` {object} Generally this is calculated automatically but can be overridden by setting the amount of space to allocate for margins on the `{ left, right, top, bottom }` sides.\n- `xAxisMin` {number} Set the minimum value on the x axis (default: 0)\n- `yAxisMin` {number} Set the minimum value on the y axis (default: 0)\n- `showVerticalGridLines` {boolean} Show the vertical axis grid lines (default: false)\n- `showHorizontalGridLines` {boolean} Show the horizontal axis grid lines (default: true)\n- `yAxisFormatter` {object | Function} Sets the format on the y axis items. This can either be settings that are passed to `Intl.NumberFormat` or a formatter function. The formatter function will get three parameters (value, data, api) and should return a string based on the axis value. The y axis is not always a number so it does not default to `Intl.NumberFormat`. The default is `{ notation: 'compact', compactDisplay: 'short' }`.\n- `xAxisFormatter` {Function} Sets the format on the x axis items. The formatter function will get three parameters (value, data, api) and should return a string based on the axis value. The x axis is not always a number so it does not default to `Intl.NumberFormat`. See the [Intl.NumberFormat api](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for more details and examples on formatting options.\n- `horizontal` {boolean} Flips the orientation to horizontal, supported `Axis` and `Bar` type charts.\n- `selectable` {boolean} Sets the selection mode.\n- `axisLabelBottom` {string} Option to add bottom axis label.\n- `axisLabelEnd` {string} Option to add horizontally end side axis label.\n- `axisLabelStart` {string} Option to add horizontally start side axis label.\n- `axisLabelTop` {string} Option to add top axis label.\n- `axisLabelMargin` {number} Axis label margin value.\n- `rotateNameLabels` {string|number} Sets the rotation of the labels on the name axis (style guide recommends -60 but you may want to tweak it based on labels. The `shortName` and `abbreviatedName` labels do not work with this setting.\n- `ticks` {number} Sets the number of ticks to show, to either reduce or show more ticks on the axis. This is an approximation based on the shape of the data and height of the chart the exact number of ticks specified might be altered to fit the algorithm.\n\n## Events\n\n- `rendered` Fires each time the chart is rendered or rerendered (on resize).\n- `beforeselected` Fires before selected, you can return false in the response to veto.\n- `selected` Fires after selected.\n- `beforedeselected` Fires before deselected, you can return false in the response to veto.\n- `deselected` Fires after deselected.\n\n## Themeable Parts\n\n- `container` the outer container div element\n- `chart` the svg outer element\n\n## States and Variations\n\n- Theme\n- Legends\n- Selectable\n\n## Responsive Guidelines\n\n- Sizes to the given width/height defaulting to that of the immediate parent.\n\n## Tooltip Customizations\n\nYou can customize the tooltip by changing some of the API settings. For just a static tooltip you can use the `tooltip` setting in the data at the same place as the `name` property.\n\nIf you need to change which items get tooltips you can override `tooltipElements` getter.\n\n```js\ntooltipElements() {\n return this.container.querySelectorAll('rect.bar');\n}\n\nIf you need to change the tooltip contents you can override the `tooltipTemplate` function.\n\n```js\ntooltipTemplate() {\n return '${label} ${value}';\n}\n```\n\nOr you can modify the tooltip in the slot.\n\n## Why Not Canvas?\n\nWe decided to use SVG over Canvas because of the following reasons:\n\n- Canvas is not part of the DOM thus not accessible by screen readers.\n- Canvas is more difficult to make interactive and responsive.\n- Would be generally more maintainable.\n- SVG output is easier to debug.\n"}},{"name":"ids-chart-colors","description":{"kind":"markdown","value":"# ids-axis-chart\n\n## Description\n\nThe axis chart is a chart with an x-axis and y-axis. This is the base chart object used to make line, area, column and other charts. Generally it should not be used on its own but if you have a case of making some other chart it could be used.\n\n## Use Cases\n\n- When you want a chart with x and y axis and control over whats rendered in it.\n\n## Usage Considerations\n\n- Do not show too many lines at once as it may be difficult to interpret.\n- Hover tooltips should only be used to reveal additional non-critical information.\n\n## Terminology\n\n- **Marker**: A UI embellishments that shows the data points (i.e. the dots on a line chart).\n- **Domain**: The domain is all x-values (the values of the graph from left to right)\n- **Range**: The domain is all y-values (the values of the graph from down to up)\n- **Scale**: The range of values in the graph (the values of the graph from down to up) and the amount of steps between each value.\n- **Axis**: Charts typically have two axes that are used to measure and categorize data: a vertical axis (also known as value axis or y axis), and a horizontal axis (also known as category axis or x axis).\n\n## Features (With Code Examples)\n\nA axis chart is defined with a custom element with a width and height.\n\n```html\n\n```\n\nDatasets can be added to the line chart by passing in an array of objects. Each object must have a `data` and object with `name` and `values` from the data points. Also a name should be given for each data object which will be used as the legend text. The `shortName` is used to show the short name of the legend text and the `abbrName` is used to show an even shorter name of the legend text in responsive situations.\n\n```html\nconst dataset = [{\n data: [{\n name: 'Jan',\n value: 1\n }, {\n name: 'Feb',\n value: 2\n }, {\n name: 'Mar',\n value: 3\n }, {\n name: 'Apr',\n value: 5\n }, {\n name: 'May',\n value: 7\n }, {\n name: 'Jun',\n value: 10\n }],\n name: 'Component A',\n shortName: 'Comp A',\n abbrName: 'A',\n}];\n\ndocument.querySelector('ids-axis-chart').data = dataset;\n```\n\nInside the chart you should provide a chartTemplate that returns the inside (markers) of the chart as svg. The `lineMarkers` element will contain the correct points and position of the markers to use based on the data/height/width/margins of the chart.\n\n```js\nchartTemplate() {\n return `\n ${this.lineMarkers().markers}\n \n \n ${this.lineMarkers().lines}\n \n \n ${this.#areas()}\n `;\n}\n```\n\nYou can also customize the empty message contents but adding an `ids-empty-element` to the slot.\n\n```html\n\n \n\n```\n\nAnother type of chart you can use is a sequential color chart. A sequence of colors is used to represent various concepts of range in low-high density, quantity, and concentration situations. I.E. The data is highly related and should be represented with a single color.\n\nTo achieve this it is recommended to use the `color` setting and pick one of the Ids Colors in the color palette and use variables in its range. For example:\n\n```js\n[{\n \"data\": [],\n \"name\": \"Component A\",\n \"color\": \"var(--ids-color-blue-60)\n }, {\n \"data\": [],\n \"name\": \"Component B\",\n \"shortName\": \"Comp B\",\n \"abbreviatedName\": \"B\",\n \"color\": \"var(--ids-color-blue-40)\"\n }, {\n \"data\": [{\n ],\n \"name\": \"Component C\",\n \"color\": \"var(--ids-color-blue-20)\"\n }]\n```\n\nYou can add axis labels all around (bottom, end, start, top).\n\n```html\n\n```\n\nShowing component as horizontal orientation.\n\n```html\n\n```\n\n## Class Hierarchy\n\n- IdsAxisChart\n - IdsElement\n- Mixins\n IdsEventsMixin\n IdsLocaleMixin\n IdsChartLegendMixin\n IdsChartSelectionMixin\n\n## Data Settings\n\nThe following data attributes can be used on the data passed to a chart.\n\n- `data` {object} A data group with one or more `name` and `value` pairs.\n- `name` {string} The name for the legend text and tooltip representing the slice. If the name is left null or undefined the legend item will not be shown.\n- `shortName` {string} The short name of the legend text.\n- `abbrName` {string} A very short name of the legend text (one or two characters).\n- `color` {string} The color of this axis group. This can be either a hex value for example `#FF0000` or a color name like `red` or an ids variable like `var(--ids-color-blue-20)`.\n- `tooltip` {string} The custom tooltip string (as static text). See the tooltip section for more information.\n\n## Settings\n\n- `title` {string} Sets the internal title of the chart (for accessibility). It is recommended to mention the chart type for accessibility readout. For example: `Line chart showing invoice history`.\n- `height` {number|string} Generally this is calculated automatically but can be used to set a specific height. Can also be set to `'fluid'` to make the chart resize with its container, or `'inherit'` for similar behavior.\n- `width` {number|string} Generally this is calculated automatically but can be used to set a specific width. Can also be set to `'fluid'` to make the chart resize with its container, or `'inherit'` for similar behavior.\n- `textWidths` {object} Generally this is calculated automatically but can be overridden by setting the amount of space to allocate for margins on the `{ left, right, top, bottom }` sides.\n- `xAxisMin` {number} Set the minimum value on the x axis (default: 0)\n- `yAxisMin` {number} Set the minimum value on the y axis (default: 0)\n- `showVerticalGridLines` {boolean} Show the vertical axis grid lines (default: false)\n- `showHorizontalGridLines` {boolean} Show the horizontal axis grid lines (default: true)\n- `yAxisFormatter` {object | Function} Sets the format on the y axis items. This can either be settings that are passed to `Intl.NumberFormat` or a formatter function. The formatter function will get three parameters (value, data, api) and should return a string based on the axis value. The y axis is not always a number so it does not default to `Intl.NumberFormat`. The default is `{ notation: 'compact', compactDisplay: 'short' }`.\n- `xAxisFormatter` {Function} Sets the format on the x axis items. The formatter function will get three parameters (value, data, api) and should return a string based on the axis value. The x axis is not always a number so it does not default to `Intl.NumberFormat`. See the [Intl.NumberFormat api](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for more details and examples on formatting options.\n- `horizontal` {boolean} Flips the orientation to horizontal, supported `Axis` and `Bar` type charts.\n- `selectable` {boolean} Sets the selection mode.\n- `axisLabelBottom` {string} Option to add bottom axis label.\n- `axisLabelEnd` {string} Option to add horizontally end side axis label.\n- `axisLabelStart` {string} Option to add horizontally start side axis label.\n- `axisLabelTop` {string} Option to add top axis label.\n- `axisLabelMargin` {number} Axis label margin value.\n- `rotateNameLabels` {string|number} Sets the rotation of the labels on the name axis (style guide recommends -60 but you may want to tweak it based on labels. The `shortName` and `abbreviatedName` labels do not work with this setting.\n- `ticks` {number} Sets the number of ticks to show, to either reduce or show more ticks on the axis. This is an approximation based on the shape of the data and height of the chart the exact number of ticks specified might be altered to fit the algorithm.\n\n## Events\n\n- `rendered` Fires each time the chart is rendered or rerendered (on resize).\n- `beforeselected` Fires before selected, you can return false in the response to veto.\n- `selected` Fires after selected.\n- `beforedeselected` Fires before deselected, you can return false in the response to veto.\n- `deselected` Fires after deselected.\n\n## Themeable Parts\n\n- `container` the outer container div element\n- `chart` the svg outer element\n\n## States and Variations\n\n- Theme\n- Legends\n- Selectable\n\n## Responsive Guidelines\n\n- Sizes to the given width/height defaulting to that of the immediate parent.\n\n## Tooltip Customizations\n\nYou can customize the tooltip by changing some of the API settings. For just a static tooltip you can use the `tooltip` setting in the data at the same place as the `name` property.\n\nIf you need to change which items get tooltips you can override `tooltipElements` getter.\n\n```js\ntooltipElements() {\n return this.container.querySelectorAll('rect.bar');\n}\n\nIf you need to change the tooltip contents you can override the `tooltipTemplate` function.\n\n```js\ntooltipTemplate() {\n return '${label} ${value}';\n}\n```\n\nOr you can modify the tooltip in the slot.\n\n## Why Not Canvas?\n\nWe decided to use SVG over Canvas because of the following reasons:\n\n- Canvas is not part of the DOM thus not accessible by screen readers.\n- Canvas is more difficult to make interactive and responsive.\n- Would be generally more maintainable.\n- SVG output is easier to debug.\n"}},{"name":"ids-nice-scale","attributes":[{"name":"#min-point","description":"The calculated or provided min value to show","values":[]},{"name":"#max-point","description":"The calculated or provided max value","values":[]},{"name":"#max-ticks","description":"The calculated or provided max ticks","values":[]},{"name":"#range","description":"The calculated tick spacing","values":[]},{"name":"tick-spacing","description":"The calculated tick spacing","values":[]},{"name":"nice-min","description":"The calculated nice min value","values":[]},{"name":"nice-max","description":"The calculated nice max value","values":[]}],"description":{"kind":"markdown","value":"# ids-axis-chart\n\n## Description\n\nThe axis chart is a chart with an x-axis and y-axis. This is the base chart object used to make line, area, column and other charts. Generally it should not be used on its own but if you have a case of making some other chart it could be used.\n\n## Use Cases\n\n- When you want a chart with x and y axis and control over whats rendered in it.\n\n## Usage Considerations\n\n- Do not show too many lines at once as it may be difficult to interpret.\n- Hover tooltips should only be used to reveal additional non-critical information.\n\n## Terminology\n\n- **Marker**: A UI embellishments that shows the data points (i.e. the dots on a line chart).\n- **Domain**: The domain is all x-values (the values of the graph from left to right)\n- **Range**: The domain is all y-values (the values of the graph from down to up)\n- **Scale**: The range of values in the graph (the values of the graph from down to up) and the amount of steps between each value.\n- **Axis**: Charts typically have two axes that are used to measure and categorize data: a vertical axis (also known as value axis or y axis), and a horizontal axis (also known as category axis or x axis).\n\n## Features (With Code Examples)\n\nA axis chart is defined with a custom element with a width and height.\n\n```html\n\n```\n\nDatasets can be added to the line chart by passing in an array of objects. Each object must have a `data` and object with `name` and `values` from the data points. Also a name should be given for each data object which will be used as the legend text. The `shortName` is used to show the short name of the legend text and the `abbrName` is used to show an even shorter name of the legend text in responsive situations.\n\n```html\nconst dataset = [{\n data: [{\n name: 'Jan',\n value: 1\n }, {\n name: 'Feb',\n value: 2\n }, {\n name: 'Mar',\n value: 3\n }, {\n name: 'Apr',\n value: 5\n }, {\n name: 'May',\n value: 7\n }, {\n name: 'Jun',\n value: 10\n }],\n name: 'Component A',\n shortName: 'Comp A',\n abbrName: 'A',\n}];\n\ndocument.querySelector('ids-axis-chart').data = dataset;\n```\n\nInside the chart you should provide a chartTemplate that returns the inside (markers) of the chart as svg. The `lineMarkers` element will contain the correct points and position of the markers to use based on the data/height/width/margins of the chart.\n\n```js\nchartTemplate() {\n return `\n ${this.lineMarkers().markers}\n \n \n ${this.lineMarkers().lines}\n \n \n ${this.#areas()}\n `;\n}\n```\n\nYou can also customize the empty message contents but adding an `ids-empty-element` to the slot.\n\n```html\n\n \n\n```\n\nAnother type of chart you can use is a sequential color chart. A sequence of colors is used to represent various concepts of range in low-high density, quantity, and concentration situations. I.E. The data is highly related and should be represented with a single color.\n\nTo achieve this it is recommended to use the `color` setting and pick one of the Ids Colors in the color palette and use variables in its range. For example:\n\n```js\n[{\n \"data\": [],\n \"name\": \"Component A\",\n \"color\": \"var(--ids-color-blue-60)\n }, {\n \"data\": [],\n \"name\": \"Component B\",\n \"shortName\": \"Comp B\",\n \"abbreviatedName\": \"B\",\n \"color\": \"var(--ids-color-blue-40)\"\n }, {\n \"data\": [{\n ],\n \"name\": \"Component C\",\n \"color\": \"var(--ids-color-blue-20)\"\n }]\n```\n\nYou can add axis labels all around (bottom, end, start, top).\n\n```html\n\n```\n\nShowing component as horizontal orientation.\n\n```html\n\n```\n\n## Class Hierarchy\n\n- IdsAxisChart\n - IdsElement\n- Mixins\n IdsEventsMixin\n IdsLocaleMixin\n IdsChartLegendMixin\n IdsChartSelectionMixin\n\n## Data Settings\n\nThe following data attributes can be used on the data passed to a chart.\n\n- `data` {object} A data group with one or more `name` and `value` pairs.\n- `name` {string} The name for the legend text and tooltip representing the slice. If the name is left null or undefined the legend item will not be shown.\n- `shortName` {string} The short name of the legend text.\n- `abbrName` {string} A very short name of the legend text (one or two characters).\n- `color` {string} The color of this axis group. This can be either a hex value for example `#FF0000` or a color name like `red` or an ids variable like `var(--ids-color-blue-20)`.\n- `tooltip` {string} The custom tooltip string (as static text). See the tooltip section for more information.\n\n## Settings\n\n- `title` {string} Sets the internal title of the chart (for accessibility). It is recommended to mention the chart type for accessibility readout. For example: `Line chart showing invoice history`.\n- `height` {number|string} Generally this is calculated automatically but can be used to set a specific height. Can also be set to `'fluid'` to make the chart resize with its container, or `'inherit'` for similar behavior.\n- `width` {number|string} Generally this is calculated automatically but can be used to set a specific width. Can also be set to `'fluid'` to make the chart resize with its container, or `'inherit'` for similar behavior.\n- `textWidths` {object} Generally this is calculated automatically but can be overridden by setting the amount of space to allocate for margins on the `{ left, right, top, bottom }` sides.\n- `xAxisMin` {number} Set the minimum value on the x axis (default: 0)\n- `yAxisMin` {number} Set the minimum value on the y axis (default: 0)\n- `showVerticalGridLines` {boolean} Show the vertical axis grid lines (default: false)\n- `showHorizontalGridLines` {boolean} Show the horizontal axis grid lines (default: true)\n- `yAxisFormatter` {object | Function} Sets the format on the y axis items. This can either be settings that are passed to `Intl.NumberFormat` or a formatter function. The formatter function will get three parameters (value, data, api) and should return a string based on the axis value. The y axis is not always a number so it does not default to `Intl.NumberFormat`. The default is `{ notation: 'compact', compactDisplay: 'short' }`.\n- `xAxisFormatter` {Function} Sets the format on the x axis items. The formatter function will get three parameters (value, data, api) and should return a string based on the axis value. The x axis is not always a number so it does not default to `Intl.NumberFormat`. See the [Intl.NumberFormat api](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for more details and examples on formatting options.\n- `horizontal` {boolean} Flips the orientation to horizontal, supported `Axis` and `Bar` type charts.\n- `selectable` {boolean} Sets the selection mode.\n- `axisLabelBottom` {string} Option to add bottom axis label.\n- `axisLabelEnd` {string} Option to add horizontally end side axis label.\n- `axisLabelStart` {string} Option to add horizontally start side axis label.\n- `axisLabelTop` {string} Option to add top axis label.\n- `axisLabelMargin` {number} Axis label margin value.\n- `rotateNameLabels` {string|number} Sets the rotation of the labels on the name axis (style guide recommends -60 but you may want to tweak it based on labels. The `shortName` and `abbreviatedName` labels do not work with this setting.\n- `ticks` {number} Sets the number of ticks to show, to either reduce or show more ticks on the axis. This is an approximation based on the shape of the data and height of the chart the exact number of ticks specified might be altered to fit the algorithm.\n\n## Events\n\n- `rendered` Fires each time the chart is rendered or rerendered (on resize).\n- `beforeselected` Fires before selected, you can return false in the response to veto.\n- `selected` Fires after selected.\n- `beforedeselected` Fires before deselected, you can return false in the response to veto.\n- `deselected` Fires after deselected.\n\n## Themeable Parts\n\n- `container` the outer container div element\n- `chart` the svg outer element\n\n## States and Variations\n\n- Theme\n- Legends\n- Selectable\n\n## Responsive Guidelines\n\n- Sizes to the given width/height defaulting to that of the immediate parent.\n\n## Tooltip Customizations\n\nYou can customize the tooltip by changing some of the API settings. For just a static tooltip you can use the `tooltip` setting in the data at the same place as the `name` property.\n\nIf you need to change which items get tooltips you can override `tooltipElements` getter.\n\n```js\ntooltipElements() {\n return this.container.querySelectorAll('rect.bar');\n}\n\nIf you need to change the tooltip contents you can override the `tooltipTemplate` function.\n\n```js\ntooltipTemplate() {\n return '${label} ${value}';\n}\n```\n\nOr you can modify the tooltip in the slot.\n\n## Why Not Canvas?\n\nWe decided to use SVG over Canvas because of the following reasons:\n\n- Canvas is not part of the DOM thus not accessible by screen readers.\n- Canvas is more difficult to make interactive and responsive.\n- Would be generally more maintainable.\n- SVG output is easier to debug.\n"}},{"name":"ids-pattern-data","description":{"kind":"markdown","value":"# ids-axis-chart\n\n## Description\n\nThe axis chart is a chart with an x-axis and y-axis. This is the base chart object used to make line, area, column and other charts. Generally it should not be used on its own but if you have a case of making some other chart it could be used.\n\n## Use Cases\n\n- When you want a chart with x and y axis and control over whats rendered in it.\n\n## Usage Considerations\n\n- Do not show too many lines at once as it may be difficult to interpret.\n- Hover tooltips should only be used to reveal additional non-critical information.\n\n## Terminology\n\n- **Marker**: A UI embellishments that shows the data points (i.e. the dots on a line chart).\n- **Domain**: The domain is all x-values (the values of the graph from left to right)\n- **Range**: The domain is all y-values (the values of the graph from down to up)\n- **Scale**: The range of values in the graph (the values of the graph from down to up) and the amount of steps between each value.\n- **Axis**: Charts typically have two axes that are used to measure and categorize data: a vertical axis (also known as value axis or y axis), and a horizontal axis (also known as category axis or x axis).\n\n## Features (With Code Examples)\n\nA axis chart is defined with a custom element with a width and height.\n\n```html\n\n```\n\nDatasets can be added to the line chart by passing in an array of objects. Each object must have a `data` and object with `name` and `values` from the data points. Also a name should be given for each data object which will be used as the legend text. The `shortName` is used to show the short name of the legend text and the `abbrName` is used to show an even shorter name of the legend text in responsive situations.\n\n```html\nconst dataset = [{\n data: [{\n name: 'Jan',\n value: 1\n }, {\n name: 'Feb',\n value: 2\n }, {\n name: 'Mar',\n value: 3\n }, {\n name: 'Apr',\n value: 5\n }, {\n name: 'May',\n value: 7\n }, {\n name: 'Jun',\n value: 10\n }],\n name: 'Component A',\n shortName: 'Comp A',\n abbrName: 'A',\n}];\n\ndocument.querySelector('ids-axis-chart').data = dataset;\n```\n\nInside the chart you should provide a chartTemplate that returns the inside (markers) of the chart as svg. The `lineMarkers` element will contain the correct points and position of the markers to use based on the data/height/width/margins of the chart.\n\n```js\nchartTemplate() {\n return `\n ${this.lineMarkers().markers}\n \n \n ${this.lineMarkers().lines}\n \n \n ${this.#areas()}\n `;\n}\n```\n\nYou can also customize the empty message contents but adding an `ids-empty-element` to the slot.\n\n```html\n\n \n\n```\n\nAnother type of chart you can use is a sequential color chart. A sequence of colors is used to represent various concepts of range in low-high density, quantity, and concentration situations. I.E. The data is highly related and should be represented with a single color.\n\nTo achieve this it is recommended to use the `color` setting and pick one of the Ids Colors in the color palette and use variables in its range. For example:\n\n```js\n[{\n \"data\": [],\n \"name\": \"Component A\",\n \"color\": \"var(--ids-color-blue-60)\n }, {\n \"data\": [],\n \"name\": \"Component B\",\n \"shortName\": \"Comp B\",\n \"abbreviatedName\": \"B\",\n \"color\": \"var(--ids-color-blue-40)\"\n }, {\n \"data\": [{\n ],\n \"name\": \"Component C\",\n \"color\": \"var(--ids-color-blue-20)\"\n }]\n```\n\nYou can add axis labels all around (bottom, end, start, top).\n\n```html\n\n```\n\nShowing component as horizontal orientation.\n\n```html\n\n```\n\n## Class Hierarchy\n\n- IdsAxisChart\n - IdsElement\n- Mixins\n IdsEventsMixin\n IdsLocaleMixin\n IdsChartLegendMixin\n IdsChartSelectionMixin\n\n## Data Settings\n\nThe following data attributes can be used on the data passed to a chart.\n\n- `data` {object} A data group with one or more `name` and `value` pairs.\n- `name` {string} The name for the legend text and tooltip representing the slice. If the name is left null or undefined the legend item will not be shown.\n- `shortName` {string} The short name of the legend text.\n- `abbrName` {string} A very short name of the legend text (one or two characters).\n- `color` {string} The color of this axis group. This can be either a hex value for example `#FF0000` or a color name like `red` or an ids variable like `var(--ids-color-blue-20)`.\n- `tooltip` {string} The custom tooltip string (as static text). See the tooltip section for more information.\n\n## Settings\n\n- `title` {string} Sets the internal title of the chart (for accessibility). It is recommended to mention the chart type for accessibility readout. For example: `Line chart showing invoice history`.\n- `height` {number|string} Generally this is calculated automatically but can be used to set a specific height. Can also be set to `'fluid'` to make the chart resize with its container, or `'inherit'` for similar behavior.\n- `width` {number|string} Generally this is calculated automatically but can be used to set a specific width. Can also be set to `'fluid'` to make the chart resize with its container, or `'inherit'` for similar behavior.\n- `textWidths` {object} Generally this is calculated automatically but can be overridden by setting the amount of space to allocate for margins on the `{ left, right, top, bottom }` sides.\n- `xAxisMin` {number} Set the minimum value on the x axis (default: 0)\n- `yAxisMin` {number} Set the minimum value on the y axis (default: 0)\n- `showVerticalGridLines` {boolean} Show the vertical axis grid lines (default: false)\n- `showHorizontalGridLines` {boolean} Show the horizontal axis grid lines (default: true)\n- `yAxisFormatter` {object | Function} Sets the format on the y axis items. This can either be settings that are passed to `Intl.NumberFormat` or a formatter function. The formatter function will get three parameters (value, data, api) and should return a string based on the axis value. The y axis is not always a number so it does not default to `Intl.NumberFormat`. The default is `{ notation: 'compact', compactDisplay: 'short' }`.\n- `xAxisFormatter` {Function} Sets the format on the x axis items. The formatter function will get three parameters (value, data, api) and should return a string based on the axis value. The x axis is not always a number so it does not default to `Intl.NumberFormat`. See the [Intl.NumberFormat api](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for more details and examples on formatting options.\n- `horizontal` {boolean} Flips the orientation to horizontal, supported `Axis` and `Bar` type charts.\n- `selectable` {boolean} Sets the selection mode.\n- `axisLabelBottom` {string} Option to add bottom axis label.\n- `axisLabelEnd` {string} Option to add horizontally end side axis label.\n- `axisLabelStart` {string} Option to add horizontally start side axis label.\n- `axisLabelTop` {string} Option to add top axis label.\n- `axisLabelMargin` {number} Axis label margin value.\n- `rotateNameLabels` {string|number} Sets the rotation of the labels on the name axis (style guide recommends -60 but you may want to tweak it based on labels. The `shortName` and `abbreviatedName` labels do not work with this setting.\n- `ticks` {number} Sets the number of ticks to show, to either reduce or show more ticks on the axis. This is an approximation based on the shape of the data and height of the chart the exact number of ticks specified might be altered to fit the algorithm.\n\n## Events\n\n- `rendered` Fires each time the chart is rendered or rerendered (on resize).\n- `beforeselected` Fires before selected, you can return false in the response to veto.\n- `selected` Fires after selected.\n- `beforedeselected` Fires before deselected, you can return false in the response to veto.\n- `deselected` Fires after deselected.\n\n## Themeable Parts\n\n- `container` the outer container div element\n- `chart` the svg outer element\n\n## States and Variations\n\n- Theme\n- Legends\n- Selectable\n\n## Responsive Guidelines\n\n- Sizes to the given width/height defaulting to that of the immediate parent.\n\n## Tooltip Customizations\n\nYou can customize the tooltip by changing some of the API settings. For just a static tooltip you can use the `tooltip` setting in the data at the same place as the `name` property.\n\nIf you need to change which items get tooltips you can override `tooltipElements` getter.\n\n```js\ntooltipElements() {\n return this.container.querySelectorAll('rect.bar');\n}\n\nIf you need to change the tooltip contents you can override the `tooltipTemplate` function.\n\n```js\ntooltipTemplate() {\n return '${label} ${value}';\n}\n```\n\nOr you can modify the tooltip in the slot.\n\n## Why Not Canvas?\n\nWe decided to use SVG over Canvas because of the following reasons:\n\n- Canvas is not part of the DOM thus not accessible by screen readers.\n- Canvas is more difficult to make interactive and responsive.\n- Would be generally more maintainable.\n- SVG output is easier to debug.\n"}},{"name":"ids-badge","attributes":[{"name":"shape","description":"Set the badge shape between normal (default) and round","values":[]},{"name":"color","description":"Set the color","values":[]},{"name":"disabled","description":"Sets the disabled state","values":[]},{"name":"no-margins","description":"Gets whether the badge has no margins","values":[]},{"name":"aria-label","description":"Get the aria-label","values":[]}],"description":{"kind":"markdown","value":"# ids-badge\n\n## Description\n\nThe ids-badge informs users of a status or count of an object. See more [usage details](https://design.infor.com/components/components/badge).\n\n## Terminology\n\n- **Badge**: Used to inform users of the status of an object or of an action.\n- **Color**: This is the color of the badge.\n- **Shape**: This is the shape of the badge. It can be round or rounded rectangle.\n\n## Themeable Parts\n\n- `badge` allows you to further style the badge element\n\n## Features (With Code Examples)\n\nA normal/no properties badge used as a web component.\n\n```html\n5\n```\n\nUse the `color` attribute to style badges as statuses:\n`alert`, `error`, `info`, `warning`, or `success`.\n\n```html\n10\n1500\n25k+\n16\n5\n```\n\nTo create a circular badge, use the `shape` attribute with the value `round`:\n\n```html\n10\n```\n\nFor improved accessibility, add an audible description using :\n\n```html\n404 In Error Condition\n```\n\nFor accessibility support, the badge automatically generates an `aria-label` based on its content:\n\n```html\n3\n\n```\n\nYou can also provide a custom `aria-label` for more specific context:\n\n```html\n3\n12\n```\n\n## Settings and Attributes\n\n- `aria-label` {string} Sets the accessible label for screen readers. If not provided, automatically generates one based on content.\n- `color` {string} Sets the status color of the badge. Values are `alert`, `error`, `warning`, `success`, or `info`.\n- `disabled` {boolean} Sets the disabled state.\n- `shape` {string} Sets the badge shape. Values are `normal` (default) or `round`.\n\n## States and Variations\n\n- Color\n- Disabled\n- Shape\n\n## Converting from Previous Versions (Breaking Changes)\n\n**4.x to 5.x**\n- Markup has changed to a custom element `\n- Can now be imported as a single JS file and used with encapsulated styles\n- The names of some badge types have changed.\n- The yellow warning is removed in favor of just the orange warning.\n- Some of the types/settings are changed.\n"}},{"name":"ids-bar-chart","attributes":[{"name":"selection-elements","description":"Return chart elements that get selection","values":[]},{"name":"group-count","description":"Number of groups count","values":[]},{"name":"align-xlabels","description":"Adjust the default for the x labels","values":[]},{"name":"bar-percentage","description":"Percent (0-1) of the available width each bar should be within the category width.\n1.0 will take the whole category width and put the bars right next to each other.\nif `isGrouped` this value, will use as whole group percentage.","values":[]},{"name":"category-percentage","description":"Percent (0-1) of the available width each category (group) section.","values":[]},{"name":"use-log-scale","description":"Get the log scale state","values":[]},{"name":"default-selectable","values":[]},{"name":"initialized","values":[]},{"name":"data-loaded","values":[]},{"name":"svg","values":[]},{"name":"canvas","values":[]},{"name":"empty-message","values":[]},{"name":"legend","values":[]},{"name":"section-widths","values":[]},{"name":"section-width","values":[]},{"name":"section-heights","values":[]},{"name":"section-height","values":[]},{"name":"resize-to-parent-height","values":[]},{"name":"resize-to-parent-width","values":[]},{"name":"datasource","description":"Reference to datasource API","values":[]},{"name":"vetoable-event-types","values":[]},{"name":"is-grouped","values":[]},{"name":"#x-max-text-width","description":"Max width for x-labels text","values":[]},{"name":"#y-max-text-width","description":"Max width for y-labels text","values":[]},{"name":"#resize-observer","description":"Holds the resize observer object","values":[]},{"name":"marker-data","description":"The marker data to use to draw the chart","values":[]},{"name":"#axis-labels-text","description":"Holds the axis labels text object","values":[]},{"name":"title","description":"Get the chart title","values":[]},{"name":"height","description":"Get the chart height","values":[]},{"name":"horizontal","description":"Get the horizontal orientation state","values":[]},{"name":"width","description":"Get the chart width","values":[]},{"name":"chart-container","description":"Get the chart container element","values":[]},{"name":"margins","description":"Get the chart margins","values":[]},{"name":"left-rotate-margin","description":"Get left rotate margin for rotated labels","values":[]},{"name":"right-rotate-margin","description":"Get right rotate margin for rotated labels","values":[]},{"name":"bottom-rotate-margin","description":"Get bottom rotate margin for rotated labels","values":[]},{"name":"axis-labels-margin","description":"Get axis labels margin values","values":[]},{"name":"text-widths","description":"Get text widths for chart dimensions","values":[]},{"name":"data","description":"Get the chart data","values":[]},{"name":"y-axis-min","description":"Get the minimum value on the y axis","values":[]},{"name":"ticks","description":"Get the number of ticks to show","values":[]},{"name":"show-tooltip","description":"Get the show tooltip state","values":[]},{"name":"show-vertical-grid-lines","description":"Get the show vertical grid lines state","values":[]},{"name":"show-horizontal-grid-lines","description":"Get the show horizontal grid lines state","values":[]},{"name":"colors","description":"Get the colors series being used in this chart","values":[]},{"name":"x-axis-formatter","description":"Get the x axis formatter","values":[]},{"name":"y-axis-formatter","description":"Get the y axis formatter","values":[]},{"name":"cubic-bezier","description":"Get a reusable snippet to ease the animation","values":[]},{"name":"animated","description":"Get the animation state","values":[]},{"name":"animation-speed","description":"Get the animation speed","values":[]},{"name":"stacked","description":"Get the stacked state","values":[]},{"name":"axis-label-bottom","description":"Get the bottom axis label text","values":[]},{"name":"axis-label-end","description":"Get the end axis label text","values":[]},{"name":"axis-label-margin","description":"Get the margin for axis label text","values":[]},{"name":"axis-label-start","description":"Get the start axis label text","values":[]},{"name":"axis-label-top","description":"Get the top axis label text","values":[]},{"name":"rotate-name-labels","description":"Get the rotation for the axis name label text","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# ids-bar-chart\n\n## Description\n\nAn bar chart is used to display relational information quickly for a quantity across a particular category. Users can interact by clicking or tapping on bars to drill in on a certain series of data. Users can also interact by hovering bars to reveal additional information in a tooltip. The x-axis could be any variable, such as time, or the category that is being measured.\n\nGrouped bar graphs, also called clustered bar graphs, represent discrete values for more than one item that share the same category. For example a grouped bar graph could display several categories within each main category such as male and female, within certain traits on the x-axis. To make a grouped bar chart provide the appropriately formatted data.\n\nStacked bar graphs or composite bar graphs divide an aggregate total into parts. Each segment adds to the total of the bar and are separated by different colors. To make a stacked bar chart use `stacked=\"true\"` and provide the appropriately formatted data.\n\n## Use Cases\n\n- Display an earnings per share (EPS)\n- Compare revenue or cash flow over time\n- Compares series through a visual representation of data in columns.\n- Quickly compares trends in a variety of ways\n\n## Usage Considerations\n\n- Do not show too many bars or too many categories or segments or the data may be hard to read.\n- Hover tooltips should only be used to reveal additional non-critical information.\n\n## Terminology\n\n- **Bar**: The UI element that represents a concrete value in a color.\n- **Category**: The section for each bar when grouping.\n- **Segment**: The section for each bar value when stacking\n\n## Features (With Code Examples)\n\nAn bar chart is defined with the custom element and width and height. This chart does support negative values for regular, horizontal and grouped charts (not stacked).\n\n```html\n \n```\n\nDatasets can be added to the bar chart by passing in an array of objects. Each object must have a `data` and object with `name` and `values` to form the data points. Also a name should be given for each data object which will be used as the legend text. The `shortName` is used to show the short name of the legend text and the `abbrName` is used to show an even shorter name of the legend text in responsive situations.\n\n```js\nconst dataset = [{\n data: [{\n name: 'Jan',\n value: 1\n }, {\n name: 'Feb',\n value: 2\n }, {\n name: 'Mar',\n value: 3\n }, {\n name: 'Apr',\n value: 5\n }, {\n name: 'May',\n value: 7\n }, {\n name: 'Jun',\n value: 10\n }],\n name: 'Component A',\n shortName: 'Comp A',\n abbrName: 'A',\n}];\n\ndocument.querySelector('ids-bar-chart').data = dataset;\n```\n\nA chart can also be `stacked` or `grouped`. Stacked bar graphs or composite bar graphs divide an aggregate total into parts. Each segment adds to the total of the bar and are separated by different colors.\n\nTo make a stacked bar chart use `stacked=\"true\"` and provide the appropriately formatted data.\n\n## Class Hierarchy\n\n- IdsBarChart\n - IdsAxisChart\n - IdsElement\n- Mixins\n IdsEventsMixin\n IdsLocaleMixin\n\n## Data Settings\n\n(See Axis Chart Settings for more information)\n\n## Settings\n\n- `barPercentage` {number} A percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other. In a grouped chart the barPercentage value, will use as whole category percentage. We change the defaults depending on stacked or grouped bar charts but this can be adjusted to change the bar sizes.\n- `categoryPercentage` {number} Percent (0-1) of the available width for each category section. We change the defaults depending on stacked or grouped bar charts.\n- `horizontal` {boolean} Flips the orientation to horizontal.\n\nThe following shows the relationship between the bar percentage option and the category percentage option.\n\n```sh\n// categoryPercentage: 1.0\n// barPercentage: 1.0\nBar: | 1.0 | 1.0 |\nCategory: | 1.0 |\nSection: |===========|\n\n// categoryPercentage: 1.0\n// barPercentage: 0.5\nBar: |.5| |.5|\nCategory: | 1.0 |\nSection: |==============|\n\n// categoryPercentage: 0.5\n// barPercentage: 1.0\nBar: |1.0||1.0|\nCategory: | .5 |\nSection: |==================|\n```\n\n- `stacked` {boolean} Set to true to make a stacked bar chart.\n- `grouped` {boolean} Set to true to make a grouped bar chart.\n- `useLogScale` {boolean} Set to true to enable logarithmic scaling for exponential data. When enabled, the y-axis uses a logarithmic scale, which is useful for data spanning several orders of magnitude. Only values >= 1 are supported; bars with zero or negative values will not be displayed.\n\n(See Axis Chart Settings for other shared settings)\n\n## Patterns\n\nThe bar chart includes patterns that can be used for color blind users. We plan on adding this to other charts as well.\nTo use a pattern specify it on the `pattern` attribute it in the data. You can also set a `patternColor` otherwise it will use the default color for that item in the series.\n\n```js\nconst data = [{\n data: [{\n name: 'Jan',\n value: 1\n }, {\n name: 'Feb',\n value: 2\n }],\n name: 'Component A',\n pattern: 'circles',\n patternColor: '#DA1217'\n}];\n```\n\nThe following patterns are supported:\n\n```sh\narrows\nboxes\ncheckers\npatches\ncircles\nexes\ndiamonds\ndots\nstars\nmixed\nsquares\nhex\nbig-hex\nintersect\nlines\nbars\npipes\nmesh\npluses\nwaves\nbig-waves\n```\n\nShowing component as horizontal orientation.\n\n```html\n\n```\n\n### Logarithmic Scale\n\nFor data that spans several orders of magnitude (like 10, 100, 1000, 10000), you can enable logarithmic scaling to better visualize the relationships between values.\n\n```html\n\n```\n\n```js\nconst exponentialData = [{\n data: [\n { name: 'Item A', value: 10 },\n { name: 'Item B', value: 100 },\n { name: 'Item C', value: 1000 },\n { name: 'Item D', value: 10000 },\n { name: 'Item E', value: 100000 }\n ],\n name: 'Exponential Growth'\n}];\n\ndocument.querySelector('ids-bar-chart').data = exponentialData;\n```\n\n## Events\n\n(See Axis Chart Settings for more information)\n\n## Methods\n\n(See Axis Chart Settings for more information)\n\n## Themeable Parts\n\n- `svg` the outside svg element\n- `bar` each bar element in the chart\n- `lines` each line element in the chart\n\n## Animation\n\nThe bars rise along the y-axis from 0 to the appropriate values.\n\n## States and Variations\n\n(See Line Chart and Axis Chart Settings for more information)\n\n## Keyboard Guidelines\n\n(See Line Chart and Axis Chart Settings for more information)\n\n## Responsive Guidelines\n\n- The area chart will fill the size of its parent container and readjust when the window is resized.\n\n## Converting from Previous Versions (Breaking Changes)\n\n- 4.x: The area chart was added after version 3.6 so new in 4.x\n- 5.x: Bar Chart have all new markup and classes for web components but the data is still the same except for a few changes.\n - `shortName` is now `shortName`\n - `abbreviatedName` is now `abbrName`\n\n## Accessibility Guidelines\n\n- 1.4.1 Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Ensure the color tags that indicate state like OK, cancel, ect have other ways to indicate that information.\n- Approach is to treat the bar items as a list `role=\"list\"`. The bar items are `role=\"listitem\"`. The tab index is not visible to the user as it is not needed and can be navigated with a screen reader.\n- Using voice over the sequence is to\n - Navigate to the parent element above it or parent page\n - Hold caps lock + left/right arrow\n - You will hear the title , followed by number of items and then each list item\n - Proceed to use caps lock + left/right arrow will move through the list items announcing the values\n\n## Regional Considerations\n\nChart labels should be localized in the current language. The chart will flip in RTL mode. For some color blind users the svg patterns can be used.\n"}},{"name":"ids-block-grid-item","attributes":[{"name":"checkbox-has-focus","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# ids-block-grid\n\n## Description\n\nThe IDS Block Grid Component displays data as selectable blocks within a simple grid. It gives a way of evenly split contents of a list within a grid.\n\n## Use Cases\n\nUse when you wanted to create rows of images with paragraphs/links that need to stay evenly spaced.\n\n## Terminology\n\n- **Align**: The position of the block grid. You can set it to be center, left, or right.\n\n## Feature (With the Code Examples)\n\nA block grid is created by using the `ids-block-grid` as the main container, and `ids-block-grid-item` for the item inside of it.\n\n```html\n\n \n Content Here...\n \n\n```\n\nYou can set the alignment of the block grid by setting the `align` property with these three options `left`, `centered` or `right`. By default, the position is set to `centered` align.\n\n```html\n\n \n Content Here...\n \n\n```\n\n## Settings and Attributes\n\n- `align` {string} Sets the position of the block grid and it's contents.\n\n## States and Variations\n\n- Align\n\n## Responsive Guidelines\n\n- The block grid uses flex container to be able to fill available free space and shrinks them to prevent overflow, while the block grid item has a width of 200px. It automatically sets the height depends on how many the block grid item is.\n\n## Accessibility\n\nThe use of this component is not recommended for Accessibility since the lack of elements in the page may pose issues for screen reader and other assistive technology. Consider a way to disable this functionality.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- New Component in 4.x\n\n**4.x to 5.x**\n- Block Grid now uses all new markup and classes for web components (see above)\n- The way paging and selection are applied have changes to the api\n"}},{"name":"ids-block-grid","attributes":[{"name":"datasource","description":"Reference to datasource API","values":[]},{"name":"data","description":"Set the data array of the blockgrid","values":[]},{"name":"align","description":"Set the alignment of blockgrid","values":[]},{"name":"selection","description":"Set the selection to a block-grid and it will add selection to all items","values":[]}],"description":{"kind":"markdown","value":"# ids-block-grid\n\n## Description\n\nThe IDS Block Grid Component displays data as selectable blocks within a simple grid. It gives a way of evenly split contents of a list within a grid.\n\n## Use Cases\n\nUse when you wanted to create rows of images with paragraphs/links that need to stay evenly spaced.\n\n## Terminology\n\n- **Align**: The position of the block grid. You can set it to be center, left, or right.\n\n## Feature (With the Code Examples)\n\nA block grid is created by using the `ids-block-grid` as the main container, and `ids-block-grid-item` for the item inside of it.\n\n```html\n\n \n Content Here...\n \n\n```\n\nYou can set the alignment of the block grid by setting the `align` property with these three options `left`, `centered` or `right`. By default, the position is set to `centered` align.\n\n```html\n\n \n Content Here...\n \n\n```\n\n## Settings and Attributes\n\n- `align` {string} Sets the position of the block grid and it's contents.\n\n## States and Variations\n\n- Align\n\n## Responsive Guidelines\n\n- The block grid uses flex container to be able to fill available free space and shrinks them to prevent overflow, while the block grid item has a width of 200px. It automatically sets the height depends on how many the block grid item is.\n\n## Accessibility\n\nThe use of this component is not recommended for Accessibility since the lack of elements in the page may pose issues for screen reader and other assistive technology. Consider a way to disable this functionality.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- New Component in 4.x\n\n**4.x to 5.x**\n- Block Grid now uses all new markup and classes for web components (see above)\n- The way paging and selection are applied have changes to the api\n"}},{"name":"ids-box","attributes":[{"name":"actionable","description":"If actionable the box can be toggled trigging a state","values":[]},{"name":"background-color","description":"Set the background color (as a css variable)","values":[]},{"name":"borderless","description":"Turns off the borders","values":[]},{"name":"border-radius","description":"Sets the border radius beyond the default","values":[]},{"name":"width","description":"Sets a width in pixels or percent","values":[]},{"name":"height","description":"Set a height in pixels or percent","values":[]},{"name":"shadowed","description":"Turn off the border but leave the shadow","values":[]},{"name":"padding-x","description":"Get the x axis padding","values":[]},{"name":"padding-y","description":"Get the x axis padding","values":[]},{"name":"selected","description":"Set the selected state on the box","values":[]}],"description":{"kind":"markdown","value":"# ids-box\n\n## Description\n\nids-box is a primitive component that cards and widgets build on. Also consider ids-card, as it includes additional interactivity. See ids-widget for use with Role-Based Workspaces (RBWS).\n\n## Terminology\n\n- **Box**: A configurable box with a border or not that centers contents\n- **Card**: An additional layer to boxes that adds functionality like states and selection\n- **Widget**: An additional layer to cards that adds functionality for home pages / portal\n\n## Features (With Code Examples)\n\nA box with default padding:\n\n```html\n\n Bordered\n\n```\n\nA square box with padding and unrounded corners:\n\n```html\n\n Squared\n\n```\n\n## Class Hierarchy\n\n- IdsBox\n - IdsElement\n\n## Settings (Attributes)\n\n- `actionable` {boolean} Adds actionable states (when used in cards)\n- `backgroundColor` {string} Set the background color (as a CSS variable)\n- `borderless` {boolean} Turns off the borders\n- `borderRadius` {number} Sets the border radius to something non-default\n- `shadowed` {number} Turn off the border but leave the shadow (for RBWS)\n- `width` {string} Sets a width in pixels or percent\n- `height` {string} Sets a height in pixels or percent\n- `paddingX` {string} Set the x axis padding on the box contents (in pixels)\n- `paddingY` {string} Set the y axis padding on the box contents (in pixels)\n\n## Themeable Parts\n\n- `box` allows you to further style the box element\n\n## States and Variations\n\n- Color\n- Size\n\n## Responsive Guidelines\n\n- Flows with padding and margin within the width and height of the parent container.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**4.x to 5.x**\n\n- New component that is the base layer to cards in the previous context\n"}},{"name":"ids-breadcrumb","attributes":[{"name":"on-breadcrumb-activate","values":[]},{"name":"#resize-observer","description":"Attach the resize observer.","values":[]},{"name":"color-variants","values":[]},{"name":"current","description":"Get the current breadcrumb element","values":[]},{"name":"button-el","description":"Get reference to the breadcrumb overflow menu button","values":[]},{"name":"menu-container-el","description":"Get reference to the breadcrumb overflow menu's container element","values":[]},{"name":"nav-elem","description":"Get reference to the breadcrumb list's container element","values":[]},{"name":"overflow-menu-items","description":"Get list of menu items that mirror Toolbar items","values":[]},{"name":"popup-menu-el","description":"Get the popup menu element","values":[]},{"name":"popup-menu-group-el","description":"Get the popup menu group element","values":[]},{"name":"truncate","description":"Get the truncate state","values":[]},{"name":"padding","description":"Get the padding value","values":[]},{"name":"size","description":"Get the size variant","values":[]}],"description":{"kind":"markdown","value":"# ids-breadcrumb \n\n## Description\n\nA breadcrumb is a navigational element that shows a user their current location in the hierarchical context of an application and allows them to navigate back through page levels. See more [usage details](https://design.infor.com/components/components/breadcrumb).\n\n## Features (With Code Examples)\n\nA normal breadcrumb component with a disabled item. The last item represents the current page.\n\n```html\n\n First Item\n Second Item\n Disabled Item\n Current Item\n\n```\n\nA large breadcrumb variant with 20px font size for better visual hierarchy:\n\n```html\n\n Home\n Products\n Current page\n\n```\n\n## Settings and Attributes\n\nThe breadcrumb can contain either ids-text or ids-hyperlink, depending on whether the item is navigable.\n\nRelevant ids-hyperlink attributes:\n\n- `color` {string} Set to `unset` to use the default coloring.\n- `disabled` Set to `true` to apply disabled styling.\n- `font-size` {number} Defaults to `14`.\n- `href` {string} The URL that the hyperlink points to.\n- `size` {string} Set to `lg` for 20px font size variant, defaults to `md` (14px).\n- `truncate` {boolean} If `true`, the breadcrumb list can be truncated, hiding some links behind an overflow menu.\n\n## States and Variations (With Code Examples)\n\n- Default: The default state of breadcrumb text.\n- Hover: Indicates that the user is hovering over a breadcrumb item, and can click to navigate to a higher hierarchy level. The last item does not have a hover state, as it represents the user’s current page and is typically non-interactive.\n- Focus: Indicates that the user has highlighted the hyperlink through keyboard navigation.\n\n## Themeable Parts\n\n- `checkbox` allows you to further style the checkbox input element\n- `slider` allows you to further style the sliding part of the switch\n- `label` allows you to further style the label text\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- \"Collapsing Lists\" was deprecated but later added as truncate feature.\n- Markup has entirely changed, see the updated code example\n\n**4.x to 5.x**\n- Markup has changed to a custom element ``\n- Markup Uses `ids-hyperlink` instead of ``\n- Can now be imported as a single JS file and used with encapsulated styles\n"}},{"name":"ids-button-common","description":{"kind":"markdown","value":"# ids-button\n\n## Description\n\nThe ids-button is a simple wrapper around a styled `HTMLButtonElement` and contains additional API to set text, icons, and functionality. See more [usage details](https://design.infor.com/components/components/button/).\n\n## Themeable Parts\n\n- `button` allows you to further style the button element\n- `icon` allows you to further style the icon element (used in some types of buttons)\n- `text` allows you to further style the text element (used in some types of buttons)\n\n## Methods\n\n- `toggleAnimation(isActive?: boolean)`: Toggles generative AI button's active state, including its own indicator.\n- `focus()`: Programmatically focuses the button element.\n\n## Features (With Code Samples)\n\nA standalone primary button:\n\n```html\n\n My Button\n\n```\n\nAdding an icon to the button using the `icon` attribute:\n\n```html\n\n My Button\n\n```\n\nAn icon-only button without visible text. To maintain accessibility standards, descriptive text explaining the button's function is required. To hide this text visually but provide it to screen readers, add an \"audible\" class to the text ``:\n\n```html\n\n My Button\n\n```\n\n### Label Attribute\n\nThe `label` attribute can be used to set a descriptive label for the button. This is useful for accessibility or when you need additional metadata. The label functionality is provided by the [IdsLabelStateMixin](../../mixins/ids-label-state-mixin/README.md):\n\n```html\n\n Save\n\n```\n\nYou can also set it programmatically:\n\n```javascript\nconst button = document.querySelector('#my-button');\nbutton.label = 'Save changes';\n```\n\n### Color Variants\n\nIf placing a button in a container with a contrasting background color, the \"base\" appearance may not contain accessible color contrast ratios. The `color-variant` property can be used with the [IdsColorVariantMixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-color-variant-mixin/README.md):\n\n```html\n\n\n My Button\n\n\n\n\n My Button\n\n\n\n\n My Button\n\n\n\n\n My Button\n\n```\n\n### Button Group Variant\n\nButton Group allows layout for buttons in use of popups, modal, popover, datepicker and timepicker. This feature is especially useful for buttons that presents actions within common layouts.\n\nSettings:\n- divider - if set to true adds additional border on top.\n- display - will set the layout either flex or inline-flex.\n- direction - will set the layout either row, row-reverse, column, column-reverse.\n- justify-content - will set the layout either start, stretch, end, flex-start, flex-end, center, left, right, space-between, space-around and space-evenly.\n- compact - if set to true makes the ids-buttons-group-section compact for flex containers.\n- label-position - Applies the same label-position offset as labeled form fields so the button group aligns within a side-label form layout.\n\n```html\n\n \n \n Back\n \n \n \n \n Cancel\n \n \n Apply\n \n \n\n```\n\n### Compact Mode\n\nCompact mode reduces the height of buttons, including icon buttons and text buttons. This feature is especially useful for toolbar buttons or situations where space is limited.\n\n```html\n\n My Button\n\n```\n\nYou can also set it programmatically:\n\n```javascript\n// Set the compact mode to true\ndocument.querySelector('#my-button').compact = true;\n\n// Set the compact mode to false\ndocument.querySelector('#my-button').compact = false;\n```\n\n## States and Variations\n\nStandard button states include:\n\n- Appearances types\n - `default` (not displayed as a \"appearance\" attribute when set)\n - `primary`\n - `primary-destructive`\n - `secondary`\n - `tertiary`\n - `tertiary-destructive`\n - `primary-generative-ai`\n - `tertiary-generative-ai`\n - `secondary-generative-ai`\n- Normal\n- Hover\n- Focus\n- Active (pressed)\n- Disabled\n- Color Variant - alternate colors for each button appearance are available via the [IdsColorVariantMixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-color-variant-mixin/README.md)\n\n### Alignment\n\nDefault alignment of text and icons within ids-button are based on the DOM order of those elements. However, if the `icon-align` attribute is specified, the alignment order of the inner elements can be forced.\n\nExample of icon that follows text, though the DOM order is reversed:\n\n```html\n\n My Button\n\n```\n\n`icon-align` effects:\n\n| Prop value | LTR (default) Icon Location | RTL Icon Location |\n| :--------- | :-------------------------- | :---------------- |\n| undefined | n/a | n/a |\n| `start` | Left of text | Right of text |\n| `end` | Right of text | Left of text |\n\n### Type\n\nThe `type` attribute passes through to the Shadow Root's `HTMLButtonElement` and defines its usage.\n\nFor example, a `
` `submit` button:\n\n```html\n\n My Button\n\n```\n\n### Height and Width\n\nWe do not recommend deviating on the size of the buttons from the original design. But for special uses cases you might change the height and width of a button like this. To change the height you need the span element in the button for it to center properly.\n\n```css\n\n My Button\n\n```\n\n### Bottom Margin\n\nUse the `margin-block-end` attribute to add spacing below the button. This uses CSS logical properties, which respects RTL layouts.\n\n```html\n\n My Button\n\n```\n\nYou can also set it programmatically:\n\n```javascript\ndocument.querySelector('#my-button').marginBlockEnd = '1rem';\n```\n\n## Settings and Attributes\n\n- `appearance` {string} Visual style defining the button's purpose.\n- `badgeColor` {string} Sets the notification badge color if the button has an icon, passed to `ids-icon` component\n- `badgePosition` {string} Sets the notification badge position if the button has an icon, passed to `ids-icon` component\n- `marginBlockEnd` {string | null} Sets the bottom margin of the button using CSS logical property. Accepts any CSS length value (e.g. `'8px'`, `'1rem'`).\n- `colorVariant` {'alternate' | 'alternate-formatter'} Set the variants theme styles.\n- `compact` {boolean|string|null} Set the button to a compact size.\n- `contentAlign` {string} Sets content alignment within the button ('default', 'start', 'end')\n- `cssClass` {Array | string | null} Contains space-delimited CSS classes (or an array of CSS classes) that will be passed to the Shadow Root button.\n- `disabled` {boolean} Sets the internal Button element's `disabled` property to enable/disable the button.\n- `height` {string} Sets height of the button. Accepts percent, pixels, rem, etc. (Only use this for isolated use cases)\n- `hidden` {boolean} Controls the visibility of the button\n- `icon` {string | null} A string representing an icon to display inside the button. This string is passed to a slotted [IdsIcon](../ids-icon/README.md) element's `icon` setting to set the desired icon type.\n- `iconAlign` {string} Defines which side to align the Button's icon against, can be 'start' or 'end'\n- `id` {string} Defines an identifier (ID) that must be unique within the entire document.\n- `label` {string | null} Sets a descriptive label for the button. This can be used for accessibility or additional metadata purposes.\n- `label-audible` {string | null} Sets audible text for button.\n- `label-position` {string} Positions the button as if it had an inline-start label, applying the same layout offset as labeled form fields. This keeps the button aligned within a form that uses side labels.\n- `label-width` {string | null} Overrides the default label width used for the inline offset (e.g. `'200px'`, `'250px'`). Sets the `--ids-label-width-inline-start` CSS variable on the host. When used with `label-position=\"inline-start\"`, the button's spacer element uses this width to match sibling input label widths. The spacer responds to the same `@media` and `@container` breakpoints as input labels.\n- `noAnimation` {boolean} Disables generative AI animations when true\n- `noMargins` {boolean} Removes default margins from the button\n- `noPadding` {boolean} Removes default padding from the button\n- `overflow` {string} Controls text overflow behavior, can be 'ellipsis' or null\n- `overflow-tooltip` {string} Controls which tooltip content displays based on overflow state when `overflow=\"ellipsis\"` is set. Values: `'text'` (default — shows button text when overflowing), `'custom'` (shows custom tooltip even when overflowing), `'false'` (no tooltip when overflowing). When text is NOT overflowing, the custom tooltip (if configured) always displays regardless of this setting. Does not require `tooltip=\"true\"` to be set.\n- `size` {string | null} Matches the button's occupied width to an `ids-input` size by adding `margin-inline-end`. Valid values: `'xs'` (75px), `'sm'` (150px), `'mm'` (225px), `'md'` (300px), `'lg'` (400px). The margin is computed dynamically so the button + margin equals the target input width.\n- `square` {boolean} whether the corners of the button as an icon-button are angled/90°.\n- `tabIndex` {string | number} Sets the internal Button element's `tabIndex` property for controlling focus\n- `text` {string} API-level method for setting a button's text content. This will become the content of the slotted text node when set.\n- `tooltip` {string} Sets up a string based tooltip.\n- `type` {string} Passes a 'type' attribute for the button, some map to standard `HTMLButtonElement` button types. This can be one of 'button', 'submit', 'reset', 'menu'.\n- `width` {string} Sets width of the button. Accepts percent, pixels, rem, etc.\n\n## Events\n\n- `click`: Fired when the button is clicked. For submit buttons, this will also trigger form submission.\n- `focus`: Fired when the button receives focus.\n- `blur`: Fired when the button loses focus.\n\n## Responsive Guidelines\n\n- Buttons can span 100% width of their parent container on mobile breakpoints.\n\n## Accessibility Guidelines\n\n- All buttons, including icon-only buttons, must have descriptive text inside the button to communicate its action to a screen reader user. Use the `audible` CSS class to visually hide the text if necessary.\n\n## Regional Considerations\n\nBe aware of the content layout for buttons in right-to-left (RTL) UIs.\n\n## Converting from Previous Versions\n\n**3.x to 4.x**\n- Change class `inforFormButton` default to `btn-primary`\n- Change class `inforFormButton` to `btn-secondary`\n\n**4.x to 5.x**\nThe ids-button is now a WebComponent. Instead of using classes to define a button's purpose or visual style, it's now done directly with an \"appearance\" attribute:\n\n```html\n\n\n\n\n\n My Button\n\n```\n\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles.\n- Some button properties are now attributes - \"appearance\", \"text\", \"icon\", \"disabled\", etc.\n- Some components now extend IdsButton, such as [IdsToggleButton](../ids-toggle-button/README.md) and [IdsMenuButton](../ids-menu-button/README.md)...\n"}},{"name":"ids-button-group-section","attributes":[],"description":{"kind":"markdown","value":"# ids-button\n\n## Description\n\nThe ids-button is a simple wrapper around a styled `HTMLButtonElement` and contains additional API to set text, icons, and functionality. See more [usage details](https://design.infor.com/components/components/button/).\n\n## Themeable Parts\n\n- `button` allows you to further style the button element\n- `icon` allows you to further style the icon element (used in some types of buttons)\n- `text` allows you to further style the text element (used in some types of buttons)\n\n## Methods\n\n- `toggleAnimation(isActive?: boolean)`: Toggles generative AI button's active state, including its own indicator.\n- `focus()`: Programmatically focuses the button element.\n\n## Features (With Code Samples)\n\nA standalone primary button:\n\n```html\n\n My Button\n\n```\n\nAdding an icon to the button using the `icon` attribute:\n\n```html\n\n My Button\n\n```\n\nAn icon-only button without visible text. To maintain accessibility standards, descriptive text explaining the button's function is required. To hide this text visually but provide it to screen readers, add an \"audible\" class to the text ``:\n\n```html\n\n My Button\n\n```\n\n### Label Attribute\n\nThe `label` attribute can be used to set a descriptive label for the button. This is useful for accessibility or when you need additional metadata. The label functionality is provided by the [IdsLabelStateMixin](../../mixins/ids-label-state-mixin/README.md):\n\n```html\n\n Save\n\n```\n\nYou can also set it programmatically:\n\n```javascript\nconst button = document.querySelector('#my-button');\nbutton.label = 'Save changes';\n```\n\n### Color Variants\n\nIf placing a button in a container with a contrasting background color, the \"base\" appearance may not contain accessible color contrast ratios. The `color-variant` property can be used with the [IdsColorVariantMixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-color-variant-mixin/README.md):\n\n```html\n\n\n My Button\n\n\n\n\n My Button\n\n\n\n\n My Button\n\n\n\n\n My Button\n\n```\n\n### Button Group Variant\n\nButton Group allows layout for buttons in use of popups, modal, popover, datepicker and timepicker. This feature is especially useful for buttons that presents actions within common layouts.\n\nSettings:\n- divider - if set to true adds additional border on top.\n- display - will set the layout either flex or inline-flex.\n- direction - will set the layout either row, row-reverse, column, column-reverse.\n- justify-content - will set the layout either start, stretch, end, flex-start, flex-end, center, left, right, space-between, space-around and space-evenly.\n- compact - if set to true makes the ids-buttons-group-section compact for flex containers.\n- label-position - Applies the same label-position offset as labeled form fields so the button group aligns within a side-label form layout.\n\n```html\n\n \n \n Back\n \n \n \n \n Cancel\n \n \n Apply\n \n \n\n```\n\n### Compact Mode\n\nCompact mode reduces the height of buttons, including icon buttons and text buttons. This feature is especially useful for toolbar buttons or situations where space is limited.\n\n```html\n\n My Button\n\n```\n\nYou can also set it programmatically:\n\n```javascript\n// Set the compact mode to true\ndocument.querySelector('#my-button').compact = true;\n\n// Set the compact mode to false\ndocument.querySelector('#my-button').compact = false;\n```\n\n## States and Variations\n\nStandard button states include:\n\n- Appearances types\n - `default` (not displayed as a \"appearance\" attribute when set)\n - `primary`\n - `primary-destructive`\n - `secondary`\n - `tertiary`\n - `tertiary-destructive`\n - `primary-generative-ai`\n - `tertiary-generative-ai`\n - `secondary-generative-ai`\n- Normal\n- Hover\n- Focus\n- Active (pressed)\n- Disabled\n- Color Variant - alternate colors for each button appearance are available via the [IdsColorVariantMixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-color-variant-mixin/README.md)\n\n### Alignment\n\nDefault alignment of text and icons within ids-button are based on the DOM order of those elements. However, if the `icon-align` attribute is specified, the alignment order of the inner elements can be forced.\n\nExample of icon that follows text, though the DOM order is reversed:\n\n```html\n\n My Button\n\n```\n\n`icon-align` effects:\n\n| Prop value | LTR (default) Icon Location | RTL Icon Location |\n| :--------- | :-------------------------- | :---------------- |\n| undefined | n/a | n/a |\n| `start` | Left of text | Right of text |\n| `end` | Right of text | Left of text |\n\n### Type\n\nThe `type` attribute passes through to the Shadow Root's `HTMLButtonElement` and defines its usage.\n\nFor example, a `` `submit` button:\n\n```html\n\n My Button\n\n```\n\n### Height and Width\n\nWe do not recommend deviating on the size of the buttons from the original design. But for special uses cases you might change the height and width of a button like this. To change the height you need the span element in the button for it to center properly.\n\n```css\n\n My Button\n\n```\n\n### Bottom Margin\n\nUse the `margin-block-end` attribute to add spacing below the button. This uses CSS logical properties, which respects RTL layouts.\n\n```html\n\n My Button\n\n```\n\nYou can also set it programmatically:\n\n```javascript\ndocument.querySelector('#my-button').marginBlockEnd = '1rem';\n```\n\n## Settings and Attributes\n\n- `appearance` {string} Visual style defining the button's purpose.\n- `badgeColor` {string} Sets the notification badge color if the button has an icon, passed to `ids-icon` component\n- `badgePosition` {string} Sets the notification badge position if the button has an icon, passed to `ids-icon` component\n- `marginBlockEnd` {string | null} Sets the bottom margin of the button using CSS logical property. Accepts any CSS length value (e.g. `'8px'`, `'1rem'`).\n- `colorVariant` {'alternate' | 'alternate-formatter'} Set the variants theme styles.\n- `compact` {boolean|string|null} Set the button to a compact size.\n- `contentAlign` {string} Sets content alignment within the button ('default', 'start', 'end')\n- `cssClass` {Array | string | null} Contains space-delimited CSS classes (or an array of CSS classes) that will be passed to the Shadow Root button.\n- `disabled` {boolean} Sets the internal Button element's `disabled` property to enable/disable the button.\n- `height` {string} Sets height of the button. Accepts percent, pixels, rem, etc. (Only use this for isolated use cases)\n- `hidden` {boolean} Controls the visibility of the button\n- `icon` {string | null} A string representing an icon to display inside the button. This string is passed to a slotted [IdsIcon](../ids-icon/README.md) element's `icon` setting to set the desired icon type.\n- `iconAlign` {string} Defines which side to align the Button's icon against, can be 'start' or 'end'\n- `id` {string} Defines an identifier (ID) that must be unique within the entire document.\n- `label` {string | null} Sets a descriptive label for the button. This can be used for accessibility or additional metadata purposes.\n- `label-audible` {string | null} Sets audible text for button.\n- `label-position` {string} Positions the button as if it had an inline-start label, applying the same layout offset as labeled form fields. This keeps the button aligned within a form that uses side labels.\n- `label-width` {string | null} Overrides the default label width used for the inline offset (e.g. `'200px'`, `'250px'`). Sets the `--ids-label-width-inline-start` CSS variable on the host. When used with `label-position=\"inline-start\"`, the button's spacer element uses this width to match sibling input label widths. The spacer responds to the same `@media` and `@container` breakpoints as input labels.\n- `noAnimation` {boolean} Disables generative AI animations when true\n- `noMargins` {boolean} Removes default margins from the button\n- `noPadding` {boolean} Removes default padding from the button\n- `overflow` {string} Controls text overflow behavior, can be 'ellipsis' or null\n- `overflow-tooltip` {string} Controls which tooltip content displays based on overflow state when `overflow=\"ellipsis\"` is set. Values: `'text'` (default — shows button text when overflowing), `'custom'` (shows custom tooltip even when overflowing), `'false'` (no tooltip when overflowing). When text is NOT overflowing, the custom tooltip (if configured) always displays regardless of this setting. Does not require `tooltip=\"true\"` to be set.\n- `size` {string | null} Matches the button's occupied width to an `ids-input` size by adding `margin-inline-end`. Valid values: `'xs'` (75px), `'sm'` (150px), `'mm'` (225px), `'md'` (300px), `'lg'` (400px). The margin is computed dynamically so the button + margin equals the target input width.\n- `square` {boolean} whether the corners of the button as an icon-button are angled/90°.\n- `tabIndex` {string | number} Sets the internal Button element's `tabIndex` property for controlling focus\n- `text` {string} API-level method for setting a button's text content. This will become the content of the slotted text node when set.\n- `tooltip` {string} Sets up a string based tooltip.\n- `type` {string} Passes a 'type' attribute for the button, some map to standard `HTMLButtonElement` button types. This can be one of 'button', 'submit', 'reset', 'menu'.\n- `width` {string} Sets width of the button. Accepts percent, pixels, rem, etc.\n\n## Events\n\n- `click`: Fired when the button is clicked. For submit buttons, this will also trigger form submission.\n- `focus`: Fired when the button receives focus.\n- `blur`: Fired when the button loses focus.\n\n## Responsive Guidelines\n\n- Buttons can span 100% width of their parent container on mobile breakpoints.\n\n## Accessibility Guidelines\n\n- All buttons, including icon-only buttons, must have descriptive text inside the button to communicate its action to a screen reader user. Use the `audible` CSS class to visually hide the text if necessary.\n\n## Regional Considerations\n\nBe aware of the content layout for buttons in right-to-left (RTL) UIs.\n\n## Converting from Previous Versions\n\n**3.x to 4.x**\n- Change class `inforFormButton` default to `btn-primary`\n- Change class `inforFormButton` to `btn-secondary`\n\n**4.x to 5.x**\nThe ids-button is now a WebComponent. Instead of using classes to define a button's purpose or visual style, it's now done directly with an \"appearance\" attribute:\n\n```html\n\n\n\n\n\n My Button\n\n```\n\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles.\n- Some button properties are now attributes - \"appearance\", \"text\", \"icon\", \"disabled\", etc.\n- Some components now extend IdsButton, such as [IdsToggleButton](../ids-toggle-button/README.md) and [IdsMenuButton](../ids-menu-button/README.md)...\n"}},{"name":"ids-button-group","attributes":[{"name":"divider","description":"Set the divider to button group","values":[]},{"name":"display","description":"Set the display setting","values":[]},{"name":"direction","description":"Set the direction setting","values":[]},{"name":"justify-content","description":"Set the justify content setting","values":[]},{"name":"compact","description":"Set the compact to button group","values":[]}],"description":{"kind":"markdown","value":"# ids-button\n\n## Description\n\nThe ids-button is a simple wrapper around a styled `HTMLButtonElement` and contains additional API to set text, icons, and functionality. See more [usage details](https://design.infor.com/components/components/button/).\n\n## Themeable Parts\n\n- `button` allows you to further style the button element\n- `icon` allows you to further style the icon element (used in some types of buttons)\n- `text` allows you to further style the text element (used in some types of buttons)\n\n## Methods\n\n- `toggleAnimation(isActive?: boolean)`: Toggles generative AI button's active state, including its own indicator.\n- `focus()`: Programmatically focuses the button element.\n\n## Features (With Code Samples)\n\nA standalone primary button:\n\n```html\n\n My Button\n\n```\n\nAdding an icon to the button using the `icon` attribute:\n\n```html\n\n My Button\n\n```\n\nAn icon-only button without visible text. To maintain accessibility standards, descriptive text explaining the button's function is required. To hide this text visually but provide it to screen readers, add an \"audible\" class to the text ``:\n\n```html\n\n My Button\n\n```\n\n### Label Attribute\n\nThe `label` attribute can be used to set a descriptive label for the button. This is useful for accessibility or when you need additional metadata. The label functionality is provided by the [IdsLabelStateMixin](../../mixins/ids-label-state-mixin/README.md):\n\n```html\n\n Save\n\n```\n\nYou can also set it programmatically:\n\n```javascript\nconst button = document.querySelector('#my-button');\nbutton.label = 'Save changes';\n```\n\n### Color Variants\n\nIf placing a button in a container with a contrasting background color, the \"base\" appearance may not contain accessible color contrast ratios. The `color-variant` property can be used with the [IdsColorVariantMixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-color-variant-mixin/README.md):\n\n```html\n\n\n My Button\n\n\n\n\n My Button\n\n\n\n\n My Button\n\n\n\n\n My Button\n\n```\n\n### Button Group Variant\n\nButton Group allows layout for buttons in use of popups, modal, popover, datepicker and timepicker. This feature is especially useful for buttons that presents actions within common layouts.\n\nSettings:\n- divider - if set to true adds additional border on top.\n- display - will set the layout either flex or inline-flex.\n- direction - will set the layout either row, row-reverse, column, column-reverse.\n- justify-content - will set the layout either start, stretch, end, flex-start, flex-end, center, left, right, space-between, space-around and space-evenly.\n- compact - if set to true makes the ids-buttons-group-section compact for flex containers.\n- label-position - Applies the same label-position offset as labeled form fields so the button group aligns within a side-label form layout.\n\n```html\n\n \n \n Back\n \n \n \n \n Cancel\n \n \n Apply\n \n \n\n```\n\n### Compact Mode\n\nCompact mode reduces the height of buttons, including icon buttons and text buttons. This feature is especially useful for toolbar buttons or situations where space is limited.\n\n```html\n\n My Button\n\n```\n\nYou can also set it programmatically:\n\n```javascript\n// Set the compact mode to true\ndocument.querySelector('#my-button').compact = true;\n\n// Set the compact mode to false\ndocument.querySelector('#my-button').compact = false;\n```\n\n## States and Variations\n\nStandard button states include:\n\n- Appearances types\n - `default` (not displayed as a \"appearance\" attribute when set)\n - `primary`\n - `primary-destructive`\n - `secondary`\n - `tertiary`\n - `tertiary-destructive`\n - `primary-generative-ai`\n - `tertiary-generative-ai`\n - `secondary-generative-ai`\n- Normal\n- Hover\n- Focus\n- Active (pressed)\n- Disabled\n- Color Variant - alternate colors for each button appearance are available via the [IdsColorVariantMixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-color-variant-mixin/README.md)\n\n### Alignment\n\nDefault alignment of text and icons within ids-button are based on the DOM order of those elements. However, if the `icon-align` attribute is specified, the alignment order of the inner elements can be forced.\n\nExample of icon that follows text, though the DOM order is reversed:\n\n```html\n\n My Button\n\n```\n\n`icon-align` effects:\n\n| Prop value | LTR (default) Icon Location | RTL Icon Location |\n| :--------- | :-------------------------- | :---------------- |\n| undefined | n/a | n/a |\n| `start` | Left of text | Right of text |\n| `end` | Right of text | Left of text |\n\n### Type\n\nThe `type` attribute passes through to the Shadow Root's `HTMLButtonElement` and defines its usage.\n\nFor example, a `` `submit` button:\n\n```html\n\n My Button\n\n```\n\n### Height and Width\n\nWe do not recommend deviating on the size of the buttons from the original design. But for special uses cases you might change the height and width of a button like this. To change the height you need the span element in the button for it to center properly.\n\n```css\n\n My Button\n\n```\n\n### Bottom Margin\n\nUse the `margin-block-end` attribute to add spacing below the button. This uses CSS logical properties, which respects RTL layouts.\n\n```html\n\n My Button\n\n```\n\nYou can also set it programmatically:\n\n```javascript\ndocument.querySelector('#my-button').marginBlockEnd = '1rem';\n```\n\n## Settings and Attributes\n\n- `appearance` {string} Visual style defining the button's purpose.\n- `badgeColor` {string} Sets the notification badge color if the button has an icon, passed to `ids-icon` component\n- `badgePosition` {string} Sets the notification badge position if the button has an icon, passed to `ids-icon` component\n- `marginBlockEnd` {string | null} Sets the bottom margin of the button using CSS logical property. Accepts any CSS length value (e.g. `'8px'`, `'1rem'`).\n- `colorVariant` {'alternate' | 'alternate-formatter'} Set the variants theme styles.\n- `compact` {boolean|string|null} Set the button to a compact size.\n- `contentAlign` {string} Sets content alignment within the button ('default', 'start', 'end')\n- `cssClass` {Array | string | null} Contains space-delimited CSS classes (or an array of CSS classes) that will be passed to the Shadow Root button.\n- `disabled` {boolean} Sets the internal Button element's `disabled` property to enable/disable the button.\n- `height` {string} Sets height of the button. Accepts percent, pixels, rem, etc. (Only use this for isolated use cases)\n- `hidden` {boolean} Controls the visibility of the button\n- `icon` {string | null} A string representing an icon to display inside the button. This string is passed to a slotted [IdsIcon](../ids-icon/README.md) element's `icon` setting to set the desired icon type.\n- `iconAlign` {string} Defines which side to align the Button's icon against, can be 'start' or 'end'\n- `id` {string} Defines an identifier (ID) that must be unique within the entire document.\n- `label` {string | null} Sets a descriptive label for the button. This can be used for accessibility or additional metadata purposes.\n- `label-audible` {string | null} Sets audible text for button.\n- `label-position` {string} Positions the button as if it had an inline-start label, applying the same layout offset as labeled form fields. This keeps the button aligned within a form that uses side labels.\n- `label-width` {string | null} Overrides the default label width used for the inline offset (e.g. `'200px'`, `'250px'`). Sets the `--ids-label-width-inline-start` CSS variable on the host. When used with `label-position=\"inline-start\"`, the button's spacer element uses this width to match sibling input label widths. The spacer responds to the same `@media` and `@container` breakpoints as input labels.\n- `noAnimation` {boolean} Disables generative AI animations when true\n- `noMargins` {boolean} Removes default margins from the button\n- `noPadding` {boolean} Removes default padding from the button\n- `overflow` {string} Controls text overflow behavior, can be 'ellipsis' or null\n- `overflow-tooltip` {string} Controls which tooltip content displays based on overflow state when `overflow=\"ellipsis\"` is set. Values: `'text'` (default — shows button text when overflowing), `'custom'` (shows custom tooltip even when overflowing), `'false'` (no tooltip when overflowing). When text is NOT overflowing, the custom tooltip (if configured) always displays regardless of this setting. Does not require `tooltip=\"true\"` to be set.\n- `size` {string | null} Matches the button's occupied width to an `ids-input` size by adding `margin-inline-end`. Valid values: `'xs'` (75px), `'sm'` (150px), `'mm'` (225px), `'md'` (300px), `'lg'` (400px). The margin is computed dynamically so the button + margin equals the target input width.\n- `square` {boolean} whether the corners of the button as an icon-button are angled/90°.\n- `tabIndex` {string | number} Sets the internal Button element's `tabIndex` property for controlling focus\n- `text` {string} API-level method for setting a button's text content. This will become the content of the slotted text node when set.\n- `tooltip` {string} Sets up a string based tooltip.\n- `type` {string} Passes a 'type' attribute for the button, some map to standard `HTMLButtonElement` button types. This can be one of 'button', 'submit', 'reset', 'menu'.\n- `width` {string} Sets width of the button. Accepts percent, pixels, rem, etc.\n\n## Events\n\n- `click`: Fired when the button is clicked. For submit buttons, this will also trigger form submission.\n- `focus`: Fired when the button receives focus.\n- `blur`: Fired when the button loses focus.\n\n## Responsive Guidelines\n\n- Buttons can span 100% width of their parent container on mobile breakpoints.\n\n## Accessibility Guidelines\n\n- All buttons, including icon-only buttons, must have descriptive text inside the button to communicate its action to a screen reader user. Use the `audible` CSS class to visually hide the text if necessary.\n\n## Regional Considerations\n\nBe aware of the content layout for buttons in right-to-left (RTL) UIs.\n\n## Converting from Previous Versions\n\n**3.x to 4.x**\n- Change class `inforFormButton` default to `btn-primary`\n- Change class `inforFormButton` to `btn-secondary`\n\n**4.x to 5.x**\nThe ids-button is now a WebComponent. Instead of using classes to define a button's purpose or visual style, it's now done directly with an \"appearance\" attribute:\n\n```html\n\n\n\n\n\n My Button\n\n```\n\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles.\n- Some button properties are now attributes - \"appearance\", \"text\", \"icon\", \"disabled\", etc.\n- Some components now extend IdsButton, such as [IdsToggleButton](../ids-toggle-button/README.md) and [IdsMenuButton](../ids-menu-button/README.md)...\n"}},{"name":"ids-button","attributes":[{"name":"should-update","values":[]},{"name":"#is-setting-initial-state","values":[]},{"name":"#size-ro","description":"ResizeObserver for size-based margin computation","values":[]},{"name":"#is-overflowing","values":[]},{"name":"size-widths","description":"Map of size keys to CSS variable names matching ids-input widths","values":[]},{"name":"color-variants","description":"Inherited from `IdsColorVariantMixin`","values":[]},{"name":"#mo","description":"Watches for changes","values":[]},{"name":"#audible-mo","description":"Watches for changes on .audible element within the button","values":[]},{"name":"proto-classes","description":"Figure out the classes","values":[]},{"name":"#is-updating-hidden","values":[]},{"name":"tab-index","description":"Set the tab index value","values":[]},{"name":"hidden","description":"Set the hidden value","values":[]},{"name":"button","values":[]},{"name":"span","values":[]},{"name":"compact","description":"Indicates whether the button is in a compact state.","values":[]},{"name":"content-align","description":"Set the button content alignment between 'default (center)', 'start', or 'end'","values":[]},{"name":"overflow","description":"Set how content overflows; can specify 'ellipsis', or undefined or 'none'","values":[]},{"name":"css-class","values":[]},{"name":"disabled","description":"Passes a disabled attribute from the custom element to the button","values":[]},{"name":"#tab-index","description":"Passes a tabIndex attribute from the custom element to the button","values":[]},{"name":"icon","description":"Gets the current icon used on the button","values":[]},{"name":"icon-el","description":"Gets the current icon element","values":[]},{"name":"icon-align","description":"Sets the automatic alignment of an existing icon to the 'start' or 'end' of the text","values":[]},{"name":"width","description":"Set width of button","values":[]},{"name":"height","description":"Set height of button","values":[]},{"name":"no-animation","description":"Gets flag for generative AI animation","values":[]},{"name":"text","values":[]},{"name":"appearance","description":"Set the button appearance between 'default', 'primary', 'secondary', 'tertiary', or 'destructive'","values":[]},{"name":"type","description":"Sets the HTMLButtonElement 'type' attribute","values":[]},{"name":"no-margins","description":"Sets the no margins attribute","values":[]},{"name":"margin-block-end","description":"Sets the margin-block-end on the button","values":[]},{"name":"no-padding","values":[]},{"name":"square","values":[]},{"name":"badge-color","values":[]},{"name":"badge-position","values":[]},{"name":"label-audible","description":"Set the audible text of button","values":[]},{"name":"label-width","description":"Gets the current label width value","values":[]},{"name":"label-position","description":"Gets the current label position value","values":[]},{"name":"size","description":"Gets the current size value","values":[]},{"name":"described-by","description":"Aria describedby for button","values":[]},{"name":"background-fill","description":"Get the background fill setting","values":[]}],"description":{"kind":"markdown","value":"# ids-button\n\n## Description\n\nThe ids-button is a simple wrapper around a styled `HTMLButtonElement` and contains additional API to set text, icons, and functionality. See more [usage details](https://design.infor.com/components/components/button/).\n\n## Themeable Parts\n\n- `button` allows you to further style the button element\n- `icon` allows you to further style the icon element (used in some types of buttons)\n- `text` allows you to further style the text element (used in some types of buttons)\n\n## Methods\n\n- `toggleAnimation(isActive?: boolean)`: Toggles generative AI button's active state, including its own indicator.\n- `focus()`: Programmatically focuses the button element.\n\n## Features (With Code Samples)\n\nA standalone primary button:\n\n```html\n\n My Button\n\n```\n\nAdding an icon to the button using the `icon` attribute:\n\n```html\n\n My Button\n\n```\n\nAn icon-only button without visible text. To maintain accessibility standards, descriptive text explaining the button's function is required. To hide this text visually but provide it to screen readers, add an \"audible\" class to the text ``:\n\n```html\n\n My Button\n\n```\n\n### Label Attribute\n\nThe `label` attribute can be used to set a descriptive label for the button. This is useful for accessibility or when you need additional metadata. The label functionality is provided by the [IdsLabelStateMixin](../../mixins/ids-label-state-mixin/README.md):\n\n```html\n\n Save\n\n```\n\nYou can also set it programmatically:\n\n```javascript\nconst button = document.querySelector('#my-button');\nbutton.label = 'Save changes';\n```\n\n### Color Variants\n\nIf placing a button in a container with a contrasting background color, the \"base\" appearance may not contain accessible color contrast ratios. The `color-variant` property can be used with the [IdsColorVariantMixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-color-variant-mixin/README.md):\n\n```html\n\n\n My Button\n\n\n\n\n My Button\n\n\n\n\n My Button\n\n\n\n\n My Button\n\n```\n\n### Button Group Variant\n\nButton Group allows layout for buttons in use of popups, modal, popover, datepicker and timepicker. This feature is especially useful for buttons that presents actions within common layouts.\n\nSettings:\n- divider - if set to true adds additional border on top.\n- display - will set the layout either flex or inline-flex.\n- direction - will set the layout either row, row-reverse, column, column-reverse.\n- justify-content - will set the layout either start, stretch, end, flex-start, flex-end, center, left, right, space-between, space-around and space-evenly.\n- compact - if set to true makes the ids-buttons-group-section compact for flex containers.\n- label-position - Applies the same label-position offset as labeled form fields so the button group aligns within a side-label form layout.\n\n```html\n\n \n \n Back\n \n \n \n \n Cancel\n \n \n Apply\n \n \n\n```\n\n### Compact Mode\n\nCompact mode reduces the height of buttons, including icon buttons and text buttons. This feature is especially useful for toolbar buttons or situations where space is limited.\n\n```html\n\n My Button\n\n```\n\nYou can also set it programmatically:\n\n```javascript\n// Set the compact mode to true\ndocument.querySelector('#my-button').compact = true;\n\n// Set the compact mode to false\ndocument.querySelector('#my-button').compact = false;\n```\n\n## States and Variations\n\nStandard button states include:\n\n- Appearances types\n - `default` (not displayed as a \"appearance\" attribute when set)\n - `primary`\n - `primary-destructive`\n - `secondary`\n - `tertiary`\n - `tertiary-destructive`\n - `primary-generative-ai`\n - `tertiary-generative-ai`\n - `secondary-generative-ai`\n- Normal\n- Hover\n- Focus\n- Active (pressed)\n- Disabled\n- Color Variant - alternate colors for each button appearance are available via the [IdsColorVariantMixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-color-variant-mixin/README.md)\n\n### Alignment\n\nDefault alignment of text and icons within ids-button are based on the DOM order of those elements. However, if the `icon-align` attribute is specified, the alignment order of the inner elements can be forced.\n\nExample of icon that follows text, though the DOM order is reversed:\n\n```html\n\n My Button\n\n```\n\n`icon-align` effects:\n\n| Prop value | LTR (default) Icon Location | RTL Icon Location |\n| :--------- | :-------------------------- | :---------------- |\n| undefined | n/a | n/a |\n| `start` | Left of text | Right of text |\n| `end` | Right of text | Left of text |\n\n### Type\n\nThe `type` attribute passes through to the Shadow Root's `HTMLButtonElement` and defines its usage.\n\nFor example, a `` `submit` button:\n\n```html\n\n My Button\n\n```\n\n### Height and Width\n\nWe do not recommend deviating on the size of the buttons from the original design. But for special uses cases you might change the height and width of a button like this. To change the height you need the span element in the button for it to center properly.\n\n```css\n\n My Button\n\n```\n\n### Bottom Margin\n\nUse the `margin-block-end` attribute to add spacing below the button. This uses CSS logical properties, which respects RTL layouts.\n\n```html\n\n My Button\n\n```\n\nYou can also set it programmatically:\n\n```javascript\ndocument.querySelector('#my-button').marginBlockEnd = '1rem';\n```\n\n## Settings and Attributes\n\n- `appearance` {string} Visual style defining the button's purpose.\n- `badgeColor` {string} Sets the notification badge color if the button has an icon, passed to `ids-icon` component\n- `badgePosition` {string} Sets the notification badge position if the button has an icon, passed to `ids-icon` component\n- `marginBlockEnd` {string | null} Sets the bottom margin of the button using CSS logical property. Accepts any CSS length value (e.g. `'8px'`, `'1rem'`).\n- `colorVariant` {'alternate' | 'alternate-formatter'} Set the variants theme styles.\n- `compact` {boolean|string|null} Set the button to a compact size.\n- `contentAlign` {string} Sets content alignment within the button ('default', 'start', 'end')\n- `cssClass` {Array | string | null} Contains space-delimited CSS classes (or an array of CSS classes) that will be passed to the Shadow Root button.\n- `disabled` {boolean} Sets the internal Button element's `disabled` property to enable/disable the button.\n- `height` {string} Sets height of the button. Accepts percent, pixels, rem, etc. (Only use this for isolated use cases)\n- `hidden` {boolean} Controls the visibility of the button\n- `icon` {string | null} A string representing an icon to display inside the button. This string is passed to a slotted [IdsIcon](../ids-icon/README.md) element's `icon` setting to set the desired icon type.\n- `iconAlign` {string} Defines which side to align the Button's icon against, can be 'start' or 'end'\n- `id` {string} Defines an identifier (ID) that must be unique within the entire document.\n- `label` {string | null} Sets a descriptive label for the button. This can be used for accessibility or additional metadata purposes.\n- `label-audible` {string | null} Sets audible text for button.\n- `label-position` {string} Positions the button as if it had an inline-start label, applying the same layout offset as labeled form fields. This keeps the button aligned within a form that uses side labels.\n- `label-width` {string | null} Overrides the default label width used for the inline offset (e.g. `'200px'`, `'250px'`). Sets the `--ids-label-width-inline-start` CSS variable on the host. When used with `label-position=\"inline-start\"`, the button's spacer element uses this width to match sibling input label widths. The spacer responds to the same `@media` and `@container` breakpoints as input labels.\n- `noAnimation` {boolean} Disables generative AI animations when true\n- `noMargins` {boolean} Removes default margins from the button\n- `noPadding` {boolean} Removes default padding from the button\n- `overflow` {string} Controls text overflow behavior, can be 'ellipsis' or null\n- `overflow-tooltip` {string} Controls which tooltip content displays based on overflow state when `overflow=\"ellipsis\"` is set. Values: `'text'` (default — shows button text when overflowing), `'custom'` (shows custom tooltip even when overflowing), `'false'` (no tooltip when overflowing). When text is NOT overflowing, the custom tooltip (if configured) always displays regardless of this setting. Does not require `tooltip=\"true\"` to be set.\n- `size` {string | null} Matches the button's occupied width to an `ids-input` size by adding `margin-inline-end`. Valid values: `'xs'` (75px), `'sm'` (150px), `'mm'` (225px), `'md'` (300px), `'lg'` (400px). The margin is computed dynamically so the button + margin equals the target input width.\n- `square` {boolean} whether the corners of the button as an icon-button are angled/90°.\n- `tabIndex` {string | number} Sets the internal Button element's `tabIndex` property for controlling focus\n- `text` {string} API-level method for setting a button's text content. This will become the content of the slotted text node when set.\n- `tooltip` {string} Sets up a string based tooltip.\n- `type` {string} Passes a 'type' attribute for the button, some map to standard `HTMLButtonElement` button types. This can be one of 'button', 'submit', 'reset', 'menu'.\n- `width` {string} Sets width of the button. Accepts percent, pixels, rem, etc.\n\n## Events\n\n- `click`: Fired when the button is clicked. For submit buttons, this will also trigger form submission.\n- `focus`: Fired when the button receives focus.\n- `blur`: Fired when the button loses focus.\n\n## Responsive Guidelines\n\n- Buttons can span 100% width of their parent container on mobile breakpoints.\n\n## Accessibility Guidelines\n\n- All buttons, including icon-only buttons, must have descriptive text inside the button to communicate its action to a screen reader user. Use the `audible` CSS class to visually hide the text if necessary.\n\n## Regional Considerations\n\nBe aware of the content layout for buttons in right-to-left (RTL) UIs.\n\n## Converting from Previous Versions\n\n**3.x to 4.x**\n- Change class `inforFormButton` default to `btn-primary`\n- Change class `inforFormButton` to `btn-secondary`\n\n**4.x to 5.x**\nThe ids-button is now a WebComponent. Instead of using classes to define a button's purpose or visual style, it's now done directly with an \"appearance\" attribute:\n\n```html\n\n\n\n\n\n My Button\n\n```\n\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles.\n- Some button properties are now attributes - \"appearance\", \"text\", \"icon\", \"disabled\", etc.\n- Some components now extend IdsButton, such as [IdsToggleButton](../ids-toggle-button/README.md) and [IdsMenuButton](../ids-menu-button/README.md)...\n"}},{"name":"ids-calendar-event-group","attributes":[{"name":"#order","values":[]},{"name":"css-classes","values":[]},{"name":"#date-key","values":[]},{"name":"cached-events","values":[]},{"name":"cached-event-type","values":[]},{"name":"#tooltip-settings","values":[]},{"name":"#show-tooltip","values":[]},{"name":"on-language-change","description":"Respond to language changes","values":[]},{"name":"locale-api","values":[]},{"name":"event-data","description":"Gets calendar event data","values":[]},{"name":"event-type-data","description":"Gets calendar event type","values":[]},{"name":"y-offset","description":"Gets y offset","values":[]},{"name":"x-offset","description":"Sets horizontal position of calendar event\nStyles left or right depending on rtl flag","values":[]},{"name":"height","description":"Gets height","values":[]},{"name":"width","description":"Gets width","values":[]},{"name":"css-class","description":"Sets extra css classes to calendar event","values":[]},{"name":"overflow","description":"Gets overflow value of IdsText","values":[]},{"name":"order","description":"Gets order property","values":[]},{"name":"color","description":"Gets color property from event type data","values":[]},{"name":"date-key","description":"Gets dateKey property","values":[]},{"name":"disabled","description":"Get disabled property","values":[]},{"name":"tooltip-settings","description":"sets the tooltip settings","values":[]},{"name":"show-tooltip","description":"Sets the show tooltip setting","values":[]}],"description":{"kind":"markdown","value":"# ids-calendar\n\n## Description\n\nThe ids-calendar component provides a calendar view that displays month, week, and day views. See more [usage details](https://design.infor.com/components/components/calendar).\n\n## Use Cases\n- Displays month view in selected date\n- Display a week calendar in selected date\n- Display one day calendar in selected date\n\n## Settings (Attributes)\n- `date` `{string|null}` - Specifies active date in a string date format. Defaults to current date.\n- `show-details` `{string|null}` - Specifies whether detail pane is shown\n- `show-legend` `{string|null}` - Specifies whether legend pane is shown\n- `suppress-form` `{boolean}` - Disables built in calendar event forms which handle creating/updating calendar events.\n- `display-time` `{boolean}` - Controls whether time information is displayed in calendar events\n- `display-comments` `{boolean}` - Controls whether comments are displayed in calendar events\n- `group-events` `{boolean}` - Controls whether similar calendar events are grouped by type\n\n## Settings (Properties)\n- `eventsData` `{Array}` - Array of calendar event data to populate the week view\n- `eventTypesData` `{Array}` - Array of calendar event types used to categorize calendar events\n\n## Calendar Event Data Properties\n- `headerIcons` `{Array<{icon: string, tooltip?: string, color?: string}>}` - Array of icons displayed in the event header with optional tooltips and colors\n- `rsvpState` `{RsvpState}` - RSVP status for the event. Values: `pending`, `declined`, `attending`, `notAttending`\n\n## Events\n- `eventadded` - Fires when new event is added to calendar. Detail contains new event and calendar element.\n- `eventupdated` - Fires when existing event is updated. Detail contains updated event and calendar element.\n- `beforeeventrendered` Fires for each event rendered (full day or in day) before the element is added to the DOM. This event can fire frequently or more than expected as the component does re-rendering.\n- `aftereventrendered` Fires for each event rendered (full day or in day) after the element is added to the DOM. This event can fire frequently or more than expected as the component does re-rendering.\n- `daydblclick` - Fires when a day cell in month view is double clicked.\n- `clickcalendarevent` - Fires when a calendar event is clicked. Detail contains IdsCalendarEvent element.\n- `dblclickcalendarevent` - Fires when a calendar event is double clicked. Detail contains IdsCalendarEvent element.\n- `eventsrendered` - Fires when calendar events are rendered in current view. Detail contains calendar events data.\n- `afterrendermonth` - Fires when after month render. Detail contains calendar events data.\n- `beforerendermonth` - Fires when before month render. Detail contains calendar events data.\n\n## Methods\n- `addEvent(eventData: CalendarEventData)` - Add an event to the calendar.\n- `updateEvent(eventData: CalendarEventData)` - Update an existing calendar event.\n\n## Features (With Code Examples)\n\nWith no settings. Calendar shows month view set to current date without legend or detail panes.\n\n```html\n\n```\n\nWith `date` setting. Calendar shows month/week/day view of provided date.\n\n```html\n\n```\n\nWith `show-legend` setting. Calendar shows legend pane. By default, legend pane contains calendar event type checkboxes\nused to filter populated calendar events by event type.\n\n```html\n\n```\n\nWith `show-details` setting. Calendar shows details pane. Detail pane shows detailed list of calendar event within the active date.\nDetail pane is only visible when month view is active.\n\n```html\n\n```\n\nThe component can be controlled dynamically\n\n```js\nconst calendar = document.querySelector('ids-calendar');\n\n// Changing date\ncalendar.date = 'Tue Nov 16 2021';\ncalendar.date = '11/17/2021';\n\n// Changing pane visibility\ncalendar.showLegend = false;\ncalendar.showDetails = true;\n\n// Setting calendar event data\ncalendar.eventsData = [...eventsData];\ncalendar.eventsData = [];\n\n// Setting calendar event types data\ncalendar.eventTypesData = [...eventTypesData];\ncalendar.eventTypesData = [];\n\n// Calendar event with header icons and RSVP state\nconst eventWithIcons = {\n id: 'event-1',\n subject: 'Team Meeting',\n starts: '2021-11-16T10:00:00',\n ends: '2021-11-16T11:00:00',\n type: 'meeting',\n isAllDay: false,\n headerIcons: [\n { icon: 'user-profile', tooltip: 'Required attendees', color: 'info' },\n { icon: 'attach', tooltip: 'Has attachments' }\n ],\n rsvpState: 'pending'\n};\ncalendar.eventsData = [eventWithIcons];\n```\n"}},{"name":"ids-calendar-event","attributes":[{"name":"#order","values":[]},{"name":"css-classes","values":[]},{"name":"#date-key","values":[]},{"name":"cached-event","values":[]},{"name":"cached-event-type","values":[]},{"name":"#show-tooltip","values":[]},{"name":"#tooltip-settings","values":[]},{"name":"header-icon-tooltips","values":[]},{"name":"on-language-change","description":"Respond to language changes","values":[]},{"name":"locale-api","values":[]},{"name":"event-data","description":"Gets calendar event data","values":[]},{"name":"event-type-data","description":"Gets calendar event type","values":[]},{"name":"y-offset","description":"Gets y offset","values":[]},{"name":"x-offset","description":"Sets horizontal position of calendar event\nStyles left or right depending on rtl flag","values":[]},{"name":"height","description":"Gets height","values":[]},{"name":"width","description":"Gets width","values":[]},{"name":"css-class","description":"Sets extra css classes to calendar event","values":[]},{"name":"start-date","description":"Gets start date of calendar event","values":[]},{"name":"end-date","description":"Gets end date of calendar event","values":[]},{"name":"duration","description":"Gets duration of event in hours","values":[]},{"name":"display-time","description":"Gets displayTime setting value","values":[]},{"name":"display-comments","description":"Gets displayComments setting value","values":[]},{"name":"overflow","description":"Gets overflow value of IdsText","values":[]},{"name":"order","description":"Gets order property","values":[]},{"name":"color","description":"Gets color property from event type data","values":[]},{"name":"date-key","description":"Gets dateKey property","values":[]},{"name":"disabled","description":"Get disabled property","values":[]},{"name":"tooltip-settings","description":"sets the tooltip settings","values":[]},{"name":"show-tooltip","description":"Sets the show tooltip setting","values":[]}],"description":{"kind":"markdown","value":"# ids-calendar\n\n## Description\n\nThe ids-calendar component provides a calendar view that displays month, week, and day views. See more [usage details](https://design.infor.com/components/components/calendar).\n\n## Use Cases\n- Displays month view in selected date\n- Display a week calendar in selected date\n- Display one day calendar in selected date\n\n## Settings (Attributes)\n- `date` `{string|null}` - Specifies active date in a string date format. Defaults to current date.\n- `show-details` `{string|null}` - Specifies whether detail pane is shown\n- `show-legend` `{string|null}` - Specifies whether legend pane is shown\n- `suppress-form` `{boolean}` - Disables built in calendar event forms which handle creating/updating calendar events.\n- `display-time` `{boolean}` - Controls whether time information is displayed in calendar events\n- `display-comments` `{boolean}` - Controls whether comments are displayed in calendar events\n- `group-events` `{boolean}` - Controls whether similar calendar events are grouped by type\n\n## Settings (Properties)\n- `eventsData` `{Array}` - Array of calendar event data to populate the week view\n- `eventTypesData` `{Array}` - Array of calendar event types used to categorize calendar events\n\n## Calendar Event Data Properties\n- `headerIcons` `{Array<{icon: string, tooltip?: string, color?: string}>}` - Array of icons displayed in the event header with optional tooltips and colors\n- `rsvpState` `{RsvpState}` - RSVP status for the event. Values: `pending`, `declined`, `attending`, `notAttending`\n\n## Events\n- `eventadded` - Fires when new event is added to calendar. Detail contains new event and calendar element.\n- `eventupdated` - Fires when existing event is updated. Detail contains updated event and calendar element.\n- `beforeeventrendered` Fires for each event rendered (full day or in day) before the element is added to the DOM. This event can fire frequently or more than expected as the component does re-rendering.\n- `aftereventrendered` Fires for each event rendered (full day or in day) after the element is added to the DOM. This event can fire frequently or more than expected as the component does re-rendering.\n- `daydblclick` - Fires when a day cell in month view is double clicked.\n- `clickcalendarevent` - Fires when a calendar event is clicked. Detail contains IdsCalendarEvent element.\n- `dblclickcalendarevent` - Fires when a calendar event is double clicked. Detail contains IdsCalendarEvent element.\n- `eventsrendered` - Fires when calendar events are rendered in current view. Detail contains calendar events data.\n- `afterrendermonth` - Fires when after month render. Detail contains calendar events data.\n- `beforerendermonth` - Fires when before month render. Detail contains calendar events data.\n\n## Methods\n- `addEvent(eventData: CalendarEventData)` - Add an event to the calendar.\n- `updateEvent(eventData: CalendarEventData)` - Update an existing calendar event.\n\n## Features (With Code Examples)\n\nWith no settings. Calendar shows month view set to current date without legend or detail panes.\n\n```html\n\n```\n\nWith `date` setting. Calendar shows month/week/day view of provided date.\n\n```html\n\n```\n\nWith `show-legend` setting. Calendar shows legend pane. By default, legend pane contains calendar event type checkboxes\nused to filter populated calendar events by event type.\n\n```html\n\n```\n\nWith `show-details` setting. Calendar shows details pane. Detail pane shows detailed list of calendar event within the active date.\nDetail pane is only visible when month view is active.\n\n```html\n\n```\n\nThe component can be controlled dynamically\n\n```js\nconst calendar = document.querySelector('ids-calendar');\n\n// Changing date\ncalendar.date = 'Tue Nov 16 2021';\ncalendar.date = '11/17/2021';\n\n// Changing pane visibility\ncalendar.showLegend = false;\ncalendar.showDetails = true;\n\n// Setting calendar event data\ncalendar.eventsData = [...eventsData];\ncalendar.eventsData = [];\n\n// Setting calendar event types data\ncalendar.eventTypesData = [...eventTypesData];\ncalendar.eventTypesData = [];\n\n// Calendar event with header icons and RSVP state\nconst eventWithIcons = {\n id: 'event-1',\n subject: 'Team Meeting',\n starts: '2021-11-16T10:00:00',\n ends: '2021-11-16T11:00:00',\n type: 'meeting',\n isAllDay: false,\n headerIcons: [\n { icon: 'user-profile', tooltip: 'Required attendees', color: 'info' },\n { icon: 'attach', tooltip: 'Has attachments' }\n ],\n rsvpState: 'pending'\n};\ncalendar.eventsData = [eventWithIcons];\n```\n"}},{"name":"ids-calendar","attributes":[{"name":"#mobile-breakpoint","values":[]},{"name":"#resize-observer","values":[]},{"name":"#selected-event-id","values":[]},{"name":"#has-custom-legend","values":[]},{"name":"#tooltip-settings","values":[]},{"name":"suppress-form","description":"Get the suppress form state","values":[]},{"name":"show-details","description":"Get the show details state","values":[]},{"name":"show-legend","description":"Get the show legend state","values":[]},{"name":"show-today","description":"Set whether or not the today button should be shown","values":[]},{"name":"show-tooltip","description":"Set whether or not to show the tooltip","values":[]},{"name":"tooltip-settings","description":"Sets the tooltip settings","values":[]},{"name":"slide-selection","description":"Sets the slide selection","values":[]},{"name":"date","description":"Get the active date","values":[]},{"name":"on-locale-change","description":"Handle when locale changes","values":[]},{"name":"#last-month-legend-data","values":[]},{"name":"start-date","description":"Get the start date","values":[]},{"name":"end-date","description":"Get the end date","values":[]},{"name":"display-time","description":"Gets displayTime setting value","values":[]},{"name":"group-events","description":"Gets groupEvents setting value","values":[]},{"name":"display-comments","description":"Gets displayComments setting value","values":[]}],"description":{"kind":"markdown","value":"# ids-calendar\n\n## Description\n\nThe ids-calendar component provides a calendar view that displays month, week, and day views. See more [usage details](https://design.infor.com/components/components/calendar).\n\n## Use Cases\n- Displays month view in selected date\n- Display a week calendar in selected date\n- Display one day calendar in selected date\n\n## Settings (Attributes)\n- `date` `{string|null}` - Specifies active date in a string date format. Defaults to current date.\n- `show-details` `{string|null}` - Specifies whether detail pane is shown\n- `show-legend` `{string|null}` - Specifies whether legend pane is shown\n- `suppress-form` `{boolean}` - Disables built in calendar event forms which handle creating/updating calendar events.\n- `display-time` `{boolean}` - Controls whether time information is displayed in calendar events\n- `display-comments` `{boolean}` - Controls whether comments are displayed in calendar events\n- `group-events` `{boolean}` - Controls whether similar calendar events are grouped by type\n\n## Settings (Properties)\n- `eventsData` `{Array}` - Array of calendar event data to populate the week view\n- `eventTypesData` `{Array}` - Array of calendar event types used to categorize calendar events\n\n## Calendar Event Data Properties\n- `headerIcons` `{Array<{icon: string, tooltip?: string, color?: string}>}` - Array of icons displayed in the event header with optional tooltips and colors\n- `rsvpState` `{RsvpState}` - RSVP status for the event. Values: `pending`, `declined`, `attending`, `notAttending`\n\n## Events\n- `eventadded` - Fires when new event is added to calendar. Detail contains new event and calendar element.\n- `eventupdated` - Fires when existing event is updated. Detail contains updated event and calendar element.\n- `beforeeventrendered` Fires for each event rendered (full day or in day) before the element is added to the DOM. This event can fire frequently or more than expected as the component does re-rendering.\n- `aftereventrendered` Fires for each event rendered (full day or in day) after the element is added to the DOM. This event can fire frequently or more than expected as the component does re-rendering.\n- `daydblclick` - Fires when a day cell in month view is double clicked.\n- `clickcalendarevent` - Fires when a calendar event is clicked. Detail contains IdsCalendarEvent element.\n- `dblclickcalendarevent` - Fires when a calendar event is double clicked. Detail contains IdsCalendarEvent element.\n- `eventsrendered` - Fires when calendar events are rendered in current view. Detail contains calendar events data.\n- `afterrendermonth` - Fires when after month render. Detail contains calendar events data.\n- `beforerendermonth` - Fires when before month render. Detail contains calendar events data.\n\n## Methods\n- `addEvent(eventData: CalendarEventData)` - Add an event to the calendar.\n- `updateEvent(eventData: CalendarEventData)` - Update an existing calendar event.\n\n## Features (With Code Examples)\n\nWith no settings. Calendar shows month view set to current date without legend or detail panes.\n\n```html\n\n```\n\nWith `date` setting. Calendar shows month/week/day view of provided date.\n\n```html\n\n```\n\nWith `show-legend` setting. Calendar shows legend pane. By default, legend pane contains calendar event type checkboxes\nused to filter populated calendar events by event type.\n\n```html\n\n```\n\nWith `show-details` setting. Calendar shows details pane. Detail pane shows detailed list of calendar event within the active date.\nDetail pane is only visible when month view is active.\n\n```html\n\n```\n\nThe component can be controlled dynamically\n\n```js\nconst calendar = document.querySelector('ids-calendar');\n\n// Changing date\ncalendar.date = 'Tue Nov 16 2021';\ncalendar.date = '11/17/2021';\n\n// Changing pane visibility\ncalendar.showLegend = false;\ncalendar.showDetails = true;\n\n// Setting calendar event data\ncalendar.eventsData = [...eventsData];\ncalendar.eventsData = [];\n\n// Setting calendar event types data\ncalendar.eventTypesData = [...eventTypesData];\ncalendar.eventTypesData = [];\n\n// Calendar event with header icons and RSVP state\nconst eventWithIcons = {\n id: 'event-1',\n subject: 'Team Meeting',\n starts: '2021-11-16T10:00:00',\n ends: '2021-11-16T11:00:00',\n type: 'meeting',\n isAllDay: false,\n headerIcons: [\n { icon: 'user-profile', tooltip: 'Required attendees', color: 'info' },\n { icon: 'attach', tooltip: 'Has attachments' }\n ],\n rsvpState: 'pending'\n};\ncalendar.eventsData = [eventWithIcons];\n```\n"}},{"name":"ids-card-action","attributes":[],"description":{"kind":"markdown","value":"# ids-card\n\n## Description\n\nA card is an element that groups related information in a flexible container. See more [usage details](https://design.infor.com/components/components/card).\n\n## Terminology\n\n- **Card**: UI design pattern that groups related information that resembles a card\n- **Widget**: Card and widget are sometimes used interchangeably.\n- **Group Action**: A special toolbar inside the card content area that can be used to act on the content.\n\n## Themeable Parts\n\n- `card` allows you to further style the main card element\n- `header` allows you to further style the card header element\n- `content` allows you to further style the card content element\n- `footer` allows you to further style the card footer element\n\n## Features (With Code Examples)\n\nA card is created by using the custom `ids-card` element. A card has two content slots, one for the header area which usually contains title and a small number of action buttons. The card content area can contain whatever content you like. This content should be responsive.\n\n```html\n\n
\n Card Title One\n
\n
\n
\n\n```\n\nA card can be an actionable with the behavior of a button.\n\n```html\n\n
\n Actionable Button Card\n
\n\n```\n\nA card can be a draggable with custom drag-size and drag-styling.\n\n```html\n\n \n Form\n\n```\n\nA card can be a draggable that can be stacked.\n\n```html\n\n \n Form\n\n```\n\nA card with footer element.\n\n```html\n\n
\n Card Title One\n
\n
\n
\n
\n
\n\n```\n\nA card with footer element and vertical no-padding.\n\n```html\n\n
\n Card Title One\n
\n
\n
\n
\n
\n\n```\n## Class Hierarchy\n\n- IdsCard\n - IdsBox\n - IdsElement\n- Mixins\n IdsHideFocusMixin\n IdsEventsMixin\n IdsSelectionMixin\n\n## Settings and Attributes\n\n- `autoHeight` {boolean} Makes the card the same height as its inner content\n- `actionable` {boolean} It will make the card act as a button (can also act as a link)\n- `autoFit` {boolean} Makes the card the same dimensions as the parent element\n- `height` {number} It will make the card have a fixed height (used primarily on actionable cards)\n- `href` {number} Sets the href attribute for actionable cards that are hyperlinks\n- `noHeader` {boolean} Hides the header area\n- `backgroundColor` {string} Set the background-color of the card\n- `width` {number} Sets the default width of the card\n- `dragWidth` {number} Sets the width of the card when being dragged\n- `dragHeight` {number} Sets the height of the card when being dragged\n- `dragBgColor` {string} Set the background-color of the card while its being dragged\n- `dropped` {boolean} Whether the card has been dropped or not\n- `dropWidth` {number} Set the width that the card should be once it's dropped\n- `dropHeight` {number} Set the height that the card should be once it's dropped\n- `dropBgColor` {string} Set the background-color that the card should be once it's dropped\n- `fixed` {boolean} If true, the dragged card will remain in its original place while a shadow of the card will be dragged.\n- `stacked` {boolean} If true, the dragged card can be dropped (i.e. stacked) on top of another card.\n\nNOTE: See also `ids-box` settings as some of these will also work on cards.\n\n## States and Variations (With Code Examples)\n\n- Group Action\n- Sizes\n- Hover\n- Disabled\n- Focus\n- Pressed/Active/Selected\n\n## Keyboard Guidelines\n\n- Tab/Shift+Tab: If the card has focusable elements, tab will toggle through them in the general form order. If the header contains a toolbar. Arrow keys should be used between buttons on the toolbars\n\n## Responsive Guidelines\n\n- Depending on the container in the responsive grid, the width of the card follows the layout of the grid. However, when using in a home page a special algorithm is used to both keep the tab order and fill in the gaps most efficiently depending on the card dimensions.\n\n## Accessibility Guidelines\n\n- 1.4.1 Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Ensure the color tags that indicate state like OK, cancel, ect have other ways to indicate that information. This is failing.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Ensure the color tags pass contrast.\n\n## Regional Considerations\n\nTitles should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Cards have all new markup and classes.\n\n**4.x to 5.x**\n- Markup has changed to a custom element `` and has slots for the header and body content\n- Can now be imported as a single JS file and used with encapsulated styles.\n- The Card/Widget component has been changed to a web component and renamed to ids-card.\n- The expandable card feature is deprecated\n"}},{"name":"ids-card","attributes":[{"name":"#cloned-card","values":[]},{"name":"#position-id","values":[]},{"name":"dropped-positions","values":[]},{"name":"dropped-target-element","description":"Get the dropped target element","values":[]},{"name":"auto-fit","description":"Get the auto fit state","values":[]},{"name":"auto-height","description":"Get the auto height state","values":[]},{"name":"actionable","description":"Get the actionable state","values":[]},{"name":"disabled","description":"Get the disabled state","values":[]},{"name":"draggable","description":"Get the draggable state","values":[]},{"name":"dropped","description":"Get the dropped state","values":[]},{"name":"drop-target","description":"Get the drop target element ID","values":[]},{"name":"fixed","description":"Get the fixed state","values":[]},{"name":"stacked","description":"Get the stacked state","values":[]},{"name":"background-color","description":"Set the background color","values":[]},{"name":"width","description":"Set the width of the card","values":[]},{"name":"overflow","description":"Get the overflow setting","values":[]},{"name":"href","description":"Set href for actionable link card","values":[]},{"name":"target","description":"Set target for an actionable link card","values":[]},{"name":"no-header","description":"Set to true to hide the header space","values":[]}],"description":{"kind":"markdown","value":"# ids-card\n\n## Description\n\nA card is an element that groups related information in a flexible container. See more [usage details](https://design.infor.com/components/components/card).\n\n## Terminology\n\n- **Card**: UI design pattern that groups related information that resembles a card\n- **Widget**: Card and widget are sometimes used interchangeably.\n- **Group Action**: A special toolbar inside the card content area that can be used to act on the content.\n\n## Themeable Parts\n\n- `card` allows you to further style the main card element\n- `header` allows you to further style the card header element\n- `content` allows you to further style the card content element\n- `footer` allows you to further style the card footer element\n\n## Features (With Code Examples)\n\nA card is created by using the custom `ids-card` element. A card has two content slots, one for the header area which usually contains title and a small number of action buttons. The card content area can contain whatever content you like. This content should be responsive.\n\n```html\n\n
\n Card Title One\n
\n
\n
\n\n```\n\nA card can be an actionable with the behavior of a button.\n\n```html\n\n
\n Actionable Button Card\n
\n\n```\n\nA card can be a draggable with custom drag-size and drag-styling.\n\n```html\n\n \n Form\n\n```\n\nA card can be a draggable that can be stacked.\n\n```html\n\n \n Form\n\n```\n\nA card with footer element.\n\n```html\n\n
\n Card Title One\n
\n
\n
\n
\n
\n\n```\n\nA card with footer element and vertical no-padding.\n\n```html\n\n
\n Card Title One\n
\n
\n
\n
\n
\n\n```\n## Class Hierarchy\n\n- IdsCard\n - IdsBox\n - IdsElement\n- Mixins\n IdsHideFocusMixin\n IdsEventsMixin\n IdsSelectionMixin\n\n## Settings and Attributes\n\n- `autoHeight` {boolean} Makes the card the same height as its inner content\n- `actionable` {boolean} It will make the card act as a button (can also act as a link)\n- `autoFit` {boolean} Makes the card the same dimensions as the parent element\n- `height` {number} It will make the card have a fixed height (used primarily on actionable cards)\n- `href` {number} Sets the href attribute for actionable cards that are hyperlinks\n- `noHeader` {boolean} Hides the header area\n- `backgroundColor` {string} Set the background-color of the card\n- `width` {number} Sets the default width of the card\n- `dragWidth` {number} Sets the width of the card when being dragged\n- `dragHeight` {number} Sets the height of the card when being dragged\n- `dragBgColor` {string} Set the background-color of the card while its being dragged\n- `dropped` {boolean} Whether the card has been dropped or not\n- `dropWidth` {number} Set the width that the card should be once it's dropped\n- `dropHeight` {number} Set the height that the card should be once it's dropped\n- `dropBgColor` {string} Set the background-color that the card should be once it's dropped\n- `fixed` {boolean} If true, the dragged card will remain in its original place while a shadow of the card will be dragged.\n- `stacked` {boolean} If true, the dragged card can be dropped (i.e. stacked) on top of another card.\n\nNOTE: See also `ids-box` settings as some of these will also work on cards.\n\n## States and Variations (With Code Examples)\n\n- Group Action\n- Sizes\n- Hover\n- Disabled\n- Focus\n- Pressed/Active/Selected\n\n## Keyboard Guidelines\n\n- Tab/Shift+Tab: If the card has focusable elements, tab will toggle through them in the general form order. If the header contains a toolbar. Arrow keys should be used between buttons on the toolbars\n\n## Responsive Guidelines\n\n- Depending on the container in the responsive grid, the width of the card follows the layout of the grid. However, when using in a home page a special algorithm is used to both keep the tab order and fill in the gaps most efficiently depending on the card dimensions.\n\n## Accessibility Guidelines\n\n- 1.4.1 Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Ensure the color tags that indicate state like OK, cancel, ect have other ways to indicate that information. This is failing.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Ensure the color tags pass contrast.\n\n## Regional Considerations\n\nTitles should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Cards have all new markup and classes.\n\n**4.x to 5.x**\n- Markup has changed to a custom element `` and has slots for the header and body content\n- Can now be imported as a single JS file and used with encapsulated styles.\n- The Card/Widget component has been changed to a web component and renamed to ids-card.\n- The expandable card feature is deprecated\n"}},{"name":"ids-checkbox-group","attributes":[{"name":"label","description":"Set the label of checkbox-group","values":[]},{"name":"checkboxes","description":"Get child ids-checkbox inputs in this group","values":[]},{"name":"selected-checkboxes","description":"Get the selected ids-checkbox inputs in this group","values":[]},{"name":"checked","description":"Set the checked state of checkboxes in the group","values":[]}],"description":{"kind":"markdown","value":"# ids-checkbox\n\n## Description\n\nThe ids-checkbox is a wrapper around a standard `HTMLInputElement` that provides additional API for setting checkbox states, labels, and functionality. Checkboxes can also be grouped together with a label. See more [usage details](https://design.infor.com/components/components/checkbox).\n\n## Terminology\n\n- **Checkbox**: A standard checkbox element that can be set to checked, unchecked, indeterminate, or disabled. It adds `aria-required` for required elements.\n- **Label**: An `HTMLLabelElement` associated with the checkbox input. Make sure the label has a meaningful relative. It will add pseudo UI `*` for required elements.\n\n## Themeable Parts\n\n- `label` allows further styling of the label element\n- `input` allows further styling of the checkbox input element\n- `label-text` allows further styling of the text element in the label\n\n## Features (With Code Samples)\n\nA standard `unchecked` checkbox:\n\n```html\n\n```\n\nSets the checkbox as `checked`:\n\n```html\n\n```\n\nSet the hitbox to the checkbox:\n\n```html\n\n```\n\n### Disabled Checkboxes\n\nAdd a disabled checkbox as unchecked:\n\n```html\n\n```\n\nAdd a disabled checkbox as checked:\n\n```html\n\n```\n\nSet validation `required` to the checkbox:\n\n```html\n\n```\n\nSet validation `required` to the checkbox without label required indicator:\n\n```html\n\n```\n\nCustomize the checkbox color:\n\n```html\n\n\n```\n\nSet an indeterminate state. The `indeterminate` attribute will be removed each time the checkbox `change` its state `checked/unchecked`, so it must be added every time it need to set.\n\n```html\n\n```\n\nHide the checkbox label:\n\n```html\n\n```\n\nSet the label text alignment:\n\n```html\n\n\n\n```\n\nSet the label position with inline positioning:\n\n```html\n\n```\n\nControl label breaking behavior with inline positioning:\n\n```html\n\n\n\n\n\n\n\n\n```\n\nAlign the label text to the end of its fixed-width area with inline positioning:\n\n```html\n\n\n```\n\n### Label Wrapping\n\nControl how long labels are handled with the `label-wrap` attribute:\n\n```html\n\n\n\n\n```\n\n## Checkbox Groups\n\nThe Checkbox Group consists of a set of checkboxes with labels. It groups a set of options with a summarizing ``. Has a `label` property and `ids-checkbox` elements for slots.\n\n```html\n\n \n \n \n\n```\n\n- `label` {string} Sets the label for the checkbox group\n\n## Checkbox Settings\n\n- `checked` {boolean} Sets the checked state.\n- `color` {string} Sets the checkbox color.\n- `disabled` {boolean} Sets the disabled state.\n- `hidden` {boolean} Hides the checkbox visually while keeping it in the DOM for accessibility. Useful when the checkbox needs to be present for screen readers but not visible to sighted users.\n- `horizontal` {boolean} Sets the checkbox layout inline as horizontal.\n- `horizontal-aligned` {boolean} Should be set when checkboxes with `label-position=\"inline-start\"` are lined up horizontally. This ensures correct responsive behavior so all checkboxes flip their layout together based on viewport size.\n- `indeterminate` {boolean} Sets the checkbox to neither checked nor unchecked.\n- `label` {string} Sets the label text.\n- `label-align` {string} Controls the horizontal text alignment of the label text. Options are:\n - `start`: Aligns label text to the start (left in LTR, right in RTL)\n - `end`: Aligns label text to the end (right in LTR, left in RTL)\n - `center`: Centers the label text\n - `justify`: Justifies the label text\n- `label-align-y` {string} Controls the vertical alignment of the label when using inline positioning. Options are:\n - `baseline` (default): Aligns the text baseline of the label with the input\n - `center`: Centers the label vertically relative to the input\n - `flex-start`: Aligns the label to the top of the input\n - `flex-end`: Aligns the label to the bottom of the input\n - `stretch`: Stretches the label to match the height of the input\n- `label-alignment` {string} Controls the horizontal text alignment of the label within its fixed-width area when using inline positioning. Options are:\n - `start` (default): Label text aligns to the start of the label area\n - `end`: Label text aligns to the end of the label area (right in LTR, left in RTL)\n- `label-break` {string} Controls how the label behaves when used with `label-position=\"inline-start\"`. Options are:\n - `shrink-value` (default): Label and checkbox stay on the same line, label does not shrink\n - `break`: Label text appears above the checkbox indicator, stacked vertically\n- `label-position` {string} Controls the position of the label relative to the checkbox. Options are:\n - `inline-end` (default): Label appears at the end of the checkbox (right in LTR, left in RTL)\n - `inline-start`: Label appears at the start of the checkbox (left in LTR, right in RTL)\n - Note: Checkboxes do not support `top` positioning\n- `label-required` {boolean} Sets validation `required` indicator. Defaults to `true`.\n- `label-state` {string} Sets the checkbox label state: can be `hidden` or omitted.\n- `label-width` {string} Sets the width of the label when using inline positioning. Can be any valid CSS width value (e.g., '120px', '10rem', 'auto'). Default is '140px' when not specified.\n- `label-wrap` {string} Controls how long labels are handled. Options are:\n - `wrap` (default): Label text wraps to multiple lines when needed\n - `ellipsis`: Label text is truncated with ellipsis when it overflows\n - `wrap-no-stretch`: Label wraps but doesn't stretch beyond container width\n - `ellipsis-no-stretch`: Label is truncated with ellipsis and doesn't stretch beyond container width\n- `noAnimation` {boolean} Disables the checkbox animation.\n- `skip-sanitize` {boolean} Disables HTML sanitization for the label text, allowing raw HTML content to be rendered. **Warning**: Only use with trusted content to prevent XSS attacks. When enabled, HTML tags in the label will be rendered as actual HTML elements instead of escaped text.\n- `validate` {string} Sets the validation rule `required`.\n- `validation-events` {string} Sets the validation events. Use `space` to add multiple. Defaults to `change`.\n- `value` {string} Sets the `` `submit` value (not to be confused with `checked`, it only sets the form value).\n\n## Events\n\n- `change`: The change event is fired when a checkbox element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n- `input`: The input event fires when the value of a checkbox element has been changed.\n\n## States\n\n- disabled\n- dirty (not supported on this component)\n- validation/error\n- focused\n- active\n- unchecked/checked/indeterminate\n\n## Responsive Guidelines\n\n- Default display set as `block`, but can change to `inline-block` by setting `horizontal` attribute to `true`.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Wrap the input in an element with the class field\n- Change class `inforCheckbox` to checkbox\n- Change class `inforCheckboxLabel` to checkbox-label\n\n**4.x to 5.x**\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles.\n- If using events, events are now plain JS events (change/input ect)\n- Can now use the hitbox styles by adding the setting to the ids-checkbox component\n\nThe IDS Checkbox component is now a Web Component. Instead of using classes to define, it is done directly:\n\n```html\n\n
\n \n \n
\n\n\n\n```\n"}},{"name":"ids-checkbox","attributes":[{"name":"label-audible","values":[]},{"name":"is-form-component","values":[]},{"name":"#triggered-change","description":"Internal change event detection trigger.","values":[]},{"name":"input","description":"Get the inner input element","values":[]},{"name":"label-el","description":"Get the inner label element","values":[]},{"name":"label-position","description":"Get the position of the label","values":[]},{"name":"checked","description":"Get the checked state","values":[]},{"name":"color","description":"Get the checkbox color","values":[]},{"name":"disabled","description":"Get the disabled state","values":[]},{"name":"horizontal","description":"Get the horizontal orientation state","values":[]},{"name":"indeterminate","description":"Get the indeterminate state","values":[]},{"name":"value","description":"Get the checkbox value attribute","values":[]},{"name":"no-animation","description":"Get the no animation state","values":[]},{"name":"label-wrap","description":"Get the label wrap setting","values":[]},{"name":"label-align","description":"Get the label text alignment","values":[]},{"name":"label-text-el","description":"Get the inner label text element","values":[]},{"name":"tooltip","description":"Get the tooltip value (defaults to 'true' for ellipsis detection)","values":[]}],"description":{"kind":"markdown","value":"# ids-checkbox\n\n## Description\n\nThe ids-checkbox is a wrapper around a standard `HTMLInputElement` that provides additional API for setting checkbox states, labels, and functionality. Checkboxes can also be grouped together with a label. See more [usage details](https://design.infor.com/components/components/checkbox).\n\n## Terminology\n\n- **Checkbox**: A standard checkbox element that can be set to checked, unchecked, indeterminate, or disabled. It adds `aria-required` for required elements.\n- **Label**: An `HTMLLabelElement` associated with the checkbox input. Make sure the label has a meaningful relative. It will add pseudo UI `*` for required elements.\n\n## Themeable Parts\n\n- `label` allows further styling of the label element\n- `input` allows further styling of the checkbox input element\n- `label-text` allows further styling of the text element in the label\n\n## Features (With Code Samples)\n\nA standard `unchecked` checkbox:\n\n```html\n\n```\n\nSets the checkbox as `checked`:\n\n```html\n\n```\n\nSet the hitbox to the checkbox:\n\n```html\n\n```\n\n### Disabled Checkboxes\n\nAdd a disabled checkbox as unchecked:\n\n```html\n\n```\n\nAdd a disabled checkbox as checked:\n\n```html\n\n```\n\nSet validation `required` to the checkbox:\n\n```html\n\n```\n\nSet validation `required` to the checkbox without label required indicator:\n\n```html\n\n```\n\nCustomize the checkbox color:\n\n```html\n\n\n```\n\nSet an indeterminate state. The `indeterminate` attribute will be removed each time the checkbox `change` its state `checked/unchecked`, so it must be added every time it need to set.\n\n```html\n\n```\n\nHide the checkbox label:\n\n```html\n\n```\n\nSet the label text alignment:\n\n```html\n\n\n\n```\n\nSet the label position with inline positioning:\n\n```html\n\n```\n\nControl label breaking behavior with inline positioning:\n\n```html\n\n\n\n\n\n\n\n\n```\n\nAlign the label text to the end of its fixed-width area with inline positioning:\n\n```html\n\n\n```\n\n### Label Wrapping\n\nControl how long labels are handled with the `label-wrap` attribute:\n\n```html\n\n\n\n\n```\n\n## Checkbox Groups\n\nThe Checkbox Group consists of a set of checkboxes with labels. It groups a set of options with a summarizing ``. Has a `label` property and `ids-checkbox` elements for slots.\n\n```html\n\n \n \n \n\n```\n\n- `label` {string} Sets the label for the checkbox group\n\n## Checkbox Settings\n\n- `checked` {boolean} Sets the checked state.\n- `color` {string} Sets the checkbox color.\n- `disabled` {boolean} Sets the disabled state.\n- `hidden` {boolean} Hides the checkbox visually while keeping it in the DOM for accessibility. Useful when the checkbox needs to be present for screen readers but not visible to sighted users.\n- `horizontal` {boolean} Sets the checkbox layout inline as horizontal.\n- `horizontal-aligned` {boolean} Should be set when checkboxes with `label-position=\"inline-start\"` are lined up horizontally. This ensures correct responsive behavior so all checkboxes flip their layout together based on viewport size.\n- `indeterminate` {boolean} Sets the checkbox to neither checked nor unchecked.\n- `label` {string} Sets the label text.\n- `label-align` {string} Controls the horizontal text alignment of the label text. Options are:\n - `start`: Aligns label text to the start (left in LTR, right in RTL)\n - `end`: Aligns label text to the end (right in LTR, left in RTL)\n - `center`: Centers the label text\n - `justify`: Justifies the label text\n- `label-align-y` {string} Controls the vertical alignment of the label when using inline positioning. Options are:\n - `baseline` (default): Aligns the text baseline of the label with the input\n - `center`: Centers the label vertically relative to the input\n - `flex-start`: Aligns the label to the top of the input\n - `flex-end`: Aligns the label to the bottom of the input\n - `stretch`: Stretches the label to match the height of the input\n- `label-alignment` {string} Controls the horizontal text alignment of the label within its fixed-width area when using inline positioning. Options are:\n - `start` (default): Label text aligns to the start of the label area\n - `end`: Label text aligns to the end of the label area (right in LTR, left in RTL)\n- `label-break` {string} Controls how the label behaves when used with `label-position=\"inline-start\"`. Options are:\n - `shrink-value` (default): Label and checkbox stay on the same line, label does not shrink\n - `break`: Label text appears above the checkbox indicator, stacked vertically\n- `label-position` {string} Controls the position of the label relative to the checkbox. Options are:\n - `inline-end` (default): Label appears at the end of the checkbox (right in LTR, left in RTL)\n - `inline-start`: Label appears at the start of the checkbox (left in LTR, right in RTL)\n - Note: Checkboxes do not support `top` positioning\n- `label-required` {boolean} Sets validation `required` indicator. Defaults to `true`.\n- `label-state` {string} Sets the checkbox label state: can be `hidden` or omitted.\n- `label-width` {string} Sets the width of the label when using inline positioning. Can be any valid CSS width value (e.g., '120px', '10rem', 'auto'). Default is '140px' when not specified.\n- `label-wrap` {string} Controls how long labels are handled. Options are:\n - `wrap` (default): Label text wraps to multiple lines when needed\n - `ellipsis`: Label text is truncated with ellipsis when it overflows\n - `wrap-no-stretch`: Label wraps but doesn't stretch beyond container width\n - `ellipsis-no-stretch`: Label is truncated with ellipsis and doesn't stretch beyond container width\n- `noAnimation` {boolean} Disables the checkbox animation.\n- `skip-sanitize` {boolean} Disables HTML sanitization for the label text, allowing raw HTML content to be rendered. **Warning**: Only use with trusted content to prevent XSS attacks. When enabled, HTML tags in the label will be rendered as actual HTML elements instead of escaped text.\n- `validate` {string} Sets the validation rule `required`.\n- `validation-events` {string} Sets the validation events. Use `space` to add multiple. Defaults to `change`.\n- `value` {string} Sets the `` `submit` value (not to be confused with `checked`, it only sets the form value).\n\n## Events\n\n- `change`: The change event is fired when a checkbox element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n- `input`: The input event fires when the value of a checkbox element has been changed.\n\n## States\n\n- disabled\n- dirty (not supported on this component)\n- validation/error\n- focused\n- active\n- unchecked/checked/indeterminate\n\n## Responsive Guidelines\n\n- Default display set as `block`, but can change to `inline-block` by setting `horizontal` attribute to `true`.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Wrap the input in an element with the class field\n- Change class `inforCheckbox` to checkbox\n- Change class `inforCheckboxLabel` to checkbox-label\n\n**4.x to 5.x**\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles.\n- If using events, events are now plain JS events (change/input ect)\n- Can now use the hitbox styles by adding the setting to the ids-checkbox component\n\nThe IDS Checkbox component is now a Web Component. Instead of using classes to define, it is done directly:\n\n```html\n\n
\n \n \n
\n\n\n\n```\n"}},{"name":"ids-color","attributes":[{"name":"swatch","values":[]},{"name":"icon","values":[]},{"name":"popup","values":[]},{"name":"suppress-tooltip","description":"Gets the suppress-tooltip attribute","values":[]},{"name":"disabled","description":"Gets the disabled attribute","values":[]},{"name":"hex","values":[]},{"name":"label","values":[]},{"name":"show-label","values":[]},{"name":"tooltip","values":[]},{"name":"size","values":[]},{"name":"clickable","values":[]},{"name":"color","values":[]}],"description":{"kind":"markdown","value":"# ids-color\n\n## Description\n\nids-color consists of custom element ``. Once initialized, it functions to display a color setting using a `hex` attribute.\n\n## Settings and Attributes\n\n- `hex` {string} Sets the color hex attribute. Value should be a hex code or IDS color variable name.\n- `size` {string} The size of the color swatch: `xs`, `sm`, `mm`, `md`, `lg`, or `full`\n- `color` {string} Sets the background color to a CSS variable.\n- `clickable` {boolean} Set to `true` to add the checkbox from ids-color-picker.\n- `label` {string} Displays a label under the color swatch.\n\n## Code Examples\n\nA basic use of the color picker with a hex color option.\n\n```html\n\n```\n\nA basic use case of the color picker to show a color palette item in larger size.\n\n```html\n\n```"}},{"name":"ids-color-picker","attributes":[{"name":"is-form-component","values":[]},{"name":"use-default-swatches","values":[]},{"name":"initialized","values":[]},{"name":"default-swatches-cache","values":[]},{"name":"input","description":"Get the text input element","values":[]},{"name":"color-input","description":"Get the color input element for advanced mode","values":[]},{"name":"color-preview","description":"Get the color preview element","values":[]},{"name":"trigger-btn","description":"Get the trigger button element","values":[]},{"name":"color-preview-html","description":"HTML for Color Picker Previw Swatch","values":[]},{"name":"popup","description":"Get the popup element","values":[]},{"name":"color-picker-advanced-html","description":"HTML for Advanced Color Picker Popup","values":[]},{"name":"swatches","description":"Available color swatches within this color-picker","values":[]},{"name":"default-swatches","description":"Default color swatches for this color-picker if no children provided","values":[]},{"name":"value","description":"Gets the value attribute","values":[]},{"name":"placeholder","description":"Get the placeholder text","values":[]},{"name":"size","description":"Get the size of the color picker","values":[]},{"name":"validate","description":"Get the validation rules","values":[]},{"name":"suppress-validation","description":"Get the suppress validation state","values":[]},{"name":"suppress-error-message","description":"Gets whether validation is suppressed on the inner input element.","values":[]},{"name":"tabbable","description":"Get the tabbable state","values":[]},{"name":"tooltip","description":"Get the tooltip text","values":[]},{"name":"advanced","description":"Gets the advanced attribute","values":[]},{"name":"disabled","description":"Gets the disabled attribute","values":[]},{"name":"readonly","description":"Gets the readonly attribute","values":[]},{"name":"suppress-labels","description":"Gets the labels attribute","values":[]},{"name":"suppress-tooltips","description":"Get the suppress tooltips state","values":[]},{"name":"compact","description":"Get the compact mode state","values":[]},{"name":"id","description":"Get the id value","values":[]},{"name":"#handle-popup-key-navigation","description":"Handle keyboard navigation within the popup","values":[]}],"description":{"kind":"markdown","value":"# ids-color-picker\n\n## Description\n\nThe color picker consists of a custom element ``. Once initialized, it functions similarly to a dropdown except that the list shows a color palette in the popup. After selecting a color, the hex code and swatch will display the new value.\n\n## Behavior Guidelines\n\nThe color picker contains colors from the core IDS palette. You can add custom colors by nesting an `` custom element inside ``.\n\n## Settings and Attributes\n\n- `autoselect` {boolean} Set the text to auto select on focus. For more info see [ids-autoselect-mixin/README.md](../../mixins/ids-autoselect-mixin/README.md).\n- `value` {string} Sets the selected color. Example: `value=\"#b94e4e\"`\n- `label` {string} Sets the label which displays above the color picker. Example: `label=\"Color Picker\"`\n- `clearable` {boolean} If `true`, adds the empty color swatch to the list of colors. Example: `clearable=\"true\"`\n- `disabled` {boolean} If `true`, sets the entire color picker as disabled. Mutually exclusive with `readonly` — setting `disabled` removes `readonly`, and vice versa. Example: `disabled=\"true\"`\n- `readonly` {boolean} If `true`, sets the color picker as readonly. Mutually exclusive with `disabled` — setting `readonly` removes `disabled`, and vice versa.\n- `suppress-labels` {boolean} If `true`, the color swatches display hex values instead of labels.\n- `suppress-tooltips` {boolean} If `true`, the color swatches do not display tooltips on hover.\n- `validate` {string} Set the validation rule, e.g., `required`.\n- `advanced` {boolean} If `true`, the component will provide a browser's visual color picker interface and the input will be masked, allowing only `#rrggbb` hexadecimal format.\n- `tabbable` {boolean} When set to `true`, allows the trigger button to be included in the tab order. By default, the trigger button is not tabbable, but for accessibility reasons it can be made tabbable when needed.\n- `row-start` {boolean} This can be added to the ids-color items in the slot for custom colors to make them start on a new row.\n\n## Code Examples\n\nA basic use case of the color picker:\n\n```html\n\n```\n\nA color picker with labels and tooltips disabled:\n\n```html\n\n```\n\nA color picker with custom colors. Use `row-start` to indicate the color should start a new row. You can add labels and tooltips as well. Also note that you can have special items for transparent, inherit, clear/no-color and inherit.\n\n```html\n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n\n```\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Adjust the markup to use fields, inputs, and labels:\n```html\n
\n \n \n
\n```\n\n**3.x to 5.x**\n\n- Markup has changed to a custom element `ids-color-picker`\n- Can now be imported as a single JS file and used with encapsulated styles\n- Events are now plain JS events (change/input etc.)\n- The IDS Color Picker component is now a WebComponent. Custom colors are added as slot items:\n\n```html\n\n \n \n \n \n \n \n \n \n\n```\n\n## Keyboard Guidelines\n\n- Tab / Shift+Tab: Navigate color swatches\n- ArrowDown / ArrowLeft / ArrowRight / ArrowUp: Navigate color swatches\n- Enter / Space: Select currently focused color swatch\n"}},{"name":"ids-container","attributes":[{"name":"#resize-observer","description":"ResizeObserver instance for tracking container size changes","values":[]},{"name":"color-variants","description":"Inherited from `IdsColorVariantMixin`","values":[]},{"name":"padding","description":"If set to number the container will have padding added (in pixels)","values":[]},{"name":"event-debounce","values":[]},{"name":"scrollable","description":"If set to true the container is scrollable","values":[]},{"name":"reset","description":"If set to true body element will get a \"css reset\"","values":[]},{"name":"background-color","description":"Pass in a css variable name to set the background color","values":[]}],"description":{"kind":"markdown","value":"# ids-container \n\n## Description\n\nA root container component that's used for theming the page and resetting the browser styles. The ids-container is also the parent element for the locale and language, all components that are in it will use this locale/language.\n\n## Use Cases\n\n- When you need to use components that will not overflow the page boundary\n- When you need a root container for IDS components\n- When you need to style the page background\n- When you need a locale and language\n\n## Terminology\n\n- **Page Container**: The older term for ids-container\n\n## Features (With Code Examples)\n\nA normal container used as a web component.\n\n```html\n\n \n\n```\n\nA normal container with a set padding.\n```html\n\n \n\n```\n\n## Settings and Attributes\n\n- `scrollable` {boolean} If `true`, turns on the overflow to allow for scroll.\n- `padding` {number} Sets the padding (in px) around the container. Defaults to 0 / none.\n- `color-variant` {string} Can be set to \"alternate\" to display contrasting color for text or icons via the [IdsColorVariantMixin](../../src/mixins/ids-color-variant-mixin/README.md).\n- `background-color` {boolean} Set as `true` to display a background color (different based on theme).\n- `event-debounce` {boolean} If `true`, debounces scroll and resize events to improve performance. Useful for high-frequency event scenarios. The `scroll` and `resize` events will be affected by this attribute.\n\n## Events\n\n- `scroll` Fires when the container is scrolled. Event detail contains the original scroll `event` object.\n- `resize` Fires when the container is resized. Event detail contains `width`, `height`, and `event` object.\n\n```javascript\nconst container = document.querySelector('ids-container');\n\ncontainer.addEventListener('scroll', (e) => {\n console.log('Scrolled:', e.detail);\n});\n\ncontainer.addEventListener('resize', (e) => {\n console.log('Resized:', e.detail.width, e.detail.height);\n});\n```\n\n## States and Variations (With Code Examples)\n\n- Color\n- Scrollable\n- Padding\n\n## Keyboard Guidelines\n\n- Down Arrow/Up Arrow: Scrolls the container\n\n## Responsive Guidelines\n\n- This component will be 100% width and height in the page / parent\n\n## Converting from Previous Versions\n\n- 3.x: Did not exist\n- 4.x: Replaces a div with the page-container class\n"}},{"name":"ids-counts","attributes":[{"name":"color","description":"Set the color of the counts","values":[]},{"name":"compact","description":"Set the compact attribute","values":[]},{"name":"href","description":"Set the href attribute","values":[]}],"description":{"kind":"markdown","value":"# ids-counts\n\n## Description\n\nCounts are distinctive elements used to highlight high level numbers or metrics.\n\n## Use Cases\n\n- Use counts in dashboards and visualizations for summarizing key numeric takeaways.\n- Use counts as a concise numeric data point that can link to underlying detail elsewhere on the page or site.\n\n## Terminology\n\n- **Counts**: UI embellishments for summarizing high level numeric information.\n- **Value**: The numeric value displayed on the count component.\n- **Text**: The name or brief description of the value.\n- **Compact**: When compact, the count value appears slightly smaller than usual.\n\n## Features (With Code Examples)\n\nA card is created using the custom `ids-counts` element. A user can place elements inside of the component to represent text. It is recommended to use ids-text components as ids-counts has functionality to manage that input specifically.\n\nA normal Counts component\n\n```html\n\n 7\n Active
Opportunities\n\n```\n\nThe same component could be made \"Not Actionable\" by removing the href attribute\n\n```html\n\n 7\n Active
Opportunities\n\n```\n\nSetting the optional \"Compact\" attribute to \"true\" decreases the font size of the value\n\n```html\n\n 7\n Active
Opportunities\n\n```\n\nThe counts component also supports an optional \"Color\" attribute. The options for color are base (blue), caution, error, success, warning, or a hex code with the \"#\"\n\n```html\n\n 7\n Active
Opportunities\n\n```\n\nCounts using just the css. Use the anchor tag for normal counts and span for non-actionable.\n\n```html\n\n
7
\n
Active
Opportunities
\n\n\n
7
\n
Active
Opportunities
\n\n```\n\n## Settings and Attributes\n\n- `color` {string} Sets the color to an internal color such as `blue`. Can also a hexadecimal color code beginning with `#`.\n- `compact` {string} Use \"true\" to set the value font-size to 40. Omitting this attribute or using any will result in the default value of 48.\n- `href` {string} The url that the count component links to.\n\n## States and Variations (With Code Examples)\n\n- Actionable\n- Color\n- Compact\n\n## Keyboard Guidelines\n\n- Tab/Shift+Tab: If the count is actionable (default) this will toggle through them in the general form order. Non-actionable counts do not get selected.\n- Enter: This will follow the tag link.\n\n## Responsive Guidelines\n\n- Flows with padding and margin within the width and height of the parent container.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- The counts component has been changed to a web component and renamed to ids-counts.\n- Text is now contained in an ids-text element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n\n## Accessibility Guidelines\n\n- 1.4.1 Use of Color - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Ensure the color tags that indicate state like OK, cancel, ect have other ways to indicate that information. This is failing.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Ensure the color tags pass contrast.\n\n## Regional Considerations\n\nText should be localized in the current language. Consider that in some languages text may be longer (German) and in some cases it can't be wrapped (Thai).\n"}},{"name":"ids-data-grid-cell","attributes":[{"name":"root-node","values":[]},{"name":"is-in-valid","values":[]},{"name":"editor","description":"The editor element","values":[]},{"name":"parent-row","values":[]},{"name":"is-draggable","values":[]},{"name":"is-editable","values":[]},{"name":"data-grid","description":"Reference to the data grid parent","values":[]},{"name":"row-below","description":"Gets data grid row below this cell","values":[]},{"name":"row-above","description":"Gets data grid row above this cell","values":[]},{"name":"cell-above","description":"Get the cell above this cell","values":[]},{"name":"cell-below","description":"Get the cell below this cell","values":[]},{"name":"cell-left","description":"Get the cell to the left of this cell","values":[]},{"name":"cell-right","description":"Get the cell to the right of this cell","values":[]},{"name":"cell-left-editable","description":"Get the next editable cell to the left of this cell","values":[]},{"name":"cell-right-editable","description":"Get the next editable cell to the right of this cell","values":[]},{"name":"#memoized-column","values":[]},{"name":"#memoized-column-index","values":[]},{"name":"column","description":"Get the column definition","values":[]},{"name":"column-header","description":"Get the column header cell element","values":[]},{"name":"column-index","description":"Gets the column # in which this cell exists","values":[]},{"name":"row-index","description":"Gets the row-index # in which this cell exists","values":[]},{"name":"formatter","values":[]},{"name":"row","description":"Get row of table cell","values":[]},{"name":"value","description":"Get data value of this cell","values":[]},{"name":"default-value","description":"Get the default/original value of this cell","values":[]},{"name":"original-value","description":"Previous Value before Editing","values":[]},{"name":"original-selected-index","description":"Previous Selected Index before Editing","values":[]},{"name":"previous-invalid-state","description":"Previous Invalid state before reseting","values":[]},{"name":"is-editing","description":"If currently in edit mode","values":[]},{"name":"cell-cache","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-column","description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-common","description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-container-arguments","description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-contextmenu","description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-editors","attributes":[{"name":"type","description":"The type of editor (i.e. input, dropdown, checkbox ect)","values":[]},{"name":"input","description":"Holds the Editor","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-empty-message","description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-filter-manager","attributes":[{"name":"#instance","description":"Singleton instance of the filter manager","values":[]},{"name":"#filters","description":"Collection of active filter instances","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-filters","attributes":[{"name":"root","description":"Reference to the parent data grid component","values":[]},{"name":"defaults","description":"Default filter configuration values","values":[]},{"name":"#conditions","description":"Saved list of filter conditions to use with filter rerender","values":[]},{"name":"#filter-popups","description":"Track filter popups that get moved outside the data grid","values":[]},{"name":"#filter-condition-popups","description":"Track filter condition popups that get moved outside the data grid","values":[]},{"name":"#initial","description":"Initial filter values used for resetting filters","values":[]},{"name":"filter-is-processing","description":"Flag indicating whether a filter operation is currently in progress","values":[]},{"name":"focused","description":"Currently focused filter element, used during filter rerender","values":[]},{"name":"#suppress-filtered-event","description":"Flag to suppress the filtered event from being triggered","values":[]},{"name":"filter-nodes","description":"Get list of filter wrapper elements","values":[]},{"name":"#operators-dataset","description":"Dataset of available filter operators with their values, labels, and icons","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-formatters","attributes":[{"name":"default-icon-labels","description":"Default aria-label map for row indicator icons","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-header","attributes":[{"name":"root-node","values":[]},{"name":"header-checkbox","values":[]},{"name":"column-checkbox","values":[]},{"name":"is-header-expander-collapsed","description":"Tracks the state of the header expander","values":[]},{"name":"data-grid","description":"Reference to the data grid parent","values":[]},{"name":"expander-icons","values":[]},{"name":"#columns","values":[]},{"name":"columns","values":[]},{"name":"columns-onscreen","description":"Returns all the columns in the header","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-row","attributes":[{"name":"root-node","values":[]},{"name":"data-grid","description":"Reference to the data grid parent","values":[]},{"name":"data","values":[]},{"name":"row-data","values":[]},{"name":"columns","values":[]},{"name":"visible-columns","values":[]},{"name":"cells-editable","values":[]},{"name":"is-row-disabled","values":[]},{"name":"dimensions","values":[]},{"name":"expand-icon","values":[]},{"name":"disabled","description":"Set the row disabled state.","values":[]},{"name":"row-index","description":"Gets the row index # of this row.","values":[]},{"name":"row-cache","description":"Implements row cache","values":[]},{"name":"selected","description":"Select this row node","values":[]},{"name":"record-index","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-save-settings-mixin","attributes":[{"name":"settings","description":"Settings to use with local storage.","values":[]},{"name":"#val-settings","description":"List of values for each setting.","values":[]},{"name":"#save-mode","description":"State to check if can be able to save.","values":[]},{"name":"#is-column-moving","description":"Flag to track if column move is in progress","values":[]},{"name":"#restored","description":"List of restored options.","values":[]},{"name":"save-active-page","description":"Sets to save active page","values":[]},{"name":"save-columns","description":"Sets to save columns","values":[]},{"name":"save-filter","description":"Sets to save filter","values":[]},{"name":"save-page-size","description":"Sets to save page size","values":[]},{"name":"save-row-height","description":"Sets to save row height","values":[]},{"name":"save-sort-order","description":"Sets to save sort order","values":[]},{"name":"save-user-settings","description":"Sets to save all user settings","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-search-mixin","attributes":[{"name":"#search-term","description":"Current search term","values":[]},{"name":"#search-field","description":"Reference to the search field element","values":[]},{"name":"data-grid","description":"Reference to the data grid parent","values":[]},{"name":"toolbar","description":"Reference to the data grid toolbar","values":[]},{"name":"searchable","description":"Set searchable which allows list view to be filtered","values":[]},{"name":"search-term-min-size","description":"Set search term min size, will trigger filtering only when its length is greater than or equals to term value.","values":[]},{"name":"search-field-id","description":"Set search field","values":[]},{"name":"search-field","description":"Get search field","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-settings","description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-toolbar-mixin","attributes":[{"name":"#toolbar","description":"Reference to the toolbar element","values":[]},{"name":"data-grid","description":"Reference to the data grid parent","values":[]},{"name":"contextual-toolbar-id","description":"Get contextualToolbarId attribute value","values":[]},{"name":"toolbar","description":"Get toolbar","values":[]},{"name":"toolbar-selection-count-text","description":"Get the selection count text element","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid-tooltip-mixin","attributes":[{"name":"tooltip","description":"Retrieves the current tooltip instance","values":[]},{"name":"suppress-tooltips","description":"Set the tooltips on/off.","values":[]},{"name":"#tooltip","description":"Single tooltip use with all grid elements","values":[]},{"name":"#types","description":"Types of tooltip as unique identifier","values":[]},{"name":"#mouse-out","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-grid","attributes":[{"name":"valid-row-states","values":[]},{"name":"too-many-columns","values":[]},{"name":"cache-hash","values":[]},{"name":"cache-selected","values":[]},{"name":"cache-deselected","values":[]},{"name":"cache-expanded","values":[]},{"name":"cache-collapsed","values":[]},{"name":"cache-cell-class","values":[]},{"name":"cache-cell-part","values":[]},{"name":"initialized","values":[]},{"name":"is-resizing","values":[]},{"name":"is-selecting","values":[]},{"name":"active-cell","values":[]},{"name":"last-active-cell","values":[]},{"name":"#active-cell-cache","values":[]},{"name":"#edited-cells-cache","values":[]},{"name":"auto-fit-set","values":[]},{"name":"current-columns","values":[]},{"name":"sort-column","values":[]},{"name":"empty-message-elements","values":[]},{"name":"open-menu","values":[]},{"name":"server-side-selections","values":[]},{"name":"is-row-disabled","values":[]},{"name":"filter-fields","values":[]},{"name":"#start-selection-cell","values":[]},{"name":"#end-selection-cell","values":[]},{"name":"#column-visibility-update-timer","values":[]},{"name":"#columns-to-update","values":[]},{"name":"#current-scroll","values":[]},{"name":"#after-set-active-cell-fn","values":[]},{"name":"contextmenu-types","description":"Types for contextmenu.","values":[]},{"name":"select-with-filter-dropdown","values":[]},{"name":"dirty-rows","values":[]},{"name":"span-tracker","values":[]},{"name":"#active-indicator-row","description":"Tracks the row index currently showing the active row indicator icon","values":[]},{"name":"#header","description":"#@see IdsDataGrid.header","values":[]},{"name":"header","description":"Get the header element","values":[]},{"name":"body","description":"Get the body element","values":[]},{"name":"wrapper","description":"Get the outside wrapper element","values":[]},{"name":"cell-focused","description":"Get the cell with active tabindex","values":[]},{"name":"cells-editable","description":"Get all the editable cell elements in an array","values":[]},{"name":"rows","description":"Get all the row elements in an array","values":[]},{"name":"rows-selected","description":"Get all the selected row elements in an array","values":[]},{"name":"rows-hidden","description":"Get all the hidden row elements in an array","values":[]},{"name":"rows-visible","description":"Get all the visible row elements in an array","values":[]},{"name":"virtual-rows","description":"Get rows used for virtual scrolling to operate on","values":[]},{"name":"#filters","values":[]},{"name":"datasource","description":"Reference to datasource API","values":[]},{"name":"filters","description":"Get the filters instance attached to component","values":[]},{"name":"formatters","description":"Get the API for list of formatters","values":[]},{"name":"editors","description":"Get the API for list of editors","values":[]},{"name":"vetoable-event-types","values":[]},{"name":"filter-conditions","description":"Get the current filter conditions applied to the data grid","values":[]},{"name":"contextmenu-info","description":"Contextmenu stuff use for info and events","values":[]},{"name":"is-dynamic-contextmenu","description":"Track contextmenu data dynamicly changed by the user.","values":[]},{"name":"#last-selected-row","description":"Keep flag for last selected row","values":[]},{"name":"#initially-selected-row","description":"Keep flag for initially selected row","values":[]},{"name":"#last-shifted-row","description":"Keep reference to last shifted row","values":[]},{"name":"#previous-last-row","description":"Keep reference to previous last row with no-border-bottom class","values":[]},{"name":"#pending-row-append","description":"Flag to prevent multiple concurrent async row appends","values":[]},{"name":"on-locale-change","description":"Handle Locale (and language) change","values":[]},{"name":"max-content-column-widths","values":[]},{"name":"row-height-padding","description":"Utility function to get padding for each rowHeight,\nnote that there is a little extra padding than the css would be for better look.","values":[]},{"name":"visible-columns","description":"Get the visible column data (via hidden attributes)","values":[]},{"name":"hidden-at-runtime-columns","description":"Get the visible column data (via hidden attributes)","values":[]},{"name":"right-frozen-columns","description":"Get the columns frozen on the right","values":[]},{"name":"left-frozen-columns","description":"Get the columns frozen on the left","values":[]},{"name":"has-frozen-columns","description":"Check if any columns are frozen","values":[]},{"name":"next-id-value","values":[]},{"name":"next-id","description":"Set the next unique ID counter","values":[]},{"name":"show-header-expander","description":"Get the show header expander state","values":[]},{"name":"alternate-row-shading","description":"Get the alternate row shading state","values":[]},{"name":"strip-column-id","description":"Get the strip column ID state","values":[]},{"name":"disable-row-highlight","description":"Get the disable row highlight state","values":[]},{"name":"disable-client-sort","description":"Get the disable client sort state","values":[]},{"name":"suppress-select-all-events","description":"Get the suppress select all events state","values":[]},{"name":"disable-header-checkbox","description":"Get the disable header checkbox state","values":[]},{"name":"cell-copy-paste","description":"Get the cell copy paste state","values":[]},{"name":"hide-header-checkbox","description":"Get the hide header checkbox state","values":[]},{"name":"columns","description":"Get the columns of the data grid","values":[]},{"name":"column-groups","description":"Get the column groups of the data grid","values":[]},{"name":"data","description":"Get the data of the data grid","values":[]},{"name":"empty-message-description","description":"Set empty message description","values":[]},{"name":"empty-message-icon","description":"Set empty message icon","values":[]},{"name":"empty-message-label","description":"Set empty message label","values":[]},{"name":"header-menu-id","description":"Set header menu id","values":[]},{"name":"header-opacity-value","description":"Set the opacity value applied to header cells with headerOpacity enabled","values":[]},{"name":"header-menu-data","description":"Set the header menu data","values":[]},{"name":"menu-id","description":"Set menu id","values":[]},{"name":"menu-data","description":"Set the menu data","values":[]},{"name":"virtual-scroll","description":"Set the list view to use virtual scrolling for a large amount of rows","values":[]},{"name":"overflow","description":"Set the overflow property to enable/disable scrollbars","values":[]},{"name":"virtual-scroll-settings","description":"Some future configurable virtual scroll settings","values":[]},{"name":"#virtual-scroll-max-rows-in-dom","values":[]},{"name":"scroll-max-rows","description":"Setting for max virtual scroll rows in DOM","values":[]},{"name":"#custom-scroll-event-cache","values":[]},{"name":"label","description":"Set the aria-label element in the DOM. This should be translated.","values":[]},{"name":"row-height","description":"Set the row height between extra-small, small, medium and large (default)","values":[]},{"name":"min-height","description":"Set the min height of the grid (for the empty message or loading indicator)","values":[]},{"name":"height","description":"Set the height of the grid","values":[]},{"name":"max-height","description":"Set the max height of the grid","values":[]},{"name":"width","description":"Set the width of the grid","values":[]},{"name":"min-width","description":"Set the min width of the grid","values":[]},{"name":"max-width","description":"Set the max width of the grid","values":[]},{"name":"row-start","description":"Get the start-row index","values":[]},{"name":"row-navigation","description":"Sets keyboard navigation to rows","values":[]},{"name":"list-style","description":"Set the style of the grid to list style for simple readonly lists","values":[]},{"name":"row-selection","description":"Set the row selection mode between false, 'single', 'multiple' and 'mixed'","values":[]},{"name":"cell-selection","description":"Set the cell selection mode. Default is false.","values":[]},{"name":"col-selection","description":"Set the column selection, true to add column header selection","values":[]},{"name":"suppress-empty-message","description":"Set suppress empty message","values":[]},{"name":"loading-indicator","values":[]},{"name":"suppress-row-click-selection","description":"Get the current value of suppress row click selection","values":[]},{"name":"suppress-row-deselection","description":"Set to true to prevent rows from being deselected if click or space bar the row.\ni.e. once a row is selected, it remains selected until another row is selected in its place.","values":[]},{"name":"suppress-row-deactivation","description":"Set to true to prevent rows from being deactivated if clicked.\ni.e. once a row is activated, it remains activated until another row is activated in its place.","values":[]},{"name":"selected-rows","description":"Get the selected rows","values":[]},{"name":"selected-map","description":"Map and boundary data on selected cells","values":[]},{"name":"selected-rows-across-pages","description":"Get the selected rows across all pages, if a paged dataset is present","values":[]},{"name":"activated-row","description":"Get the activated row","values":[]},{"name":"active-cell-editor","values":[]},{"name":"is-editable","values":[]},{"name":"row-count","description":"Set/Get the total number of records","values":[]},{"name":"row-pixel-height","description":"Get the row height in pixels","values":[]},{"name":"auto-fit","description":"Set the card to auto fit to its parent size","values":[]},{"name":"suppress-caching","description":"Suppress row row and cell caching","values":[]},{"name":"disable-client-filter","description":"Sets disable client filter","values":[]},{"name":"filterable","description":"Sets the data grid to be filterable","values":[]},{"name":"first-draggable-column","description":"Gets the minimum column index that can be reordered","values":[]},{"name":"keep-filter-conditions","description":"Keep filter conditions when calling `data` to reload data","values":[]},{"name":"filter-row-disabled","description":"Sets disabled to be filter row","values":[]},{"name":"filter-when-typing","description":"Sets the data grid to filter when typing","values":[]},{"name":"tree-grid","description":"Sets the grid to render as a tree grid (does require a tree formatter column)","values":[]},{"name":"groupable","description":"Sets the grid to group rows (only one field is supported)","values":[]},{"name":"group-selects-children","description":"If true then the children will be selected when a group is selected","values":[]},{"name":"id-column","description":"Used to set which column is the unique id column in the data set.\nThis is needed for some operations.","values":[]},{"name":"expandable-row","description":"If true an expandable row is present in the grid. Also requires a expandable-row-template and\nan expander formatter.","values":[]},{"name":"allow-one-expanded-row","description":"This setting will allow only one expandable-row to be opened/expanded at a time.","values":[]},{"name":"expandable-row-template","description":"An id that points to the template to use for expandable rows. Also requires the expandable-row setting\nand an expander formatter.","values":[]},{"name":"unique-id","description":"Set uniqueId to save to local storage.","values":[]},{"name":"editable","description":"Set to true if one or more editors is present to activate editing","values":[]},{"name":"edit-next-on-enter-press","description":"Set to false to avoid moving up and down rows when editing and hitting enter","values":[]},{"name":"add-new-at-end","description":"Set to true to automatically append rows when keyboard navigating\nthe data grid in editable mode","values":[]},{"name":"invalid-cells","description":"Get all the currently invalid cells","values":[]},{"name":"dirty-cells","description":"Get all the currently dirty cells","values":[]},{"name":"modal-template","values":[]},{"name":"text-search-type","description":"Set the text search type for search functionality","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# Ids Data Grid\n\n## Description\n\nThe data grid component (ids-data-grid) is used to arrange tabular data in rows and columns for easier scanning and comparison. Data grids are very configurable in both design and functionality and they can be found within almost every product/app.\n\nYou should pass an array of objects in to the grid on the `dataset` object. Also pass the `columns` array which contains the column configuration. There are a number of events described in the events and API section, as well as the column settings.\n\nA Read-Only data grid uses \"Formatters\" to render cell content. A number of these are listed in the API section and it is possible to create your own.\n\n## Use Cases\n\n- The data grid component is most useful when it is used for categorically sorting dense and repetitive information. Each individual item is listed down the Y axis of the chart, and their shared attribute categories are listed along the X axis. The resulting cells are filled with information that is relevant to the corresponding item and attribute.\n\n## Terminology\n\n- **Title**: The name of the data grid optionally appearing above the grid and describing the contents.\n- **Options**: An optionally actions menu button with functionality that operates on the entire data grid.\n- **Cell**: Body elements of the data grid that contain an object's value or attribute. Cells should only contain one type of content or it can be confusing and hurt accessibility.\n- **Header Cell**: These cells contain the names of the columns in the grid and related functions like filtering and sorting. All cells below the header cell will hold values related to the attribute in the header cell.\n- **Column**: Cells stacked vertically that contain values relate to the attribute found on the top header cell.\n- **Row**: Each row contains one cell per column in the data grid, and each cell displays a single value in the bound data item.\n- **Tree**: Denotes the use of hierarchical data, with an expandable and collapsible hierarchy.\n\n## Themeable Parts\n\n- `table` allows you to further style the table main element\n- `container` allows you to further style the container element\n- `body` allows you to further style the body element\n- `header` allows you to further style the header element\n- `headerCell` allows you to further style the header cells\n- `row` allows you to further style the rows\n- `cell` allows you to further style the row cells\n- `cell-selected` allows you to further style row cells that are selected (in mixed-selection mode, activated cells are also styled)\n- `tooltip-popup` allows you to further style or adjust the outer tooltip popup element\n- `tooltip-arrow` allows you to adjust the tooltip arrow element\n\n## Features (With Code Examples)\n\nA data grid is created by adding an `ids-data-grid` html element in the page and setting the options either inline in the markup or in the JS part of the code. You can only use simple types (string, boolean ect) for inline markup so passing the data and column arrangement is always done in the JS part. The data will be an array of objects so its in the correct tabular form. The columns are also an array of objects but with defined options and types. See more about columns in next section.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.data = dataset;\ndataGrid.columns = columns;\n```\n\n### Column Groups\n\nSetting column groups allows you to add a second level of columns in your header and the ability to group the first level. This is useful for when you have a large number of columns and you want to group them into logical or related sections.\n\nColumn groups are achieved by providing an array to the `columnGroups` setting. Only one level of column groups can be defined.\n\n```js\ndataGrid.columnGroups = [\n{\n colspan: 3,\n id: 'group1',\n name: 'Column Group One',\n align: 'center'\n},\n{\n colspan: 2,\n id: 'group2',\n name: 'Column Group Two'\n},\n{\n colspan: 2,\n id: 'group3',\n name: 'Column Group Three',\n align: 'right'\n},\n{\n colspan: 11,\n id: 'group4',\n name: 'Column Group Four',\n align: 'left'\n}\n];\n```\n\nIf the column is hidden it will be automatically removed from the `colspan`. If in the last group you didn't provided a bug enough `colspan` it will be set to the remaining columns. The `name` text can be right or left aligned and given an id. The only required property is `colspan`.\n\n### Disabling Rows\n\nDisabling rows with certain conditions can be done by using the `isRowDisabled` setting. `isRowDisabled` is a callback function that takes in `rowNumber` and `rowData` as parameters. This can be used to make conditional checks for rows.\n\nHere is an example on using `isRowDisabled`. This will disable rows that have row data with the `activity` variable equal to \"Assemble Paint\".\n\n```js\nconst isRowDisabled = (rowIndex, rowData) => {\n return rowData.activity === 'Assemble Paint';\n}\n\ndataGrid.isRowDisabled = isRowDisabled;\n```\n\n### Disabling Sort\n\nDisabling the sorting in datagrid can be done using `disableClientSort` setting or the `disable-client-sort` attribute. This will disable the default sorting in the component but still update the sorting icon status on the button.\n\n```js\ndataGrid.disableClientSort = true;\n```\n\n```html\n\n\n```\n\n### Selection\n\nThe data grid has several options for selecting. Row selection, column selection, and dragging and selecting a group of cells using the mouse.\n\n#### Row Selection\n\nThis involves the setting `rowSelection`. This can be one of several values.\n\n- `false` No selection enabled.\n- `multiple` Allows multiple rows to be selected. When doing this it is recommended to add a `formatters.selectionCheckbox` for the first column.\n- `single` Allows a single row to be selected. When doing this you can optionally to add a `formatters.selectionRadio` for the first column. You can use the `suppressRowDeselection` if you want one row to always be selected.\n- `mixed` Allows multiple rows to be selected by clicking only on the checkbox or Space key. If clicking a row then that row is activated, meaning it is the current row and something might be shown based on the data of that row. You can use the `suppressRowDeactivation` if you want one row to always be selected.\n\nHere is a code example for multi select\n\n```html\n\n\n```\n\n```js\n dataGrid.addEventListener('beforerowselected', (e: Event) => {\n console.info(`Before Row Selected`, (e).detail);\n if (Number((e as any).detail.data.book) === 104) {\n console.error('Row 104 randomly cant be selected');\n (e).detail.response(false);\n }\n });\n\n dataGrid.addEventListener('rowselected', (e) => {\n console.info(`Row Selected`, e.detail);\n });\n\n dataGrid.addEventListener('rowdeselected', (e) => {\n console.info(`Row Deselected`, e.detail);\n });\n\n dataGrid.addEventListener('selectionchanged', (e) => {\n console.info(`Selection Changed`, e.detail);\n });\n```\n\n#### Column Selection\n\nThis involves the setting `colSelection` or `col-selection` in attributes. This can be set to either `true` or `false`. Setting it to true will enable the column selection header checkboxes on datagrid.\n\n```html\n\n```\n\n```js\ndataGrid.colSelection = true;\n```\n\nThe following events are relevant to selection/activation.\n\n`rowselected` Fires when an individual row is activation and gives information about that row.\n`rowdeselected` Fires when an individual row is deselected and gives information about that row.\n`selectionchanged` Fires once for each time selection changes and gives information about all selected rows.\n\n`rowactivated` Fires when an individual row is activated and gives information about that row.\n`rowdeactivated` Fires when an individual row is deactivated and gives information about that row.\n`activationchanged` Fires once for each time activation changes and gives information about the active row.\n\nThe following settings are relevant to ui state of header checkbox\n\n`disableHeaderCheckbox` When true, disable the ui interaction of header checkbox but the data row checkboxes are still enabled.\n`hideHeaderCheckbox` When true, hides the ui of header checkbox but the data row checkboxes are still visible.\n\n### Tree Grid\n\nThe tree grid feature involves the setting `treeGrid` to true. In addition the data passed to the tree grid should contain a field called `children`. That contains the child rows. This can by unlimited levels but 2-4 is recommended as a max for a more usable UI. In addition you can preset some states by adding `rowExpanded: false` to the parent elements (default is expanded). And also set `rowHidden: false` for child rows that are expanded. You also need a `Expander` formatter on a cell (usually the first visible cell.\n\nHere is a code example for a tree grid.\n\n```html\n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to selection/activation.\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `groupSelectsChildren` {boolean} If the tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `suppressRowClickSelection` {boolean} If using selection you might want to set this so clicking a row will not select it.\n\n### Rowspan\n\nThe rowspan feature automatically spans cells across multiple rows when consecutive rows have identical values in specified columns. This is useful for displaying grouped data with visual hierarchy. Not compatible with virtual scroll since only a subset of rows are rendered, preventing accurate rowspan calculations.\n\nTo enable automatic rowspan for a column, set the `rowspan` property to `true` in the column definition:\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n rowspan: true // Enable automatic rowspan for this column\n },\n {\n id: 'period',\n name: 'Period',\n field: 'period',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'amount',\n name: 'Amount',\n field: 'amount',\n formatter: dataGrid.formatters.decimal\n }\n];\n\nconst data = [\n {\n description: 'Office Supplies',\n ledger: '1000',\n period: 'Jan',\n amount: 150\n },\n {\n description: 'Office Supplies', // Will automatically span with previous row\n ledger: '1000', // Will automatically span with previous row\n period: 'Feb',\n amount: 200\n },\n {\n description: 'Travel',\n ledger: '2000',\n period: 'Jan',\n amount: 500\n }\n];\n```\n\nThe data grid automatically calculates rowspan based on consecutive rows with identical values in columns marked with `rowspan: true`. When data is sorted or filtered, rowspan relationships are automatically recalculated to maintain correct spanning.\n\n### Expandable Row\n\nThe Expandable Row feature involves the setting `expandableRow` to true. In addition a row template should be provided via an id that points to the `expandableRowTemplate` which is a `template` element. You can preset the expandable state by adding `rowExpanded: true` to the row element you want to expand. The default is collapsed.\n\nHere is a code example for an expandable row\n\n```html\n\n \n\n```\n\n```js\ndataGrid.addEventListener('rowexpanded', (e) => {\n console.info(`Row Expanded`, e.detail);\n});\n\ndataGrid.addEventListener('rowcollapsed', (e) => {\n console.info(`Row Collapsed`, e.detail);\n});\n```\n\nThe following events are relevant to expandable rows\n\n`rowexpanded` Fires when a tree grid row is expanded by click or keyboard.\n`rowcollapsed` Fires when a tree grid row is collapsed by click or keyboard.\n\nSome additional settings are needed or possibly needed.\n\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `expandableRowTemplate` {string} Should point to the row `template` element.\n\n### Editing\n\nThe Editing features start by setting `editable` to true. In addition you should add editors to columns and enable features of each of the editors. The features differ depending on the component used for editing. See the Keyboard section for information on which keys can be used when editing..\n\nHere is a code example for an editable text cell.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n inline: true,\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n browserAutocomplete: 'name',\n },\n editorValidation: {\n check: (input) => input.value.length < 50>,\n message: 'Maximum of 50 characters',\n messageId: 'translationKey',\n id: 'maxchars'\n }\n }\n });\n```\n\nHere is a code example for an editable dropdown cell\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n validate: 'required',\n options: [\n {\n label: 'Option 1',\n value: 'opt1'\n },\n {\n label: 'Option 2',\n value: 'opt2'\n }\n ]\n }\n }\n});\n```\n\nHere is a code example for an editable multiselect cell\n\n```js\ncolumns.push({\n id: 'categories',\n name: 'Categories',\n field: 'categories',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'multiselect',\n inline: true,\n editorSettings: {\n dirtyTracker: true,\n options: [\n {\n label: 'Category A',\n value: 'cat-a'\n },\n {\n label: 'Category B',\n value: 'cat-b'\n },\n {\n label: 'Category C',\n value: 'cat-c'\n }\n ]\n }\n }\n});\n```\n\nThe multiselect editor allows users to select multiple values from a dropdown list. The cell value should be an array of selected values. When using the `beforeShow` callback, you can dynamically populate options based on the current cell data.\n\nTo cancel or disabled editing there are a few ways:\n\n- setting the column `editor` setting to undefined will disable editing on the column (as will not having an editor setting at all).\n- adding a `readonly` or `disabled` function which returned true for some cells based on a condition will disable or mark the cell readonly.\n- return false in the `beforecelledit` event in the response function\n\nThe following settings are available on editors.\n\n`type` As of now can be `checkbox`, `input`, `datepicker`, `timepicker`, `dropdown`, `multiselect`, or `tree` but more will be added.\n`inline` Default is false. If true the editor (for example an input) will be visible in a field.\n`editorSettings` Is an object that is loosely typed that lets you pass any option the editor supports in. For example any of the IdsInput or IdsCheckbox options can be passing in. Some special ones are:\n`editorSettings.autoselect` Text will be selected when entering edit mode. If false, cursor will be appended to end of input value.\n`editorSettings.dirtyTracker` Enables the dirty tracker that marks changed cells.\n`editorSettings.browserAutocomplete` Adds the autocomplete attribute to the editor input element allowing for browser autocomplete. This can be `on`, `off` (default), or `name`, `email`, `street-address`, `postal-code`, `search`, `tel`, `url`, `username`, `off` ect. This not to be confused with the `autocomplete` setting which will enable additional autocomplete component functionality (see autocomplete examples).\n`editorSettings.validate` Text will be selected when entering edit mode\n`editorSettings.mask` Will pass mask settings to the input (if supported).\n`editorSettings.maskOptions` Will pass maskOptions settings to the input (if supported).\n`editorSettings.options` Dataset used for dropdown editor's list box options. If none are specified the value in the data will be applied as the only options.\n`editorSettings.maxlength` Sets the input editor's `maxlength` property to the max characters you can type\n`editorSettings.uppercase` Sets the input editor's to all uppercase\n`editorValidation` Optional property to set custom validation rule\n`editorValidation.check` Callback function for custom validation. It is passed the editable cell's input field and expects a boolean value in return\n`editorValidation.message` Error message displayed when the validation check fails\n`editorValidation.id` Unique id for the validation rule\n`showEditorIcons` Sets the editable cell icons to be always open or only on hover. Default is `hover`.\n\nWhen the use clicks in the cell or activates editing with the keyboard with the Enter key and types. The following events will fire.\n\n`beforecelledit` Fires before a cell is being edit (before edit is started). Can be vetoed by returning false as shown below.\n`celledit` Fires exactly when a cell is being edited.\n`endcelledit` Fires when a cell edit is completed and changed. Event detail includes `oldValue`, `newValue`, `oldSelectedIndex`, and `newSelectedIndex` properties.\n`cancelcelledit` Fires when an edit is cancelled via the Esc key. Event detail includes `oldValue` and `oldSelectedIndex` properties.\n\nTo cancel editing based on some condition or if editing is not allowed you can veto the `beforecelledit` event.\n\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(false);\n });\n```\n\nIf the callback for the `beforecelledit` event requires async operations, the user can pass an `async function` or a `Promise`.\n```js\n dataGrid.addEventListener('beforecelledit', (e: Event) => {\n (e).detail.response(async () => {\n const dbResponse: boolean = await fetchDbResponse;\n return dbResponse;\n });\n });\n```\n\nThere are a few utility functions for editing the data grid mentioned in the Methods section.\n\n### Field Indicators for Input Editors\n\nField indicators provide visual cues on editable input cells to communicate field status, validation state, or other contextual information. A colored triangle appears in the top corner of the cell, and an icon with a tooltip provides additional details.\n\nThis feature only applies to columns with `editor.type` set to `'input'`.\n\n#### Indicator Types\n\nThe following indicator types are available, each with a distinct color:\n\n- `neutral` - Gray indicator for informational purposes\n- `info` - Blue indicator for helpful information\n- `success` - Green indicator for valid or complete fields\n- `caution` - Yellow indicator for fields that need review\n- `warning` - Orange indicator for fields requiring attention\n- `error` - Red indicator for invalid or required fields\n\n#### Static Field Indicator\n\nSet a static indicator type directly on the column:\n\n```js\ncolumns.push({\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n formatter: dataGrid.formatters.text,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true\n }\n },\n fieldIndicator: 'info',\n fieldIndicatorMessage: 'Ledger code is auto-generated if left blank'\n});\n```\n\n#### Dynamic Field Indicator\n\nUse a function to determine the indicator type based on row data:\n\n```js\ncolumns.push({\n id: 'price',\n name: 'Price',\n field: 'price',\n align: 'right',\n formatter: dataGrid.formatters.decimal,\n editor: {\n type: 'input',\n editorSettings: {\n autoselect: true,\n dirtyTracker: true,\n mask: 'number'\n }\n },\n fieldIndicator: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'error';\n if (price < 10) return 'caution';\n if (price > 100) return 'warning';\n return 'success';\n },\n fieldIndicatorMessage: (row, value, column, rowData) => {\n const price = Number(value) || 0;\n if (price === 0) return 'Price cannot be zero';\n if (price < 10) return 'Low price - verify if correct';\n if (price > 100) return 'High price - requires approval';\n return 'Price is within normal range';\n }\n});\n```\n\n#### Column Settings for Field Indicators\n\n| Setting | Type | Description |\n|---------|------|-------------|\n| `fieldIndicator` | `string \\| function` | The indicator type (`'neutral'`, `'info'`, `'success'`, `'caution'`, `'warning'`, `'error'`) or a function that returns the type based on row data. Return `null` to hide the indicator. |\n| `fieldIndicatorMessage` | `string \\| function` | The tooltip message displayed when hovering over the indicator icon, or a function that returns the message based on row data. |\n\n#### RTL Support\n\nField indicators automatically adjust for right-to-left (RTL) languages. The triangle indicator appears in the top-right corner in LTR mode and top-left corner in RTL mode. The tooltip also positions appropriately based on the text direction.\n\nSee the [Field Indicator Demo](./demos/field-indicator.html) for a complete example.\n\n### Grouped Rows (Groupable)\n\nThe grouped row feature start by setting `groupable` setting to an object containing fields to group by. Only one group by field is currently supported.\n\n```js\n dataGrid.groupable = {\n fields: ['type']\n };\n```\n\nThe `groupable` object can contain the following properties some are for future support. Aggregators do work in the data now but the footer is not yet available.\n\n- `fields` {array} Sets the field to group by on\n- `aggregators` {array} For future support.\n- `expanded`: {boolean | function} For future support.\n- `groupRowFormatter`: {function} For future support.\n- `groupFooterRow`: {boolean} For future support.\n- `groupFooterRowFormatter`: {function} For future support.\n\nWhen a row is collapsed the internal grouped data will set a field`groupCollapsed` on your data object and hide child rows.\n\n### Column Attributes / Test Attributes\n\nThe `attributes` column setting allows you to add custom data attributes to each cell for testing or automation purposes.\n\n```js\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n attributes: [\n { name: 'data-automation-id', value: 'description', prefix: 'my-grid' }\n ]\n});\n```\n\nEach attribute object supports:\n- `name` - The attribute name (e.g., `data-automation-id`)\n- `value` - Optional string with a string value, or may use a function receiving `{ rowIndex, rowData, columnId }` that use can use conditionally return a value.\n- `prefix` - Optional prefix prepended to value\n- `suffix` - Optional suffix appended to value\n\nThe final attribute is built as: `prefix-value-suffix` (parts joined with `-`).\n\nExample with function value for row-specific IDs. Note that running a function on each cell has a slight performance impact.\n\n```js\nattributes: [{\n name: 'data-automation-id',\n value: ({ rowIndex }) => `description-row-${rowIndex}`,\n prefix: 'my-grid'\n}]\n// Result: data-automation-id=\"my-grid-description-row-0\"\n```\n\n### Header Opacity (Design Mode)\n\nThe header opacity feature allows you to visually dim specific column headers to indicate they are hidden in normal mode. This is useful in designer mode where users need to see all columns but distinguish between visible and hidden ones.\n\nTo enable, set `headerOpacity: true` on individual columns and optionally set `headerOpacityValue` on the grid to control the opacity level (defaults to `0.2` via CSS).\n\n```html\n\n```\n\n```js\nconst columns = [\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text\n },\n {\n id: 'price',\n name: 'Price',\n field: 'price',\n formatter: dataGrid.formatters.decimal,\n headerOpacity: true // This column header will appear dimmed\n }\n];\n\ndataGrid.columns = columns;\n```\n\nYou can change the opacity value dynamically:\n\n```js\ndataGrid.headerOpacityValue = 0.5;\n```\n\nTo toggle opacity on a specific column at runtime without a full redraw:\n\n```js\n// Dim a column header\ndataGrid.setColumnHeaderOpacity('price', true);\n\n// Restore to normal\ndataGrid.setColumnHeaderOpacity('price', false);\n```\n\nColumns with `headerOpacity: true` will have `pointer-events: none` applied, making them non-interactive via mouse. See the `header-opacity` example for a working demo.\n\n## Column Sizing\n\nThe columns can be sized by using the `width`, `minWidth`, and `maxWidth` settings. They have a few options that can be used to control the sizing in different ways. I.E. There are three column configurations: `auto`, `fixed` and `percent`.\n\n- Unspecified - The column will be sized by the content `minmax(150px, 1fr)` to a reasonable / readable default. This is known as `auto` columns.\n- `150` { integer } - The column will be a fixed size in pixels if provided as an integer.\n- `10%` { string } - The column will be a percentage of the table width.\n- `minmax(130px, 4fr)` { string } - The column will be a minimum of 150px and a maximum of 1fr. This is useful for a stretch column. (see example columns-stretch.html)\n- `10ch` { string } - The column will be sized to 10 characters wide. This is an approximation based on the largest size character `W` in a default font plus a buffer so not exact for every character possible.\n- `max-content` { string } - The column will be sized to the max width of the content in the column. Either the title or the biggest cell content depending what is bigger. This method needs to scan the entire data set to determine the max width so is slightly slower. If virtual scrolling is enabled this will only scan the data that is in the visible buffer.\n\nFor a spacer column you just need to specify one extra column at the end (see example columns-fixed.html).\n\n## Settings and Attributes\n\nWhen used as an attribute in the DOM the settings are kebab case, when used in JS they are camel case.\n\n- `addNewAtEnd` {boolean} Automatically append rows while keyboard navigating data grid in edit mode.\n- `allow-one-expanded-row` {boolean} This setting will allow only one expandable-row to be opened/expanded at a time. Defaults to false.\n- `alternateRowShading` {boolean} For better scan-ability you can shade alternate rows.\n- `autoFit` {boolean} If true, the data grid will automatically fit to its parent container size.\n- `cellCopyPaste` {boolean} Enable the copy-paste handling that's based on cell selection (copying selected cells and pasting based on selected cells). Default is false.\n- `columnGroups` {Array} Allows you to group columns together in logical sets. See section below for details.\n- `columns` {Array} Sets the columns array of the data grid. See column settings.\n- `data` {Array} Sets the data to show in the data grid. This can be a JSON Array.\n- `disableClientFilter` {boolean} Disables the filter logic client side in situations you want to filter server side.\n- `disableClientSort` {boolean} Disables the default sorting in datagrid.\n- `disableHeaderCheckbox` {boolean} If true, the header checkbox will be disabled but still visible.\n- `disableRowHighlight` {boolean} Disables row highlighting when a row is hovered.\n- `editable` {boolean} If true in addition to adding editors to columns the data grid is editable.\n- `editNextOnEnterPress` {boolean} If enabled when editing using ENTER will finish editing and start editing the same cell in next row and SHIFT + ENTER will edit the previous row.\n- `emptyMessageDescription` {string} Set empty message description text.\n- `emptyMessageIcon` {string} Set empty message icon name.\n- `emptyMessageLabel` {string} Set empty message label text.\n- `expandableRow` {boolean} Indicates expandable rows will be used in the data grid. See the expandable row section for more details.\n- `expandableRowTemplate` {string} Should point to the row `template` element for expandable rows.\n- `filterable` {boolean} Turns on or off the filter functionality.\n- `filterRowDisabled` {boolean} Disables the filter row.\n- `filterWhenTyping` {boolean} If true (default), filtering will occur while typing in filter fields. If false, press Enter to filter.\n- `firstDraggableColumn` {number} Sets the minimum column index that can be reordered. Columns before this index are fixed and cannot be moved. Defaults to 0 (all columns can be reordered).\n- `groupSelectsChildren` {boolean} If a tree grid has multiple selection, setting this will select all children when a parent is selected.\n- `headerMenuData` {Array} Dataset to build context menu for header and header group cells.\n- `headerMenuId` {string} ID of the popupmenu to use as context menu for header and header group cells.\n- `headerOpacityValue` {string|number|null} Sets the opacity value applied to column headers that have `headerOpacity: true`. Returns `null` when no value is set. The visual default of `0.2` is handled by the CSS fallback. Can also be set via the `header-opacity-value` attribute.\n- `hideHeaderCheckbox` {boolean} If true, the header checkbox will be hidden completely.\n- `id-column` {string} This setting will specify the name of the field which acts as the primary key for the data in the table. Some actions like saving row states across pages require this field to save the data back into the data set properly. Defaults to `id`.\n- `idColumn` {string} For saving the row state during sort this should be set to the id column in the data set. Defaults to `id`.\n- `keepFilterConditions` {boolean} Keeps the current filter conditions when new data is applied.\n- `listStyle` {boolean} Sets the style of the grid to list style for simple readonly lists.\n- `menuData` {Array} Dataset to build context menu for body cells.\n- `menuId` {string} ID of the popupmenu to use as context menu for body cells.\n- `minHeight` {string} Sets the minimum height of the data grid. This is useful for having an area to show the empty message or the loading indicator. This can can be set as `250px` or `50vh` etc. Defaults to `350px` if not specified. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `height` {string} Sets the height of the data grid. This can be set as `400px` or `50vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `maxHeight` {string} Sets the maximum height of the data grid. This can be set as `600px` or `80vh` etc. Note: `vh` units are recommended over percentage values because percentages require the parent element to have an explicit height. Without a fixed parent height, the browser treats percentage heights as zero, causing the grid to collapse.\n- `width` {string} Sets the width of the data grid. This can be set as `800px` or `100%` etc.\n- `minWidth` {string} Sets the minimum width of the data grid. This can be set as `400px` or `50%` etc.\n- `maxWidth` {string} Sets the maximum width of the data grid. This can be set as `1200px` or `90%` etc.\n- `overflow` {string} Sets the overflow attribute for datagrid. Default is `auto`.\n- `rowHeight` {string | `'xxs'` | `'xs'` | `'sm'` | `'md'` | `'lg'`} Sets the height and padding of each row. In smaller row heights the font is lowered.\n- `rowNavigation` {boolean} If using row navigation, the row will be focused when navigating the data grid via clicks and keyboard events.\n- `rowSelection` {string|boolean} Set the row selection mode between false, 'single', 'multiple' and 'mixed\n- `saveActivePage` {boolean} If set the active page on the pager will be saved to local storage.\n- `saveColumns` {boolean} If set columns will be saved to local storage.\n- `saveFilter` {boolean} If set filter will be saved to local storage.\n- `savePageSize` {boolean} If set the page size on the pager will be saved to local storage.\n- `saveRowHeight` {boolean} If set the row height will be saved to local storage.\n- `saveSortOrder` {boolean} If set column sort order will be saved to local storage.\n- `saveUserSettings` {boolean} If set all settings will be saved to local storage.\n- `scrollMaxRows` {string|number} Sets maximum number of rows to render for virtual scrolling. Default max rows is 100.\n- `showHeaderExpander` {boolean} Set to show header expander icon for expandable and tree rows.\n- `suppressCaching` {boolean} If true, row and cell caching will be suppressed.\n- `suppressEmptyMessage` {boolean} Set to true to prevent display empty message.\n- `suppressRowClickSelection` {boolean} If using selection setting this will require clicking a checkbox or radio to select the row. Clicking other cells will not select the row.\n- `suppressRowDeactivation` {boolean} Set to true to prevent rows from being deactivated if clicked. i.e. once a row is activated, it remains activated until another row is activated in its place.\n- `suppressRowDeselection` {boolean} Set to true to prevent rows from being deselected if click or space bar the row. i.e. once a row is selected, it remains selected until another row is selected in its place.\n- `suppressSelectAllEvents` {boolean} Set to true to suppress `beforerowselected` and `rowselected` events when using Ctrl+A to select all rows, improving performance with large datasets.\n- `suppressTooltips` {boolean} Set to true to prevent display tooltips.\n- `treeGrid` {boolean} Indicates a tree grid will be used in the data grid. See the tree grid section for more details.\n- `textSearchType` {string} Controls how keyword text search is processed. Can be 'default' or 'column-data'. Default performs the existing behavior using HTML text content of cells for keyword search. 'column-data' performs keyword search directly on the raw data bound to cells instead of formatted HTML content, providing better performance with large datasets at the cost of some search functionality like formatted value matching.\n- `unizqueId` {string} A unique identifier used when saving settings to local storage.\n- `virtualScroll` {boolean} When virtual scroll is used the grid can render many thousands of rows and only the rows visible in the scroll area are rendered for performance. This setting has limitations such as the rows need to be fixed size.\n\n## Column Settings (General)\n\n|Setting|Type|Description|\n|---|---|---|\n|`align` | {string} | Can be `left` or `right` or `center` to align both the cell and the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`attributes` | {Array} | Adds custom attributes to each cell in the column. Each object can have `name` (attribute name), `value` (string or function receiving `{ rowIndex, rowData, columnId }`), `prefix` (optional), and `suffix` (optional). The final attribute value is built as `prefix-value-suffix`. See the `column-attributes` example. |\n|`cellSelectedCssPart` | {string} | Allows customization of a selected cell's background color.|\n|`cssPart` | {string} | Allows you to set the name of a css part that can be used to customize the cell's css. This can be a string or a function. See the columns-custom-css example. The default cssPart for cells is called `cell` and it also can be used for more global changes. |\n|`disabled` | {boolean or Function} | If true the cell will be set to disabled color, indicating no editing.|\n|`editor` | {object} | Adds an editor to the column if editable is set on the grid. See editing section for more details.|\n|`excludeReadonlyStyling` | {boolean} | Determines whether to exclude the default readonly styling (disabled/greyed-out appearance) from a column when its readonly property is true. When set to true, the column will maintain its normal visual appearance while still being readonly. Defaults to false. |\n|`field` | {string} | The name of the field (column) in the data array attached to the grid for example `description`. This can also be nested in an object for example `children.name`. |\n|`filterAlign` | {string} | Can be `left` or `right` or `center` to control the alignment of just the filter row in the cell header. Left is the default so does not need to be specified. In RTL mode left is right and right is left. |\n|`filterButtonTooltip` | {string} | Let you set the header filter button tooltip content. |\n|`filterButtonTooltipCssPart` | {string} | Allows you to sets the filter button tooltip css part.|\n|`formatter`| {Function} | Controls how the data is rendered in the cell.|\n|`frozen` | {string} | Sets the column to be frozen on either left or right side by passing `left` or `right`. See the `columns-frozen` example for a working example. Frozen columns currently have some limitations to be addressed in the future. |\n|`headerAlign` | {string} | Can be `left` or `right` or `center` to align just the header. Left is the default and does not need to be specified. In RTL mode left is right and right is left. |\n|`headerIcon` | {string} | Allows you to set the name of the header icon. |\n|`headerIconTooltip` | {string} | Let you set the header icon tooltip content. |\n|`headerIconTooltipCssPart` | {string} | Allows you to sets the header icon tooltip css part.|\n|`headerTooltip` | {string} | Let you set the header title tooltip content. |\n|`headerTooltipCssPart` | {string} | Allows you to sets the header tooltip css part.|\n|`hideable` | {boolean} | If false, the column cannot be hidden. When the personalization dialog is open the field will appear disabled.|\n|`hidden` | {boolean} | Excludes the column from being added to the DOM, it can be shown in the personalization dialog.|\n|`id` | {string} | The unique id of the column. Each column in the grid should have some unique id.|\n|`maxWidth` | {number} | The maximum width used to prevent resizing a column above this size. |\n|`minWidth` | {number} | The minimum width used to prevent resizing a column below this size. |\n|`name` | `{string}` or `Array` | The text to show on the header. For multiline header can take an object with text and an emphasis option. See Multi line header example. |\n|`headerOpacity` | `{boolean}` | If true, applies the grid-level `headerOpacityValue` to this column header. The column header and filter row will appear faded and non-interactive. Used to indicate design-mode readonly columns.|\n|`personalizable` | {boolean} | If false the column will not be included in the personalize options setting list. Default is true.|\n|`readonly` | {boolean or Function} | If true the cell will be set to readonly color, indicating no editing.|\n|`reorderable` | {boolean} | If true the column can be dragged into another position with adjacent columns. When completed a `columnmoved` event will fire. See the `columns-reorderable` example for a working example. This currently does not work with grouped columns. |\n|`resizable` | {boolean} | If false the column will not be resizable, thus is a fixed size and can never be changed by the user by dragging the left and right edge. When completed a `columnresized` event will fire. See the `columns-resizable` example for a working example. |\n|`rowspan` | {boolean} | If true, enables automatic rowspan calculation for consecutive rows with identical values in this column.|\n|`showHeaderExpander` | {boolean} | If true, an expand/collapse icon will appear on the column's header.|\n|`sortable` | {boolean} | If false, the column cannot be sorted. When completed a `sorted` event will fire.|\n|`tooltip` | {string or Function} | Let you set the tooltip content. |\n|`tooltipCssPart` | {string or Function} | Allows you to set the name of a tooltip css part that can be used to customize the tooltip css. This can be a string or a function. See the columns-custom-css example.|\n|`tooltipOptions` | {Object or Function} | Allows you to set the tooltip options. See the tooltip example. |\n|`useValueForSizing` | {boolean} | When width is 'max-content', controls text measurement: true uses raw values, false (default) uses formatted values. |\n|`width` | {number or string} | Sets the width of the column. See the [Column Sizing](#column-sizing) section for details. |\n\n## Column Settings (Specific)\n\n|Setting|Type|Description|\n|---|---|---|\n|`href` | {string or Function} | Used to create the href for hyperlink formatters. This can be a string or a function that can work dynamically. It can also replace `{{value}}` with the current value. |\n|`selected` | {Function} | Fired when an item linked by a menuId is selected when attached to button formatters. |\n|`menuId` | {string} | Used on button formatters to link a menu to the button via a css selector |\n|`text` | {string} | Used to create the txt value for hyperlink formatters if a hard coded link text is needed. |\n|`disabled` | {boolean or Function} | Sets the cell contents to disabled, can also use a callback to determine this dynamically. Only checkboxes, radios, buttons and link columns can be disabled at this time. Selection columns require disabled rows in order to not be clickable/selectable. |\n|`uppercase` | {boolean} | Transforms all the text in the cell contents to uppercase. See also filterOptions and editorOptions |\n|`exportable` | {boolean} | If set to true the column will not be included in the `exportToExcel` export |\n|`exportFormatter` | {Function} | A function that will run during export that can be used to transform values for the `exportToExcel` export. For example `exportFormatter: (value) => (value === true ? 'In Stock' : 'Out of Stock'`) |\n|`color` | {string or Function} | Returns the color to use in tag, rating, slider, stepChart, badge, color, icon formatter and icon formatters, can be a function if dynamic is needed. |\n|`icon` | {string or Function} | Returns the icon to use in alert formatter and icon formatter, can be a function if dynamic is needed. |\n|`text` | {string or Function} | Returns extra inner text in some formatters. |\n| `hyperlinkBehavior` | {string} | Sets the behavior of the hyperlink. Can be `default` which it toggles the selection of the row, `none` does nothing--no selection or deselection of the row, `no-deselect` clicking the hyperlink will not deselect a selected row, or `no-select` clicking the hyperlink does not select the row, but if the row is already selected, it will be deselected. |\n|`whiteSpace` | {string} | Sets the CSS white-space property on the cells. Possible values: `normal` (default wrapping), `nowrap` (no wrapping, shows ellipsis), `pre` (preserves whitespace and line breaks), `pre-line` (preserves line breaks only), `pre-wrap` (preserves whitespace and wraps), `break-spaces` (like pre-wrap but breaks at any space). When set to `pre` or `pre-wrap`, tooltips will also preserve multiple spaces. |\n|`singleLine` | {boolean} | When set to `true`, converts multi-line text to a single line by replacing newline characters with spaces. This is useful for displaying data that may contain line breaks in a compact, single-line format. Works with the text formatter and applies to both cell content and tooltips. |\n\n## Formatters\n\n|Formatter|Description|\n|---|---|\n|`text` | (Default) Formats the column value as a direct text element using toString in the grid cell. Undefined or Null values will be shown as empty.|\n|`password` | Formats the column value masking the string length with stars. Undefined or Null values will be shown as empty. This is good for private data. |\n|`rowNumber` | Formats the cell with a row number column that is shown 1 to n no matter what the sort order is. Supports optional row indicator icons via the `rowIndicatorConfig` column property, which uses semantic type names (`current`, `new`, `modified`, `marked-for-deletion`, `error`, `drill`). See the Row Indicators section below for details. |\n|`date` | Formats date data as a date string in the desired format, by default it will use `dateStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`time` | Formats date data as a time string in the desired format, by default it will use `timeStyle: 'short'` for other options you can pass them in with `column.formatOptions` |\n|`decimal` | Formats number data as a decimal string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`integer` | Formats number data as a integer string in the specified locale. For additional options you can pass them in with `column.formatOptions`. |\n|`selectionCheckbox` | Displays a checkbox column for selection when using `rowSelection=\"mixed\"` or `rowSelection=\"multiple\"`|\n|`selectionRadio` | Displays a checkbox column for selection when using `rowSelection=\"single\"` |\n| `button` | Displays an `ids-button`. Other column settings like `type` can be used to set the button type as can `icon` by set for icon only buttons. Use the `click` setting/function to get an callback handler. |\n| `hyperlink` | Displays an `ids-hyperlink`. Other column settings like `href` can be used to set the link href and `text` can be used to set the text to specific text. Use the `click` setting/function to get an callback handler. |\n| `checkbox` | Displays an `ids-checkbox`. The value will be checked depending on if the attached field is true or `\"true\"`. |\n| `dragger` | Displays a drag-icon that allows user to drag the row up or down to reorder its position in the datagrid. |\n| `badge` | Displays an `ids-badge`. The associated field will be placed in the badge. The `color` option can also be set to set the ids-badge color setting. |\n| `alert` | Displays `ids-alert` element, and the field value will appear in a tooltip. An `icon` option can be provided as an override.|\n| `color` | Displays `ids-color` element. If a `color` option is provided as an override, the field's value will appear in a tooltip. |\n| `icon` | Displays the field value as an `ids-icon`. An `icon` option can be provided as an override, and the field value will appear beside this `icon` override. A `size` option can also be provided. |\n| `favorite` | Displays the field value as a `star-filled` if true or `star-outlined` if false. A `size` option can be provided as an override. |\n| `tag` | Displays the field value as an `ids-tag`. A `color` option can be provided as an override. |\n| `textmask` | Displays sensitive text with partial masking. Shows a toggle button that allows users to reveal or hide the full text. The number of visible characters can be controlled with the `textMaskCharacter` column option. |\n| `textarea` | Displays multiline text without rendering an actual textarea input. Line breaks in the data are converted to HTML `
` tags for proper display. Because this formatter will auto height the rows it will not work with virtual scroll. |\n| `progress` | Displays the field value as an `ids-progress`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `rating` | Displays the field value as an `ids-rating`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `slider` | Displays the field value as an `ids-slider`. A `text` option can be provided to customize the label. A `color`, `max`, `min` and `type` option can be provided as overrides. |\n| `stepChart` | Displays the field value as an `ids-step-chart`. A `text` option can be provided to customize the label. A `color` and `max` option can be provided as overrides. |\n| `image` | Displays the field value as an `ids-image`. A `text` option can be provided to the `alt` and `title` attributes. |\n| `formatOptions` | A series of options to pass to the formatter. For example, `formatOptions: { format: 'MM/dd/yyyy' }`. The actual options will vary by formatter. |\n\n### Date Format Examples\n\nThe date formatter supports the following options which the IdsLocal also support.\n\nTo format as a string, use the following format to use the [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) API. Doing it this way will use the current locale.\n\n```js\nformatOptions: {\n hour: 'numeric',\n minute: 'numeric',\n second: 'numeric',\n fractionalSecondDigits: 3\n}\n```\n\nTo format as a specific format, you can also the `format` option. This will not use the current locale.\n\n```js\nformatOptions: {\n format: 'M/d/yyyy HH:mm:ss'\n}\n```\n\nLegacy names dateFormat and pattern are deprecated but supported.\n\n```js\nformatOptions: {\n dateFormat: 'M/d/yyyy HH:mm:ss'\n}\n\n// Or\nformatOptions: {\n pattern: 'M/d/yyyy HH:mm:ss'\n}\n```\n\n### Deprecated Formatters (Deprecated from 4.x)\n\n- `Input` No longer suggested to use, use simple list instead or a Text Formatter.\n- `Status, Color` No longer used, but badges can be used.\n- `Placeholder` Can now be set on the column and used with other formatters\n- `Ellipsis` Is now always enabled.\n- `Readonly` Can now be set on the column and used with other formatters\n- `Drilldown` Use button formatter with an icon.\n- `Template` is now deprecated for performance reasons, use a custom formatter now.\n- `ClassRange` Use column cssClass function or string\n- `Autocomplete, Lookup, TargetedAchievement, ProcessIndicator, Spinbox, Fileupload, Dropdown, Colorpicker, Tree, SummaryRow, GroupFooterRow, GroupRow, Expander, Editor, Textarea, Actions, RowReorder` May be added later\n\n## Custom Formatters\n\nIt is possible to create your own custom formatter. The idea behind the formatter is it takes the cell value and does processing on it to return the correct markup for the cell. The simplest custom formatter would be this example.\n\n```js\ncolumns.push({\n id: 'custom',\n name: 'Custom',\n field: 'price',\n formatter: (rowData: Record, columnData: Record) => {\n const value = `Custom: ${rowData[columnData.field] || '0'}`;\n return `${value}`;\n }\n});\n```\n\nTo style a custom formatter you may need to add a css part for the element. For example:\n\n```js\nformatter: (rowData: Record, columnData: Record) => {\n const value = `${rowData[columnData.field] || ''}`;\n return `${escapeHTML(value)}`;\n},\n```\n\nThen in the style sheet your add you can add styling for the css part.\n\n```css\nids-data-grid::part(custom-link) {\n color: #da1217;\n}\n\nids-data-grid::part(custom-link):hover {\n color: #6c080b;\n}\n```\n\nThe formatter is then linked via the column on the formatter setting. When the grid cell is rendered the formatter function is called and the following arguments are passed in.\n\n- `rowData` The current row's data from the data array.\n- `columnData` The column object with all of the column configuration for this cell.\n\n## Events\n\n- `activecellchanged` Fires when the active cell changes with the keyboard or by click. Returns `elem` (the cell element), `activeCell` (current active cell object), `previousActiveCell` (previous active cell element), and `reason` (string: 'keyboard' | 'method' | 'internal').\n- `sorted` Fires when the sort column is changed.\n- `selectionchanged` Fires any time the selection changes.\n- `activationchanged` Fires any time the active row changes.\n- `beforerowselected` Fires before each row is selected. You can veto the selection by returning false in the event response for example `e.detail.response(false);`\n- `rowselected` Fires for each row that is selected.\n- `beforerowdeselected` Fires before each row is deselected. You can veto the deselection by returning false in the event response for example `e.detail.response(false);`\n- `rowdeselected` Fires for each row that is deselected.\n- `rowactivated` Fires for each row that is activated.\n- `rowdeactivated` Fires for each row that is deactivated.\n- `rowclick` Fires for each row that is clicked.\n- `rowreorder` Fires when a row is reordered via drag and drop.\n- `dblclick` Fires each time double clicked on body cells or header cells. Based on where it clicked details can be capture like `type: 'body-cell'|'header-title'|'header-filter'` etc.\n- `celldblclick` Fires each time a body cell is double clicked. Returns `cell` (the cell element), `columnId`, `columnIndex`, `rowIndex`, `rowData`, `columnData`, and `fieldData`.\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n- `columnresized` Fires when a column is resized or setColumnWidth is called.\n- `beforecolumnresized` Fires before a column is resized. You can veto the resize by returning false in the event response.\n- `aftercolumnresized` Fires after a column is resized.\n- `columnmoved` Fires when a column is moved / reordered or moveColumn is called\n- `columnhidden` Fires when a column is hidden via the `setColumnVisible` API\n- `columnshown` Fires when a column is shown again via the `setColumnVisible` API\n- `beforetooltipshow` Fires before tooltip show, you can return false in the response to veto\n- `beforemenushow` Fires before context menu show, you can return false in the response to veto.\n- `menushow` Fires after context menu show.\n- `menuselected` Fires after context menu item selected.\n- `rowExpanded` Fires when a tree or expandable row is expanded\n- `rowCollapsed` Fires when a tree or expandable row is collapsed\n- `beforecelledit` Fires before a cell is being edited (before edit is started). Can be vetoed by returning false.\n- `celledit` Fires when a cell enters edit mode.\n- `endcelledit` Fires when cell editing ends.\n- `cancelcelledit` Fires when cell editing is cancelled.\n- `settingschanged` Fires after settings are changed in some way.\n- `scrollstart` Fires when data-grid reaches the topmost\n\n### beforerowappend Usage Example\n\nWhen `addNewAtEnd` is enabled, the grid automatically creates a new row when the user tabs past the last editable cell. The `beforerowappend` event fires before the row is created, allowing you to control whether and how the row is added. The `response()` callback supports both synchronous and asynchronous patterns.\n\n```js\nconst dataGrid = document.querySelector('#my-data-grid');\n\n// Prevent client-side row creation (e.g. server-side only)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(false);\n});\n\n// Allow default row creation\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(true);\n});\n\n// Provide custom data for the new row (synchronous)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response({\n description: 'New Item',\n book: 'Default Book',\n price: 0\n });\n});\n\n// Async: return a Promise (e.g. to fetch data from a server)\ndataGrid.addEventListener('beforerowappend', (e) => {\n e.detail.response(\n fetch('/api/new-row')\n .then((res) => res.json())\n .then((data) => data) // resolve with custom data object\n .catch(() => false) // resolve with false to cancel on error\n );\n});\n```\n\n### Row Indicators\n\nThe `rowNumber` formatter supports displaying an indicator icon to the left of the row number. This is useful for visually communicating row states such as new, modified, deleted, or error without relying on color alone.\n\nTo enable row indicators, configure the `rowIndicatorConfig` property on the `rowNumber` column. The `icon` column property should reference the field in your row data that stores the indicator type, and `rowIndicatorConfig` controls the indicator behavior and labels.\n\nThe following semantic indicator types are available via the `RowIndicatorTypes` enum:\n\n| Type | Value | Icon | Description |\n|------|-------|------|-------------|\n| `Current` | `'current'` | `play-filled` | Marks the currently active row |\n| `New` | `'new'` | `star-filled` | Indicates a newly added row |\n| `Modified` | `'modified'` | `diamond-filled` | Indicates an edited row |\n| `MarkedForDeletion` | `'marked-for-deletion'` | `rejected-solid` | Row is flagged for removal |\n| `Error` | `'error'` | `alert-alert` | Row has a validation error |\n| `Drill` | `'drill'` | `flag-filled` | Row is a drill-down target |\n\n#### Column Configuration\n\n```js\ncolumns.push({\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n icon: 'rowIndicator',\n rowIndicatorConfig: {\n activeRowIndicator: true,\n indicatorField: 'rowIndicator',\n iconLabel: {\n new: 'New record',\n modified: 'Modified',\n 'marked-for-deletion': 'Marked for deletion',\n current: 'Current',\n error: 'Error',\n drill: 'Drill'\n }\n },\n sortable: false,\n readonly: true,\n width: 90\n});\n```\n\nThe `rowIndicatorConfig` object accepts the following properties:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `indicatorField` | `string` | Name of the field in row data that holds the indicator type value |\n| `activeRowIndicator` | `boolean` | When `true`, shows a play icon at the end of the cell for the active row |\n| `iconLabel` | `Record` | Map of indicator type values to accessible `aria-label` strings |\n\nYour row data should include the field referenced by `indicatorField` using the semantic type values:\n\n```json\n[\n { \"rowIndicator\": \"new\", \"description\": \"New item\" },\n { \"rowIndicator\": \"modified\", \"description\": \"Edited item\" },\n { \"rowIndicator\": \"\", \"description\": \"No indicator\" }\n]\n```\n\nRows with an indicator value render an `ids-icon` with the `row-number-indicator` class. Rows without an indicator render a spacer element to keep row numbers aligned. The icon color is controlled by the `--ids-data-grid-row-indicator-color-icon` design token.\n\n#### Updating Row Indicators Programmatically\n\nUse `updateRowIndicator(rowIdx, indicator)` to programmatically update the indicator for a specific row. The second parameter is a `RowIndicatorSettings` object:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `rowIndicatorType` | `RowIndicatorTypes \\| '' \\| null` | The semantic indicator type to set, or empty string to clear |\n| `activeCell` | `boolean` | Whether to show the active row indicator icon |\n\n```js\n// Set a row as modified\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'modified'\n});\n\n// Set a row as new with active indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: 'new',\n activeCell: true\n});\n\n// Clear the indicator\ndataGrid.updateRowIndicator(0, {\n rowIndicatorType: ''\n});\n```\n\n## Methods\n\n- `setColumnWidth` Can be used to set the width of a column.\n- `setColumnHeaderOpacity(columnId, enable)` Toggles the header opacity state on a specific column without a full redraw. Pass `true` to dim the header or `false` to restore it to normal.\n- `setColumnHeaderText(columnId, text)` Can be used to quickly set the text of a column header.\n- `hideColumn(columnId)` Can be used to set the visibility of a column.\n- `showColumn(columnId)` Can be used to set the visibility of a column.\n- `setColumnVisible(columnId, visible)` Can be used to set the visibility of a column.\n- `setColumnReadonly(columnId, value)` Can be used to set a column as readonly or editable.\n- `setColumnDisabled(columnId, value)` Can be used to set a column as disabled or enabled.\n- `setColumnRequired(columnId, value)` Can be used to set a column as required or optional. When set to true, displays an asterisk (*) in the column header.\n- `setColumnValidation(columnId, validation)` Can be used to set validation rules on a column's editor. Pass a validation rule like 'required' or undefined to remove validation. When set to 'required', displays an asterisk (*) in the column header and enforces validation during editing.\n- `setActivateCell(cell, row)` Can be used to set focus of a cell.\n- `selectedRows` Lists the indexes of the currently selected rows.\n- `deSelectRow(index: number)` Deselects the row based on the index provided.\n- `selectRow(index: number)` Selects the row based on the index provided.\n- `saveSetting(setting: string)` Save the given setting to local storage.\n- `saveAllSettings` Save all user settings to local storage.\n- `savedSetting(setting: string)` Get saved given setting value from local storage.\n- `allSavedSettings` Get saved all user settings from local storage.\n- `clearSetting(setting: string, key?: string)` Clear the given saved setting from local storage.\n- `clearAllSettings(userKeys: unknown)` Clear saved all user settings from local storage.\n- `restoreSetting(setting: string, value?: unknown)` Restore the given saved setting from local storage.\n- `editFirstCell` Puts the first cell on the active row into edit mode.\n- `appendData(data: Record)` Use this to add more data to the datagrid's existing dataset. This will automatically render additional rows in the datagrid.\n- `addRow(data: Record, index?: number)` Adds a new row at the specified index position. If no index is provided, the row is added at the end. Existing rows at and after the insertion point are shifted down.\n- `addRows(data: Array>, index?: number)` Adds multiple new rows starting at the specified index position. If no index is provided, rows are added at the end. Each row is inserted sequentially (index, index+1, index+2, etc.).\n- `removeRow(index: number)` Removed the provided row index from the dataset and visual datagrid\n- `clearRow(index: number)` Clears all values on the given row.\n- `commitCellEdit` Stops editing and commits the value in the active editor.\n- `cancelCellEdit` Stops editing and reverts the value in the active editor.\n- `resetDirtyCells` Clears all dirty cell indicators.\n- `dirtyCells` Gives a list of all currently dirty cells.\n- `exportToExcel(format: 'csv' | 'xlsx', filename: string, options?: { keepGridFormatting?: boolean, useCurrentFilter?: boolean })` Export datagrid data source to an excel file. Options include keepGridFormatting (default: true) to preserve grid formatting, and useCurrentFilter (default: true) to export only filtered data.\n- `collapseAll(triggerAllRowsEvent: boolean, triggerRowEvent: boolean)` Collapse all expandable or tree rows. Argument `triggerAllRowsEvent` defaults to true, when enabled `rowcollapsed` triggered with once with `allRows` detail param. Argument `triggerRowEvent` defaults to false, when enabled each individual collapsed row event will be triggered\n- `expandAll()` Expand all expandable or tree rows.\n- `toggleAll(opt: boolean)` Toggle collapse/expand all expandable or tree rows. `opt false`: will expand all, `opt: true`: will collapse all\n- `refreshRow` IdsDataGridRow method to refresh row element and its cells.\n- `refreshCell` IdsDataGridCell method to refresh cell element\n- `updateDataset(row: number, data: Record, isClear?: boolean)` Updates datasource for row.\n- `updateDatasetAndRefresh(row: number, data: Record, isClear?: boolean)` Updates datasource for row and refreshes row/cells UI.\n- `updateData(value: string, refresh = true)` IdsDataGridCell method to update datasource on a specific cell.\n- `rowByIndex(rowIndex: number)` method to retrieve a specific row datagrid.\n- `updateRowIndicator(rowIdx: number, indicator: RowIndicatorSettings)` Updates the row indicator in the `rowNumber` column for the given row index. The `indicator` object accepts `rowIndicatorType` (a `RowIndicatorTypes` value or empty string to clear) and `activeCell` (boolean for active row icon). Only refreshes the affected cell, not the entire row.\n- `cellByIndex(rowIndex: number, columnIndex: number)` method to retrieve a specific cell from datagrid.\n- `cellByIndex(columnIndex: number)` IdsDataGridRow method to retrieve a specific cell from row.\n- `loadingIndicator.start() / loadingIndicator.stop()` The member `loadingIndicator` lets you get to the loading indictor in the data grid. Then you can start and stop it with `.start()/stop()`\n- `showPersonalizationDialog()` Show the dialog to select visible columns and reorder. The dialog can be customized by setting the `modalTemplate` property but by default will show you the available columns and let you drag and hide/show them as needed. In order to drag the column it should be `reorderable`. In order to hide/show the column it should be `hideable`\n- `applyFilter(conditions: Array)` Apply given filter conditions to the data grid.\n- `clearFilter()` Clear all filter conditions.\n- `filterConditions` Get the current filter conditions (this is a getter not a method)\n- `closePopupFilters()` Manually closes any open filter-related popup elements (date pickers, dropdown menus) within the data grid.\n- `setRowState(rowIndex, stateName)` Sets the visual state of a row. Available states: 'row-new' (green), 'row-removed' (red), 'row-error' (red), 'row' (default).\n- `getDirtyCells()` Returns all dirty cells using `rowId` (from `datasource.primaryKey`) and `columnId` instead of positional indices. Each entry includes `rowId`, `columnId`, and `originalValue`. Requires `datasource.primaryKey` to be set.\n- `scrollRowIntoView(rowIndex: number, settings?: ScrollSettings)` Scrolls the given row into view (1-based, where 1 is the first row). Accepts an optional `settings` object with the following properties:\n - `skipIfVisible` (boolean, default `false`) When true, skips scrolling if the row is already visible in the viewport.\n - `blockOuterScroll` (boolean, default `false`) When true, uses `scrollTo` with a calculated top offset instead of `scrollIntoView`.\n- `setDirtyCells(dirtyCells)` Restores dirty cell states using `rowId` and `columnId`. Accepts an array of `{ rowId, columnId, originalValue }`. Applies dirty indicators to matching cells and updates are batched per row. Requires `datasource.primaryKey` to be set.\n- `getRowStates()` Returns all row states using `rowId` instead of indices. Each entry includes `rowId` and `stateName`. Requires `datasource.primaryKey` to be set.\n- `setRowStates(states)` Restores row states using `rowId`. Accepts an array of `{ rowId, stateName }`. Valid state names: `'row-new'`, `'row-warning'`, `'row-error'`, `'row-removed'`. Requires `datasource.primaryKey` to be set.\n\n## Filters\n\nData rows can be filter based on one or several criteria. Whole filter row can turned on/off by the api setting `filterable` and can be disabled by the api setting `filter-row-disabled`. The filter conditions can be applied thru the UI or programmatically. Each column can have its own filter type and turn on/off by columns setting.\n\n### Filter Columns Setting\n\nAll the filter settings can be passed thru columns data.\n\n|Setting|Type|Description|\n|---|---|---|\n|`filterType` | Function | Data grid built-in filter method, see the dedicated section below. |\n|`filterConditions` | Array | List of items to be use as operators in menu-button or options in dropdown. |\n|`filterFunction` | Function | User defined filter method, it must return a boolean. |\n|`filterOptions` | Object | Passes settings in for the filter component example: `label, placeholder, disabled, uppercase, maxlength` in addition to some more specific options. |\n|`filterOptions.customId` | String | Function | Allows you to pass in a fixed string for the input or trigger field id, can also take a function that passes in all the column info that you can use for processing. |\n|`filterOptions.browserAutocomplete` | String | Allows you to pass in the input browser-autocomplete attribute. |\n|`isChecked` | Function | User defined filter method, it must return a boolean. This method use along built-in `checkbox` only, when filter data value is not boolean type. |\n\n### Built-in Filter Methods\n\n|Method|Description|\n|---|---|\n|`text` | It filter as text comparison. Contains input and menu-button with list of default operators. |\n|`integer` | It filter as integer comparison. Contains input and menu-button with list of default operators. |\n|`decimal` | It filter as decimal comparison. Contains input and menu-button with list of default operators. |\n|`contents` | It filter as text comparison. Contains dropdown and auto generate list of items based on column data. |\n|`dropdown` | It filter as text comparison. Contains dropdown and must pass list of item by setting `filterConditions`. |\n|`checkbox` | It filter as boolean comparison. Contains menu-button with list of default operators. |\n|`date` | It filter as date comparison. Contains date-picker and menu-button with list of default operators. |\n|`time` | It filter as time comparison. Contains time-picker and menu-button with list of default operators. |\n\n### Custom Filter\n\nIf the built-in filters are not enough, creating a custom filter is an option. There are two parts you can create both parts custom or mix-match with built-in.\n\n1. `UI Only` In order to do custom UI part of filter, add as html markup thru a slot. It must use slot and column-id attributes for example: `
...
` where n is the columnId same passed in the columns.\n1. `filterFunction` This is a user defined filter method which must return a boolean. It determines if a cell value should be considered as a valid filtered value.\n1. `disableClientFilter` This is an api setting to disable filter logic client side. It will set filter conditions and fire an event `filtered` which can listen for custom logic.\n\nThe entire list of filter conditions to select from:\n\n```js\nconst filterConditions = [\n { value: 'contains', label: 'Contains', icon: 'filter-contains' },\n { value: 'does-not-contain', label: 'Does Not Contain', icon: 'filter-does-not-contain' },\n { value: 'equals', label: 'Equals', icon: 'filter-equals' },\n { value: 'does-not-equal', label: 'Does Not Equal', icon: 'filter-does-not-equal' },\n { value: 'is-empty', label: 'Is Empty', icon: 'filter-is-empty' },\n { value: 'is-not-empty', label: 'Is Not Empty', icon: 'filter-is-not-empty' },\n { value: 'ends-with', label: 'Ends With', icon: 'filter-end-with' },\n { value: 'does-not-end-with', label: 'Does Not End With', icon: 'filter-does-not-end-with' },\n { value: 'starts-with', label: 'Starts With', icon: 'filter-start-with' },\n { value: 'does-not-start-with', label: 'Does Not Start With', icon: 'filter-does-not-start-with' },\n { value: 'less-than', label: 'Less Than', icon: 'filter-less-than' },\n { value: 'less-equals', label: 'Less Or Equals', icon: 'filter-less-equals' },\n { value: 'greater-than', label: 'Greater Than', icon: 'filter-greater-than' },\n { value: 'greater-equals', label: 'Greater Or Equals', icon: 'filter-greater-equals' },\n { value: 'earlier-than', label: 'Earlier Than', icon: 'filter-less-than' },\n { value: 'earlier-equals', label: 'Earlier Than Or Equals', icon: 'filter-less-equals' },\n { value: 'later-than', label: 'Later Than', icon: 'filter-greater-than' },\n { value: 'later-equals', label: 'Later Than Or Equals', icon: 'filter-greater-equals' },\n { value: 'in-range', label: 'In Range', icon: 'filter-in-range' },\n { value: 'selected-notselected', label: 'All', icon: 'filter-selected-notselected' },\n { value: 'selected', label: 'Selected', icon: 'filter-selected' },\n { value: 'not-selected', label: 'Not Selected', icon: 'filter-not-selected' }\n];\n```\n\n### Filter Code Examples\n\nBasic text filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nNo filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisabled filter row, will disabled all attached filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nHyperlink, integer, decimal, date and time filters\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'hyperlink',\n name: 'Hyperlink',\n field: 'description',\n href: '#',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.hyperlink\n});\ncolumns.push({\n id: 'integer',\n name: 'Integer',\n field: 'price',\n filterType: dataGrid.filters.integer,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'decimal',\n name: 'Decimal',\n field: 'price',\n filterType: dataGrid.filters.decimal,\n formatter: dataGrid.formatters.decimal,\n formatOptions: { locale: 'en-US' }\n});\ncolumns.push({\n id: 'date',\n name: 'Date',\n field: 'publishDate',\n filterType: dataGrid.filters.date,\n formatter: dataGrid.formatters.date\n});\ncolumns.push({\n id: 'time',\n name: 'Time',\n field: 'publishDate',\n filterType: dataGrid.filters.time,\n formatter: dataGrid.formatters.time\n});\n```\n\nSome filter options label, placeholder, disabled.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterOptions: {\n label: 'Label text for description input',\n placeholder: 'Placeholder text for description input',\n disabled: true\n }\n});\n```\n\nCustom operators items for menu-button.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'description',\n name: 'Description',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text,\n filterConditions: [{\n value: 'contains',\n label: 'Contains',\n icon: 'filter-contains'\n },\n {\n value: 'equals',\n label: 'Equals',\n icon: 'filter-equals',\n selected: true\n }]\n});\n```\n\nContents and dropdown type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'location',\n name: 'Location',\n field: 'location',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.contents,\n filterOptions: {\n notFilteredItem: { value: 'not-filtered', label: 'Not Filtered' }\n }\n});\ncolumns.push({\n id: 'useForEmployee',\n name: 'NotFilterdItem (shown as blank)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\ncolumns.push({\n id: 'useForEmployeeCustomNotFilterdItem',\n name: 'NotFilterdItem (show as custom text)',\n field: 'useForEmployee',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.dropdown,\n filterConditions: [\n { value: 'not-filtered', label: 'Not Filtered' },\n { value: 'Yes', label: 'Yes' },\n { value: 'No', label: 'No' }\n ]\n});\n```\n\nCheckbox type filters.\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'checkbox',\n name: 'Checkbox',\n field: 'inStock',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox\n});\ncolumns.push({\n id: 'customCheckMethod',\n name: 'Custom check method',\n field: 'active',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.checkbox,\n isChecked: (value) => value === 'Yes'\n});\n```\n\nCustom filter method.\n\n```html\n\n\n```\n\n```js\n// Custom filter checking\nconst myCustomFilter = (opt) => {\n const { operator, columnId, value } = opt.condition;\n const val = {\n condition: Number.parseInt(value, 10),\n data: Number.parseInt(opt.data[columnId], 10)\n };\n let isMatch = false;\n if (Number.isNaN(val.condition) || Number.isNaN(val.data)) return isMatch;\n\n if (operator === 'equals') isMatch = (val.data === val.condition);\n if (operator === 'greater-than') isMatch = (val.data > val.condition);\n if (operator === 'greater-equals') isMatch = (val.data >= val.condition);\n if (operator === 'less-than') isMatch = (val.data < val.condition);\n if (operator === 'less-equals') isMatch = (val.data <= val.condition);\n\n return isMatch;\n};\n\nconst columns = [];\ncolumns.push({\n id: 'customFilterMethod',\n name: 'Custom Filter Method',\n field: 'price',\n filterFunction: myCustomFilter,\n formatter: dataGrid.formatters.integer,\n formatOptions: { locale: 'en-US' }\n});\n```\n\nCustom filter UI part.\n\n```html\n\n
\n \n Greater Than Or Equals\n \n \n \n Equals\n Greater Than\n Greater Than Or Equals\n Less Than\n Less Than Or Equals\n \n \n \n \n
\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n```\n\nDisable client filter\n\n```html\n\n\n```\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n formatter: dataGrid.formatters.text,\n filterType: dataGrid.filters.text\n});\n\ndataGrid.addEventListener('filtered', (e: any) => {\n console.info('filtered:', e.detail);\n});\n```\n\n### Filter rows programmatically\n\n```js\n// Filter rows\nconst conditions = [{ columnId: 'description', operator: 'contains', value: '5' }];\ndataGrid.applyFilter(conditions);\n\n// Reset all filters\ndataGrid.applyFilter([]);\n\n// or\ndataGrid.clearFilter();\n\n// save and restore filter\nconst oldFilters = dataGrid.filterConditions();\ndataGrid.data = NEW_DATA;\ndataGrid.pageTotal = NEW_DATA.length;\ndataGrid.applyFilter(oldFilters);\n```\n\n### Filter Events\n\nThe following events are relevant to data-grid filters.\n\n- `filtered` Fires after a filter action occurs, clear or apply filter condition.\n- `filteroperatorchanged` Fires once a filter operator changed.\n- `filterrowopened` Fires after the filter row is opened by the user.\n- `filterrowclosed` Fires after the filter row is closed by the user.\n\n## Custom cell colors\n\nIn some cases, it may be desirable to customize the background color of cells. This can be done with the `cssPart` column setting:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell'\n});\n```\n\nThe `cssPart` property is translated into a `part` attribute that is applied to every cell in the column. In the event the color needs to be conditional based on the row index or other logic, a function can be used:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2')\n // ...\n});\n```\n\nAfter this is defined, accompanying CSS can be written to target the parts `custom-cell`, `custom-cell-1`, and `custom-cell-2` to change background color or other CSS properties of the cell:\n\n```css\nids-data-grid::part(cell) {\n background-color: #ebf9f1;\n}\n\nids-data-grid::part(cell-selected) {\n background-color: #c9dad0;\n}\n```\n\n### Changing selected cell colors\n\nAnother column setting, `cellSelectedCssPart` can be used alongside `cssPart` to customize the selected color of the row in a similar way. When using `mixed` selection, this color is also applied to activated rows:\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n cssPart: 'custom-cell',\n cellSelectedCssPart: 'custom-cell-selected'\n});\n```\n\nThis column setting can also be a function, just like `cssPart`:\n\n```js\ncolumns.push({\n // ...\n cssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-1' : 'custom-cell-2'),\n cellSelectedCssPart: (row: number) => ((row % 2 === 0) ? 'custom-cell-selected-1' : 'custom-cell-selected-2')\n // ...\n});\n```\n\n## Tooltip Code Examples\n\nSet suppress tooltips to turn off.\n\n```html\n\n\n```\n\nSet custom tooltip strings.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: 'This is a product Id',\n headerTooltip: 'This is the product Id header title',\n headerIconTooltip: 'This is product Id header icon',\n filterButtonTooltip: 'This is the product Id filterButton'\n});\n```\n\nSet tooltip as callback.\n\n```js\nconst tooltipCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return `Text: ${text}
Header Row: ${rowIndex}, Cell: ${columnIndex}`;\n } else if (type === 'filter-button') {\n return `Text: ${text}
FilterButton Row: ${rowIndex}, Cell: ${columnIndex}`;\n }\n return `Text: ${text}
for Row: ${rowIndex}, Cell: ${columnIndex}`;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltip: tooltipCallback\n});\n```\n\nSet tooltip custom options.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: {\n placement: 'top',\n headerPlacement: 'top',\n headerIconPlacement: 'top',\n filterButtonPlacement: 'bottom',\n x: 0,\n y: 10,\n headerX: 0,\n headerIconX: 0,\n headerY: 10,\n headerIconY: 10,\n filterButtonX: 0,\n filterButtonY: 22\n }\n});\n```\n\nSet tooltip options as callback.\n\n```js\nconst tooltipOptionsCallback = (args: any): string => {\n const { type, columnIndex, rowIndex, text } = args;\n\n if (type === 'header-title') {\n return { headerPlacement: 'top', headerX: 0, headerY: 10 };\n } else if (type === 'header-icon') {\n return { headerIconPlacement: 'top', headerIconX: 0, headerIconY: 10 };\n } else if (type === 'filter-button') {\n return { filterButtonPlacement: 'bottom', filterButtonX: 0, filterButtonY: 22 };\n }\n return { placement: 'top', x: 0, y: 10 };\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipOptions: tooltipOptionsCallback\n});\n```\n\nSet tooltip custom css.\n\n```js\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: 'custom-teal',\n headerTooltipCssPart: 'custom-teal',\n headerIconTooltipCssPart: 'custom-teal',\n filterButtonTooltipCssPart: 'custom-teal'\n});\n```\n```css\n/* tooltip css part `custom-teal` */\nids-data-grid::part(custom-teal-tooltip-arrow-top)::after {\n border-top-color: #2f8d8e;\n}\nids-data-grid::part(custom-teal-tooltip-popup) {\n background-color: #2f8d8e;\n}\n```\n\nSet tooltip custom css as callback.\n\n```js\nconst tooltipCssPartCallback = (args: { type: string }): string => {\n const { type } = args;\n let cssPart = '';\n // Set random css part each time, for `body-cell` tooltips\n if (type === 'body-cell') {\n const parts = ['blue', 'red'];\n const randomIndex = Math.floor(Math.random() * parts.length);\n cssPart = parts[randomIndex];\n }\n return cssPart;\n};\nconst columns = [];\ncolumns.push({\n id: 'text',\n name: 'Text',\n field: 'description',\n tooltipCssPart: tooltipCssPartCallback\n});\n```\n```css\n/* tooltip css part `blue` */\nids-data-grid::part(blue-tooltip-arrow-top)::after {\n border-top-color: #0066d4;\n}\nids-data-grid::part(blue-tooltip-popup) {\n background-color: #0066d4;\n}\n\n/* tooltip css part `red` */\nids-data-grid::part(red-tooltip-arrow-top)::after {\n border-top-color: #c31014;\n}\nids-data-grid::part(red-tooltip-popup) {\n background-color: #c31014;\n}\n```\n\n## Context Menu Code Examples\n\nThe context menus can be set via the dataset.\n\n### Context Menu Settings\n\n- `originalEvent` {MouseEvent} Available in the `beforemenushow` event at `e.detail.data.originalEvent`, providing access to the native browser MouseEvent. This allows you to get mouse coordinates (clientX, clientY) for custom menu positioning or control event propagation with stopPropagation() and preventDefault().\n\n```js\n// Access originalEvent in beforemenushow event\nconst dataGrid = document.querySelector('#data-grid-1');\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n const { originalEvent } = e.detail.data;\n console.log('Mouse coordinates:', originalEvent.clientX, originalEvent.clientY);\n\n // Optional: Control event propagation\n originalEvent.stopPropagation();\n originalEvent.preventDefault();\n});\n```\n\n```html\n\n\n```\n```js\n// Dataset for header cells context menu\nconst headerMenuData = {\n id: 'grid-header-context menu',\n contents: [{\n id: 'header-actions-group',\n items: [\n { id: 'actions-split', value: 'actions-split', text: 'Split' },\n { id: 'actions-sort', value: 'actions-sort', text: 'Sort' },\n ]\n }],\n};\n\n// Dataset for body cells context menu\nconst menuData = {\n id: 'grid-context menu',\n contents: [{\n id: 'actions-group',\n items: [\n { id: 'item-1', value: 'item-1', text: 'Item One' },\n { id: 'item-2', value: 'item-2', text: 'Item Two' },\n { id: 'item-3', value: 'item-3', text: 'Item Three' }\n ]\n }],\n};\n\n// Set context menu data with data-grid\ndataGrid.menuData = menuData;\ndataGrid.headerMenuData = headerMenuData;\n\n// Set to return true/false in the response to veto before context menu show.\ndataGrid.addEventListener('beforemenushow', (e: any) => {\n console.info('before context menu show', e.detail);\n // e.detail.response(false);\n});\n\n// Set to watch after context menu show.\ndataGrid.addEventListener('menushow', (e: any) => {\n console.info('After context menu show', e.detail);\n});\n\n// Set to watch after context menu item selected.\ndataGrid.addEventListener('menuselected', (e: any) => {\n console.info('context menu item selected', e.detail);\n});\n```\n\nSet context menu thru Slot.\n\n```html\n\n \n \n \n Split\n Sort\n \n \n \n \n \n Item One\n Item Two\n Item Three\n Item Four\n \n \n\n```\n\nSet context menu thru ID.\n\n```html\n\n\n\n\n \n Split\n Sort\n \n\n\n\n\n \n Item One\n Item Two\n Item Three\n Item Four\n \n\n```\n\n### Actions Menu Button\n\nThe column settings `menuId` and `selected` callback can be used to construct an actions button with a menu for easy handling. An example column setup would be:\n\n```js\ncolumns.push({\n id: 'more',\n name: 'Actions',\n formatter: dataGrid.formatters.button,\n icon: 'more',\n type: 'icon',\n align: 'center',\n text: 'Actions',\n width: 56,\n menuId: 'actions-menu',\n selected: (data: Record, col: IdsDataGridColumn, e: CustomEvent) => {\n console.info(`Item \"${e.detail.elem.text}\" was selected (id \"${e.detail.elem.id}\")`);\n }\n});\n```\n\nThen just add an `` with any structure you like to the page and it will open when pressing the button. When an item is selected the callback will fire for `selected`\n\n## Empty Message Code Examples\n\nSet empty message thru slot (markup).\n\n```html\n\n \n\n```\n\nSet empty message thru settings (markup).\n\n```html\n\n```\n\nSet empty message thru settings (javascript).\n\n```html\n\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-em-thru-settings-js');\ndataGrid.emptyMessageIcon = 'empty-error-loading-new';\ndataGrid.emptyMessageLabel = 'No Data';\ndataGrid.emptyMessageDescription = 'There is No data available.';\n```\n\n## Row Height Code Examples\n\nAs mentioned in the settings section you can change the row height by setting the rowHeight option.\n\n```html\n \n```\n\nIts worth mentioning the characteristics and usage for each one.\n\nLarge (`row-height=\"lg\"`) - Row Height is 50. The default row height, header is 16px and body cells are 16px. 16px padding on cells and header. You should use this most of the time if there is plenty of room on the UI and to avoid the UI looking crowded.\nMedium (`row-height=\"md\"`) - Row Height is 40. Header is 16px and body cells are 16px. 12px padding on cells and header. If you need to see a few more rows but still want to avoid a crowded UI, this is the next best option.\nSmall (`row-height=\"sm\"`) - Row Height is 35. Header is 16px and body cells are 16px. 8px padding on cells and header. This is the smallest option that is recommended for readability and spacing.\nExtra Small (`row-height=\"xs\"`) - Row Height is 30. Header is 14px and body cells are 14px. 8px padding on cells and header. If you need a very compressed data grid with a lot of data you can use this option. But there is a trade off of bad readability and spacing.\nExtra Extra Small (`row-height=\"xxs\"`) - Row Height is 25. Header is 14px and body cells are 14px. 2px padding on cells and header. Avoid this option as it is very crowded but it is included for edge cases.\n\n## Hyperlink Formatter with Dropdown Editor\n\nThe DataGrid supports combining hyperlink formatters with dropdown editors, allowing cells to display as clickable links while still being editable. This is useful for scenarios where you want to show linked data that can also be modified through a dropdown interface.\n\n### Basic Usage\n\n```javascript\nconst column = {\n id: 'currency',\n name: 'Currency',\n field: 'currency',\n formatter: dataGrid.formatters.hyperlink,\n href: '#currency-details',\n click: (rowData, column, event) => {\n console.log('Currency link clicked:', rowData.currency);\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'USD', label: 'USD', value: 'USD' },\n { id: 'EUR', label: 'EUR', value: 'EUR' },\n { id: 'JPY', label: 'JPY', value: 'JPY' }\n ]\n }\n }\n};\n```\n\n### Interaction Behavior\n\nThe combined hyperlink + dropdown editor provides intuitive interaction patterns:\n\n- **Normal click on hyperlink**: Follows the hyperlink (calls click handler or navigates to href)\n- **Double-click on cell**: Opens the dropdown editor for editing\n- **Click on cell area outside hyperlink**: Opens the dropdown editor for editing\n- **Keyboard navigation (Enter)**: Follows the hyperlink\n\n### CSS Styling\n\nCells with both hyperlink formatter and dropdown editor automatically receive the `has-editor-dropdown` CSS class, which ensures the hyperlink only takes the width of its content, allowing users to click in empty cell areas to trigger editing.\n\n### Example with Dynamic Links\n\n```javascript\nconst column = {\n id: 'product',\n name: 'Product',\n field: 'productCode',\n formatter: dataGrid.formatters.hyperlink,\n href: (rowData) => `/products/${rowData.productCode}`,\n click: (rowData, column, event) => {\n // Handle hyperlink click\n window.open(`/products/${rowData.productCode}`, '_blank');\n },\n editor: {\n type: 'dropdown',\n editorSettings: {\n options: [\n { id: 'PROD001', label: 'Product A', value: 'PROD001' },\n { id: 'PROD002', label: 'Product B', value: 'PROD002' }\n ]\n }\n }\n};\n```\n\n### Accessibility\n\nThe feature maintains full keyboard accessibility:\n\n- Tab navigation works normally\n- Enter key follows hyperlinks\n- Screen readers announce both the hyperlink and editable nature of the cell\n\n## Column Reordering Code Examples\n\nColumns can be reordered by setting the `reorderable` property to `true` on individual columns. You can also restrict which columns can be moved by setting the `firstDraggableColumn` property on the data grid.\n\n```html\n\n```\n\n```js\nconst dataGrid = document.querySelector('#data-grid-reorderable');\n\n// Set programmatically\ndataGrid.firstDraggableColumn = 2;\n\n// Configure columns with reorderable property\ndataGrid.columns = [\n {\n id: 'selectionCheckbox',\n name: 'Selection',\n sortable: false,\n resizable: false,\n formatter: dataGrid.formatters.selectionCheckbox,\n align: 'center'\n },\n {\n id: 'rowNumber',\n name: '#',\n formatter: dataGrid.formatters.rowNumber,\n sortable: false,\n readonly: true,\n width: 65\n },\n {\n id: 'description',\n name: 'Description',\n field: 'description',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n },\n {\n id: 'ledger',\n name: 'Ledger',\n field: 'ledger',\n sortable: true,\n resizable: true,\n reorderable: true, // This column can be reordered\n formatter: dataGrid.formatters.text\n }\n];\n```\n\nIn this example, columns 0 and 1 (Selection and Row Number) are fixed and cannot be reordered because `firstDraggableColumn` is set to 2. Only columns at index 2 and higher can be moved.\n\n## Multiline Header Code Examples\n\nAs mentioned in the settings columns section you can have a two line header in two variations. The first variation is simply to use it as a way to extend the text over two lines. To do this setup the column like the following examples.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'with long description' },\n],\n```\n\nThe second way to setup the text so the second line is de-emphasized a use case might be to show a unit or related info thats not part of the above name.\n\n```js\nname: [\n { text: 'Product Name' },\n { text: 'String', emphasis: 'subtle' },\n],\n```\n\nTechnically this is also possible but not sure if there is a use case.\n\n```js\nname: [\n { text: 'Something subtle', emphasis: 'subtle' },\n { text: 'Name', emphasis: 'subtle' },\n],\n```\n\n## Cascading Dropdown Examples\n\nTo use cascading dropdown for data grid, target column should have a setting like this. Note that the setting is called editor.editorSettings.source.\n\n```js\ncolumns.push({\n id: 'bookCurrency',\n name: 'Currency',\n field: 'bookCurrency',\n resizable: true,\n reorderable: true,\n formatter: dataGrid.formatters.dropdown,\n editor: {\n type: 'dropdown',\n editorSettings: {\n dirtyTracker: true,\n typeahead: true,\n validate: 'required',\n source: cascadeOptions,\n options: [\n {\n id: '',\n label: '',\n value: ''\n },\n {\n id: 'USD',\n label: 'USD',\n value: 'USD'\n },\n {\n id: 'EUR',\n label: 'EUR',\n value: 'EUR'\n },\n {\n id: 'JPY',\n label: 'JPY',\n value: 'JPY'\n }\n ]\n }\n },\n });\n```\n\nNeed also to define the callback of editor.editorSettings.source. In the example above, the method name is called cascadeOptions.\nIn this cascadeOptions, the cell will check the previous cell value for validation of what should be available only in the dropdown option list.\nThis method is customizable and can define any rules the developer wants.\n\n```js\nconst cascadeOptions = async () => {\n const parentNode = document?.querySelector('ids-data-grid')?.shadowRoot?.querySelector('.is-editing')?.parentElement;\n const targetIndex: string = parentNode?.getAttribute('data-index') || '0';\n const targetData = dataGrid.data[parseInt(targetIndex)];\n const checkCurrency = (el: any) => {\n if (el.id === '' || el.id === 'USD') return true;\n if (el.country === targetData.country) return true;\n\n return false;\n };\n\n const newOptions: any[] = masterCurrencyList.filter(checkCurrency);\n return newOptions;\n};\n```\n\n## States and Variations\n\n**Rows**\n- Hover\n- Selected\n- Disabled\n- Readonly\n- Activated\n\n**Columns**\n- Focus\n- Hover\n- Sorted\n- Selected\n- Disabled\n- Filtered\n\n**Cells**\n- Hover (sometimes a cursor change)\n- Readonly\n- Focus\n- Checked/Not Checked (Checkboxes)\n\n## Keyboard Guidelines\n\n- TabThe initial tab enters the grid with focus on the first cell of the first row, often a header. A second tab moves out of the grid to the next tab stop on the page. Once focus is established in the grid, a TAB into or a Shift Tab into the grid will return to the cell which last had focus. If in edit mode will finish editing and start editing the next cell.\n- Shift + Tab Moves the reverse of tab. If in edit mode will finish editing and start editing the previous cell.\n- Left and Right Move focus to the adjacent column's cell. There is no wrap at the end or beginning of columns.\n- Shift + Left and Shift + Right When focused on a column header, resizes the column width by decreasing or increasing it.\n- Up and Down Move focus to the adjacent row's cell. There is no wrap at the first or last row.\n- Home moves focus to the first cell of the current row. Note that this is `Fn+Left Arrow` on mac.\n- End moves focus to the last cell of the current row. Note that this is `Fn+Right Arrow` on mac.\n- Page Up moves focus to the first cell in the current column. Note that this is `Fn+Up Arrow` on mac.\n- Page Down moves focus to the last cell in the current column. Note that this is `Fn+Done Arrow` on mac.\n- Space Toggles selection the activate row. If suppressRowDeselection is set it will be ignored on deselect. If the cell contains an expandable element then the row will toggle the expanded state. If the cell contains a checkbox editor, will toggle the checkbox state.\n- F2 toggles actionable mode. Pressing the Tab key while in actionable mode moves focus to the next actionable cell. While in actionable mode you can do things like type + enter. This will move you down a row when you hit enter. If the cell has a control that uses down arrow (like the drop downs or lookups that are editable). Then the user needs to hit enter to enable the edit mode on that cell.\n- Triple Click Not a keyboard shortcut, but if you have text in a cell that is overflowed a triple click will select all the text even the part that is invisible.\n- Ctrl+A (PC) / Cmd+A (Mac) If the grid is mixed or multi select this will select all rows.\n- Shift + Click or Up/Down Selects a range of rows.\n- Enter Activates edit mode on the cell if it is editable. There is also an \"auto edit detection\". If the user starts typing then edit mode will happen automatically without enter. If in edit mode already Enter will finish edit mode. If `editNextOnEnterPress` is enabled then editing will start on the same column in next row.\n- Shift + Enter Same as enter but if `editNextOnEnterPress` is enabled then editing will start on the same column in previous row.\n- F2 Finish editing same as Enter. But if `editNextOnEnterPress` is enabled, will stay in same cell. `cancelEditMode` will fire.\n- CMD/CTRL + Enter Finish editing same as Enter.\n- ESC Revert to the previous value and cancel editing. `cancelEditMode` will fire.\n\n## Responsive Guidelines\n\n- By default, data grid grows depending on the amount of contents within and will scroll if necessary under the header. It stops growing when it reaches the size of the parent container.\n- `autoFit` property or `auto-fit` attribute can be set manually to make the data grid size fill and be responsive to the size of the screen, regardless of the amount of contents.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- Counts have all new markup and classes.\n\n**4.x to 5.x**\n- Data grid has all new markup and a custom element but some similarly named options\n- Still uses same columns and data set options. Some column options enhanced and changed.\n- If using events events are now plain JS events for example: sorted, rendered\n- Some Api Functions have changed\n- If using properties/settings these are now attributes or as plain properties for example: data, virtual-scroll\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- `Drill Down` Formatter is now covered by `Button` formatter with `icon=\"drilldown\"`\n- `textOverflow` setting is now by default\n- `rowNavigation` setting has replaced `cellNavigation`. Cell navigation is the default behavior.\n- `stretchColumn` is now more flexible and can be achieved by setting a column width to `minmax(130px, 4fr)`. I.E. some min width and a `fr` unit equal to the remaining number of columns (or similar variations).\n- split columns are not supported anymore but could be done with a custom formatter if needed\n- `frozenColumns` setting is now set on each column by adding `frozen: 'left'` or `frozen: 'right'` to the column definition.\n- Some events are renamed see the events section for more details, also the signature of the events has changed.\n- Custom formatter functions can now be any type of function and have a different signature.\n- The `expanded` column option for tree was renamed to `rowExpanded`.\n- The `expandrow/collapserow` events are renamed to `rowexpanded/rowcollapsed`\n- The `beforeentereditmode/entereditmode/exiteditmode` event is renamed to `beforecelledit/celledit/endcelledit/cancelcelledit`\n- The `actionablemode` feature has been replaced with simply tabbing to the next editable field when in edit mode.\n\n## Accessibility Guidelines\n\n1.1.1 Non-text Content - All images, links and icons have text labels for screen readers when the formatters are used.\n- 1.4.3 Contrast (Minimum) - The visual presentation of text and links and images of text has a contrast ratio of at least 4.5:1.\n- 2.1.1 Keyboard - Make all functionality available from a keyboard. The grid has keyboard shortcuts and is usable with a screen reader due to the addition of aria tags.\n- A datagrid in general including this one uses the following aria tags\n - `aria-label` labels the enter table on the main table\n - `aria-rowcount` lists the visible row count on the main table\n - `aria-colindex` the index of each column on the column elements\n - `aria-rwindex` the index of each row on the row elements\n - `aria-setsize` for tree grid lists the number of elements in each level (group)\n - `aria-level` the level of indentation\n - `aria-posinset` the depth into each set\n - `aria-expanded` on the row it indicates if the row is expanded (for tree and expandable row)\n - `aria-sort` indicates the sort direction on the sortable columns\n - `aria-checked` indicates if the element is checked on checkbox columns and headers\n- When using the keyboard to resize the columns the pattern slightly follows the [window splitter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/#example) but is simplified to only use shift + left and right arrows.\n\n## Regional Considerations\n\nTitles and labels should be localized in the current language. All elements will flip to the alternate side in Right To Left mode. Consider that in some languages text may be a lot longer (German). And in some cases it cant be wrapped (Thai). For some of these cases text-ellipsis is supported.\n\n## IdsDataGridFilterManager\n\nThe IdsDataGridFilterManager is a singleton class that provides centralized management of all active data grid filter instances across the application. It enables coordinated control of filter popups and lifecycle management for multiple data grids.\n\n## Code Separation (For Developers)\n\nThe code is divided into several files. Here is a description of where everything is.\n\n- `ids-data-grid-cell.ts` creates a non-shadow root `ids-data-grid-cell`, and handles its own selection, and activation.\n- `ids-data-grid-cell.scss` contains all css related to `.ids-data-grid-cell` and its children\n- `ids-data-grid-contextmenu.ts` contains code in the form of export functions, that adds ability to get right click menus on headers and cells\n- `ids-data-grid-filter.scss` contains all css related to the filter row and its children\n- `ids-data-grid-filter.ts` contains code to implement the filtering functionality and its ui (some functions are in ids-data-source)\n- `ids-data-grid-formatters.ts` contains all formatter functions and some supporting code like data extraction\n- `ids-data-grid-header.ts` contains most header functionality, the header template, and code related to header actions like sort, reorder and selection.\n- `ids-data-grid-header.scss` contains all css related to `.ids-data-grid-header` and its children\n- `ids-data-grid-row.ts` contains most row functionality, the row template, and code related to row actions like expand, collapse, select, activate\n- `ids-data-grid-row.scss` contains all css related to `.ids-data-grid-row` and its children\n- `ids-data-grid-tooltip-mixin.js` contains a tooltip mixin that adds tooltip functionality to cells and headers, its different from `ids-tooltip-mixin` (more specific)\n- `ids-data-grid.js` contains all main data grid code, the api and settings and the main generator loop for the data grid\n- `ids-data-grid-filter-manager.ts` singleton class that manages all active data grid filter instances globally\n\n### Column Resize Events\n\nThe data grid provides three events for complete control over the column resize lifecycle:\n\n#### `beforecolumnresized`\nFires before a column resize operation starts (mouse drag or keyboard). Can be vetoed to prevent the resize.\n\n```js\ndataGrid.addEventListener('beforecolumnresized', (e) => {\n console.info('Before resize:', e.detail.column.name, e.detail.width);\n\n // Prevent resize for specific columns\n if (e.detail.column.id === 'locked-column') {\n e.detail.response(false); // Veto the resize\n }\n});\n```\n\n#### `columnresized`\nFires continuously during a column resize operation (mouse drag). Use for live updates.\n\n```js\ndataGrid.addEventListener('columnresized', (e) => {\n console.info('Resizing:', e.detail.column.name, e.detail.column.width);\n});\n```\n\n#### `aftercolumnresized`\nFires once when a column resize operation completes (mouse release or keyboard). Ideal for saving column widths.\n\n```js\ndataGrid.addEventListener('aftercolumnresized', (e) => {\n console.info('Resize complete:', e.detail.column.name);\n console.info('Start width:', e.detail.startWidth, 'Final width:', e.detail.width);\n\n // Save to localStorage or database\n saveColumnWidth(e.detail.column.id, e.detail.width);\n});\n```\n\n**Event Details:**\n- `beforecolumnresized`: `{ column, width, response(veto) }`\n- `columnresized`: `{ index, column, columns }`\n- `aftercolumnresized`: `{ column, width, startWidth, columns }`\n\n**Keyboard Support:** All events work with Shift+Arrow keys for keyboard-based column resizing.\n"}},{"name":"ids-data-label","attributes":[{"name":"mask-type","description":"Gets the current mask type","values":[]},{"name":"text-mask-character","description":"Sets the number of characters to reveal in masked text","values":[]},{"name":"masked","description":"Gets whether the text is currently masked","values":[]},{"name":"data-text","description":"Gets the description text element from the container.","values":[]},{"name":"font-weight","description":"Get the font weight for the data text","values":[]},{"name":"label","description":"Gets the label text from the attribute","values":[]},{"name":"show-colon","description":"Gets whether a colon is shown after the label","values":[]},{"name":"label-text","description":"Creates the HTML for the label text element with colon","values":[]}],"description":{"kind":"markdown","value":"# ids-data-label\n\n## Description\n\nThe ids-data-label is used to show a label and value for non-editable content.\n\n## Feature (With the Code Examples)\n\nShows a data label with one top label and one with a left label.\n\n```html\nLos Angeles, California 90001 USA\nLos Angeles, California 90001 USA\n```\n\nShows a data label that shows only data text without label\n```html\nLos Angeles, California 90001 USA\n```\n\n## Class Hierarchy\n\n- IdsDataLabel\n - IdsElement\n- Mixins\n IdsEventsMixin\n IdsLocaleMixin\n\n## Settings (Attributes)\n\n- `label` {string} Set label string\n- `font-weight` {string} Set data text font-weight, 'lighter' | 'bold' | 'semi-bold'\n- `label-position` {string} Controls the position of the label relative to the input field. Options are:\n - `top` (default): Label appears above the input field\n - `inline-start`: Label appears at the start of the input (left in LTR, right in RTL)\n - `inline-end`: Label appears at the end of the input (right in LTR, left in RTL)\n- `label-width` {string} Sets the width of the label when using inline positioning. Can be any valid CSS width value (e.g., '120px', '10rem', 'auto'). Default is '140px' when not specified.\n- `text-mask-character` {number} Specifies the number of characters to display unmasked at the end of the text content. Maximum value is 4 characters.\n- `mask-type` {'button-mask' | 'masked-only' | 'icon-mask'} Controls how sensitive text is displayed and revealed. Use `button-mask` to show a button with both icon and label, `icon-mask` to show only an icon button, or `masked-only` to display masked text without any reveal option.\n"}},{"name":"ids-date-picker-common","description":{"kind":"markdown","value":"# ids-date-picker\n\n## Description\n\nThe date picker supports date entry with input attributes (value, label, placeholder, disabled, readonly) and validation. See more [usage details](https://design.infor.com/components/components/datepicker).\n\n## Settings (Attributes)\n\n- `autoselect` {boolean} Set the text to auto select on focus. For more info see [ids-autoselect-mixin/README.md](../../mixins/ids-autoselect-mixin/README.md).\n- `colorVariant` {string} Sets the current color variant.\n- `compact` {boolean} Sets the component to be compact mode.\n- `fieldHeight` {string} Defines the field height. See [Ids Field Height Mixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-field-height-mixin/README.md) for more information.\n- `value` {string|null} - Input value\n- `placeholder` {true|false} - Whether or not to show date format as input placeholder\n- `label` {string|null} - Input label\n- `labelState` {string} indicates that a label is hidden (note that for accessibility reasons, `label` should still be specified). See [Ids Label State Mixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-label-state-mixin/README.md) for more information.\n- `labelWrap` {string} Controls how label text is displayed when it's too long for its container. Options are:\n - `wrap` (default): Label text wraps to multiple lines\n - `ellipsis`: Label text is truncated with ellipsis and shows full text in tooltip on hover\n - `wrap-no-stretch`: Label text wraps to multiple lines but doesn't stretch the container width\n - `ellipsis-no-stretch`: Label text is truncated with ellipsis but doesn't stretch the container width\n- `noMargins` {boolean} sets whether or not no-margins around the component.\n- `overflow` {string} Sets the overflow behavior for text content. When set to 'ellipsis', text will be truncated with ellipsis when it overflows the container.\n- `id` {string} - Input ID\n- `disabled` {true|false} - Whether or not the input should be disabled. Mutually exclusive with `readonly` — setting `disabled` removes `readonly`, and vice versa.\n- `hidden` {boolean} Hides the element from display\n- `readonly` {true|false} - Whether or not the input should be readonly. Mutually exclusive with `disabled` — setting `readonly` removes `disabled`, and vice versa.\n- `tabbable` {boolean} When set to `true`, allows the trigger button to be included in the tab order. By default, the trigger button is not tabbable, but for accessibility reasons it can be made tabbable when needed.\n- `size` {`xs`|`sm`|`mm`|`md`|`lg`|`full`} - Size (width) of the field. Default is `sm`\n- `validate` {'required'|'date'|'rangeDate'|string} - Input validation rules\n- `validation-events` {string} - Input validation events, `change blur` as default\n- `suppress-validation` {boolean} When set to `true`, clearing a field's value programmatically (e.g. `elem.value = ''`) does not trigger required validation errors. Default is `false`.\n- `format` {'locale'|string|null} - Input date format, if not set defaults to locale calendar date format. Examples: `yyyy-MM-dd`, `d/M/yyyy`, `dd/MM/yyyy`\n- `is-calendar-toolbar` {true|false} - Whether or not the component is used in calendar toolbar. Uses text instead of input\n- `month` `{string|number|null}` - Specifies a month for the popup calendar (`ids-month-view` attribute)\n- `day` `{string|number|null}` - Specifies a day for the popup calendar (`ids-month-view` attribute)\n- `year` `{string|number|null}` - Specifies a year for the popup calendar (`ids-month-view` attribute)\n- `first-day-of-week` `{string|number|null}` - Specifies first day of the week for the popup calendar, if not set the information comes from the locale (`ids-month-view` attribute)\n- `show-today` `{true|false}` - Whether or not to show the today button in the popup calendar (`ids-month-view` attribute)\n- `expanded` `{true|false}` - When the date picker is month/year picker it specifies whether or not the picker is expanded\n- `legend` - Set array of legend items:\n - `name` `{string}` - The name of the legend (required)\n - `color` `{string}` - The color of the legend, either hex or IDS variable excluding `--ids-color-` part i.e. `green-60` (required)\n - `dates` `{Array}` - Array of dates (either dates or dayOfWeek is required)\n - `dayOfWeek` `{Array}` - Array of days of week where 0 is Sunday (either dates or dayOfWeek is required)\n- `use-range` `{true|false}` - Whether or not the component should be a range picker. If set without settings default settings will apply.\n- `rangeSettings` `{Object}` - Range selection settings:\n - `start` `{string}` - start date of the range selection. Default is `null` not set\n - `end` `{string}` - end date of the range selection. Default is `null` not set\n - `separator` `{string}` - separator symbol for the input value i.e. `2/7/2018 - 2/22/2018` if separator is ` - `. Default is ` - `\n - `minDays` `{number}` - minimum number of days to select. Default is `0` not set\n - `maxDays` `{number}` - maximum number of days to select. Default is `0` not set\n - `selectForward` `{boolean}` - Whether or not the selection should be in forward direction. Default is `false`\n - `selectBackward` `{boolean}` - Whether or not the selection should be in backward direction. Default is `false`\n - `includeDisabled` `{boolean}` - Whether or not the selection should include disabled dates visually\n - `selectWeek` `{boolean}` - Whether or not the selection should include the whole week\n - `collapseSameDates` `{boolean}` - When start and end dates are the same, displays as single date (e.g., \"2/7/2018\") instead of range format (e.g., \"2/7/2018 - 2/7/2018\"). Default is `false`\n- `disableSettings` `{Object}` - Disable dates settings:\n - `dates` `{Array}` - Disable specific dates (in a format that can be converted to a date)\n - `years` `{Array}` - Disable specific years\n - `minDate` `{string}` - Disable up to a minimum date\n - `maxDate` `{string}` - Disable up to a maximum date\n - `dayOfWeek` `{Array}` - Disable a specific of days of the week 0-6\n - `isEnable` `{boolean}` - Enables the disabled dates. Default is false\n- `mask` `{string}` - Use input masking based on the `format` attribute to guide the input towards typing the date in the correct format. For example `mask=\"date\"` will allow only numbers and `/` character to be typed in the input field field if the format is `dd/MM/yyyy`\n- `minute-interval` {number} Set time picker minutes dropdown options interval\n- `second-interval` {number} Set time picker seconds dropdown options interval\n- `use-current-time` {true|false} - Set whether or not to show current time in the time picker dropdowns\n- `show-picklist-year` `{true|false}` Whether or not to show a list of years in the picklist, default if true\n- `show-picklist-month` `{true|false}` Whether or not to show a list of months in the picklist, default is true\n- `show-picklist-week` `{true|false}` Whether or not to show week numbers in the picklist\n- `show-apply` `{true|false}` Whether or not to show an apply button in the calendar popup. When enabled, date selection requires clicking the apply button to confirm. Keyboard navigation (arrow keys, Enter, Space) remains functional for selecting dates\n- `today-shortcut` `{true|false}` Set whether or not to enable t as a shortcut key in the datepicker\n- `tooltip` {string | Boolean} Sets a tooltip on the input field. If you want to show the tooltip when the text is overflowed, set the overflow=\"ellipsis\" and tooltip=\"true\". You can also provide custom tooltip text as a string.\n\n## Getters\n\n- `dateRange` - Returns an object containing `start` and `end` Date objects matching the field's current date-range\n\n## Methods\n\n- `open()` - opens calendar popup\n- `close()` - closes calendar popup\n\n## Events\n\n- `dayselected` - Fires when a day is selected or range selection is completed\n- `expanded` - Fires when a month/year picker is opened/closed\n- Event listeners for input (trigger field) `blur`, `change`, `focus`, `select`, `keydown`, `keypress`, `keyup`, `click`, `dbclick`, `beforetriggerclicked`, `triggerclicked` events can be added to `input` component property:\n\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\ndatePicker.input.addEventListener('change');\n```\n- Event listeners for popup `show`, `hide` events can be added to `popup` property:\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\ndatePicker.popup.addEventListener('show');\ndatePicker.popup.addEventListener('hide');\n```\n\n## Themeable Parts\n\n- `container` allows you to further style the container element of the component\n- `trigger-field` allows you to further style the trigger container\n- `trigger-button` allows you to further style the trigger button\n- `icon` allows you to further style the icon in the trigger button\n- `input` allows you to further style the input element\n- `popup` allows you to further style the popup element\n- `footer` - allows you to further style the popup footer\n- `btn-clear` - allows you to further style the clear button\n- `btn-apply ` - allows you to further style the apply button\n\n## Features (With Code Examples)\n\nWith no settings. Showing empty input field with no label or placeholder.\nCalendar popup highlights current date, the first day of week is based on the locale calendar.\n\n```html\n\n```\n\nControl how long labels are displayed with the label-wrap attribute:\n\n```html\n\n\n```\n\nFor text overflow with automatic tooltips, use the `overflow` and `tooltip` attributes together:\n\n```html\n\n\n```\n\nWith date form field settings. Required. Validation triggers on the input value change. Not tabbable.\n\n```html\n\n```\n\nWhen used in calendar toolbar.\n\n```html\n\n```\n\nEnable range selection with default settings.\n\n```html\n\n```\n\nEnable range selection with single date display when start and end are the same.\n\n```html\n\n```\n\n```js\nconst datePicker = document.querySelector('#datepicker-collapse');\ndatePicker.rangeSettings = {\n collapseSameDates: true\n};\n```\n\nThe component can be controlled dynamically\n\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\n// Set legend\ndatePicker.legend = [\n {\n name: 'Public Holiday',\n color: 'green-60',\n dates: ['12/31/2021', '12/24/2021', '1/1/2022'],\n },\n { name: 'Weekends', color: 'orange-60', dayOfWeek: [0, 6] },\n {\n name: 'Other',\n color: 'red-30',\n dates: ['1/8/2022', '1/9/2022', '1/23/2022'],\n },\n {\n name: 'Half Days',\n color: 'purple-60',\n dates: ['1/21/2022', '1/22/2022'],\n },\n {\n name: 'Full Days',\n color: '#1677ee',\n dates: ['1/24/2022', '1/25/2022'],\n }\n];\n\n// Unset legend\ndatePicker.legend = null;\n\n// Enable range selection and set range settings\ndatePicker.useRange = true;\ndatePicker.rangeSettings = {\n start: '12/24/2021',\n end: '1/25/2022'\n};\n\n// Disable range selection\ndatePicker.useRange = false;\n\n// Add disabled dates\ndatePicker.disableSettings = {\n dates: ['2/7/2018', '2/9/2018', '2/10/2018', '2/11/2018'],\n dayOfWeek: [0, 6],\n minDate: '2/6/2018',\n maxDate: '2/12/2018',\n years: [2017, 2018],\n isEnable: true\n}\n```\n\n## Keyboard Guidelines\n\n- Tab - becomes active by tabbing into it, if autoselect is on the text is selected.\n- Shift + Tab reverses the direction of the tab order. Once in the widget, a Shift + Tab will take the user to the previous focusable element in the tab order\n- Up and Down goes to the same day of the week in the previous or next week respectively. If the user advances past the end of the month they continue into the next or previous month as appropriate\n- Left Go to the previous day. Visually, focus is moved from day to day and wraps from row to row in a grid of days and weeks\n- Right Advances to the next day. Visually, focus is moved from day to day and wraps from row to row in a grid of days and weeks\n- Control + Page Up moves to the same date in the previous year\n- Control + Page Down moves to the same date in the next year\n- Space, in singleton mode, acts as a toggle either selecting or de-selecting the date. In contiguous mode, it behaves similar to selecting a range of text: Space selects the first date. Shift + Arrows add to the selection. Pressing Space again de-selects the previous selections and selects the current focused date. In non-contiguous mode, Space may be used to select multiple non-contiguous dates\n- Home moves to the first day of the current month\n- End moves to the last day of the current month\n- Page Up moves to the same date in the previous month\n- Page Down moves to the same date in the next month\n- Enter submits the form\n- Escape, in the case of a popup date picker, closes the widget without any action\n- T inserts today's date. Except for cases where date format includes wide/abbreviated months\n- + Is used to increment the day in the calendar. This is in addition to the Right. This works both when in the input field or when the calendar picker is open. If the date pattern contains a `-` in it then this key interferes with typing so this key shortcut is disabled.\n- - Is used to increment the day in the calendar. This is in addition to the Left. This works both when in the input field or when the calendar picker is open. If the date pattern contains a `-` in it then this key interferes with typing so this key shortcut is disabled.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- This is a new component for 4.x\n\n**4.x to 5.x**\n- Listeners for input and popup events should be added to references `input` and `popup` now. See Events section.\n- `disable/readonly/tabbable` are now attributes not methods\n- If using events, events are now plain JS events for example: change\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- Instead of `onOpenCalendar` callback there are `show`, `hide` popup plain JS events and a date for calendar can be set as date picker `year`, `month`, `day` settings when calendar popup is opened\n- To use date picker with time picker `format` attribute should contain time i.e. `M/d/yyyy hh:mm a`\n- Added week numbers option to the calendar picklist\n"}},{"name":"ids-date-picker-popup","attributes":[{"name":"expandable-area","values":[]},{"name":"month-view","values":[]},{"name":"month-year-picklist","values":[]},{"name":"timepicker","values":[]},{"name":"toolbar","values":[]},{"name":"button-set","values":[]},{"name":"trigger-field-input","values":[]},{"name":"currently-selected-picklist","values":[]},{"name":"#is-processing-today-btn","values":[]},{"name":"vetoable-event-types","values":[]},{"name":"buttons","values":[]},{"name":"show-today","description":"Set whether or not month view today button should be show","values":[]},{"name":"on-locale-change","values":[]},{"name":"popup-btn-group-el","values":[]},{"name":"apply-btn-el","values":[]},{"name":"cancel-btn-el","values":[]},{"name":"today-btn-el","values":[]},{"name":"expanded","description":"Set whether or not the month/year picker should be expanded","values":[]},{"name":"minute-interval","description":"Set interval in minutes dropdown","values":[]},{"name":"second-interval","description":"Set interval in seconds dropdown","values":[]},{"name":"show-clear","description":"Set whether or not to show clear button in the calendar popup","values":[]},{"name":"show-cancel","description":"Set whether or not to show cancel button when the picker is expanded","values":[]},{"name":"show-apply","description":"Set whether or not to show cancel button when the picker is expanded","values":[]},{"name":"show-picklist-year","description":"Whether or not to show a list of years in the picklist","values":[]},{"name":"show-picklist-month","description":"Whether or not to show a list of months in the picklist","values":[]},{"name":"show-picklist-week","description":"Whether or not to show week numbers in the picklist","values":[]},{"name":"use-current-time","description":"Set whether or not to show current time in the time picker","values":[]},{"name":"value","description":"Set Date Picker Popup's stored value. Should parse a date from the value.","values":[]},{"name":"position-style","values":[]},{"name":"show-week-numbers","values":[]}],"description":{"kind":"markdown","value":"# ids-date-picker\n\n## Description\n\nThe date picker supports date entry with input attributes (value, label, placeholder, disabled, readonly) and validation. See more [usage details](https://design.infor.com/components/components/datepicker).\n\n## Settings (Attributes)\n\n- `autoselect` {boolean} Set the text to auto select on focus. For more info see [ids-autoselect-mixin/README.md](../../mixins/ids-autoselect-mixin/README.md).\n- `colorVariant` {string} Sets the current color variant.\n- `compact` {boolean} Sets the component to be compact mode.\n- `fieldHeight` {string} Defines the field height. See [Ids Field Height Mixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-field-height-mixin/README.md) for more information.\n- `value` {string|null} - Input value\n- `placeholder` {true|false} - Whether or not to show date format as input placeholder\n- `label` {string|null} - Input label\n- `labelState` {string} indicates that a label is hidden (note that for accessibility reasons, `label` should still be specified). See [Ids Label State Mixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-label-state-mixin/README.md) for more information.\n- `labelWrap` {string} Controls how label text is displayed when it's too long for its container. Options are:\n - `wrap` (default): Label text wraps to multiple lines\n - `ellipsis`: Label text is truncated with ellipsis and shows full text in tooltip on hover\n - `wrap-no-stretch`: Label text wraps to multiple lines but doesn't stretch the container width\n - `ellipsis-no-stretch`: Label text is truncated with ellipsis but doesn't stretch the container width\n- `noMargins` {boolean} sets whether or not no-margins around the component.\n- `overflow` {string} Sets the overflow behavior for text content. When set to 'ellipsis', text will be truncated with ellipsis when it overflows the container.\n- `id` {string} - Input ID\n- `disabled` {true|false} - Whether or not the input should be disabled. Mutually exclusive with `readonly` — setting `disabled` removes `readonly`, and vice versa.\n- `hidden` {boolean} Hides the element from display\n- `readonly` {true|false} - Whether or not the input should be readonly. Mutually exclusive with `disabled` — setting `readonly` removes `disabled`, and vice versa.\n- `tabbable` {boolean} When set to `true`, allows the trigger button to be included in the tab order. By default, the trigger button is not tabbable, but for accessibility reasons it can be made tabbable when needed.\n- `size` {`xs`|`sm`|`mm`|`md`|`lg`|`full`} - Size (width) of the field. Default is `sm`\n- `validate` {'required'|'date'|'rangeDate'|string} - Input validation rules\n- `validation-events` {string} - Input validation events, `change blur` as default\n- `suppress-validation` {boolean} When set to `true`, clearing a field's value programmatically (e.g. `elem.value = ''`) does not trigger required validation errors. Default is `false`.\n- `format` {'locale'|string|null} - Input date format, if not set defaults to locale calendar date format. Examples: `yyyy-MM-dd`, `d/M/yyyy`, `dd/MM/yyyy`\n- `is-calendar-toolbar` {true|false} - Whether or not the component is used in calendar toolbar. Uses text instead of input\n- `month` `{string|number|null}` - Specifies a month for the popup calendar (`ids-month-view` attribute)\n- `day` `{string|number|null}` - Specifies a day for the popup calendar (`ids-month-view` attribute)\n- `year` `{string|number|null}` - Specifies a year for the popup calendar (`ids-month-view` attribute)\n- `first-day-of-week` `{string|number|null}` - Specifies first day of the week for the popup calendar, if not set the information comes from the locale (`ids-month-view` attribute)\n- `show-today` `{true|false}` - Whether or not to show the today button in the popup calendar (`ids-month-view` attribute)\n- `expanded` `{true|false}` - When the date picker is month/year picker it specifies whether or not the picker is expanded\n- `legend` - Set array of legend items:\n - `name` `{string}` - The name of the legend (required)\n - `color` `{string}` - The color of the legend, either hex or IDS variable excluding `--ids-color-` part i.e. `green-60` (required)\n - `dates` `{Array}` - Array of dates (either dates or dayOfWeek is required)\n - `dayOfWeek` `{Array}` - Array of days of week where 0 is Sunday (either dates or dayOfWeek is required)\n- `use-range` `{true|false}` - Whether or not the component should be a range picker. If set without settings default settings will apply.\n- `rangeSettings` `{Object}` - Range selection settings:\n - `start` `{string}` - start date of the range selection. Default is `null` not set\n - `end` `{string}` - end date of the range selection. Default is `null` not set\n - `separator` `{string}` - separator symbol for the input value i.e. `2/7/2018 - 2/22/2018` if separator is ` - `. Default is ` - `\n - `minDays` `{number}` - minimum number of days to select. Default is `0` not set\n - `maxDays` `{number}` - maximum number of days to select. Default is `0` not set\n - `selectForward` `{boolean}` - Whether or not the selection should be in forward direction. Default is `false`\n - `selectBackward` `{boolean}` - Whether or not the selection should be in backward direction. Default is `false`\n - `includeDisabled` `{boolean}` - Whether or not the selection should include disabled dates visually\n - `selectWeek` `{boolean}` - Whether or not the selection should include the whole week\n - `collapseSameDates` `{boolean}` - When start and end dates are the same, displays as single date (e.g., \"2/7/2018\") instead of range format (e.g., \"2/7/2018 - 2/7/2018\"). Default is `false`\n- `disableSettings` `{Object}` - Disable dates settings:\n - `dates` `{Array}` - Disable specific dates (in a format that can be converted to a date)\n - `years` `{Array}` - Disable specific years\n - `minDate` `{string}` - Disable up to a minimum date\n - `maxDate` `{string}` - Disable up to a maximum date\n - `dayOfWeek` `{Array}` - Disable a specific of days of the week 0-6\n - `isEnable` `{boolean}` - Enables the disabled dates. Default is false\n- `mask` `{string}` - Use input masking based on the `format` attribute to guide the input towards typing the date in the correct format. For example `mask=\"date\"` will allow only numbers and `/` character to be typed in the input field field if the format is `dd/MM/yyyy`\n- `minute-interval` {number} Set time picker minutes dropdown options interval\n- `second-interval` {number} Set time picker seconds dropdown options interval\n- `use-current-time` {true|false} - Set whether or not to show current time in the time picker dropdowns\n- `show-picklist-year` `{true|false}` Whether or not to show a list of years in the picklist, default if true\n- `show-picklist-month` `{true|false}` Whether or not to show a list of months in the picklist, default is true\n- `show-picklist-week` `{true|false}` Whether or not to show week numbers in the picklist\n- `show-apply` `{true|false}` Whether or not to show an apply button in the calendar popup. When enabled, date selection requires clicking the apply button to confirm. Keyboard navigation (arrow keys, Enter, Space) remains functional for selecting dates\n- `today-shortcut` `{true|false}` Set whether or not to enable t as a shortcut key in the datepicker\n- `tooltip` {string | Boolean} Sets a tooltip on the input field. If you want to show the tooltip when the text is overflowed, set the overflow=\"ellipsis\" and tooltip=\"true\". You can also provide custom tooltip text as a string.\n\n## Getters\n\n- `dateRange` - Returns an object containing `start` and `end` Date objects matching the field's current date-range\n\n## Methods\n\n- `open()` - opens calendar popup\n- `close()` - closes calendar popup\n\n## Events\n\n- `dayselected` - Fires when a day is selected or range selection is completed\n- `expanded` - Fires when a month/year picker is opened/closed\n- Event listeners for input (trigger field) `blur`, `change`, `focus`, `select`, `keydown`, `keypress`, `keyup`, `click`, `dbclick`, `beforetriggerclicked`, `triggerclicked` events can be added to `input` component property:\n\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\ndatePicker.input.addEventListener('change');\n```\n- Event listeners for popup `show`, `hide` events can be added to `popup` property:\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\ndatePicker.popup.addEventListener('show');\ndatePicker.popup.addEventListener('hide');\n```\n\n## Themeable Parts\n\n- `container` allows you to further style the container element of the component\n- `trigger-field` allows you to further style the trigger container\n- `trigger-button` allows you to further style the trigger button\n- `icon` allows you to further style the icon in the trigger button\n- `input` allows you to further style the input element\n- `popup` allows you to further style the popup element\n- `footer` - allows you to further style the popup footer\n- `btn-clear` - allows you to further style the clear button\n- `btn-apply ` - allows you to further style the apply button\n\n## Features (With Code Examples)\n\nWith no settings. Showing empty input field with no label or placeholder.\nCalendar popup highlights current date, the first day of week is based on the locale calendar.\n\n```html\n\n```\n\nControl how long labels are displayed with the label-wrap attribute:\n\n```html\n\n\n```\n\nFor text overflow with automatic tooltips, use the `overflow` and `tooltip` attributes together:\n\n```html\n\n\n```\n\nWith date form field settings. Required. Validation triggers on the input value change. Not tabbable.\n\n```html\n\n```\n\nWhen used in calendar toolbar.\n\n```html\n\n```\n\nEnable range selection with default settings.\n\n```html\n\n```\n\nEnable range selection with single date display when start and end are the same.\n\n```html\n\n```\n\n```js\nconst datePicker = document.querySelector('#datepicker-collapse');\ndatePicker.rangeSettings = {\n collapseSameDates: true\n};\n```\n\nThe component can be controlled dynamically\n\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\n// Set legend\ndatePicker.legend = [\n {\n name: 'Public Holiday',\n color: 'green-60',\n dates: ['12/31/2021', '12/24/2021', '1/1/2022'],\n },\n { name: 'Weekends', color: 'orange-60', dayOfWeek: [0, 6] },\n {\n name: 'Other',\n color: 'red-30',\n dates: ['1/8/2022', '1/9/2022', '1/23/2022'],\n },\n {\n name: 'Half Days',\n color: 'purple-60',\n dates: ['1/21/2022', '1/22/2022'],\n },\n {\n name: 'Full Days',\n color: '#1677ee',\n dates: ['1/24/2022', '1/25/2022'],\n }\n];\n\n// Unset legend\ndatePicker.legend = null;\n\n// Enable range selection and set range settings\ndatePicker.useRange = true;\ndatePicker.rangeSettings = {\n start: '12/24/2021',\n end: '1/25/2022'\n};\n\n// Disable range selection\ndatePicker.useRange = false;\n\n// Add disabled dates\ndatePicker.disableSettings = {\n dates: ['2/7/2018', '2/9/2018', '2/10/2018', '2/11/2018'],\n dayOfWeek: [0, 6],\n minDate: '2/6/2018',\n maxDate: '2/12/2018',\n years: [2017, 2018],\n isEnable: true\n}\n```\n\n## Keyboard Guidelines\n\n- Tab - becomes active by tabbing into it, if autoselect is on the text is selected.\n- Shift + Tab reverses the direction of the tab order. Once in the widget, a Shift + Tab will take the user to the previous focusable element in the tab order\n- Up and Down goes to the same day of the week in the previous or next week respectively. If the user advances past the end of the month they continue into the next or previous month as appropriate\n- Left Go to the previous day. Visually, focus is moved from day to day and wraps from row to row in a grid of days and weeks\n- Right Advances to the next day. Visually, focus is moved from day to day and wraps from row to row in a grid of days and weeks\n- Control + Page Up moves to the same date in the previous year\n- Control + Page Down moves to the same date in the next year\n- Space, in singleton mode, acts as a toggle either selecting or de-selecting the date. In contiguous mode, it behaves similar to selecting a range of text: Space selects the first date. Shift + Arrows add to the selection. Pressing Space again de-selects the previous selections and selects the current focused date. In non-contiguous mode, Space may be used to select multiple non-contiguous dates\n- Home moves to the first day of the current month\n- End moves to the last day of the current month\n- Page Up moves to the same date in the previous month\n- Page Down moves to the same date in the next month\n- Enter submits the form\n- Escape, in the case of a popup date picker, closes the widget without any action\n- T inserts today's date. Except for cases where date format includes wide/abbreviated months\n- + Is used to increment the day in the calendar. This is in addition to the Right. This works both when in the input field or when the calendar picker is open. If the date pattern contains a `-` in it then this key interferes with typing so this key shortcut is disabled.\n- - Is used to increment the day in the calendar. This is in addition to the Left. This works both when in the input field or when the calendar picker is open. If the date pattern contains a `-` in it then this key interferes with typing so this key shortcut is disabled.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- This is a new component for 4.x\n\n**4.x to 5.x**\n- Listeners for input and popup events should be added to references `input` and `popup` now. See Events section.\n- `disable/readonly/tabbable` are now attributes not methods\n- If using events, events are now plain JS events for example: change\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- Instead of `onOpenCalendar` callback there are `show`, `hide` popup plain JS events and a date for calendar can be set as date picker `year`, `month`, `day` settings when calendar popup is opened\n- To use date picker with time picker `format` attribute should contain time i.e. `M/d/yyyy hh:mm a`\n- Added week numbers option to the calendar picklist\n"}},{"name":"ids-date-picker","attributes":[{"name":"#last-valid-range-value","values":[]},{"name":"#is-initializing","values":[]},{"name":"is-form-component","values":[]},{"name":"picker","values":[]},{"name":"trigger-button","values":[]},{"name":"trigger-field","values":[]},{"name":"color-variants","description":"List of available color variants for this component","values":[]},{"name":"popup","description":"Get reference to the IdsPopup component","values":[]},{"name":"on-locale-change","description":"Handle locale changes by updating format and settings","values":[]},{"name":"on-language-change","description":"Handle language changes by updating validation","values":[]},{"name":"date-range","description":"Get an object containing start and end Date objects matching the field's current date-range","values":[]},{"name":"has-focus","description":"Check if input, dropdown or the calendar toolbar has focus","values":[]},{"name":"value","description":"Set input value. Should parse a date from the value\nSet dropdown button text if the component is dropdown\nSet text if the component is used in calendar toolbar","values":[]},{"name":"utc-date-value","description":"Set utcDateValue for Date objects and ISO strings with UTC conversion","values":[]},{"name":"placeholder","description":"Set input placeholder","values":[]},{"name":"disabled","description":"Set trigger field disabled attribute","values":[]},{"name":"readonly","description":"Set trigger field readonly attribute","values":[]},{"name":"size","description":"Set the size (width) of input","values":[]},{"name":"tabbable","description":"Set trigger field tabbable attribute","values":[]},{"name":"validate","description":"Set trigger field/input validation","values":[]},{"name":"validation-events","description":"Set which input events to fire validation on","values":[]},{"name":"show-today","description":"Set whether or not month view today button should be show","values":[]},{"name":"margin-block-end","description":"Gets the margin-block-end token key","values":[]},{"name":"no-margins","description":"Get the no margins state","values":[]},{"name":"overflow","description":"Get the overflow behavior","values":[]},{"name":"tooltip","description":"Get the tooltip text or behavior","values":[]},{"name":"input","description":"Get reference to the IdsTriggerField","values":[]},{"name":"mask","description":"Enable/disable date mask for the input","values":[]},{"name":"minute-interval","description":"Set interval in minutes dropdown","values":[]},{"name":"second-interval","description":"Set interval in seconds dropdown","values":[]},{"name":"show-clear","description":"Set whether or not to show clear button in the calendar popup","values":[]},{"name":"show-cancel","description":"Set whether or not to show cancel button when the picker is expanded","values":[]},{"name":"show-apply","description":"Set whether or not to show cancel button when the picker is expanded","values":[]},{"name":"show-picklist-year","description":"Whether or not to show a list of years in the picklist","values":[]},{"name":"show-picklist-month","description":"Whether or not to show a list of months in the picklist","values":[]},{"name":"show-picklist-week","description":"Whether or not to show week numbers in the picklist","values":[]},{"name":"use-current-time","description":"Set whether or not to show current time in the time picker","values":[]},{"name":"show-week-numbers","description":"Get the show week numbers state","values":[]},{"name":"today-shortcut","description":"Get the today shortcut state","values":[]}],"description":{"kind":"markdown","value":"# ids-date-picker\n\n## Description\n\nThe date picker supports date entry with input attributes (value, label, placeholder, disabled, readonly) and validation. See more [usage details](https://design.infor.com/components/components/datepicker).\n\n## Settings (Attributes)\n\n- `autoselect` {boolean} Set the text to auto select on focus. For more info see [ids-autoselect-mixin/README.md](../../mixins/ids-autoselect-mixin/README.md).\n- `colorVariant` {string} Sets the current color variant.\n- `compact` {boolean} Sets the component to be compact mode.\n- `fieldHeight` {string} Defines the field height. See [Ids Field Height Mixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-field-height-mixin/README.md) for more information.\n- `value` {string|null} - Input value\n- `placeholder` {true|false} - Whether or not to show date format as input placeholder\n- `label` {string|null} - Input label\n- `labelState` {string} indicates that a label is hidden (note that for accessibility reasons, `label` should still be specified). See [Ids Label State Mixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-label-state-mixin/README.md) for more information.\n- `labelWrap` {string} Controls how label text is displayed when it's too long for its container. Options are:\n - `wrap` (default): Label text wraps to multiple lines\n - `ellipsis`: Label text is truncated with ellipsis and shows full text in tooltip on hover\n - `wrap-no-stretch`: Label text wraps to multiple lines but doesn't stretch the container width\n - `ellipsis-no-stretch`: Label text is truncated with ellipsis but doesn't stretch the container width\n- `noMargins` {boolean} sets whether or not no-margins around the component.\n- `overflow` {string} Sets the overflow behavior for text content. When set to 'ellipsis', text will be truncated with ellipsis when it overflows the container.\n- `id` {string} - Input ID\n- `disabled` {true|false} - Whether or not the input should be disabled. Mutually exclusive with `readonly` — setting `disabled` removes `readonly`, and vice versa.\n- `hidden` {boolean} Hides the element from display\n- `readonly` {true|false} - Whether or not the input should be readonly. Mutually exclusive with `disabled` — setting `readonly` removes `disabled`, and vice versa.\n- `tabbable` {boolean} When set to `true`, allows the trigger button to be included in the tab order. By default, the trigger button is not tabbable, but for accessibility reasons it can be made tabbable when needed.\n- `size` {`xs`|`sm`|`mm`|`md`|`lg`|`full`} - Size (width) of the field. Default is `sm`\n- `validate` {'required'|'date'|'rangeDate'|string} - Input validation rules\n- `validation-events` {string} - Input validation events, `change blur` as default\n- `suppress-validation` {boolean} When set to `true`, clearing a field's value programmatically (e.g. `elem.value = ''`) does not trigger required validation errors. Default is `false`.\n- `format` {'locale'|string|null} - Input date format, if not set defaults to locale calendar date format. Examples: `yyyy-MM-dd`, `d/M/yyyy`, `dd/MM/yyyy`\n- `is-calendar-toolbar` {true|false} - Whether or not the component is used in calendar toolbar. Uses text instead of input\n- `month` `{string|number|null}` - Specifies a month for the popup calendar (`ids-month-view` attribute)\n- `day` `{string|number|null}` - Specifies a day for the popup calendar (`ids-month-view` attribute)\n- `year` `{string|number|null}` - Specifies a year for the popup calendar (`ids-month-view` attribute)\n- `first-day-of-week` `{string|number|null}` - Specifies first day of the week for the popup calendar, if not set the information comes from the locale (`ids-month-view` attribute)\n- `show-today` `{true|false}` - Whether or not to show the today button in the popup calendar (`ids-month-view` attribute)\n- `expanded` `{true|false}` - When the date picker is month/year picker it specifies whether or not the picker is expanded\n- `legend` - Set array of legend items:\n - `name` `{string}` - The name of the legend (required)\n - `color` `{string}` - The color of the legend, either hex or IDS variable excluding `--ids-color-` part i.e. `green-60` (required)\n - `dates` `{Array}` - Array of dates (either dates or dayOfWeek is required)\n - `dayOfWeek` `{Array}` - Array of days of week where 0 is Sunday (either dates or dayOfWeek is required)\n- `use-range` `{true|false}` - Whether or not the component should be a range picker. If set without settings default settings will apply.\n- `rangeSettings` `{Object}` - Range selection settings:\n - `start` `{string}` - start date of the range selection. Default is `null` not set\n - `end` `{string}` - end date of the range selection. Default is `null` not set\n - `separator` `{string}` - separator symbol for the input value i.e. `2/7/2018 - 2/22/2018` if separator is ` - `. Default is ` - `\n - `minDays` `{number}` - minimum number of days to select. Default is `0` not set\n - `maxDays` `{number}` - maximum number of days to select. Default is `0` not set\n - `selectForward` `{boolean}` - Whether or not the selection should be in forward direction. Default is `false`\n - `selectBackward` `{boolean}` - Whether or not the selection should be in backward direction. Default is `false`\n - `includeDisabled` `{boolean}` - Whether or not the selection should include disabled dates visually\n - `selectWeek` `{boolean}` - Whether or not the selection should include the whole week\n - `collapseSameDates` `{boolean}` - When start and end dates are the same, displays as single date (e.g., \"2/7/2018\") instead of range format (e.g., \"2/7/2018 - 2/7/2018\"). Default is `false`\n- `disableSettings` `{Object}` - Disable dates settings:\n - `dates` `{Array}` - Disable specific dates (in a format that can be converted to a date)\n - `years` `{Array}` - Disable specific years\n - `minDate` `{string}` - Disable up to a minimum date\n - `maxDate` `{string}` - Disable up to a maximum date\n - `dayOfWeek` `{Array}` - Disable a specific of days of the week 0-6\n - `isEnable` `{boolean}` - Enables the disabled dates. Default is false\n- `mask` `{string}` - Use input masking based on the `format` attribute to guide the input towards typing the date in the correct format. For example `mask=\"date\"` will allow only numbers and `/` character to be typed in the input field field if the format is `dd/MM/yyyy`\n- `minute-interval` {number} Set time picker minutes dropdown options interval\n- `second-interval` {number} Set time picker seconds dropdown options interval\n- `use-current-time` {true|false} - Set whether or not to show current time in the time picker dropdowns\n- `show-picklist-year` `{true|false}` Whether or not to show a list of years in the picklist, default if true\n- `show-picklist-month` `{true|false}` Whether or not to show a list of months in the picklist, default is true\n- `show-picklist-week` `{true|false}` Whether or not to show week numbers in the picklist\n- `show-apply` `{true|false}` Whether or not to show an apply button in the calendar popup. When enabled, date selection requires clicking the apply button to confirm. Keyboard navigation (arrow keys, Enter, Space) remains functional for selecting dates\n- `today-shortcut` `{true|false}` Set whether or not to enable t as a shortcut key in the datepicker\n- `tooltip` {string | Boolean} Sets a tooltip on the input field. If you want to show the tooltip when the text is overflowed, set the overflow=\"ellipsis\" and tooltip=\"true\". You can also provide custom tooltip text as a string.\n\n## Getters\n\n- `dateRange` - Returns an object containing `start` and `end` Date objects matching the field's current date-range\n\n## Methods\n\n- `open()` - opens calendar popup\n- `close()` - closes calendar popup\n\n## Events\n\n- `dayselected` - Fires when a day is selected or range selection is completed\n- `expanded` - Fires when a month/year picker is opened/closed\n- Event listeners for input (trigger field) `blur`, `change`, `focus`, `select`, `keydown`, `keypress`, `keyup`, `click`, `dbclick`, `beforetriggerclicked`, `triggerclicked` events can be added to `input` component property:\n\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\ndatePicker.input.addEventListener('change');\n```\n- Event listeners for popup `show`, `hide` events can be added to `popup` property:\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\ndatePicker.popup.addEventListener('show');\ndatePicker.popup.addEventListener('hide');\n```\n\n## Themeable Parts\n\n- `container` allows you to further style the container element of the component\n- `trigger-field` allows you to further style the trigger container\n- `trigger-button` allows you to further style the trigger button\n- `icon` allows you to further style the icon in the trigger button\n- `input` allows you to further style the input element\n- `popup` allows you to further style the popup element\n- `footer` - allows you to further style the popup footer\n- `btn-clear` - allows you to further style the clear button\n- `btn-apply ` - allows you to further style the apply button\n\n## Features (With Code Examples)\n\nWith no settings. Showing empty input field with no label or placeholder.\nCalendar popup highlights current date, the first day of week is based on the locale calendar.\n\n```html\n\n```\n\nControl how long labels are displayed with the label-wrap attribute:\n\n```html\n\n\n```\n\nFor text overflow with automatic tooltips, use the `overflow` and `tooltip` attributes together:\n\n```html\n\n\n```\n\nWith date form field settings. Required. Validation triggers on the input value change. Not tabbable.\n\n```html\n\n```\n\nWhen used in calendar toolbar.\n\n```html\n\n```\n\nEnable range selection with default settings.\n\n```html\n\n```\n\nEnable range selection with single date display when start and end are the same.\n\n```html\n\n```\n\n```js\nconst datePicker = document.querySelector('#datepicker-collapse');\ndatePicker.rangeSettings = {\n collapseSameDates: true\n};\n```\n\nThe component can be controlled dynamically\n\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\n// Set legend\ndatePicker.legend = [\n {\n name: 'Public Holiday',\n color: 'green-60',\n dates: ['12/31/2021', '12/24/2021', '1/1/2022'],\n },\n { name: 'Weekends', color: 'orange-60', dayOfWeek: [0, 6] },\n {\n name: 'Other',\n color: 'red-30',\n dates: ['1/8/2022', '1/9/2022', '1/23/2022'],\n },\n {\n name: 'Half Days',\n color: 'purple-60',\n dates: ['1/21/2022', '1/22/2022'],\n },\n {\n name: 'Full Days',\n color: '#1677ee',\n dates: ['1/24/2022', '1/25/2022'],\n }\n];\n\n// Unset legend\ndatePicker.legend = null;\n\n// Enable range selection and set range settings\ndatePicker.useRange = true;\ndatePicker.rangeSettings = {\n start: '12/24/2021',\n end: '1/25/2022'\n};\n\n// Disable range selection\ndatePicker.useRange = false;\n\n// Add disabled dates\ndatePicker.disableSettings = {\n dates: ['2/7/2018', '2/9/2018', '2/10/2018', '2/11/2018'],\n dayOfWeek: [0, 6],\n minDate: '2/6/2018',\n maxDate: '2/12/2018',\n years: [2017, 2018],\n isEnable: true\n}\n```\n\n## Keyboard Guidelines\n\n- Tab - becomes active by tabbing into it, if autoselect is on the text is selected.\n- Shift + Tab reverses the direction of the tab order. Once in the widget, a Shift + Tab will take the user to the previous focusable element in the tab order\n- Up and Down goes to the same day of the week in the previous or next week respectively. If the user advances past the end of the month they continue into the next or previous month as appropriate\n- Left Go to the previous day. Visually, focus is moved from day to day and wraps from row to row in a grid of days and weeks\n- Right Advances to the next day. Visually, focus is moved from day to day and wraps from row to row in a grid of days and weeks\n- Control + Page Up moves to the same date in the previous year\n- Control + Page Down moves to the same date in the next year\n- Space, in singleton mode, acts as a toggle either selecting or de-selecting the date. In contiguous mode, it behaves similar to selecting a range of text: Space selects the first date. Shift + Arrows add to the selection. Pressing Space again de-selects the previous selections and selects the current focused date. In non-contiguous mode, Space may be used to select multiple non-contiguous dates\n- Home moves to the first day of the current month\n- End moves to the last day of the current month\n- Page Up moves to the same date in the previous month\n- Page Down moves to the same date in the next month\n- Enter submits the form\n- Escape, in the case of a popup date picker, closes the widget without any action\n- T inserts today's date. Except for cases where date format includes wide/abbreviated months\n- + Is used to increment the day in the calendar. This is in addition to the Right. This works both when in the input field or when the calendar picker is open. If the date pattern contains a `-` in it then this key interferes with typing so this key shortcut is disabled.\n- - Is used to increment the day in the calendar. This is in addition to the Left. This works both when in the input field or when the calendar picker is open. If the date pattern contains a `-` in it then this key interferes with typing so this key shortcut is disabled.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- This is a new component for 4.x\n\n**4.x to 5.x**\n- Listeners for input and popup events should be added to references `input` and `popup` now. See Events section.\n- `disable/readonly/tabbable` are now attributes not methods\n- If using events, events are now plain JS events for example: change\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- Instead of `onOpenCalendar` callback there are `show`, `hide` popup plain JS events and a date for calendar can be set as date picker `year`, `month`, `day` settings when calendar popup is opened\n- To use date picker with time picker `format` attribute should contain time i.e. `M/d/yyyy hh:mm a`\n- Added week numbers option to the calendar picklist\n"}},{"name":"ids-month-year-picklist","attributes":[{"name":"disabled","description":"Set trigger field disabled attribute","values":[]},{"name":"show-picklist-year","description":"Whether or not to show a list of years in the picklist","values":[]},{"name":"show-picklist-month","description":"Whether or not to show a list of months in the picklist","values":[]},{"name":"show-picklist-week","description":"Whether or not to show week numbers in the picklist","values":[]},{"name":"on-locale-change","description":"Handle locale changes by refreshing picklist content","values":[]},{"name":"visible","description":"Set the visible state of the picklist","values":[]},{"name":"state","values":[]}],"description":{"kind":"markdown","value":"# ids-date-picker\n\n## Description\n\nThe date picker supports date entry with input attributes (value, label, placeholder, disabled, readonly) and validation. See more [usage details](https://design.infor.com/components/components/datepicker).\n\n## Settings (Attributes)\n\n- `autoselect` {boolean} Set the text to auto select on focus. For more info see [ids-autoselect-mixin/README.md](../../mixins/ids-autoselect-mixin/README.md).\n- `colorVariant` {string} Sets the current color variant.\n- `compact` {boolean} Sets the component to be compact mode.\n- `fieldHeight` {string} Defines the field height. See [Ids Field Height Mixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-field-height-mixin/README.md) for more information.\n- `value` {string|null} - Input value\n- `placeholder` {true|false} - Whether or not to show date format as input placeholder\n- `label` {string|null} - Input label\n- `labelState` {string} indicates that a label is hidden (note that for accessibility reasons, `label` should still be specified). See [Ids Label State Mixin](https://oxford.awsdev.infor.com/infor-design/enterprise-wc/-/tree/main//src/mixins/ids-label-state-mixin/README.md) for more information.\n- `labelWrap` {string} Controls how label text is displayed when it's too long for its container. Options are:\n - `wrap` (default): Label text wraps to multiple lines\n - `ellipsis`: Label text is truncated with ellipsis and shows full text in tooltip on hover\n - `wrap-no-stretch`: Label text wraps to multiple lines but doesn't stretch the container width\n - `ellipsis-no-stretch`: Label text is truncated with ellipsis but doesn't stretch the container width\n- `noMargins` {boolean} sets whether or not no-margins around the component.\n- `overflow` {string} Sets the overflow behavior for text content. When set to 'ellipsis', text will be truncated with ellipsis when it overflows the container.\n- `id` {string} - Input ID\n- `disabled` {true|false} - Whether or not the input should be disabled. Mutually exclusive with `readonly` — setting `disabled` removes `readonly`, and vice versa.\n- `hidden` {boolean} Hides the element from display\n- `readonly` {true|false} - Whether or not the input should be readonly. Mutually exclusive with `disabled` — setting `readonly` removes `disabled`, and vice versa.\n- `tabbable` {boolean} When set to `true`, allows the trigger button to be included in the tab order. By default, the trigger button is not tabbable, but for accessibility reasons it can be made tabbable when needed.\n- `size` {`xs`|`sm`|`mm`|`md`|`lg`|`full`} - Size (width) of the field. Default is `sm`\n- `validate` {'required'|'date'|'rangeDate'|string} - Input validation rules\n- `validation-events` {string} - Input validation events, `change blur` as default\n- `suppress-validation` {boolean} When set to `true`, clearing a field's value programmatically (e.g. `elem.value = ''`) does not trigger required validation errors. Default is `false`.\n- `format` {'locale'|string|null} - Input date format, if not set defaults to locale calendar date format. Examples: `yyyy-MM-dd`, `d/M/yyyy`, `dd/MM/yyyy`\n- `is-calendar-toolbar` {true|false} - Whether or not the component is used in calendar toolbar. Uses text instead of input\n- `month` `{string|number|null}` - Specifies a month for the popup calendar (`ids-month-view` attribute)\n- `day` `{string|number|null}` - Specifies a day for the popup calendar (`ids-month-view` attribute)\n- `year` `{string|number|null}` - Specifies a year for the popup calendar (`ids-month-view` attribute)\n- `first-day-of-week` `{string|number|null}` - Specifies first day of the week for the popup calendar, if not set the information comes from the locale (`ids-month-view` attribute)\n- `show-today` `{true|false}` - Whether or not to show the today button in the popup calendar (`ids-month-view` attribute)\n- `expanded` `{true|false}` - When the date picker is month/year picker it specifies whether or not the picker is expanded\n- `legend` - Set array of legend items:\n - `name` `{string}` - The name of the legend (required)\n - `color` `{string}` - The color of the legend, either hex or IDS variable excluding `--ids-color-` part i.e. `green-60` (required)\n - `dates` `{Array}` - Array of dates (either dates or dayOfWeek is required)\n - `dayOfWeek` `{Array}` - Array of days of week where 0 is Sunday (either dates or dayOfWeek is required)\n- `use-range` `{true|false}` - Whether or not the component should be a range picker. If set without settings default settings will apply.\n- `rangeSettings` `{Object}` - Range selection settings:\n - `start` `{string}` - start date of the range selection. Default is `null` not set\n - `end` `{string}` - end date of the range selection. Default is `null` not set\n - `separator` `{string}` - separator symbol for the input value i.e. `2/7/2018 - 2/22/2018` if separator is ` - `. Default is ` - `\n - `minDays` `{number}` - minimum number of days to select. Default is `0` not set\n - `maxDays` `{number}` - maximum number of days to select. Default is `0` not set\n - `selectForward` `{boolean}` - Whether or not the selection should be in forward direction. Default is `false`\n - `selectBackward` `{boolean}` - Whether or not the selection should be in backward direction. Default is `false`\n - `includeDisabled` `{boolean}` - Whether or not the selection should include disabled dates visually\n - `selectWeek` `{boolean}` - Whether or not the selection should include the whole week\n - `collapseSameDates` `{boolean}` - When start and end dates are the same, displays as single date (e.g., \"2/7/2018\") instead of range format (e.g., \"2/7/2018 - 2/7/2018\"). Default is `false`\n- `disableSettings` `{Object}` - Disable dates settings:\n - `dates` `{Array}` - Disable specific dates (in a format that can be converted to a date)\n - `years` `{Array}` - Disable specific years\n - `minDate` `{string}` - Disable up to a minimum date\n - `maxDate` `{string}` - Disable up to a maximum date\n - `dayOfWeek` `{Array}` - Disable a specific of days of the week 0-6\n - `isEnable` `{boolean}` - Enables the disabled dates. Default is false\n- `mask` `{string}` - Use input masking based on the `format` attribute to guide the input towards typing the date in the correct format. For example `mask=\"date\"` will allow only numbers and `/` character to be typed in the input field field if the format is `dd/MM/yyyy`\n- `minute-interval` {number} Set time picker minutes dropdown options interval\n- `second-interval` {number} Set time picker seconds dropdown options interval\n- `use-current-time` {true|false} - Set whether or not to show current time in the time picker dropdowns\n- `show-picklist-year` `{true|false}` Whether or not to show a list of years in the picklist, default if true\n- `show-picklist-month` `{true|false}` Whether or not to show a list of months in the picklist, default is true\n- `show-picklist-week` `{true|false}` Whether or not to show week numbers in the picklist\n- `show-apply` `{true|false}` Whether or not to show an apply button in the calendar popup. When enabled, date selection requires clicking the apply button to confirm. Keyboard navigation (arrow keys, Enter, Space) remains functional for selecting dates\n- `today-shortcut` `{true|false}` Set whether or not to enable t as a shortcut key in the datepicker\n- `tooltip` {string | Boolean} Sets a tooltip on the input field. If you want to show the tooltip when the text is overflowed, set the overflow=\"ellipsis\" and tooltip=\"true\". You can also provide custom tooltip text as a string.\n\n## Getters\n\n- `dateRange` - Returns an object containing `start` and `end` Date objects matching the field's current date-range\n\n## Methods\n\n- `open()` - opens calendar popup\n- `close()` - closes calendar popup\n\n## Events\n\n- `dayselected` - Fires when a day is selected or range selection is completed\n- `expanded` - Fires when a month/year picker is opened/closed\n- Event listeners for input (trigger field) `blur`, `change`, `focus`, `select`, `keydown`, `keypress`, `keyup`, `click`, `dbclick`, `beforetriggerclicked`, `triggerclicked` events can be added to `input` component property:\n\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\ndatePicker.input.addEventListener('change');\n```\n- Event listeners for popup `show`, `hide` events can be added to `popup` property:\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\ndatePicker.popup.addEventListener('show');\ndatePicker.popup.addEventListener('hide');\n```\n\n## Themeable Parts\n\n- `container` allows you to further style the container element of the component\n- `trigger-field` allows you to further style the trigger container\n- `trigger-button` allows you to further style the trigger button\n- `icon` allows you to further style the icon in the trigger button\n- `input` allows you to further style the input element\n- `popup` allows you to further style the popup element\n- `footer` - allows you to further style the popup footer\n- `btn-clear` - allows you to further style the clear button\n- `btn-apply ` - allows you to further style the apply button\n\n## Features (With Code Examples)\n\nWith no settings. Showing empty input field with no label or placeholder.\nCalendar popup highlights current date, the first day of week is based on the locale calendar.\n\n```html\n\n```\n\nControl how long labels are displayed with the label-wrap attribute:\n\n```html\n\n\n```\n\nFor text overflow with automatic tooltips, use the `overflow` and `tooltip` attributes together:\n\n```html\n\n\n```\n\nWith date form field settings. Required. Validation triggers on the input value change. Not tabbable.\n\n```html\n\n```\n\nWhen used in calendar toolbar.\n\n```html\n\n```\n\nEnable range selection with default settings.\n\n```html\n\n```\n\nEnable range selection with single date display when start and end are the same.\n\n```html\n\n```\n\n```js\nconst datePicker = document.querySelector('#datepicker-collapse');\ndatePicker.rangeSettings = {\n collapseSameDates: true\n};\n```\n\nThe component can be controlled dynamically\n\n```js\nconst datePicker = document.querySelector('ids-date-picker');\n\n// Set legend\ndatePicker.legend = [\n {\n name: 'Public Holiday',\n color: 'green-60',\n dates: ['12/31/2021', '12/24/2021', '1/1/2022'],\n },\n { name: 'Weekends', color: 'orange-60', dayOfWeek: [0, 6] },\n {\n name: 'Other',\n color: 'red-30',\n dates: ['1/8/2022', '1/9/2022', '1/23/2022'],\n },\n {\n name: 'Half Days',\n color: 'purple-60',\n dates: ['1/21/2022', '1/22/2022'],\n },\n {\n name: 'Full Days',\n color: '#1677ee',\n dates: ['1/24/2022', '1/25/2022'],\n }\n];\n\n// Unset legend\ndatePicker.legend = null;\n\n// Enable range selection and set range settings\ndatePicker.useRange = true;\ndatePicker.rangeSettings = {\n start: '12/24/2021',\n end: '1/25/2022'\n};\n\n// Disable range selection\ndatePicker.useRange = false;\n\n// Add disabled dates\ndatePicker.disableSettings = {\n dates: ['2/7/2018', '2/9/2018', '2/10/2018', '2/11/2018'],\n dayOfWeek: [0, 6],\n minDate: '2/6/2018',\n maxDate: '2/12/2018',\n years: [2017, 2018],\n isEnable: true\n}\n```\n\n## Keyboard Guidelines\n\n- Tab - becomes active by tabbing into it, if autoselect is on the text is selected.\n- Shift + Tab reverses the direction of the tab order. Once in the widget, a Shift + Tab will take the user to the previous focusable element in the tab order\n- Up and Down goes to the same day of the week in the previous or next week respectively. If the user advances past the end of the month they continue into the next or previous month as appropriate\n- Left Go to the previous day. Visually, focus is moved from day to day and wraps from row to row in a grid of days and weeks\n- Right Advances to the next day. Visually, focus is moved from day to day and wraps from row to row in a grid of days and weeks\n- Control + Page Up moves to the same date in the previous year\n- Control + Page Down moves to the same date in the next year\n- Space, in singleton mode, acts as a toggle either selecting or de-selecting the date. In contiguous mode, it behaves similar to selecting a range of text: Space selects the first date. Shift + Arrows add to the selection. Pressing Space again de-selects the previous selections and selects the current focused date. In non-contiguous mode, Space may be used to select multiple non-contiguous dates\n- Home moves to the first day of the current month\n- End moves to the last day of the current month\n- Page Up moves to the same date in the previous month\n- Page Down moves to the same date in the next month\n- Enter submits the form\n- Escape, in the case of a popup date picker, closes the widget without any action\n- T inserts today's date. Except for cases where date format includes wide/abbreviated months\n- + Is used to increment the day in the calendar. This is in addition to the Right. This works both when in the input field or when the calendar picker is open. If the date pattern contains a `-` in it then this key interferes with typing so this key shortcut is disabled.\n- - Is used to increment the day in the calendar. This is in addition to the Left. This works both when in the input field or when the calendar picker is open. If the date pattern contains a `-` in it then this key interferes with typing so this key shortcut is disabled.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n- This is a new component for 4.x\n\n**4.x to 5.x**\n- Listeners for input and popup events should be added to references `input` and `popup` now. See Events section.\n- `disable/readonly/tabbable` are now attributes not methods\n- If using events, events are now plain JS events for example: change\n- Markup has changed to a custom element ``\n- Can now be imported as a single JS file and used with encapsulated styles\n- Instead of `onOpenCalendar` callback there are `show`, `hide` popup plain JS events and a date for calendar can be set as date picker `year`, `month`, `day` settings when calendar popup is opened\n- To use date picker with time picker `format` attribute should contain time i.e. `M/d/yyyy hh:mm a`\n- Added week numbers option to the calendar picklist\n"}},{"name":"ids-draggable","attributes":[{"name":"#relative-bounds","values":[]},{"name":"axis","description":"Get the axis that the draggable content will be moving along","values":[]},{"name":"parent-containment","description":"Get whether the draggable should be limited in range by its parent element","values":[]},{"name":"position-style","description":"Get the current position style","values":[]},{"name":"disabled","description":"Get whether draggable functionality is disabled","values":[]},{"name":"handle","description":"Get the query selector for the optional handle","values":[]},{"name":"#update-handle-elem","values":[]},{"name":"min-transform-x","description":"Get the minimum transform X value","values":[]},{"name":"max-transform-x","description":"Get the maximum transform X value","values":[]},{"name":"min-transform-y","description":"Get the minimum transform Y value","values":[]},{"name":"max-transform-y","description":"Set the maximum transform Y value","values":[]},{"name":"#update-transform","description":"update the transform with respect to containment\nand min/max transform bounds","values":[]},{"name":"on-mouse-move","description":"called on mouse move; transforms element for\ntransition offset and updates cursor overlay\nelement as necessary","values":[]},{"name":"on-touch-move","description":"called on touch move; transforms element for\ntransition offset","values":[]},{"name":"on-mouse-up","description":"Mouse up event handler","values":[]},{"name":"on-touch-end","description":"Touch end event handler","values":[]},{"name":"is-dragging","description":"Get whether this element is currently being dragged","values":[]},{"name":"#handle-elem","description":"Element that is currently draggable;\nif \"handle\" becomes it possibly becomes the selected element.\n\nOtherwise it defaults to the overall draggable container (this)","values":[]},{"name":"#parent-rect","description":"First measurable parent's rectangle\nwhen a drag is initiated","values":[]},{"name":"#drag-start-mouse-point","description":"The point where we start dragging on the mouse\nto delta from for current tracking.","values":[]},{"name":"#drag-start-offset","description":"The transform translation point applied at\nthe time of a dragstart in order to calculate\ndelta during drag","values":[]},{"name":"#drag-start-rect","description":"The bounding rectangle of this component at the\ntime of a dragstart offset by translate (so\nits original position in the div on start of drag)","values":[]},{"name":"#xform-bounds","description":"Rectangle bounds that transform is limited to if drag\nis bounded by parent","values":[]},{"name":"#cursor-el","description":"Element which provides cursor for mouse when\ndragging after mousedown event since we can\nbind to X/Y axes and there's no way to override\nthe behavior","values":[]},{"name":"relative-bounds","description":"Get the relative bounds","values":[]}],"description":{"kind":"markdown","value":"# Ids Draggable\n\n## Description\n\nA container which limits and tracks the dragging of an HTML Element along a specific axis or within the bounds of it's parent element. Supports both mouse and touch interactions for desktop and mobile devices.\n\n## Use Cases\n\nA draggable would be used in the case where you may have a pane splitter (e.g. in `ids-splitter`, internally), or a list that is meant to be dragged along a specific axis. It may also be used in many cases where we have a canvas or pane that should be resized (in one or two dimensions).\n\nIt does not currently support drag/drop targets in the current iteration, but in the future this component may be used for moving items.\n\n## Features (With Code Examples)\n\nA draggable component with no bounds to where it is moved.\n```html\n \n
\n Drag Me\n
\n\n```\n\nA draggable component along the X axis (e.g. drags horizontally).\n```html\n\n
\n Horizontally Draggable\n
\n\n```\n\nA draggable component along the Y axis (e.g. drags vertically).\n```html\n\n
\n Vertically Draggable\n
\n\n```\n\nA draggable component which can be dragged either horizontally or vertically\nbut is contained by it's first non zero-width/height parent (can also work for non-`
`, but cannot be a controlled `ids-layout-grid-cell`).\n```html\n
\n \n
\n Vertically Draggable
\n \n
\n```\n\nA draggable component which is draggable only by a specific handle on the tab (note: a draggable component currently has a limitation of one handle element, even if the class matches multiple handles).\n```html\n
\n \n
\n \n \n All-content drags, but only .drag-handle is draggable\n \n
\n \n
\n```\n\n## Settings and Attributes\n\n- `parent-containment` {boolean} Flags this draggable as having drag range being contained only within the first/closest inner parent of the content with a measurable width or height.\n- `is-draggable` {boolean} Whether or not the `ids-draggable` and content is being dragged.\n- `disabled` {boolean}\n- `axis?` {'x' | 'y'} The axis that the draggable content will be moving along (e.g. X => horizontal, Y => vertical); By default, not defined and supports both axes.\n- `handle?` {string} A query selector representing an optional handle that can be used to drag the content of the draggable.\n- `min-transform-x` {number} The minimum offset/x-transform/translate the draggable can be translated/dragged on the DOM.\n- `max-transform-x` {number} The maximum offset/x-transform/translate the draggable can be placed from its position on the DOM.\n- `min-transform-y` {number} The minimum offset/y-transform/translate the draggable can be placed from it's position on the DOM.\n- `max-transform-y` {number} The maximum offset/y-transform/translate the draggable can be from it's position on the DOM.\n\n## Mobile Support\n\nThe component now fully supports touch events for mobile devices:\n\n- Touch events (`touchstart`, `touchmove`, `touchend`) are handled alongside mouse events\n- Dragging works on both desktop and mobile devices\n- The same constraints (axis, parent containment, etc.) apply to both mouse and touch interactions\n- Events triggered (`dragstart`, `drag`, `dragend`) include touch-specific information when triggered by touch events\n\n## Accessibility\n\n- Wherever possible, it would be worth adding some visual indicator that content is dragged (this can be done using the `is-dragging` attribute or listening on `dragstart` and `dragend` events).\n- if you have text that should be readable, where a minimum width or height is needed, or if it affects presentation, but sure to set reasonable `{min|max}-xform-{x|y}` attributes to restrict the amount of offset on a draggable.\n- It is good to keep in mind that draggable content may present issues for people with visual impairments, and so things such as scrollability and typical keyboard\nnavigation should all function as normal in the case where a user is browsing content that may have resize handles or other draggability aspects.\n\n## Converting from Previous Versions (Breaking Changes)\n\n**3.x to 4.x**\n\n- The 3.X project had two drag components. This replaces both. The Arrange is new\n\n**4.x to 5.x**\n\n- Markup and API fully changed\n- Markup has changed to a custom element that wraps draggable content; `content`.\n- Bounding drag movement to a specific axis is done by passing the axis attribute as `x` or `y`.\n- The Draggable can be contained to the first measurable parent's rectangle bounds by adding the\nflag `parent-container`.\n- A handle within the draggable content can be set by using the attribute `handle` as a query selector e.g. `handle=\".custom-handle-class\"`.\n- Draggable events to listen for are now `dragstart`, `drag`, and `dragend`.\n- Can now be imported as a single JS file and used with encapsulated styles\n- `ids-draggable` replaces `drag`\n- `ids-swapabble` replaces `arrange`\n- Uses HTML 5 drag drop now\n- Added support for touch events to enable mobile drag functionality\n"}},{"name":"ids-drawer-attributes","description":{"kind":"markdown","value":"# Ids Drawer\n\nThe Ids Drawer component creates a fixed area on the edge of the browser viewport that can be used for roll-out navigation or actions, such as those present on [Application Menus](../ids-app-menu/README.md) or [Action Sheets](../ids-action-sheet/README.md).\n\n## Attributes and Properties\n\n- `edge` defines which edge of the viewport the Drawer will appear from. Can be `start` (left) or `bottom`\n- `hidden` {boolean} Hides the element from display\n- `type` sets the display type of the Drawer. It can be styled as an `app-menu` or `action-sheet`.\n- `visible` if true, the Drawer is rolled out from its specified edge\n\n## Features (With Code Examples)\n\nDrawers can be defined simply by their edge:\n\n```html\n\n This is my Drawer content\n\n\n\n\n\n This is my Bottom Drawer content\n\n```\n\nThey can also take on a `type` for styling. Drawers are foundational components that are intended to be built-upon for other purposes. It's recommended that you extend the IdsDrawer and either add a built-in type, or define your own custom styles for the Drawer. if you intend on using your own custom styles, leave this attribute off:\n\n```html\n\n This is my App-menu-styled Drawer content\n\n```\n\nDrawers can be displayed from their corresponding edge using the `visible` attribute:\n\n```html\n\n This is my Displayed, App-menu-styled Drawer content\n\n```\n\n...or by using Javascript properties and methods:\n\n```js\nconst drawer = document.querySelector('#my-drawer');\ndrawer.visible = true;\n\n// ...or\ndrawer.show();\n\n// later on, after use\ndrawer.hide();\n```\n\n## Converting from Previous Versions (Breaking Changes)\n\nIn the 4.x IDS Components there was no Drawer component. This component represents part of the functionality provided by the 4.x Application Menu, and has been made more general to be shared.\n"}},{"name":"ids-drawer","attributes":[{"name":"edge","values":[]},{"name":"target","values":[]},{"name":"has-trigger-events","description":"Describes whether or not this drawer has trigger events","values":[]},{"name":"type","values":[]},{"name":"visible","values":[]},{"name":"vetoable-event-types","values":[]}],"description":{"kind":"markdown","value":"# Ids Drawer\n\nThe Ids Drawer component creates a fixed area on the edge of the browser viewport that can be used for roll-out navigation or actions, such as those present on [Application Menus](../ids-app-menu/README.md) or [Action Sheets](../ids-action-sheet/README.md).\n\n## Attributes and Properties\n\n- `edge` defines which edge of the viewport the Drawer will appear from. Can be `start` (left) or `bottom`\n- `hidden` {boolean} Hides the element from display\n- `type` sets the display type of the Drawer. It can be styled as an `app-menu` or `action-sheet`.\n- `visible` if true, the Drawer is rolled out from its specified edge\n\n## Features (With Code Examples)\n\nDrawers can be defined simply by their edge:\n\n```html\n\n This is my Drawer content\n\n\n\n\n\n This is my Bottom Drawer content\n\n```\n\nThey can also take on a `type` for styling. Drawers are foundational components that are intended to be built-upon for other purposes. It's recommended that you extend the IdsDrawer and either add a built-in type, or define your own custom styles for the Drawer. if you intend on using your own custom styles, leave this attribute off:\n\n```html\n\n This is my App-menu-styled Drawer content\n\n```\n\nDrawers can be displayed from their corresponding edge using the `visible` attribute:\n\n```html\n\n This is my Displayed, App-menu-styled Drawer content\n\n```\n\n...or by using Javascript properties and methods:\n\n```js\nconst drawer = document.querySelector('#my-drawer');\ndrawer.visible = true;\n\n// ...or\ndrawer.show();\n\n// later on, after use\ndrawer.hide();\n```\n\n## Converting from Previous Versions (Breaking Changes)\n\nIn the 4.x IDS Components there was no Drawer component. This component represents part of the functionality provided by the 4.x Application Menu, and has been made more general to be shared.\n"}},{"name":"ids-dropdown-attributes-mixin","attributes":[{"name":"allow-blank","description":"Gets allow-blank value","values":[]},{"name":"clearable","description":"When set the value can be cleared with Backspace/Delete","values":[]},{"name":"clearable-text","description":"When set the blank option will have a text","values":[]},{"name":"description","description":"Gets the description text(s) for the dropdown","values":[]},{"name":"dropdown-icon","values":[]},{"name":"size","description":"Set the dropdown size","values":[]},{"name":"show-list-item-icon","description":"Set the element's ability to display an optional icon in front of the text","values":[]}],"description":{"kind":"markdown","value":"# ids-dropdown\n\n## Description\n\nThe ids-dropdown is similar to a `` should size to the parent container and the `