feat(table): enable sorting in page loading table

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.6
+
+- Add sorting in PageloadingTable
+
 ## 3.0.5
 
 - Add storybook autodocs and fix README

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",

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<string>(
     searchExpr ?? (searchInputData != null ? searchInputData.text : '')
   )
+  const [showModal, setShowModal] = useState<boolean>(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 = ({
           }}
         />
       </Box>
-      {filterViews && (
-        <Box
-          sx={{
-            margin: '30px 0px 30px 0px',
-          }}
-        >
-          <ViewSelector activeView={defaultFilter} views={filterViews} />
-        </Box>
-      )}
+      <Box sx={{
+        display: 'flex',
+        alignItems: 'center'
+      }}>
+        {filterViews && (
+          <Box
+            sx={{
+              margin: '30px 0px 30px 0px',
+            }}
+          >
+            <ViewSelector activeView={defaultFilter} views={filterViews} />
+          </Box>
+        )}
+        {
+          sortOptions && defaultSortOption &&
+          <Box sx={{
+            position: 'relative'
+          }}>
+            <SortImage
+              onClick={() => {
+                setShowModal(!showModal)
+              }}
+              selected={showModal}
+            />
+            <Box sx={{
+              position: 'absolute',
+              left: '30px',
+              top: '40px',
+              background: '#f9f9f9',
+              boxShadow: '0px 10px 20px rgba(80, 80, 80, 0.3)',
+              borderRadius: '16px',
+              zIndex: 9,
+            }}>
+              <SortOption
+                show={showModal}
+                sortOptions={sortOptions}
+                selectedOption={defaultSortOption}
+                setSortOption={(value: string) => {
+                  onSortClick?.(value)
+                  setShowModal(false)
+                }}
+              />
+            </Box>
+          </Box>
+        }
+      </Box>
       {descriptionText && (
         <Box
           sx={{

src/components/basic/Table/components/Toolbar/SortImage/index.tsx

@@ -0,0 +1,52 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Mercedes-Benz Group AG and BMW Group AG
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import Sort from '@mui/icons-material/Sort'
+import { Box } from '@mui/material'
+
+interface SortIconProps {
+  onClick: React.MouseEventHandler
+  selected?: boolean
+}
+
+export default function SortImage({ onClick, selected }: Readonly<SortIconProps>) {
+  return (
+    <Box
+      sx={{
+        marginLeft: '30px',
+        cursor: 'pointer',
+      }}
+    >
+      <Sort
+        onClick={onClick}
+        sx={{
+          fontSize: 35,
+          color: selected ? '#0D55AF' : '#939393',
+          padding: '5px',
+          backgroundColor: selected ? 'rgba(15, 113, 203, 0.05)' : 'white',
+          ':hover': {
+            color: '#0D55AF',
+            backgroundColor: 'rgba(15, 113, 203, 0.05)',
+          },
+        }}
+      />
+    </Box>
+  )
+}

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,
   }