Skip to content

Commit ee6e748

Browse files
Lukas742Lukas742
authored
fix(AnalyticalTable - TypeScript): adjust column types for filtering (#6715)
1 parent c87c690 commit ee6e748

File tree

3 files changed

+34
-11
lines changed

3 files changed

+34
-11
lines changed

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const TableComp = () => {
110110
| `disableFilters` | `boolean` | Disable filters for this column |
111111
| `disableGlobalFilter` | `boolean` | Disable global filtering for this column |
112112
| `defaultCanFilter` | `boolean` | If set to true, this column will be filterable, regardless if it has a valid `accessor` |
113-
| `filter` | `string OR Function` | Either a string or a filter function.<br />Supported String Values: <ul><li>`text`</li><li>`exactText`</li><li>`exactTextCase`</li><li>`equals`</li></ul> |
113+
| `filter` | `string OR Function` | Either a string or a filter function.<br />Supported String Values: <ul><li>`text`</li><li>`exactText`</li><li>`exactTextCase`</li><li>`equals`</li></ul>**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. |
114114
| `Aggregated` | `ComponentType` | Component to render for aggregated cells |
115115
| `aggregate` | `string` OR<br/> `((leafValues, aggregatedValues) => any)` | Aggregation function or string.<br />Supported String Values: <ul><li>`sum`</li><li>`min`</li><li>`max`</li><li>`minMax`</li><li>`average`</li><li>`median`</li><li>`unique`</li><li>`uniqueCount`</li><li>`count`</li></ul> |
116116
| `aggregateValue` | `string` OR<br/> `((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 |

‎packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
1-
import type { FC } from 'react';
21
import { useCallback } from 'react';
32
import { stopPropagation } from '../../../../internal/stopPropagation.js';
3+
import type { InputPropTypes } from '../../../../webComponents/Input/index.js';
44
import { Input } from '../../../../webComponents/Input/index.js';
5+
import type { FilterProps } from '../../types/index.js';
56

6-
export const DefaultFilterComponent: FC<any> = ({ column }) => {
7-
const handleChange = useCallback(
7+
export const DefaultFilterComponent = ({ column }: FilterProps) => {
8+
const handleInput: InputPropTypes['onInput'] = useCallback(
89
(e) => {
10+
// Setting the filter to `undefined` removes it
911
column.setFilter(e.target.value || undefined);
1012
},
1113
[column.setFilter]
1214
);
13-
const handleKeyDown = (e) => {
15+
16+
const handleKeyDown: InputPropTypes['onKeyDown'] = (e) => {
1417
if (e.key !== 'Enter') {
1518
stopPropagation(e);
1619
}
1720
};
18-
// todo remove "undefined" check if wc issue has been fixed (https://github.com/SAP/ui5-webcomponents/issues/2616)
19-
return <Input onInput={handleChange} value={column.filterValue ?? ''} showClearIcon onKeyDown={handleKeyDown} />;
21+
22+
return <Input onInput={handleInput} value={column.filterValue} showClearIcon onKeyDown={handleKeyDown} />;
2023
};
24+
25+
DefaultFilterComponent.displayName = 'DefaultFilterComponent';

‎packages/main/src/components/AnalyticalTable/types/index.ts

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import type {
1414
VerticalAlign
1515
} from '../../../enums/index.js';
1616
import type { CommonProps } from '../../../types/index.js';
17+
import type { PopoverDomRef } from '../../../webComponents/Popover/index.js';
1718

1819
export enum RenderColumnTypes {
1920
Filter = 'Filter',
@@ -60,7 +61,12 @@ export interface ColumnType extends Omit<AnalyticalTableColumnDefinition, 'id'>
6061
* @param props The props are added to the table instance
6162
*/
6263
render?: (type: RenderColumnTypes | keyof typeof RenderColumnTypes, props: Record<string, any>) => ReactNode;
63-
setFilter?: (val: string) => void;
64+
/**
65+
* Set the filter value for the current column.
66+
*
67+
* __Note:__ If set to `undefined`, the filter is removed.
68+
*/
69+
setFilter?: (val: string | undefined) => void;
6470
sortDescFirst?: boolean;
6571
sortedIndex?: number;
6672
toggleHidden?: (hidden?: boolean) => void;
@@ -139,7 +145,12 @@ export interface TableInstance {
139145
selectedFlatRows?: RowType[];
140146
setAllFilters?: (filtersObjectArray: Record<string, any>[]) => void;
141147
setColumnOrder?: any;
142-
setFilter?: (columnId: string, filterValue: string) => void;
148+
/**
149+
* Set the filter value for the defined column.
150+
*
151+
* __Note:__ If set to `undefined`, the filter is removed.
152+
*/
153+
setFilter?: (columnId: string, filterValue: string | undefined) => void;
143154
setGlobalFilter?: (filterValue: string) => void;
144155
setGroupBy?: (columnIds: string[]) => void;
145156
setHiddenColumns?: (columnIds: string[]) => void;
@@ -323,6 +334,11 @@ export interface TableInstanceWithPopoverProps extends TableInstance {
323334
popoverProps: PopoverProps;
324335
}
325336

337+
export interface FilterProps {
338+
column: ColumnType;
339+
popoverRef: MutableRefObject<PopoverDomRef>;
340+
}
341+
326342
export interface AnalyticalTableColumnDefinition {
327343
// base properties
328344
/**
@@ -403,7 +419,7 @@ export interface AnalyticalTableColumnDefinition {
403419
/**
404420
* Filter Component to be rendered in the Header.
405421
*/
406-
Filter?: string | ComponentType<any> | ((props?: any) => ReactNode);
422+
Filter?: ComponentType<FilterProps> | ((props: FilterProps) => ReactNode);
407423
/**
408424
* Disable filters for this column.
409425
*/
@@ -420,8 +436,10 @@ export interface AnalyticalTableColumnDefinition {
420436
* * `exactText`
421437
* * `exactTextCase`
422438
* * `equals`
439+
*
440+
* __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.
423441
*/
424-
filter?: string | ((rows: any[], columnIds: string[], filterValue: string) => any);
442+
filter?: string | ((rows: RowType[], columnIds: string[], filterValue: string) => RowType[]);
425443

426444
// useGlobalFilter
427445
/**

0 commit comments

Comments
 (0)