diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx index b482280ba03..a3a614dc9ca 100644 --- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx @@ -1,3 +1,4 @@ +import '@ui5/webcomponents-icons/dist/icons/decline'; import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils'; import { CustomListItem } from '@ui5/webcomponents-react/lib/CustomListItem'; import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox'; @@ -20,13 +21,13 @@ export interface ColumnHeaderModalProperties { showGroup?: boolean; column: ColumnType; style: CSSProperties; - onSort?: (e: CustomEvent<{column: unknown; sortDirection: string}>) => void; - onGroupBy?: (e: CustomEvent<{column: unknown; isGrouped: boolean}>) => void; + onSort?: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void; + onGroupBy?: (e: CustomEvent<{ column: unknown; isGrouped: boolean }>) => void; } const staticStyle = { fontWeight: 'normal' }; -export const ColumnHeaderModal: FC = (props) => { +export const ColumnHeaderModal: FC = (props: ColumnHeaderModalProperties) => { const { showGroup, showSort, showFilter, column, style, openBy, onSort, onGroupBy } = props; const { Filter } = column; @@ -60,6 +61,17 @@ export const ColumnHeaderModal: FC = (props) => { ); } break; + case 'clear': + column.clearSortBy(); + if (typeof onSort === 'function') { + onSort( + enrichEventWithDetails(e, { + column, + sortDirection: sortType + }) + ); + } + break; case 'group': const willGroup = !column.isGrouped; column.toggleGroupBy(willGroup); @@ -77,9 +89,12 @@ export const ColumnHeaderModal: FC = (props) => { popoverRef.current.close(); } }, - [column, popoverRef, onGroupBy] + [column, popoverRef, onGroupBy, onSort] ); + const isSortedAscending = column.isSorted && column.isSortedDesc === false; + const isSortedDescending = column.isSorted && column.isSortedDesc === true; + return ( = (props) => { style={staticStyle as CSSProperties} > - {showSort && ( - + {isSortedAscending && ( + + Clear Sorting + + )} + {showSort && !isSortedAscending && ( + Sort Ascending )} - {showSort && ( - + {showSort && !isSortedDescending && ( + Sort Descending )} + {isSortedDescending && ( + + Clear Sorting + + )} {showFilter && !column.isGrouped && ( diff --git a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts index a3f995f58c6..ab43f23fbbb 100644 --- a/packages/main/src/components/AnalyticalTable/types/ColumnType.ts +++ b/packages/main/src/components/AnalyticalTable/types/ColumnType.ts @@ -7,6 +7,7 @@ export interface ColumnType extends Column { id: string; Filter: ComponentType<{ column: ColumnType; popoverRef?: RefObject }>; toggleSortBy: (descending: boolean, multi?: any) => void; + clearSortBy: () => void; toggleGroupBy: (set: boolean) => void; canFilter: boolean; canResize: boolean;