Add support for displaying empty tables with a message

Currently, if a <Table> receives zero rows, and it is not loading,
it is simply hidden.

This is not ideal if there are zero rows because of some filtering
configured inside the table headers, which is now no longer accessible,
since the whole table has been hidden.

So this commit introduces an alternative behavior: if we pass an
`emptyMessage` to the table, then it will not be hidden even
if there are no rows, but instead, the passed message will be displayed.

Please note that the default behavior doesn't change; to trigger
this new behavior, the new parameter needs to be added.

src/app/components/Table/index.tsx

@@ -12,6 +12,8 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { COLORS } from '../../../styles/theme/colors'
 import { TablePagination, TablePaginationProps } from './TablePagination'
 import { backgroundColorAnimation } from '../../../styles/theme/animations'
+import WarningIcon from '@mui/icons-material/Warning'
+import Typography from '@mui/material/Typography'
 
 type SkeletonTableRowsProps = {
   rowsNumber: number
@@ -78,6 +80,13 @@ type TableProps = {
   stickyColumn?: boolean
   extraHorizontalSpaceOnMobile?: boolean | undefined
   alwaysWaitWhileLoading?: boolean | undefined
+  /**
+   * Optional message to display when there are zero entries.
+   *
+   * This will only be displayed if isLoading is false, but there are no records.
+   * If not given, the table will simply be hidden, including the headers and all.
+   */
+  emptyMessage?: string | undefined
 }
 
 const stickyColumnStyles = {
@@ -101,10 +110,11 @@ export const Table: FC<TableProps> = ({
   stickyColumn = false,
   extraHorizontalSpaceOnMobile = false,
   alwaysWaitWhileLoading = false,
+  emptyMessage = undefined,
 }) => {
   const { isMobile } = useScreenSize()
 
-  if (!isLoading && !rows?.length) {
+  if (!isLoading && !rows?.length && !emptyMessage) {
     return null
   }
 
@@ -166,6 +176,23 @@ export const Table: FC<TableProps> = ({
           <TablePagination {...pagination} />
         </Box>
       )}
+      {!isLoading && !rows?.length && emptyMessage && (
+        <Box
+          sx={{
+            display: 'inline-flex',
+            width: '100%',
+            verticalAlign: 'middle',
+            justifyContent: 'center',
+            gap: 2,
+            color: COLORS.warningColor,
+          }}
+        >
+          <WarningIcon />
+          <Typography component="span" sx={{ fontSize: '16px' }}>
+            {emptyMessage}
+          </Typography>
+        </Box>
+      )}
     </>
   )
 }