feat: empty table messages (#446)

* chore: empty table messages

* chore(fix): fallback table messages

* chore: updated changelog

Author: Usmanfee

CHANGELOG.md

@@ -34,6 +34,7 @@
 ## [3.7.6](https://github.com/eclipse-tractusx/portal-shared-components/compare/v3.7.5...v3.7.6) (2025-02-13)
 
 
+
 ### Bug Fixes
 
 * upgrade storybook to version 8.5.3 ([4f4df10](https://github.com/eclipse-tractusx/portal-shared-components/commit/4f4df107bf6ca02ca959660c121f4dc18ac7b10a))
@@ -43,6 +44,9 @@
 * upgrade storybook to version 8.5.3 ([6cccaec](https://github.com/eclipse-tractusx/portal-shared-components/commit/6cccaec07fd20259fc9568ffc1e4a430203200e9))
 
 ## [3.7.5](https://github.com/eclipse-tractusx/portal-shared-components/compare/v3.7.4...v3.7.5) (2025-01-20)
+- **Table Empty Text** [4.0.3]
+  - fixed empty table messages with consistency [#446](https://github.com/eclipse-tractusx/portal-shared-components/pull/446)
+
 
 
 ### Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "4.0.2",
+  "version": "4.0.3",
   "description": "Eclipse Tractus-X Portal Shared Components",
   "author": "Eclipse Tractus-X Contributors",
   "license": "Apache-2.0",

src/components/basic/Table/PageLoadingTable.tsx

@@ -53,6 +53,8 @@ export interface PageLoadingTableProps<Row, Args>
   allItems?: Row[]
   callbackToPage?: (data: PaginResult<Row>) => void
   allItemsLoadedHint?: string
+  emptyDataMsg?: string
+  noSearchResultsMsg?: string
 }
 
 const scrollOffset = 350 // Adjust this value for earlier load
@@ -65,6 +67,8 @@ export const PageLoadingTable = function <Row, Args>({
   allItems,
   callbackToPage,
   allItemsLoadedHint = 'All items have been loaded.',
+  emptyDataMsg = 'No data found',
+  noSearchResultsMsg = 'No search results found',
   ...props
 }: PageLoadingTableProps<Row, Args>) {
   const [page, setPage] = useState(0)
@@ -79,12 +83,14 @@ export const PageLoadingTable = function <Row, Args>({
     },
   })
   const [loading, setLoading] = useState(true)
+  const [noRowsMsg, setNoRowsMsg] = useState('')
 
   function nextPage() {
     setPage(page + 1)
   }
   const hasMore = data ? hasMorePages(data) : false
   const maxRows = data ? getMaxRows(data) : 0
+  const { searchExpr } = props
 
   useEffect(() => {
     if (!allItems) {
@@ -130,6 +136,16 @@ export const PageLoadingTable = function <Row, Args>({
     }
   }, [isSuccess, isFetching, data, clear, loaded])
 
+  useEffect(() => {
+    if (data) {
+      if (!searchExpr && data.content.length === 0) {
+        setNoRowsMsg(emptyDataMsg)
+      } else if (searchExpr && data.content.length === 0) {
+        setNoRowsMsg(noSearchResultsMsg)
+      }
+    }
+  }, [data, searchExpr])
+
   const handleScroll = useCallback(() => {
     const scrollableElement = document.documentElement
     if (
@@ -159,6 +175,7 @@ export const PageLoadingTable = function <Row, Args>({
         error={error}
         rows={items}
         reload={refetch}
+        noRowsMsg={noRowsMsg}
         {...props}
       />
       {/* Display loading spinner while fetching data */}

src/components/basic/Table/index.tsx

@@ -195,7 +195,19 @@ export const Table = ({
 
   const renderErrorMessage = () => {
     if (rowsCount === 0 || error == null) {
-      return <Typography variant="body2">{noRowsMsg ?? 'No rows'}</Typography>
+      if (noRowsMsg && noRowsMsg.includes('\n')) {
+        const messageParts = noRowsMsg.split(/[\n|]/)
+        return (
+          <Stack spacing={1} alignItems="center">
+            {messageParts.map((part, index) => (
+              <Typography key={index} variant="body2" align="center">
+                {part.trim()}
+              </Typography>
+            ))}
+          </Stack>
+        )
+      }
+      return <></>
     }
     if (error.status >= 400 && error.status < 500) {
       return <Error400Overlay errorMessage4xx={error.message} />