diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx index 95dfbef3099..77baf0faf0e 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx @@ -567,6 +567,67 @@ const TableComponent = () => { +### Code + +
+ +Show static code + +```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 ? ( + + ) : ( + + ); + }; + return ( + <> + + + Default NoData Component + + + IllustratedMessage NoData Component + + + With Data + + {' '} + |{' '} + + Table filtered + + + + ); +} +``` + +
+ ## Kitchen Sink diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx index 254b03aba9c..74909aa433f 100644 --- 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 ? ( + + ) : ( + + ); + }; + + 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 = { With Data - + {' '} + |{' '} + + Table filtered + {context.viewMode === 'story' ? ( - - } - /> + ) : ( <>
- - } - /> + )} diff --git a/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/NoDataComponent/index.tsx index 89f9f32edbf..945679fe8f4 100644 --- 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 ( -
+
{noDataText}
); diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx index a2bae2c6988..f6f0c10bc2f 100644 --- 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 0 || tableState.globalFilter ? noDataTextFiltered : noDataTextI18n); + const noDataFiltered = tableState.filters?.length > 0 || tableState.globalFilter; + const noDataTextLocal = noDataText ?? (noDataFiltered ? noDataTextFiltered : noDataTextI18n); const [componentRef, analyticalTableRef] = useSyncRef(ref); const [cbRef, scrollToRef] = useScrollToRef(componentRef, dispatch); @@ -844,7 +845,14 @@ const AnalyticalTable = forwardRef ) : ( - + )}
)} diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts index 560a656030e..33937d4b64a 100644 --- 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 { * * @default DefaultNoDataComponent */ - NoDataComponent?: ComponentType; + 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 new file mode 100644 index 00000000000..2692223b949 --- /dev/null +++ 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 index 3b1d431dabe..960e4ecf3be 100644 --- 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';