0&&(e.preventDefault(),r.current.querySelector(`[data-action-btn-index="${o-1}"]`).focus());break;case"PageUp":e.preventDefault(),r.current.querySelector(`[data-action-btn-index="${Math.max(o-5,0)}"]`).focus();break;case"PageDown":e.preventDefault(),r.current.querySelector(`[data-action-btn-index="${Math.min(o+5,p-1)}"]`).focus();break;case"Home":e.preventDefault(),r.current.querySelector('[data-action-btn-index="0"]').focus();break;case"End":e.preventDefault(),r.current.querySelector(`[data-action-btn-index="${p-1}"]`).focus();break}},k=l();return Ae.createPortal(t.jsx(Be,{style:ee,slot:Q,allowTargetOverlap:f,headerText:k?W:void 0,horizontalAlign:G,initialFocus:J,modal:K,hideArrow:X,placementType:Y,verticalAlign:te,footer:H,header:k?U:void 0,onAfterClose:oe,onBeforeClose:ne,onBeforeOpen:ae,accessibleName:q.getText(fe),...re,onAfterOpen:ce,ref:ie,className:Se(w.actionSheet,l()&&w.actionSheetMobile,z),"data-actionsheet":!0,children:t.jsxs("div",{className:l()?w.contentMobile:void 0,"data-component-name":"ActionSheetMobileContent",role:((N=a==null?void 0:a.actionSheetMobileContent)==null?void 0:N.role)??"application",onKeyDown:pe,ref:r,children:[x.map(le),l()&&C&&t.jsx(n,{design:$.Negative,onClick:se,tabIndex:A===p-1?0:-1,"data-action-btn-index":p-1,"data-cancel-btn":!0,onFocus:D,children:q.getText(be)})]})}),Z??document.body)});m.displayName="ActionSheet";try{m.displayName="ActionSheet",m.__docgenInfo={description:`The \`ActionSheet\` holds a list of buttons from which the user can select to complete an action.
+
+The children of the action sheet should be \`Button\` components. Elements in the \`ActionSheet\` are left-aligned. Actions should be arranged in order of importance, from top to bottom.
+
+### Guidelines
+- Always display text or text and icons for the actions. Do not use icons only.
+- Always provide a Cancel button on mobile phones.
+- Avoid scrolling on action sheets.`,displayName:"ActionSheet",props:{headerText:{defaultValue:null,description:"Defines the header text. Will be shown in the header area on phone devices. This prop will be ignored in tablets and desktop browsers.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.",name:"headerText",required:!1,type:{name:"string"}},header:{defaultValue:null,description:`Defines the header HTML Element. Will be shown in the header area on phone devices. This prop will be ignored in tablets and desktop browsers.
+
+__Note:__ When passing a custom React component to this prop, you have to make sure your component reads the \`slot\` prop and appends it to the most outer element of your component.
+Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-handling-slots--page).`,name:"header",required:!1,type:{name:"UI5WCSlotsNode | UI5WCSlotsNode[]"}},children:{defaultValue:null,description:"Defines the actions of the `ActionSheet`.\n\n__Note:__ Although this slot accepts all HTML Elements, it is strongly recommended that you only use `Buttons` in order to preserve the intended design.",name:"children",required:!1,type:{name:"ReactElement 0&&(e.preventDefault(),r.current.querySelector(`[data-action-btn-index="${o-1}"]`).focus());break;case"PageUp":e.preventDefault(),r.current.querySelector(`[data-action-btn-index="${Math.max(o-5,0)}"]`).focus();break;case"PageDown":e.preventDefault(),r.current.querySelector(`[data-action-btn-index="${Math.min(o+5,p-1)}"]`).focus();break;case"Home":e.preventDefault(),r.current.querySelector('[data-action-btn-index="0"]').focus();break;case"End":e.preventDefault(),r.current.querySelector(`[data-action-btn-index="${p-1}"]`).focus();break}},k=l();return Ae.createPortal(t.jsx(Be,{style:ee,slot:Q,allowTargetOverlap:f,headerText:k?W:void 0,horizontalAlign:G,initialFocus:J,modal:K,hideArrow:X,placementType:Y,verticalAlign:te,footer:H,header:k?U:void 0,onAfterClose:oe,onBeforeClose:ne,onBeforeOpen:ae,accessibleName:q.getText(fe),...re,onAfterOpen:ce,ref:ie,className:Se(w.actionSheet,l()&&w.actionSheetMobile,z),"data-actionsheet":!0,children:t.jsxs("div",{className:l()?w.contentMobile:void 0,"data-component-name":"ActionSheetMobileContent",role:((N=a==null?void 0:a.actionSheetMobileContent)==null?void 0:N.role)??"application",onKeyDown:pe,ref:r,children:[x.map(le),l()&&C&&t.jsx(n,{design:$.Negative,onClick:se,tabIndex:A===p-1?0:-1,"data-action-btn-index":p-1,"data-cancel-btn":!0,onFocus:D,children:q.getText(be)})]})}),Z??document.body)});m.displayName="ActionSheet";try{m.displayName="ActionSheet",m.__docgenInfo={description:`The \`ActionSheet\` holds a list of buttons from which the user can select to complete an action.
-
-The children of the action sheet should be \`Button\` components. Elements in the \`ActionSheet\` are left-aligned. Actions should be arranged in order of importance, from top to bottom.
-
-### Guidelines
-- Always display text or text and icons for the actions. Do not use icons only.
-- Always provide a Cancel button on mobile phones.
-- Avoid scrolling on action sheets.`,displayName:"ActionSheet",props:{headerText:{defaultValue:null,description:"Defines the header text. Will be shown in the header area on phone devices. This prop will be ignored in tablets and desktop browsers.\n\n**Note:** If `header` slot is provided, the `headerText` is ignored.",name:"headerText",required:!1,type:{name:"string"}},header:{defaultValue:null,description:`Defines the header HTML Element. Will be shown in the header area on phone devices. This prop will be ignored in tablets and desktop browsers.
-
-__Note:__ When passing a custom React component to this prop, you have to make sure your component reads the \`slot\` prop and appends it to the most outer element of your component.
-Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-handling-slots--page).`,name:"header",required:!1,type:{name:"UI5WCSlotsNode | UI5WCSlotsNode[]"}},children:{defaultValue:null,description:"Defines the actions of the `ActionSheet`.\n\n__Note:__ Although this slot accepts all HTML Elements, it is strongly recommended that you only use `Buttons` in order to preserve the intended design.",name:"children",required:!1,type:{name:"ReactElement
\n\n## Example\n\n\n\n## Properties\n\n
\n
\n\n
\n\n## Example\n\n\n\n## Properties\n\n
\n
\n\n
",displayName:"AnalyticalCard",props:{header:{defaultValue:null,description:"The Card header Component. Using the `AnalyticalCardHeader` is recommended.",name:"header",required:!1,type:{name:"ReactNode"}},children:{defaultValue:null,description:"The content of the `AnalyticalCard`.",name:"children",required:!0,type:{name:"ReactNode | ReactNode[]"}},style:{defaultValue:null,description:`Element style which will be appended to the most outer element of a component.
-Use this prop carefully, some css properties might break the component.`,name:"style",required:!1,type:{name:"CSSProperties"}},className:{defaultValue:null,description:`CSS Class Name which will be appended to the most outer element of a component.
-Use this prop carefully, overwriting CSS rules might break the component.`,name:"className",required:!1,type:{name:"string"}}}}}catch{}const v=[{name:"January",users:76},{name:"February",users:230},{name:"March",users:240},{name:"April",users:280},{name:"May",users:100}],A={title:"Data Display / AnalyticalCard",component:r,argTypes:{header:{control:{disable:!0}},children:{control:{disable:!0}}},args:{children:a.jsx(f,{className:"chromatic-ignore",noLegend:!0,dimensions:[{accessor:"name"}],measures:[{accessor:"users",formatter:e=>`${e}k`}],dataset:v}),header:a.jsxs(h,{titleText:"Project Cloud Transformation",subtitleText:"Revenue",unitOfMeasurement:"EUR",trend:y.Down,value:"65.34",state:o.Error,scale:"K",description:"Q1, 2018",children:[a.jsx(i,{titleText:"Target",number:"100",unit:"k"}),a.jsx(i,{titleText:"Deviation",number:"34.7",unit:"%",state:o.Critical})]})}},t={};var l,c,d;t.parameters={...t.parameters,docs:{...(l=t.parameters)==null?void 0:l.docs,source:{originalSource:"{}",...(d=(c=t.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};const j=["Default"],I=Object.freeze(Object.defineProperty({__proto__:null,Default:t,__namedExportsOrder:j,default:A},Symbol.toStringTag,{value:"Module"}));export{I as C,t as D};
-//# sourceMappingURL=AnalyticalCard.stories-088379bc.js.map
diff --git a/main/assets/AnalyticalCard.stories-088379bc.js.map b/main/assets/AnalyticalCard.stories-088379bc.js.map
deleted file mode 100644
index 9fac4d797fb..00000000000
--- a/main/assets/AnalyticalCard.stories-088379bc.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"file":"AnalyticalCard.stories-088379bc.js","sources":["../../packages/base/src/hooks/useStylesheet.ts","../../packages/main/src/components/AnalyticalCard/AnalyticalCard.module.css.ts","../../packages/main/src/components/AnalyticalCard/index.tsx"],"sourcesContent":["'use client';\n\nimport type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js';\nimport { createOrUpdateStyle, removeStyle } from '@ui5/webcomponents-base/dist/ManagedStyles.js';\nimport * as React from 'react';\n\nfunction getUseInsertionEffect(isSSR: boolean) {\n return isSSR ? React.useEffect : Reflect.get(React, 'useInsertionEffect') || React.useLayoutEffect;\n}\n\nexport function useStylesheet(styles: StyleDataCSP, componentName: string) {\n getUseInsertionEffect(typeof window === 'undefined')(() => {\n createOrUpdateStyle(styles, styles.packageName, componentName);\n\n return () => {\n removeStyle(styles.packageName, componentName);\n };\n }, [styles]);\n}\n","import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/types.js';\nexport const styleData: StyleDataCSP = {packageName:'@ui5/webcomponents-react',fileName:'AnalyticalCard.module.css',content:\"._content_2qomb_1{display:flex;flex:1 1 auto;overflow:hidden;position:relative}\"};\n\nexport const classNames = {\"content\":\"_content_2qomb_1\"} as const;\n","'use client';\n\nimport { deprecationNotice, useStylesheet } from '@ui5/webcomponents-react-base';\nimport type { ReactNode } from 'react';\nimport React, { forwardRef, useEffect } from 'react';\nimport type { CommonProps } from '../../interfaces/index.js';\nimport type { CardDomRef } from '../../webComponents/index.js';\nimport { Card } from '../../webComponents/index.js';\nimport { classNames, styleData } from './AnalyticalCard.module.css.js';\n\nexport interface AnalyticalCardPropTypes extends CommonProps {\n /**\n * The Card header Component. Using the `AnalyticalCardHeader` is recommended.\n */\n header?: ReactNode;\n /**\n * The content of the `AnalyticalCard`.\n */\n children: ReactNode | ReactNode[];\n}\n\n/**\n * The `AnalyticalCard` is mainly used for data visualization. It consists of two areas – a header area and a chart area with a visual representation of the data.
\n *\n * @deprecated This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the [Card](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-card) instead.\n */\nconst AnalyticalCard = forwardRef
",displayName:"AnalyticalCard",props:{header:{defaultValue:null,description:"The Card header Component. Using the `AnalyticalCardHeader` is recommended.",name:"header",required:!1,type:{name:"ReactNode"}},children:{defaultValue:null,description:"The content of the `AnalyticalCard`.",name:"children",required:!0,type:{name:"ReactNode | ReactNode[]"}},style:{defaultValue:null,description:`Element style which will be appended to the most outer element of a component.
+Use this prop carefully, some css properties might break the component.`,name:"style",required:!1,type:{name:"CSSProperties"}},className:{defaultValue:null,description:`CSS Class Name which will be appended to the most outer element of a component.
+Use this prop carefully, overwriting CSS rules might break the component.`,name:"className",required:!1,type:{name:"string"}}}}}catch{}const v=[{name:"January",users:76},{name:"February",users:230},{name:"March",users:240},{name:"April",users:280},{name:"May",users:100}],A={title:"Data Display / AnalyticalCard",component:r,argTypes:{header:{control:{disable:!0}},children:{control:{disable:!0}}},args:{children:a.jsx(f,{className:"chromatic-ignore",noLegend:!0,dimensions:[{accessor:"name"}],measures:[{accessor:"users",formatter:e=>`${e}k`}],dataset:v}),header:a.jsxs(h,{titleText:"Project Cloud Transformation",subtitleText:"Revenue",unitOfMeasurement:"EUR",trend:y.Down,value:"65.34",state:o.Error,scale:"K",description:"Q1, 2018",children:[a.jsx(i,{titleText:"Target",number:"100",unit:"k"}),a.jsx(i,{titleText:"Deviation",number:"34.7",unit:"%",state:o.Critical})]})}},t={};var l,c,d;t.parameters={...t.parameters,docs:{...(l=t.parameters)==null?void 0:l.docs,source:{originalSource:"{}",...(d=(c=t.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};const j=["Default"],I=Object.freeze(Object.defineProperty({__proto__:null,Default:t,__namedExportsOrder:j,default:A},Symbol.toStringTag,{value:"Module"}));export{I as C,t as D};
+//# sourceMappingURL=AnalyticalCard.stories-7f2d04bd.js.map
diff --git a/main/assets/AnalyticalCard.stories-7f2d04bd.js.map b/main/assets/AnalyticalCard.stories-7f2d04bd.js.map
new file mode 100644
index 00000000000..f1837501a4d
--- /dev/null
+++ b/main/assets/AnalyticalCard.stories-7f2d04bd.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticalCard.stories-7f2d04bd.js","sources":["../../packages/base/src/hooks/useStylesheet.ts","../../packages/main/src/components/AnalyticalCard/AnalyticalCard.module.css.ts","../../packages/main/src/components/AnalyticalCard/index.tsx"],"sourcesContent":["'use client';\n\nimport type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js';\nimport { createOrUpdateStyle, removeStyle } from '@ui5/webcomponents-base/dist/ManagedStyles.js';\nimport * as React from 'react';\n\nfunction getUseInsertionEffect(isSSR: boolean) {\n return isSSR ? React.useEffect : Reflect.get(React, 'useInsertionEffect') || React.useLayoutEffect;\n}\n\nexport function useStylesheet(styles: StyleDataCSP, componentName: string) {\n getUseInsertionEffect(typeof window === 'undefined')(() => {\n createOrUpdateStyle(styles, styles.packageName, componentName);\n\n return () => {\n removeStyle(styles.packageName, componentName);\n };\n }, [styles]);\n}\n","import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/types.js';\nexport const styleData: StyleDataCSP = {packageName:'@ui5/webcomponents-react',fileName:'AnalyticalCard.module.css',content:\"._content_2qomb_1{display:flex;flex:1 1 auto;overflow:hidden;position:relative}\"};\n\nexport const classNames = {\"content\":\"_content_2qomb_1\"} as const;\n","'use client';\n\nimport { deprecationNotice, useStylesheet } from '@ui5/webcomponents-react-base';\nimport type { ReactNode } from 'react';\nimport React, { forwardRef, useEffect } from 'react';\nimport type { CommonProps } from '../../interfaces/index.js';\nimport type { CardDomRef } from '../../webComponents/index.js';\nimport { Card } from '../../webComponents/index.js';\nimport { classNames, styleData } from './AnalyticalCard.module.css.js';\n\nexport interface AnalyticalCardPropTypes extends CommonProps {\n /**\n * The Card header Component. Using the `AnalyticalCardHeader` is recommended.\n */\n header?: ReactNode;\n /**\n * The content of the `AnalyticalCard`.\n */\n children: ReactNode | ReactNode[];\n}\n\n/**\n * The `AnalyticalCard` is mainly used for data visualization. It consists of two areas – a header area and a chart area with a visual representation of the data.
\n *\n * @deprecated This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the [Card](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-card) instead.\n */\nconst AnalyticalCard = forwardRef
-
\n\n## Example\n\n\n\n### Code\n\nShow Code
\n\n```jsx\n
Supported String Values:
|\n| `Aggregated` | `ComponentType` | Component to render for aggregated cells |\n| `aggregate` | `string OR ((leafValues, aggregatedValues) => any)` | Aggregation function or string.
Supported String Values:
|\n| `aggregateValue` | `string OR ((values, row, column) => any)` | When attempting to group/aggregate non primitive cell values (eg. arrays of items) you will likely need to resolve a stable primitive value like a number or string to use in normal row aggregations. This property can be used to aggregate or simply access the value to be used in aggregations eg. count-ing the unique number of items in a cell's array value before sum-ing that count across the table |\n| `disableGroupBy` | `boolean` | Disable groupBy for this column |\n| `defaultCanSort` | `boolean` | If set to true, this column will be sortable, regardless if it has a valid `accessor` |\n| `disableSortBy` | `boolean` | Disable sorting for this column |\n| `sortDescFirst` | `boolean` | If set to `true`, the first sort direction for this column will be descending instead of ascending. |\n| `sortInverted` | `boolean` | If set to `true`, the underlying sorting direction will be inverted, but the UI will not. |\n| `sortType` | `string OR ((rowA, rowB, columnId: string, descending: boolean) => any)` | String or custom sort function.
Supported String Values:
|\n| `disableResizing` | `boolean` | Disable resizing for this column |\n| `hAlign` | `TextAlign` | Horizontal align of the cell |\n| `vAlign` | `VerticalAlign` | Vertical align of the cell |\n| `responsivePopIn` | `boolean` | Enables the pop-in behavior of the column. When the `responsiveMinWidth` is smaller then the width of the table, the content of each cell will move to the first cell in the row, improving usability on small or mobile devices. |\n| `responsiveMinWidth` | `number` | Defines how the table should react when its width falls below the `responsiveMinWidth`.
|\n| `PopInHeader` | `string OR ComponentType` | Custom pop-in header renderer. If set, the table will call that component for every column that is \"popped-in\" and pass the table instance as prop. |\n| `disableDragAndDrop` | `boolean` | Defines if the column is reorderable by dragging and dropping columns. |\n| `canReorder` | `boolean` | **deprecated** Defines if the column is reorderable by dragging and dropping columns. Please use `disableDragAndDrop` instead. Defaults to: `true`. |\n| `enableMultiSort` | `boolean` | Defines whether this column should allow multi-sort.
**Note:** When sorting by a column that does not allow multiple sorting, only the current column is sorted and all other sorted columns are reset. |\n\n
\n\n# More Examples\n\n
\n\n## Tree Table\n\n\n\nThe `data` structure of the tree table is as follows:\n\n```js\nconst data = {\n name: \"Greg Miller\",\n age: 35,\n friend: {\n name: \"Rose Franco\",\n age: 32,\n },\n status: \"None\",\n subRows: [\n {\n name: \"Rick DeAngelo\",\n age: 25,\n friend: {\n name: \"Susanne Franco\",\n age: 37,\n },\n status: \"None\",\n subRows: [...],\n },\n ],\n ...\n};\n```\n\nIn this example the default key for sub row detection is used (`subRows`), you can use any key you like by setting the `subRowsKey` prop.\n\n
\n\n## Infinite Scrolling\n\nThe table initially contains 50 rows, when the last 10 rows are reached the table will load more data.\n\n\n\n### Code\n\nShow Code
\n\n```jsx\nconst InfiniteScrollTable = (props) => {\n const [data, setData] = useState(props.data.slice(0, 50));\n const [loading, setLoading] = useState(false);\n const offset = useRef(50);\n const onLoadMore = () => {\n setLoading(true);\n };\n useEffect(() => {\n if (loading) {\n setTimeout(() => {\n setData((prev) => [...prev, ...props.data.slice(offset.current, offset.current + 50)]);\n setLoading(false);\n offset.current += 50;\n }, 2000);\n }\n }, [loading, props.data, offset.current]);\n return (\n Show Code
\n\n```jsx\nconst TableWithSubcomponents = (props) => {\n const renderRowSubComponent = (row) => {\n if (row.id === '0') {\n return (\n
\n Show Code
\n\n```jsx\nconst filterFn = (rows, accessor, filterValue) => {\n if (filterValue.length > 0) {\n return rows.filter((row) => {\n const rowVal = row.values[accessor];\n if (filterValue.some((item) => rowVal.includes(item))) {\n return true;\n }\n return false;\n });\n }\n return rows;\n};\nconst COLUMNS = [\n {\n Header: 'Name',\n accessor: 'name',\n // either define your filter function here or set is as `reactTableOption` and pass the key as string here (see below)\n filter: filterFn,\n Filter: ({ column }) => {\n const firstNames = ['Carl', 'Dan', 'Rose', 'Susanne'];\n return (\n
+
\n\n## Example\n\n\n\n### Code\n\nShow Code
\n\n```jsx\n
Supported String Values:
|\n| `Aggregated` | `ComponentType` | Component to render for aggregated cells |\n| `aggregate` | `string OR ((leafValues, aggregatedValues) => any)` | Aggregation function or string.
Supported String Values:
|\n| `aggregateValue` | `string OR ((values, row, column) => any)` | When attempting to group/aggregate non primitive cell values (eg. arrays of items) you will likely need to resolve a stable primitive value like a number or string to use in normal row aggregations. This property can be used to aggregate or simply access the value to be used in aggregations eg. count-ing the unique number of items in a cell's array value before sum-ing that count across the table |\n| `disableGroupBy` | `boolean` | Disable groupBy for this column |\n| `defaultCanSort` | `boolean` | If set to true, this column will be sortable, regardless if it has a valid `accessor` |\n| `disableSortBy` | `boolean` | Disable sorting for this column |\n| `sortDescFirst` | `boolean` | If set to `true`, the first sort direction for this column will be descending instead of ascending. |\n| `sortInverted` | `boolean` | If set to `true`, the underlying sorting direction will be inverted, but the UI will not. |\n| `sortType` | `string OR ((rowA, rowB, columnId: string, descending: boolean) => any)` | String or custom sort function.
Supported String Values:
|\n| `disableResizing` | `boolean` | Disable resizing for this column |\n| `hAlign` | `TextAlign` | Horizontal align of the cell |\n| `vAlign` | `VerticalAlign` | Vertical align of the cell |\n| `responsivePopIn` | `boolean` | Enables the pop-in behavior of the column. When the `responsiveMinWidth` is smaller then the width of the table, the content of each cell will move to the first cell in the row, improving usability on small or mobile devices. |\n| `responsiveMinWidth` | `number` | Defines how the table should react when its width falls below the `responsiveMinWidth`.
|\n| `PopInHeader` | `string OR ComponentType` | Custom pop-in header renderer. If set, the table will call that component for every column that is \"popped-in\" and pass the table instance as prop. |\n| `disableDragAndDrop` | `boolean` | Defines if the column is reorderable by dragging and dropping columns. |\n| `canReorder` | `boolean` | **deprecated** Defines if the column is reorderable by dragging and dropping columns. Please use `disableDragAndDrop` instead. Defaults to: `true`. |\n| `enableMultiSort` | `boolean` | Defines whether this column should allow multi-sort.
**Note:** When sorting by a column that does not allow multiple sorting, only the current column is sorted and all other sorted columns are reset. |\n\n
\n\n# More Examples\n\n
\n\n## Tree Table\n\n\n\nThe `data` structure of the tree table is as follows:\n\n```js\nconst data = {\n name: \"Greg Miller\",\n age: 35,\n friend: {\n name: \"Rose Franco\",\n age: 32,\n },\n status: \"None\",\n subRows: [\n {\n name: \"Rick DeAngelo\",\n age: 25,\n friend: {\n name: \"Susanne Franco\",\n age: 37,\n },\n status: \"None\",\n subRows: [...],\n },\n ],\n ...\n};\n```\n\nIn this example the default key for sub row detection is used (`subRows`), you can use any key you like by setting the `subRowsKey` prop.\n\n
\n\n## Infinite Scrolling\n\nThe table initially contains 50 rows, when the last 10 rows are reached the table will load more data.\n\n\n\n### Code\n\nShow Code
\n\n```jsx\nconst InfiniteScrollTable = (props) => {\n const [data, setData] = useState(props.data.slice(0, 50));\n const [loading, setLoading] = useState(false);\n const offset = useRef(50);\n const onLoadMore = () => {\n setLoading(true);\n };\n useEffect(() => {\n if (loading) {\n setTimeout(() => {\n setData((prev) => [...prev, ...props.data.slice(offset.current, offset.current + 50)]);\n setLoading(false);\n offset.current += 50;\n }, 2000);\n }\n }, [loading, props.data, offset.current]);\n return (\n Show Code
\n\n```jsx\nconst TableWithSubcomponents = (props) => {\n const renderRowSubComponent = (row) => {\n if (row.id === '0') {\n return (\n
\n Show Code
\n\n```jsx\nconst filterFn = (rows, accessor, filterValue) => {\n if (filterValue.length > 0) {\n return rows.filter((row) => {\n const rowVal = row.values[accessor];\n if (filterValue.some((item) => rowVal.includes(item))) {\n return true;\n }\n return false;\n });\n }\n return rows;\n};\nconst COLUMNS = [\n {\n Header: 'Name',\n accessor: 'name',\n // either define your filter function here or set is as `reactTableOption` and pass the key as string here (see below)\n filter: filterFn,\n Filter: ({ column }) => {\n const firstNames = ['Carl', 'Dan', 'Rose', 'Susanne'];\n return (\n this.options.debug}),this.calculateRange=qn(()=>[this.getMeasurements(),this.getSize(),this.scrollOffset],(s,g,c)=>{const l=vi({measurements:s,outerSize:g,scrollOffset:c});return(l.startIndex!==this.range.startIndex||l.endIndex!==this.range.endIndex)&&(this.range=l,this.notify()),this.range},{key:!1,debug:()=>this.options.debug}),this.getIndexes=qn(()=>[this.options.rangeExtractor,this.range,this.options.overscan,this.options.count],(s,g,c,l)=>s({...g,overscan:c,count:l}),{key:!1,debug:()=>this.options.debug}),this.getVirtualItems=qn(()=>[this.getIndexes(),this.getMeasurements(),this.options.measureElement],(s,g,c)=>{const l=v=>N=>{var w;const C=this.measurementsCache[v];if(!N)return;const B=c(N,this),W=(w=this.itemMeasurementsCache[C.key])!=null?w:C.size;B!==W&&(C.starts)t=g-1;else return g}return a>0?a-1:0};function vi(a){let{measurements:t,outerSize:o,scrollOffset:s}=a;const g=t.length-1,l=Ci(0,g,y=>t[y].start,s);let h=l;for(;h1?n-1:0),i=1;i
Please refer to the [AnalyticalTableColumnDefinition interface](#column-properties) for a full list of options."},reactTableOptions:{control:{disable:!0}},tableHooks:{control:{disable:!0}},NoDataComponent:{control:{disable:!0}},LoadingComponent:{control:{disable:!0}},extension:{control:{disable:!0}},tableInstance:{control:{disable:!0}},portalContainer:{control:{disable:!0}}}},nn={},tn={name:"Plugin: useRowDisableSelection",args:{data:wn.map(a=>({...a,disableSelection:Math.random()<.5})),selectionMode:Ce.MultiSelect},render:a=>{const t=g=>g.original.age<40,[o,s]=k.useState(!0);return p.jsxs(p.Fragment,{children:[p.jsx(Dt,{onClick:()=>{s(!0)},pressed:o,children:"with function parameter"}),p.jsx(Dt,{onClick:()=>{s(!1)},pressed:!o,children:"with string parameter"}),o?p.jsx(Te,{data:a.data,columns:a.columns,selectionMode:a.selectionMode,tableHooks:[Yn(t)],visibleRows:10,header:"All under 40 are not selectable"}):p.jsx(Te,{data:a.data,columns:a.columns,selectionMode:a.selectionMode,selectionBehavior:a.selectionBehavior,tableHooks:[Yn("disableSelection")],visibleRows:10,header:'All with "disableSelection: true" are not selectable'})]})}},rn={name:"Plugin: useIndeterminateRowSelection",render:a=>{const[t,o]=k.useReducer(s=>!s,!0);return p.jsxs(p.Fragment,{children:[p.jsx(Dt,{onClick:o,pressed:t,children:`${t?"Don't ":""}Select Sub-Rows`}),p.jsx(Te,{selectionMode:Ce.MultiSelect,data:zs,columns:a.columns,isTreeTable:!0,tableHooks:[_t()],reactTableOptions:{selectSubRows:t}})]})}},sn={name:"Plugin: useManualRowSelect",args:{data:Su},render:a=>{const[t,o]=k.useReducer(c=>!c,!0),[s,g]=k.useReducer(c=>{const[,...l]=c;return c[0].isSelected?[{...c[0],isSelected:!1},...l]:[{...c[0],isSelected:!0},...l]},a.data);return p.jsxs(p.Fragment,{children:[p.jsxs(wa,{onClick:g,children:["Toggle ",p.jsx("code",{children:"isSelected"})," of 1st row"]}),p.jsx("br",{}),p.jsx(an,{children:"Clicking this button will refresh the data array passed to the `data` prop."}),p.jsx("br",{}),p.jsx("br",{}),p.jsx(Te,{selectionMode:Ce.MultiSelect,data:s,columns:a.columns,tableHooks:[ai("isSelected")]}),p.jsx(wa,{onClick:o,children:"Show first entries in data array"}),!t&&p.jsxs(xe,{direction:"Column",children:[p.jsx("span",{children:JSON.stringify(s[0],null,2)}),p.jsx("span",{children:JSON.stringify(s[1],null,2)}),p.jsx("span",{children:JSON.stringify(s[2],null,2)}),p.jsx("span",{children:JSON.stringify(s[3],null,2)}),p.jsx("span",{children:JSON.stringify(s[4],null,2)}),p.jsx("span",{children:"..."})]})]})}},on={name:"Plugin: useOnColumnResize",render:a=>{const[t,o]=k.useState({}),[s,g]=k.useState(!1),[c,l]=k.useState(100),h=v=>{g(v.target.checked)},y=v=>{l(parseInt(v.target.value))},u=v=>{o(v)};return p.jsxs(p.Fragment,{children:[p.jsx(Te,{extension:p.jsxs(p.Fragment,{children:[p.jsxs(xe,{alignItems:ba.Center,children:[p.jsx(an,{children:"liveUpdate: "}),p.jsx(ot,{onChange:h,checked:s})]}),p.jsxs(xe,{alignItems:ba.Center,children:[p.jsx(an,{children:"wait: "}),p.jsx(ys,{onInput:y,type:Yo.Number,value:`${c}`})]}),p.jsx("br",{})]}),data:a.data,columns:a.columns,tableHooks:[ni(u,{liveUpdate:s,wait:c})]}),!!Object.keys(t).length&&p.jsxs(xe,{direction:Na.Column,children:[p.jsx("br",{}),p.jsx(oa,{children:"Last fired callback of changed column:"}),p.jsx("br",{}),p.jsxs(xe,{children:[p.jsx(an,{children:"Column:"}),p.jsx(oa,{children:t.header.id})]}),p.jsxs(xe,{children:[p.jsx(an,{children:"Width:"}),p.jsx(oa,{children:t.columnWidth})]})]})]})}},Cu=[{Header:"Name",accessor:"name",enableMultiSort:!0},{Header:"Age",accessor:"age",enableMultiSort:!0},{Header:"Name 2",accessor:"name2",enableMultiSort:!0},{Header:"Age 2",accessor:"age2",enableMultiSort:!0}],vu=[{name:"Peter",age:40,name2:"Alissa",age2:18},{name:"Kristen",age:40,name2:"Randolph",age2:21},{name:"Peter",age:30,name2:"Rose",age2:90},{name:"Peter",age:70,name2:"Rose",age2:22},{name:"Kristen",age:60,name2:"Willis",age2:80},{name:"Kristen",age:20,name2:"Alissa",age2:80},{name:"Graham",age:40,name2:"Alissa",age2:80},{name:"Peter",age:65,name2:"Rose",age2:26},{name:"Graham",age:65,name2:"Rose",age2:26},{name:"Graham",age:65,name2:"Willis",age2:26},{name:"Graham",age:62,name2:"Willis",age2:26}],ln={name:"Plugin: useOrderedMultiSort",args:{orderedIds:["name","name2","age","age2"]},argTypes:{orderedIds:{control:"array",description:`Defines the sort priority when sorting by multiple columns, starting with the first column ID.
+
+**Note:** Column IDs that are not found in the array use the default priority, so the first sorted column has a higher priority than the next sorted column.`}},render(a){return p.jsx(Te,{columns:Cu,data:vu,sortable:!0,tableHooks:[ti(a.orderedIds)]})}},un={args:{data:zs,isTreeTable:!0}},mn={render:a=>{const[t,o]=k.useState(a.data.slice(0,50)),[s,g]=k.useState(!1),c=k.useRef(50),l=()=>{g(!0)};return k.useEffect(()=>{s&&setTimeout(()=>{o(h=>[...h,...a.data.slice(c.current,c.current+50)]),g(!1),c.current+=50},2e3)},[s,a.data,c.current]),p.jsx(Te,{data:t,columns:a.columns,infiniteScroll:!0,infiniteScrollThreshold:10,header:"Scroll to load more data",onLoadMore:l,loading:s})}},dn={render:a=>{const t=o=>o.id==="0"?p.jsxs(xe,{style:{backgroundColor:"lightblue",height:"300px"},justifyContent:It.Center,alignItems:ba.Center,direction:Na.Column,children:[p.jsx(kt,{children:"height: 300px"}),p.jsx(oa,{children:"This subcomponent will only be displayed below the first row."}),p.jsx("hr",{}),p.jsx(oa,{children:"The button below is rendered with `data-subcomponent-active-element` attribute to ensure consistent focus behavior"}),p.jsx(wa,{"data-subcomponent-active-element":!0,children:"Click"})]}):o.id==="1"?p.jsxs(xe,{style:{backgroundColor:"lightyellow",height:"100px"},justifyContent:It.Center,alignItems:ba.Center,direction:Na.Column,children:[p.jsx(kt,{children:"height: 100px"}),p.jsx(oa,{children:"This subcomponent will only be displayed below the second row."})]}):o.id==="2"?null:p.jsxs(xe,{style:{backgroundColor:"lightgrey",height:"50px"},justifyContent:It.Center,alignItems:ba.Center,direction:Na.Column,children:[p.jsx(kt,{children:"height: 50px"}),p.jsx(oa,{children:"This subcomponent will be displayed below all rows except the first, second and third."})]});return p.jsx(Te,{...a,data:a.data,columns:a.columns,renderRowSubComponent:t,alwaysShowSubComponent:a.alwaysShowSubComponent})}},gn={args:{visibleRowCountMode:fa.Auto,containerHeight:250},argTypes:{containerHeight:{options:[250,500,750,1e3],control:{type:"radio"},description:"Select an option to change the height of the surrounding container of the table (in `px`).
__Note__: This is not an actual prop of the table."}},render:a=>p.jsx("div",{style:{height:`${a.containerHeight}px`},children:p.jsx(Te,{data:a.data,columns:a.columns,visibleRowCountMode:a.visibleRowCountMode,header:`Current height: ${a.containerHeight}px - Change the height in the table above`})})},cn={args:{visibleRowCountMode:fa.Fixed,containerWidth:"auto",data:wn,columns:[{Header:"Name",accessor:"name"},{disableSortBy:!0,responsivePopIn:!0,responsiveMinWidth:601,PopInHeader:"Custom Header Text (age)",Header:"Age",accessor:"age"},{disableSortBy:!0,responsivePopIn:!0,responsiveMinWidth:401,Header:"Friend Name",PopInHeader:a=>p.jsx("div",{style:{color:"red"},children:"Friend Name (custom)"}),accessor:"friend.name"},{disableSortBy:!0,responsiveMinWidth:401,Header:"Friend Age",accessor:"friend.age"},{disableSortBy:!0,responsivePopIn:!0,responsiveMinWidth:801,id:"actions",Header:"Actions",width:100,disableResizing:!0,Cell:a=>p.jsxs(xe,{children:[p.jsx(wa,{icon:"edit"}),p.jsx(wa,{icon:"delete"})]})}]},argTypes:{containerWidth:{options:[400,600,800,"auto"],control:{type:"radio"},description:"Select an option to change the width of the surrounding container of the table (in `px`).
__Note__: This is not an actual prop of the table."}},render:a=>p.jsx("div",{style:{width:a.containerWidth&&typeof a.containerWidth=="number"?`${a.containerWidth}px`:"auto"},children:p.jsx(Te,{data:a.data,columns:a.columns,visibleRows:5,adjustTableHeightOnPopIn:a.adjustTableHeightOnPopIn,header:`Current width: ${a.containerWidth}`})})},fn={args:{withNavigationHighlight:!0,selectionMode:Ce.MultiSelect,data:wn},render:a=>{const[t,o]=k.useState(),s=c=>{o(c.detail.row)},g=k.useCallback(c=>(t==null?void 0:t.id)===c.id,[t]);return p.jsx(Te,{data:a.data,columns:a.columns,withNavigationHighlight:!0,selectionMode:a.selectionMode,markNavigatedRow:g,onRowSelect:s})}},hn={args:{data:wn},render:a=>{const t=k.useCallback((s,g,c)=>c.length>0?s.filter(l=>{const h=l.values[g];return!!c.some(y=>h.includes(y))}):s,[]),o=k.useMemo(()=>[{Header:"Custom Column Filter",accessor:"name",filter:t,Filter:({column:s})=>{const g=["Carl","Dan","Rose","Susanne"];return p.jsx(Xo,{placeholder:"Filter Names",onSelectionChange:c=>{s.setFilter(c.detail.items.map(l=>l.getAttribute("text")))},children:g.map(c=>{var h;const l=(h=s==null?void 0:s.filterValue)==null?void 0:h.some(y=>y.includes(c));return p.jsx(Zo,{text:c,selected:l},c)})})}},{Header:"Age",accessor:"age"}],[]);return p.jsx(Te,{columns:o,data:a.data,filterable:!0})}};var Br,Wr,Er;nn.parameters={...nn.parameters,docs:{...(Br=nn.parameters)==null?void 0:Br.docs,source:{originalSource:"{}",...(Er=(Wr=nn.parameters)==null?void 0:Wr.docs)==null?void 0:Er.source}}};var Ir,Hr,Nr;tn.parameters={...tn.parameters,docs:{...(Ir=tn.parameters)==null?void 0:Ir.docs,source:{originalSource:`{
+ name: 'Plugin: useRowDisableSelection',
+ args: {
+ data: dataLarge.map(item => ({
+ ...item,
+ disableSelection: Math.random() < 0.5
+ })),
+ selectionMode: AnalyticalTableSelectionMode.MultiSelect
+ },
+ render: args => {
+ const disableRowFunc = row => row.original.age < 40;
+ const [isFunc, setIsFunc] = useState(true);
+ return <>
+
+
+
+
+
+ >} data={args.data} columns={args.columns} tableHooks={[AnalyticalTableHooks.useOnColumnResize(handleColWidthUpdate, {
+ liveUpdate,
+ wait
+ })]} />
+ {!!Object.keys(useColResizeEvent).length &&
+
+
+
__Note__: This is not an actual prop of the table.'
+ }
+ },
+ render: args => {
+ return
__Note__: This is not an actual prop of the table.'
+ }
+ },
+ render: args => {
+ return \n {isSortedAscending && (\n
\n
Supported String Values:
\n */\n aggregate?: string | ((leafValues, aggregatedValues) => any);\n /**\n * When attempting to group/aggregate non-primitive cell values (e.g. arrays of items) you will likely need to resolve a stable primitive value like a number or string to use in normal row aggregations. This property can be used to aggregate or simply access the value to be used in aggregations eg. count-ing the unique number of items in a cell's array value before sum-ing that count across the table.\n */\n aggregateValue?: string | ((values, row, column) => any);\n /**\n * Disable groupBy for this column.\n */\n disableGroupBy?: boolean;\n\n // useSortBy\n /**\n * If set to true, this column will be sortable, regardless if it has a valid `accessor`.\n */\n defaultCanSort?: boolean;\n /**\n * Disable sorting for this column.\n */\n disableSortBy?: boolean;\n /**\n * If set to `true`, the first sort direction for this column will be descending instead of ascending.\n */\n sortDescFirst?: boolean;\n /**\n * If set to `true`, the underlying sorting direction will be inverted, but the UI will not.\n */\n sortInverted?: boolean;\n /**\n * String or custom sort function.\n *\n * Supported String Values:\n * * `basic`\n * * `datetime`\n * * `alphanumeric`\n */\n sortType?: string | ((rowA, rowB, columnId: string, descending: boolean) => any);\n\n // useResizeColumns\n /**\n * Disable resizing for this column.\n */\n disableResizing?: boolean;\n\n // ui5 web components react properties\n /**\n * Horizontal alignment of the cell.\n */\n hAlign?: TextAlign;\n /**\n * Vertical alignment of the cell.\n */\n vAlign?: VerticalAlign;\n\n // usePopIn\n /**\n * Enables the pop-in behavior of the column. When the `responsiveMinWidth` is smaller than the width of the table, the content of each cell will move to the first cell in the row, improving usability on small or mobile devices.\n */\n responsivePopIn?: boolean;\n /**\n * Defines how the table should react when its width falls below the `responsiveMinWidth`.\n *\n * - If `responsivePopIn` is `true` the content of this column will be moved to the first column.\n * - If `responsivePopIn` is not set or `false` the column will be hidden.\n */\n responsiveMinWidth?: number;\n /**\n * Custom pop-in header renderer. If set, the table will call that component for every column that is \"popped-in\" and pass the table instance as prop.\n */\n PopInHeader?: string | ComponentTypethis.options.debug}),this.calculateRange=qn(()=>[this.getMeasurements(),this.getSize(),this.scrollOffset],(s,g,c)=>{const l=vi({measurements:s,outerSize:g,scrollOffset:c});return(l.startIndex!==this.range.startIndex||l.endIndex!==this.range.endIndex)&&(this.range=l,this.notify()),this.range},{key:!1,debug:()=>this.options.debug}),this.getIndexes=qn(()=>[this.options.rangeExtractor,this.range,this.options.overscan,this.options.count],(s,g,c,l)=>s({...g,overscan:c,count:l}),{key:!1,debug:()=>this.options.debug}),this.getVirtualItems=qn(()=>[this.getIndexes(),this.getMeasurements(),this.options.measureElement],(s,g,c)=>{const l=v=>N=>{var w;const C=this.measurementsCache[v];if(!N)return;const B=c(N,this),W=(w=this.itemMeasurementsCache[C.key])!=null?w:C.size;B!==W&&(C.starts)t=g-1;else return g}return a>0?a-1:0};function vi(a){let{measurements:t,outerSize:o,scrollOffset:s}=a;const g=t.length-1,l=Ci(0,g,y=>t[y].start,s);let h=l;for(;h1?n-1:0),i=1;i
Please refer to the [AnalyticalTableColumnDefinition interface](#column-properties) for a full list of options."},reactTableOptions:{control:{disable:!0}},tableHooks:{control:{disable:!0}},NoDataComponent:{control:{disable:!0}},LoadingComponent:{control:{disable:!0}},extension:{control:{disable:!0}},tableInstance:{control:{disable:!0}},portalContainer:{control:{disable:!0}}}},nn={},tn={name:"Plugin: useRowDisableSelection",args:{data:wn.map(a=>({...a,disableSelection:Math.random()<.5})),selectionMode:Ce.MultiSelect},render:a=>{const t=g=>g.original.age<40,[o,s]=k.useState(!0);return p.jsxs(p.Fragment,{children:[p.jsx(Dt,{onClick:()=>{s(!0)},pressed:o,children:"with function parameter"}),p.jsx(Dt,{onClick:()=>{s(!1)},pressed:!o,children:"with string parameter"}),o?p.jsx(Te,{data:a.data,columns:a.columns,selectionMode:a.selectionMode,tableHooks:[Yn(t)],visibleRows:10,header:"All under 40 are not selectable"}):p.jsx(Te,{data:a.data,columns:a.columns,selectionMode:a.selectionMode,selectionBehavior:a.selectionBehavior,tableHooks:[Yn("disableSelection")],visibleRows:10,header:'All with "disableSelection: true" are not selectable'})]})}},rn={name:"Plugin: useIndeterminateRowSelection",render:a=>{const[t,o]=k.useReducer(s=>!s,!0);return p.jsxs(p.Fragment,{children:[p.jsx(Dt,{onClick:o,pressed:t,children:`${t?"Don't ":""}Select Sub-Rows`}),p.jsx(Te,{selectionMode:Ce.MultiSelect,data:zs,columns:a.columns,isTreeTable:!0,tableHooks:[_t()],reactTableOptions:{selectSubRows:t}})]})}},sn={name:"Plugin: useManualRowSelect",args:{data:Su},render:a=>{const[t,o]=k.useReducer(c=>!c,!0),[s,g]=k.useReducer(c=>{const[,...l]=c;return c[0].isSelected?[{...c[0],isSelected:!1},...l]:[{...c[0],isSelected:!0},...l]},a.data);return p.jsxs(p.Fragment,{children:[p.jsxs(wa,{onClick:g,children:["Toggle ",p.jsx("code",{children:"isSelected"})," of 1st row"]}),p.jsx("br",{}),p.jsx(an,{children:"Clicking this button will refresh the data array passed to the `data` prop."}),p.jsx("br",{}),p.jsx("br",{}),p.jsx(Te,{selectionMode:Ce.MultiSelect,data:s,columns:a.columns,tableHooks:[ai("isSelected")]}),p.jsx(wa,{onClick:o,children:"Show first entries in data array"}),!t&&p.jsxs(xe,{direction:"Column",children:[p.jsx("span",{children:JSON.stringify(s[0],null,2)}),p.jsx("span",{children:JSON.stringify(s[1],null,2)}),p.jsx("span",{children:JSON.stringify(s[2],null,2)}),p.jsx("span",{children:JSON.stringify(s[3],null,2)}),p.jsx("span",{children:JSON.stringify(s[4],null,2)}),p.jsx("span",{children:"..."})]})]})}},on={name:"Plugin: useOnColumnResize",render:a=>{const[t,o]=k.useState({}),[s,g]=k.useState(!1),[c,l]=k.useState(100),h=v=>{g(v.target.checked)},y=v=>{l(parseInt(v.target.value))},u=v=>{o(v)};return p.jsxs(p.Fragment,{children:[p.jsx(Te,{extension:p.jsxs(p.Fragment,{children:[p.jsxs(xe,{alignItems:ba.Center,children:[p.jsx(an,{children:"liveUpdate: "}),p.jsx(ot,{onChange:h,checked:s})]}),p.jsxs(xe,{alignItems:ba.Center,children:[p.jsx(an,{children:"wait: "}),p.jsx(ys,{onInput:y,type:Yo.Number,value:`${c}`})]}),p.jsx("br",{})]}),data:a.data,columns:a.columns,tableHooks:[ni(u,{liveUpdate:s,wait:c})]}),!!Object.keys(t).length&&p.jsxs(xe,{direction:Na.Column,children:[p.jsx("br",{}),p.jsx(oa,{children:"Last fired callback of changed column:"}),p.jsx("br",{}),p.jsxs(xe,{children:[p.jsx(an,{children:"Column:"}),p.jsx(oa,{children:t.header.id})]}),p.jsxs(xe,{children:[p.jsx(an,{children:"Width:"}),p.jsx(oa,{children:t.columnWidth})]})]})]})}},Cu=[{Header:"Name",accessor:"name",enableMultiSort:!0},{Header:"Age",accessor:"age",enableMultiSort:!0},{Header:"Name 2",accessor:"name2",enableMultiSort:!0},{Header:"Age 2",accessor:"age2",enableMultiSort:!0}],vu=[{name:"Peter",age:40,name2:"Alissa",age2:18},{name:"Kristen",age:40,name2:"Randolph",age2:21},{name:"Peter",age:30,name2:"Rose",age2:90},{name:"Peter",age:70,name2:"Rose",age2:22},{name:"Kristen",age:60,name2:"Willis",age2:80},{name:"Kristen",age:20,name2:"Alissa",age2:80},{name:"Graham",age:40,name2:"Alissa",age2:80},{name:"Peter",age:65,name2:"Rose",age2:26},{name:"Graham",age:65,name2:"Rose",age2:26},{name:"Graham",age:65,name2:"Willis",age2:26},{name:"Graham",age:62,name2:"Willis",age2:26}],ln={name:"Plugin: useOrderedMultiSort",args:{orderedIds:["name","name2","age","age2"]},argTypes:{orderedIds:{control:"array",description:`Defines the sort priority when sorting by multiple columns, starting with the first column ID.
-
-**Note:** Column IDs that are not found in the array use the default priority, so the first sorted column has a higher priority than the next sorted column.`}},render(a){return p.jsx(Te,{columns:Cu,data:vu,sortable:!0,tableHooks:[ti(a.orderedIds)]})}},un={args:{data:zs,isTreeTable:!0}},mn={render:a=>{const[t,o]=k.useState(a.data.slice(0,50)),[s,g]=k.useState(!1),c=k.useRef(50),l=()=>{g(!0)};return k.useEffect(()=>{s&&setTimeout(()=>{o(h=>[...h,...a.data.slice(c.current,c.current+50)]),g(!1),c.current+=50},2e3)},[s,a.data,c.current]),p.jsx(Te,{data:t,columns:a.columns,infiniteScroll:!0,infiniteScrollThreshold:10,header:"Scroll to load more data",onLoadMore:l,loading:s})}},dn={render:a=>{const t=o=>o.id==="0"?p.jsxs(xe,{style:{backgroundColor:"lightblue",height:"300px"},justifyContent:It.Center,alignItems:ba.Center,direction:Na.Column,children:[p.jsx(kt,{children:"height: 300px"}),p.jsx(oa,{children:"This subcomponent will only be displayed below the first row."}),p.jsx("hr",{}),p.jsx(oa,{children:"The button below is rendered with `data-subcomponent-active-element` attribute to ensure consistent focus behavior"}),p.jsx(wa,{"data-subcomponent-active-element":!0,children:"Click"})]}):o.id==="1"?p.jsxs(xe,{style:{backgroundColor:"lightyellow",height:"100px"},justifyContent:It.Center,alignItems:ba.Center,direction:Na.Column,children:[p.jsx(kt,{children:"height: 100px"}),p.jsx(oa,{children:"This subcomponent will only be displayed below the second row."})]}):o.id==="2"?null:p.jsxs(xe,{style:{backgroundColor:"lightgrey",height:"50px"},justifyContent:It.Center,alignItems:ba.Center,direction:Na.Column,children:[p.jsx(kt,{children:"height: 50px"}),p.jsx(oa,{children:"This subcomponent will be displayed below all rows except the first, second and third."})]});return p.jsx(Te,{...a,data:a.data,columns:a.columns,renderRowSubComponent:t,alwaysShowSubComponent:a.alwaysShowSubComponent})}},gn={args:{visibleRowCountMode:fa.Auto,containerHeight:250},argTypes:{containerHeight:{options:[250,500,750,1e3],control:{type:"radio"},description:"Select an option to change the height of the surrounding container of the table (in `px`).
__Note__: This is not an actual prop of the table."}},render:a=>p.jsx("div",{style:{height:`${a.containerHeight}px`},children:p.jsx(Te,{data:a.data,columns:a.columns,visibleRowCountMode:a.visibleRowCountMode,header:`Current height: ${a.containerHeight}px - Change the height in the table above`})})},cn={args:{visibleRowCountMode:fa.Fixed,containerWidth:"auto",data:wn,columns:[{Header:"Name",accessor:"name"},{disableSortBy:!0,responsivePopIn:!0,responsiveMinWidth:601,PopInHeader:"Custom Header Text (age)",Header:"Age",accessor:"age"},{disableSortBy:!0,responsivePopIn:!0,responsiveMinWidth:401,Header:"Friend Name",PopInHeader:a=>p.jsx("div",{style:{color:"red"},children:"Friend Name (custom)"}),accessor:"friend.name"},{disableSortBy:!0,responsiveMinWidth:401,Header:"Friend Age",accessor:"friend.age"},{disableSortBy:!0,responsivePopIn:!0,responsiveMinWidth:801,id:"actions",Header:"Actions",width:100,disableResizing:!0,Cell:a=>p.jsxs(xe,{children:[p.jsx(wa,{icon:"edit"}),p.jsx(wa,{icon:"delete"})]})}]},argTypes:{containerWidth:{options:[400,600,800,"auto"],control:{type:"radio"},description:"Select an option to change the width of the surrounding container of the table (in `px`).
__Note__: This is not an actual prop of the table."}},render:a=>p.jsx("div",{style:{width:a.containerWidth&&typeof a.containerWidth=="number"?`${a.containerWidth}px`:"auto"},children:p.jsx(Te,{data:a.data,columns:a.columns,visibleRows:5,adjustTableHeightOnPopIn:a.adjustTableHeightOnPopIn,header:`Current width: ${a.containerWidth}`})})},fn={args:{withNavigationHighlight:!0,selectionMode:Ce.MultiSelect,data:wn},render:a=>{const[t,o]=k.useState(),s=c=>{o(c.detail.row)},g=k.useCallback(c=>(t==null?void 0:t.id)===c.id,[t]);return p.jsx(Te,{data:a.data,columns:a.columns,withNavigationHighlight:!0,selectionMode:a.selectionMode,markNavigatedRow:g,onRowSelect:s})}},hn={args:{data:wn},render:a=>{const t=k.useCallback((s,g,c)=>c.length>0?s.filter(l=>{const h=l.values[g];return!!c.some(y=>h.includes(y))}):s,[]),o=k.useMemo(()=>[{Header:"Custom Column Filter",accessor:"name",filter:t,Filter:({column:s})=>{const g=["Carl","Dan","Rose","Susanne"];return p.jsx(Xo,{placeholder:"Filter Names",onSelectionChange:c=>{s.setFilter(c.detail.items.map(l=>l.getAttribute("text")))},children:g.map(c=>{var h;const l=(h=s==null?void 0:s.filterValue)==null?void 0:h.some(y=>y.includes(c));return p.jsx(Zo,{text:c,selected:l},c)})})}},{Header:"Age",accessor:"age"}],[]);return p.jsx(Te,{columns:o,data:a.data,filterable:!0})}};var Br,Wr,Er;nn.parameters={...nn.parameters,docs:{...(Br=nn.parameters)==null?void 0:Br.docs,source:{originalSource:"{}",...(Er=(Wr=nn.parameters)==null?void 0:Wr.docs)==null?void 0:Er.source}}};var Ir,Hr,Nr;tn.parameters={...tn.parameters,docs:{...(Ir=tn.parameters)==null?void 0:Ir.docs,source:{originalSource:`{
- name: 'Plugin: useRowDisableSelection',
- args: {
- data: dataLarge.map(item => ({
- ...item,
- disableSelection: Math.random() < 0.5
- })),
- selectionMode: AnalyticalTableSelectionMode.MultiSelect
- },
- render: args => {
- const disableRowFunc = row => row.original.age < 40;
- const [isFunc, setIsFunc] = useState(true);
- return <>
-
-
-
-
-