feat: fix items list datatable.

client/src/components/Datatable/TableHeader.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { ScrollSyncPane } from 'react-scroll-sync';
 import { If } from 'components';
 import TableContext from './TableContext';
+import MaterialProgressBar from 'components/MaterialProgressBar';
 
 function TableHeaderCell({ column, index }) {
   const {
@@ -77,7 +78,7 @@ function TableHeaderGroup({ headerGroup }) {
 export default function TableHeader() {
   const {
     table: { headerGroups, page },
-    props: { TableHeaderSkeletonRenderer, headerLoading },
+    props: { TableHeaderSkeletonRenderer, headerLoading, progressBarLoading },
   } = useContext(TableContext);
 
   if (headerLoading && TableHeaderSkeletonRenderer) {
@@ -89,6 +90,9 @@ export default function TableHeader() {
         {headerGroups.map((headerGroup) => (
           <TableHeaderGroup headerGroup={headerGroup} />
         ))}
+        <If condition={progressBarLoading}>
+          <MaterialProgressBar />
+        </If>
       </div>
     </ScrollSyncPane>
   );

client/src/components/Datatable/TablePagination.js

@@ -1,11 +1,12 @@
 import React, { useCallback, useContext } from 'react';
 import { If, Pagination } from 'components';
 import TableContext from './TableContext';
+import { saveInvoke } from 'utils';
 
 /**
  * Table pagination.
  */
-export default function TablePagination({}) {
+export default function TablePagination() {
   const {
     table: {
       gotoPage,
@@ -13,28 +14,39 @@ export default function TablePagination({}) {
       pageCount,
       state: { pageIndex, pageSize },
     },
-    props: { pagination, loading },
+    props: { pagination, loading, onPaginationChange },
   } = useContext(TableContext);
 
+  const triggerOnPaginationChange = useCallback((payload) => {
+    saveInvoke(onPaginationChange, payload)
+  }, [onPaginationChange]);
+
+  // Handles the page changing.
   const handlePageChange = useCallback(
-    (currentPage) => {
-      gotoPage(currentPage - 1);
+    ({ page, pageSize }) => {
+      const pageIndex = page - 1;
+
+      gotoPage(pageIndex);
+      triggerOnPaginationChange({ page, pageSize });
     },
-    [gotoPage],
+    [gotoPage, triggerOnPaginationChange],
   );
 
+  // Handles the page size changing.
   const handlePageSizeChange = useCallback(
-    (pageSize, currentPage) => {
+    ({ pageSize, page }) => {
       gotoPage(0);
       setPageSize(pageSize);
+
+      triggerOnPaginationChange({ page, pageSize });
     },
-    [gotoPage, setPageSize],
+    [gotoPage, setPageSize, triggerOnPaginationChange],
   );
 
   return (
     <If condition={pagination && !loading}>
       <Pagination
-        initialPage={pageIndex + 1}
+        currentPage={pageIndex + 1}
         total={pageSize * pageCount}
         size={pageSize}
         onPageChange={handlePageChange}

client/src/components/Datatable/TableRow.js

@@ -1,32 +1,36 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { ContextMenu } from '@blueprintjs/core';
+import useContextMenu from 'react-use-context-menu';
 
 import TableContext from './TableContext';
 import { saveInvoke } from 'utils';
+import { ContextMenu } from 'components';
+
 
 /**
  * Table row.
  */
 export default function TableRow({ row, className, style }) {
   const {
-    props: { TableCellRenderer, rowContextMenu, rowClassNames },
+    props: {
+      TableCellRenderer,
+      rowContextMenu,
+      rowClassNames,
+      ContextMenu: ContextMenuContent,
+    },
+    table,
   } = useContext(TableContext);
 
-  // Handle rendering row context menu.
-  const handleRowContextMenu = (row) => (e) => {
-    if (typeof rowContextMenu === 'function') {
-      e.preventDefault();
-      const tr = e.currentTarget.closest('.tr');
-      tr.classList.add('is-context-menu-active');
+  const [
+    bindMenu,
+    bindMenuItem,
+    useContextTrigger,
+    { coords, setVisible, isVisible },
+  ] = useContextMenu();
 
-      const DropdownEl = rowContextMenu({ row });
-
-      ContextMenu.show(DropdownEl, { left: e.clientX, top: e.clientY }, () => {
-        tr.classList.remove('is-context-menu-active');
-      });
-    }
-  };
+  const [bindTrigger] = useContextTrigger({
+    collect: () => 'Title',
+  });
 
   return (
     <div
@@ -40,12 +44,21 @@ export default function TableRow({ row, className, style }) {
           className,
         ),
         style,
-        onContextMenu: handleRowContextMenu(row)
       })}
+      {...bindTrigger}
     >
       {row.cells.map((cell, index) => (
         <TableCellRenderer cell={cell} row={row} index={index + 1} />
       ))}
+
+      <ContextMenu
+        bindMenu={bindMenu}
+        isOpen={isVisible}
+        coords={coords}
+        onClosed={() => setVisible(false)}
+      >
+        <ContextMenuContent {...table} row={row} />
+      </ContextMenu>
     </div>
   );
 }