Skip to content

fix(AnalyticalTable - TypeScript): adjust column types for filtering #6715

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 9, 2024
Merged

fix(AnalyticalTable - TypeScript): adjust column types for filtering #6715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c2b631d
fix(AnalyticalTable - TypeScript): adjust column types for filtering
Lukas742 Dec 9, 2024
cdd1933
Update AnalyticalTable.mdx
Lukas742 Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading