feat(AnalyticalTable): add noDataReason & accessibleRole prop to NoDataComponent (#7732)

Lukas742 · web-flow · commit 4e99e5feb3f1 · 2025-10-06T08:12:55.000Z
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
@@ -567,6 +567,67 @@ const TableComponent = () => {
 
 <Canvas of={ComponentStories.NoData} />
 
+### Code
+
+<details>
+
+<summary>Show static code</summary>
+
+```tsx
+function NoDataTable(props) {
+  const [selected, setSelected] = useState('noData');
+  const [filtered, setFiltered] = useState(false);
+  const handleChange: SegmentedButtonPropTypes['onSelectionChange'] = (e) => {
+    const { key } = e.detail.selectedItems[0].dataset;
+    setSelected(key);
+    if (key === 'data') {
+      setFiltered(false);
+    }
+  };
+  const handleClick: ToggleButtonPropTypes['onClick'] = (e) => {
+    setFiltered(!!e.target.pressed);
+  };
+
+  const NoDataComponent: AnalyticalTablePropTypes['NoDataComponent'] =
+    selected === 'noData'
+      ? undefined
+      : (props) => {
+          return filtered ? (
+            <IllustratedMessage role={props.accessibleRole} name={NoFilterResults} />
+          ) : (
+            <IllustratedMessage role={props.accessibleRole} name={NoDataIllustration} />
+          );
+        };
+  return (
+    <>
+      <SegmentedButton onSelectionChange={handleChange} accessibleName="Select data view mode">
+        <SegmentedButtonItem selected={selected === 'noData'} data-key="noData">
+          Default NoData Component
+        </SegmentedButtonItem>
+        <SegmentedButtonItem selected={selected === 'illustratedMessage'} data-key="illustratedMessage">
+          IllustratedMessage NoData Component
+        </SegmentedButtonItem>
+        <SegmentedButtonItem selected={selected === 'data'} data-key="data">
+          With Data
+        </SegmentedButtonItem>
+      </SegmentedButton>{' '}
+      |{' '}
+      <ToggleButton onClick={handleClick} pressed={filtered} disabled={selected === 'data'}>
+        Table filtered
+      </ToggleButton>
+      <AnalyticalTable
+        {...props}
+        data={selected === 'data' ? props.data : []}
+        globalFilterValue={filtered ? 'Non-existing text' : undefined}
+        NoDataComponent={NoDataComponent}
+      />
+    </>
+  );
+}
+```
+
+</details>
+
 ## Kitchen Sink
 
 <Canvas of={ComponentStories.KitchenSink} />
diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx
@@ -5,6 +5,7 @@ import '@ui5/webcomponents-icons/dist/delete.js';
 import '@ui5/webcomponents-icons/dist/edit.js';
 import '@ui5/webcomponents-icons/dist/settings.js';
 import NoDataIllustration from '@ui5/webcomponents-fiori/dist/illustrations/NoData.js';
+import NoFilterResults from '@ui5/webcomponents-fiori/dist/illustrations/NoFilterResults.js';
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import {
   AnalyticalTablePopinDisplay,
@@ -29,6 +30,8 @@ import { SegmentedButtonItem } from '../../webComponents/SegmentedButtonItem/ind
 import { Select } from '../../webComponents/Select/index.js';
 import { Tag } from '../../webComponents/Tag/index.js';
 import { Text } from '../../webComponents/Text/index.js';
+import type { ToggleButtonPropTypes } from '../../webComponents/ToggleButton/index.js';
+import { ToggleButton } from '../../webComponents/ToggleButton/index.js';
 import { FlexBox } from '../FlexBox/index.js';
 import { ObjectStatus } from '../ObjectStatus/index.js';
 import type { AnalyticalTableColumnDefinition, AnalyticalTablePropTypes } from './index.js';
@@ -590,8 +593,34 @@ export const CustomFilter: Story = {
 export const NoData: Story = {
   render(args, context) {
     const [selected, setSelected] = useState('noData');
+    const [filtered, setFiltered] = useState(false);
     const handleChange: SegmentedButtonPropTypes['onSelectionChange'] = (e) => {
-      setSelected(e.detail.selectedItems[0].dataset.key);
+      const { key } = e.detail.selectedItems[0].dataset;
+      setSelected(key);
+      if (key === 'data') {
+        setFiltered(false);
+      }
+    };
+    const handleClick: ToggleButtonPropTypes['onClick'] = (e) => {
+      setFiltered(!!e.target.pressed);
+    };
+
+    const NoDataComponent: AnalyticalTablePropTypes['NoDataComponent'] =
+      selected === 'noData'
+        ? undefined
+        : (props) => {
+            return filtered ? (
+              <IllustratedMessage role={props.accessibleRole} name={NoFilterResults} />
+            ) : (
+              <IllustratedMessage role={props.accessibleRole} name={NoDataIllustration} />
+            );
+          };
+
+    const tableProps = {
+      ...args,
+      data: selected === 'data' ? args.data : [],
+      globalFilterValue: filtered ? 'Non-existing text' : undefined,
+      NoDataComponent: NoDataComponent,
     };
 
     return (
@@ -606,27 +635,17 @@ export const NoData: Story = {
           <SegmentedButtonItem selected={selected === 'data'} data-key="data">
             With Data
           </SegmentedButtonItem>
-        </SegmentedButton>
+        </SegmentedButton>{' '}
+        |{' '}
+        <ToggleButton onClick={handleClick} pressed={filtered} disabled={selected === 'data'}>
+          Table filtered
+        </ToggleButton>
         {context.viewMode === 'story' ? (
-          <AnalyticalTable
-            {...args}
-            data={selected === 'data' ? args.data : []}
-            NoDataComponent={
-              selected === 'noData' ? undefined : () => <IllustratedMessage role="gridcell" name={NoDataIllustration} />
-            }
-          />
+          <AnalyticalTable {...tableProps} />
         ) : (
           <>
             <hr />
-            <ToggleableTable
-              {...args}
-              data={selected === 'data' ? args.data : []}
-              NoDataComponent={
-                selected === 'noData'
-                  ? undefined
-                  : () => <IllustratedMessage role="gridcell" name={NoDataIllustration} />
-              }
-            />
+            <ToggleableTable {...tableProps} />
           </>
         )}
       </>
diff --git a/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx
@@ -1,11 +1,9 @@
-interface NoDataComponentProps {
-  noDataText: string;
-  className: string;
-}
+import type { AnalyticalTablePropTypes } from '../../types/index.js';
 
-export const DefaultNoDataComponent = ({ noDataText, className }: NoDataComponentProps) => {
+export const DefaultNoDataComponent: AnalyticalTablePropTypes['NoDataComponent'] = (props) => {
+  const { noDataText, className, accessibleRole } = props;
   return (
-    <div className={className} data-component-name="AnalyticalTableNoData" role="gridcell">
+    <div className={className} data-component-name="AnalyticalTableNoData" role={accessibleRole}>
       {noDataText}
     </div>
   );
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -24,6 +24,7 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
+import { AnalyticalTableNoDataReason } from '../../enums/AnalyticalTableNoDataReason.js';
 import { AnalyticalTablePopinDisplay } from '../../enums/AnalyticalTablePopinDisplay.js';
 import { AnalyticalTableScaleWidthMode } from '../../enums/AnalyticalTableScaleWidthMode.js';
 import { AnalyticalTableSelectionBehavior } from '../../enums/AnalyticalTableSelectionBehavior.js';
@@ -85,9 +86,9 @@ import type {
   AnalyticalTableDomRef,
   AnalyticalTablePropTypes,
   AnalyticalTableState,
+  CellInstance,
   DivWithCustomScrollProp,
   TableInstance,
-  CellInstance,
 } from './types/index.js';
 import {
   getCombinedElementsHeight,
@@ -325,8 +326,8 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
 
   const noDataTextI18n = i18nBundle.getText(LIST_NO_DATA);
   const noDataTextFiltered = i18nBundle.getText(NO_DATA_FILTERED);
-  const noDataTextLocal =
-    noDataText ?? (tableState.filters?.length > 0 || tableState.globalFilter ? noDataTextFiltered : noDataTextI18n);
+  const noDataFiltered = tableState.filters?.length > 0 || tableState.globalFilter;
+  const noDataTextLocal = noDataText ?? (noDataFiltered ? noDataTextFiltered : noDataTextI18n);
 
   const [componentRef, analyticalTableRef] = useSyncRef<AnalyticalTableDomRef>(ref);
   const [cbRef, scrollToRef] = useScrollToRef(componentRef, dispatch);
@@ -844,7 +845,14 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                     pleaseWaitText={i18nBundle.getText(PLEASE_WAIT)}
                   />
                 ) : (
-                  <NoDataComponent noDataText={noDataTextLocal} className={classNames.noData} />
+                  <NoDataComponent
+                    noDataText={noDataTextLocal}
+                    className={classNames.noData}
+                    noDataReason={
+                      noDataFiltered ? AnalyticalTableNoDataReason.Filtered : AnalyticalTableNoDataReason.Empty
+                    }
+                    accessibleRole="gridcell"
+                  />
                 )}
               </div>
             )}
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -10,6 +10,7 @@ import type {
   RefObject,
   SetStateAction,
 } from 'react';
+import type { AnalyticalTableNoDataReason } from '../../../enums/AnalyticalTableNoDataReason.js';
 import type { AnalyticalTablePopinDisplay } from '../../../enums/AnalyticalTablePopinDisplay.js';
 import type { AnalyticalTableScaleWidthMode } from '../../../enums/AnalyticalTableScaleWidthMode.js';
 import type { AnalyticalTableScrollMode } from '../../../enums/AnalyticalTableScrollMode.js';
@@ -1040,7 +1041,12 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
    *
    * @default DefaultNoDataComponent
    */
-  NoDataComponent?: ComponentType<any>;
+  NoDataComponent?: ComponentType<{
+    noDataText: string;
+    className: string;
+    noDataReason: AnalyticalTableNoDataReason | keyof typeof AnalyticalTableNoDataReason;
+    accessibleRole: 'gridcell';
+  }>;
 
   /**
    * Exposes the internal table instance.
diff --git a/packages/main/src/enums/AnalyticalTableNoDataReason.ts b/packages/main/src/enums/AnalyticalTableNoDataReason.ts
@@ -0,0 +1,13 @@
+/**
+ * Different reasons why the `NoDataComponent` is displayed.
+ */
+export enum AnalyticalTableNoDataReason {
+  /*
+   * No data was passed to the table.
+   */
+  Empty = 'Empty',
+  /*
+   * No results match the applied filters.
+   */
+  Filtered = 'Filtered',
+}
diff --git a/packages/main/src/enums/index.ts b/packages/main/src/enums/index.ts
@@ -1,3 +1,4 @@
+export * from './AnalyticalTableNoDataReason.js';
 export * from './AnalyticalTablePopinDisplay.js';
 export * from './AnalyticalTableScaleWidthMode.js';
 export * from './AnalyticalTableScrollMode.js';

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+export * from './AnalyticalTableNoDataReason.js';`
`1`	`2`	`export * from './AnalyticalTablePopinDisplay.js';`
`2`	`3`	`export * from './AnalyticalTableScaleWidthMode.js';`
`3`	`4`	`export * from './AnalyticalTableScrollMode.js';`