@xqmsg/ui-core 0.15.3 → 0.15.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.3",
+  "version": "0.15.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/table/empty/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Table as ChakraTable, Tbody, Td, Tr } from '@chakra-ui/react';
+
+/**
+ * A React component utilized to render the `EmptyTable` component
+ */
+export const EmptyTable: React.FC = () => {
+  const getOpacity = (index: number) => {
+    switch (index) {
+      case 1:
+        return 0.7;
+      case 3:
+        return 0.6;
+      case 5:
+        return 0.5;
+      case 7:
+        return 0.4;
+      case 9:
+        return 0.3;
+      case 11:
+        return 0.2;
+      case 13:
+        return 0.1;
+      default:
+        return 1;
+    }
+  };
+
+  return (
+    <ChakraTable
+      variant="unstyled"
+      width="100%"
+      style={{
+        borderCollapse: 'separate',
+        borderSpacing: '0px',
+      }}
+    >
+      <Tbody>
+        {Array.from({ length: 14 }, (_, i) => i + 1).map(i => (
+          <Tr>
+            <Td height="23px" opacity={getOpacity(i)}></Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </ChakraTable>
+  );
+};

package/src/components/table/index.tsx

@@ -9,7 +9,6 @@ import { generateTableColumnsAsConst } from './utils/generateTableColumns';
 
 import {
   Table as ChakraTable,
-  TableCaption,
   TableContainer,
   Tbody,
   Td,
@@ -19,6 +18,7 @@ import {
 } from '@chakra-ui/react';
 import { TableLoadingRows } from './components/loading';
 import colors from '../../theme/foundations/colors';
+import { EmptyTable } from './empty';
 
 export interface TableProps<T extends ReadonlyTableColumns> {
   columns: TableColumns;
@@ -36,46 +36,47 @@ export function Table<T extends ReadonlyTableColumns>({
   columns,
   headers,
   body,
-  placeholder = 'There is currently no available data',
   loading,
-
   loadMore,
 }: TableProps<T>) {
   const columnsAsConst = generateTableColumnsAsConst(columns);
 
   return (
     <TableContainer border="none" overflowX="auto" bg="white" width="100%">
-      <ChakraTable
-        variant="unstyled"
-        width="100%"
-        style={{
-          borderCollapse: 'separate',
-          borderSpacing: '0px',
-        }}
-      >
-        <Thead>
-          <Tr _odd={{ bg: colors.label.primary.dark }}>
-            {columnsAsConst.map(column => (
-              // @ts-ignore
-              <Th>{headers[column]}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {body.map(row => (
-            <Tr>
+      {body.length ? (
+        <ChakraTable
+          variant="unstyled"
+          width="100%"
+          style={{
+            borderCollapse: 'separate',
+            borderSpacing: '0px',
+          }}
+        >
+          <Thead>
+            <Tr _odd={{ bg: colors.label.primary.dark }}>
               {columnsAsConst.map(column => (
                 // @ts-ignore
-                <Td>{row[column]}</Td>
+                <Th>{headers[column]}</Th>
               ))}
             </Tr>
-          ))}
-        </Tbody>
-        {!body.length && <TableCaption py={10}>{placeholder}</TableCaption>}{' '}
-      </ChakraTable>
-      {loadMore && loading !== undefined && (
-        <TableLoadingRows isLoading={loading} onLoadMore={loadMore} />
+          </Thead>
+          <Tbody>
+            {body.map(row => (
+              <Tr>
+                {columnsAsConst.map(column => (
+                  // @ts-ignore
+                  <Td>{row[column]}</Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </ChakraTable>
+      ) : (
+        <EmptyTable />
       )}
+      {loadMore && loading !== undefined && body.length ? (
+        <TableLoadingRows isLoading={loading} onLoadMore={loadMore} />
+      ) : null}
     </TableContainer>
   );
 }