diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
index fc41c665c67..13d3dad696b 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
@@ -110,7 +110,7 @@ const TableComp = () => {
| `disableFilters` | `boolean` | Disable filters for this column |
| `disableGlobalFilter` | `boolean` | Disable global filtering for this column |
| `defaultCanFilter` | `boolean` | If set to true, this column will be filterable, regardless if it has a valid `accessor` |
-| `filter` | `string OR Function` | Either a string or a filter function. Supported String Values:
`text`
`exactText`
`exactTextCase`
`equals`
|
+| `filter` | `string OR Function` | Either a string or a filter function. Supported String Values:
`text`
`exactText`
`exactTextCase`
`equals`
**Note:** When the standard `Filter` component is used, the filter function is not triggered if the `filterValue` is empty, as the filter is then removed. |
| `Aggregated` | `ComponentType` | Component to render for aggregated cells |
| `aggregate` | `string` OR `((leafValues, aggregatedValues) => any)` | Aggregation function or string. Supported String Values:
`sum`
`min`
`max`
`minMax`
`average`
`median`
`unique`
`uniqueCount`
`count`
|
| `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 |
diff --git a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
index 8a6098dca53..9929bfd968f 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
@@ -1,20 +1,25 @@
-import type { FC } from 'react';
import { useCallback } from 'react';
import { stopPropagation } from '../../../../internal/stopPropagation.js';
+import type { InputPropTypes } from '../../../../webComponents/Input/index.js';
import { Input } from '../../../../webComponents/Input/index.js';
+import type { FilterProps } from '../../types/index.js';
-export const DefaultFilterComponent: FC = ({ column }) => {
- const handleChange = useCallback(
+export const DefaultFilterComponent = ({ column }: FilterProps) => {
+ const handleInput: InputPropTypes['onInput'] = useCallback(
(e) => {
+ // Setting the filter to `undefined` removes it
column.setFilter(e.target.value || undefined);
},
[column.setFilter]
);
- const handleKeyDown = (e) => {
+
+ const handleKeyDown: InputPropTypes['onKeyDown'] = (e) => {
if (e.key !== 'Enter') {
stopPropagation(e);
}
};
- // todo remove "undefined" check if wc issue has been fixed (https://github.com/SAP/ui5-webcomponents/issues/2616)
- return ;
+
+ return ;
};
+
+DefaultFilterComponent.displayName = 'DefaultFilterComponent';
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index 82b680ed478..dd9bebd0a6d 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -14,6 +14,7 @@ import type {
VerticalAlign
} from '../../../enums/index.js';
import type { CommonProps } from '../../../types/index.js';
+import type { PopoverDomRef } from '../../../webComponents/Popover/index.js';
export enum RenderColumnTypes {
Filter = 'Filter',
@@ -60,7 +61,12 @@ export interface ColumnType extends Omit
* @param props The props are added to the table instance
*/
render?: (type: RenderColumnTypes | keyof typeof RenderColumnTypes, props: Record) => ReactNode;
- setFilter?: (val: string) => void;
+ /**
+ * Set the filter value for the current column.
+ *
+ * __Note:__ If set to `undefined`, the filter is removed.
+ */
+ setFilter?: (val: string | undefined) => void;
sortDescFirst?: boolean;
sortedIndex?: number;
toggleHidden?: (hidden?: boolean) => void;
@@ -139,7 +145,12 @@ export interface TableInstance {
selectedFlatRows?: RowType[];
setAllFilters?: (filtersObjectArray: Record[]) => void;
setColumnOrder?: any;
- setFilter?: (columnId: string, filterValue: string) => void;
+ /**
+ * Set the filter value for the defined column.
+ *
+ * __Note:__ If set to `undefined`, the filter is removed.
+ */
+ setFilter?: (columnId: string, filterValue: string | undefined) => void;
setGlobalFilter?: (filterValue: string) => void;
setGroupBy?: (columnIds: string[]) => void;
setHiddenColumns?: (columnIds: string[]) => void;
@@ -323,6 +334,11 @@ export interface TableInstanceWithPopoverProps extends TableInstance {
popoverProps: PopoverProps;
}
+export interface FilterProps {
+ column: ColumnType;
+ popoverRef: MutableRefObject;
+}
+
export interface AnalyticalTableColumnDefinition {
// base properties
/**
@@ -403,7 +419,7 @@ export interface AnalyticalTableColumnDefinition {
/**
* Filter Component to be rendered in the Header.
*/
- Filter?: string | ComponentType | ((props?: any) => ReactNode);
+ Filter?: ComponentType | ((props: FilterProps) => ReactNode);
/**
* Disable filters for this column.
*/
@@ -420,8 +436,10 @@ export interface AnalyticalTableColumnDefinition {
* * `exactText`
* * `exactTextCase`
* * `equals`
+ *
+ * __Note:__ When the standard `Filter` component is used, the filter function is not triggered if the `filterValue` is empty, as the filter is then removed.
*/
- filter?: string | ((rows: any[], columnIds: string[], filterValue: string) => any);
+ filter?: string | ((rows: RowType[], columnIds: string[], filterValue: string) => RowType[]);
// useGlobalFilter
/**