diff --git a/CHANGELOG.md b/CHANGELOG.md index 19a77a5c..d4794842 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## 3.0.6 + +- Add sorting in PageloadingTable + ## 3.0.5 - Add storybook autodocs and fix README diff --git a/package.json b/package.json index ad96a949..789210c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@catena-x/portal-shared-components", - "version": "3.0.5", + "version": "3.0.6", "description": "Catena-X Portal Shared Components", "author": "Catena-X Contributors", "license": "Apache-2.0", diff --git a/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx b/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx index 34c2cdc5..307c3983 100644 --- a/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx +++ b/src/components/basic/Table/components/Toolbar/SearchAndFilterButtonToolbar.tsx @@ -27,6 +27,8 @@ import { ViewSelector } from '../../../ViewSelector' import type { View } from '../../../ViewSelector' import { Typography } from '../../../Typography' import type { SelectedFilter } from './UltimateToolbar' +import { SortOption, type SortOptionsType } from '../../../SortOption' +import SortImage from './SortImage' export interface SearchAndFilterButtonToolbarProps extends ToolbarProps { placeholder?: string @@ -35,6 +37,9 @@ export interface SearchAndFilterButtonToolbarProps extends ToolbarProps { filterViews?: View[] defaultFilter?: string onFilter?: (selectedFilter: SelectedFilter) => void + defaultSortOption?: string + sortOptions?: SortOptionsType[] + onSortClick?: (value: string) => void descriptionText?: string autoFocus?: boolean } @@ -49,12 +54,17 @@ export const SearchAndFilterButtonToolbar = ({ searchDebounce = 500, filterViews, defaultFilter = '', + defaultSortOption, + sortOptions, + onSortClick, descriptionText, autoFocus, }: SearchAndFilterButtonToolbarProps) => { + const [searchInputText, setSearchInputText] = useState( searchExpr ?? (searchInputData != null ? searchInputData.text : '') ) + const [showModal, setShowModal] = useState(false) const { spacing } = useTheme() @@ -108,7 +118,7 @@ export const SearchAndFilterButtonToolbar = ({ padding: spacing(2, 0, 6, 0), display: 'flex', alignItems: 'center', - justifyContent: 'space-between', + justifyContent: 'center', flexDirection: 'column', marginTop: '40px', } @@ -131,15 +141,52 @@ export const SearchAndFilterButtonToolbar = ({ }} /> - {filterViews && ( - - - - )} + + {filterViews && ( + + + + )} + { + sortOptions && defaultSortOption && + + { + setShowModal(!showModal) + }} + selected={showModal} + /> + + { + onSortClick?.(value) + setShowModal(false) + }} + /> + + + } + {descriptionText && ( ) { + return ( + + + + ) +} diff --git a/src/components/basic/Table/index.tsx b/src/components/basic/Table/index.tsx index ecbc3c20..7ca1a278 100644 --- a/src/components/basic/Table/index.tsx +++ b/src/components/basic/Table/index.tsx @@ -35,6 +35,7 @@ import { Typography } from '../Typography' import { Error500Overlay } from './components/Error/Error500Overlay' import { Error400Overlay } from './components/Error/Error400Overlay' import type { View } from '../ViewSelector' +import { type SortOptionsType } from '../SortOption' export { StatusTag } export type toolbarType = 'basic' | 'premium' | 'ultimate' | 'searchAndFilter' @@ -67,6 +68,9 @@ export interface TableProps extends DataGridProps { descriptionText?: string defaultFilter?: string filterViews?: View[] + defaultSortOption?: string + sortOptions?: SortOptionsType[] + onSortClick?: (value: string) => void alignCell?: string error?: { status: number @@ -105,6 +109,9 @@ export const Table = ({ descriptionText, defaultFilter, filterViews, + defaultSortOption, + sortOptions, + onSortClick, alignCell = 'center', error, reload, @@ -130,6 +137,9 @@ export const Table = ({ descriptionText, defaultFilter, filterViews, + defaultSortOption, + sortOptions, + onSortClick, autoFocus, }