Skip to content

Commit

Permalink
fix(AnalyticalTable - TypeScript): adjust column types for filtering (#…
Browse files Browse the repository at this point in the history 
…6715)
  • Loading branch information
@Lukas742
Lukas742 authored Dec 9, 2024
1 parent c87c690 commit ee6e748
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 11 deletions.
2 changes: 1 addition & 1 deletion packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.<br />Supported String Values: <ul><li>`text`</li><li>`exactText`</li><li>`exactTextCase`</li><li>`equals`</li></ul> |
| `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. |
| `Aggregated` | `ComponentType` | Component to render for aggregated cells |
| `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> |
| `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 |
Expand Down
17 changes: 11 additions & 6 deletions packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<any> = ({ 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 <Input onInput={handleChange} value={column.filterValue ?? ''} showClearIcon onKeyDown={handleKeyDown} />;

return <Input onInput={handleInput} value={column.filterValue} showClearIcon onKeyDown={handleKeyDown} />;
};

DefaultFilterComponent.displayName = 'DefaultFilterComponent';
26 changes: 22 additions & 4 deletions packages/main/src/components/AnalyticalTable/types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -60,7 +61,12 @@ export interface ColumnType extends Omit<AnalyticalTableColumnDefinition, 'id'>
* @param props The props are added to the table instance
*/
render?: (type: RenderColumnTypes | keyof typeof RenderColumnTypes, props: Record<string, any>) => 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;
Expand Down Expand Up @@ -139,7 +145,12 @@ export interface TableInstance {
selectedFlatRows?: RowType[];
setAllFilters?: (filtersObjectArray: Record<string, any>[]) => 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;
Expand Down Expand Up @@ -323,6 +334,11 @@ export interface TableInstanceWithPopoverProps extends TableInstance {
popoverProps: PopoverProps;
}

export interface FilterProps {
column: ColumnType;
popoverRef: MutableRefObject<PopoverDomRef>;
}

export interface AnalyticalTableColumnDefinition {
// base properties
/**
Expand Down Expand Up @@ -403,7 +419,7 @@ export interface AnalyticalTableColumnDefinition {
/**
* Filter Component to be rendered in the Header.
*/
Filter?: string | ComponentType<any> | ((props?: any) => ReactNode);
Filter?: ComponentType<FilterProps> | ((props: FilterProps) => ReactNode);
/**
* Disable filters for this column.
*/
Expand All @@ -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
/**
Expand Down

0 comments on commit ee6e748

Please sign in to comment.