From d9e10fd6b4a414ff161df26db8992da83343445e Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@live.com>
Date: Mon, 30 Mar 2020 00:13:45 +0200
Subject: [PATCH] feat: Accounts datatable.

---
 .../components/Accounts/AccountsActionsBar.js |  22 ++-
 .../components/Accounts/AccountsDataTable.js  | 178 +++++++-----------
 .../components/Accounts/AccountsViewsTabs.js  |  32 +++-
 client/src/components/DataTable.js            | 150 +++++++++++----
 client/src/components/DialogsContainer.js     |   2 +-
 client/src/components/LoadingIndicator.js     |  34 +++-
 client/src/connectors/Accounts.connector.js   |  27 ++-
 .../Dashboard/Accounts/AccountsChart.js       | 121 ++++++------
 .../Dashboard/Dialogs/AccountFormDialog.js    |  21 ++-
 client/src/hooks/index.js                     |  21 +++
 client/src/static/json/icons.js               |   8 +
 client/src/store/accounts/accounts.actions.js |  43 ++++-
 client/src/store/accounts/accounts.reducer.js |  33 +++-
 client/src/store/accounts/accounts.types.js   |   9 +-
 client/src/store/queryReducers.js             |  28 +++
 client/src/style/components/data-table.scss   |  86 +++++++--
 client/src/style/pages/accounts-chart.scss    |  17 +-
 client/src/style/pages/dashboard.scss         |   3 +-
 client/src/style/views/Sidebar.scss           |   2 +
 19 files changed, 543 insertions(+), 294 deletions(-)
 create mode 100644 client/src/store/queryReducers.js

diff --git a/client/src/components/Accounts/AccountsActionsBar.js b/client/src/components/Accounts/AccountsActionsBar.js
index 30041d94e..b8cc91984 100644
--- a/client/src/components/Accounts/AccountsActionsBar.js
+++ b/client/src/components/Accounts/AccountsActionsBar.js
@@ -25,9 +25,10 @@ import ResourceConnect from 'connectors/Resource.connector';
 function AccountsActionsBar({
   openDialog,
   views,
-  bulkActions,
+  selectedRows = [],
   getResourceFields,
-  onFilterChange,
+  addAccountsTableQueries,
+  onFilterChanged,
 }) {
   const {path} = useRouteMatch();
   const onClickNewAccount = () => { openDialog('account-form', {}); };
@@ -37,13 +38,16 @@ function AccountsActionsBar({
   const viewsMenuItems = views.map((view) => {
     return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
   });
-  const hasBulkActionsSelected = useMemo(() => {
-    return Object.keys(bulkActions).length > 0;
-  }, [bulkActions]);
+  const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
  
   const filterDropdown = FilterDropdown({
     fields: accountsFields,
-    onFilterChange,
+    onFilterChange: (filterConditions) => {
+      addAccountsTableQueries({
+        filter_roles: filterConditions || '',  
+      });
+      onFilterChanged && onFilterChanged(filterConditions);
+    },
   });
   return (
     <DashboardActionsBar>
@@ -82,7 +86,7 @@ function AccountsActionsBar({
 
         </Popover>
 
-        {hasBulkActionsSelected && (
+        {hasSelectedRows && (
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon='archive' iconSize={15} />}
@@ -90,7 +94,7 @@ function AccountsActionsBar({
           />
         )}
 
-        {hasBulkActionsSelected && (
+        {hasSelectedRows && (
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon='trash' iconSize={15} />}
@@ -115,7 +119,7 @@ function AccountsActionsBar({
 
 const mapStateToProps = state => {
   return {
-    bulkActions: state.accounts.bulkActions
+    // selectedRows: state.accounts.selectedRows
   };
 };
 
diff --git a/client/src/components/Accounts/AccountsDataTable.js b/client/src/components/Accounts/AccountsDataTable.js
index 2e9a60a00..ed5742024 100644
--- a/client/src/components/Accounts/AccountsDataTable.js
+++ b/client/src/components/Accounts/AccountsDataTable.js
@@ -1,11 +1,4 @@
-import {
-  GridComponent,
-  ColumnsDirective,
-  ColumnDirective,
-  Inject,
-  Sort
-} from '@syncfusion/ej2-react-grids';
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import {
   Button,
   Popover,
@@ -13,50 +6,34 @@ import {
   MenuItem,
   MenuDivider,
   Position,
-  Checkbox
 } from '@blueprintjs/core';
 import { useParams } from 'react-router-dom';
-import useAsync from 'hooks/async';
 import Icon from 'components/Icon';
-import { handleBooleanChange, compose } from 'utils';
+import { compose } from 'utils';
 import AccountsConnect from 'connectors/Accounts.connector';
 import DialogConnect from 'connectors/Dialog.connector';
 import DashboardConnect from 'connectors/Dashboard.connector';
 import ViewConnect from 'connectors/View.connector';
 import LoadingIndicator from 'components/LoadingIndicator';
+import DataTable from 'components/DataTable';
 
 function AccountsDataTable({
-  filterConditions,
   accounts,
   onDeleteAccount,
   onInactiveAccount,
   openDialog,
-  addBulkActionAccount,
-  removeBulkActionAccount,
-  fetchAccounts,
   changeCurrentView,
   changePageSubtitle,
   getViewItem,
-  setTopbarEditView
+  setTopbarEditView,
+  accountsLoading,
+  onFetchData,
+  setSelectedRowsAccounts,
 }) {
   const { custom_view_id: customViewId } = useParams();
 
-  // Fetch accounts list according to the given custom view id.
-  const fetchHook = useAsync(async () => {
-    await Promise.all([
-      fetchAccounts({
-        custom_view_id: customViewId,
-        stringified_filter_roles: JSON.stringify(filterConditions) || '',
-      }),
-    ]);
-  });
-
-  useEffect(() => { fetchHook.execute(); }, [filterConditions]);
-
-  // Refetch accounts list after custom view id change.
   useEffect(() => {
     const viewMeta = getViewItem(customViewId);
-    fetchHook.execute();
 
     if (customViewId) {
       changeCurrentView(customViewId);
@@ -65,10 +42,8 @@ function AccountsDataTable({
     changePageSubtitle((customViewId && viewMeta) ? viewMeta.name : '');
   }, [customViewId]);
 
-  useEffect(() => () => {
-    // Clear page subtitle when unmount the page.
-    changePageSubtitle('');
-  }, []);
+  // Clear page subtitle when unmount the page.
+  useEffect(() => () => { changePageSubtitle(''); }, []);
 
   const handleEditAccount = account => () => {
     openDialog('account-form', { action: 'edit', id: account.id });
@@ -88,95 +63,76 @@ function AccountsDataTable({
         onClick={() => onDeleteAccount(account)} />
     </Menu>
   );
+  const columns = useMemo(() => [
+    {
+      id: 'name',
+      Header: 'Account Name',
+      accessor: 'name',
+    },
+    {
+      id: 'code',
+      Header: 'Code',
+      accessor: 'code'
+    },
+    {
+      id: 'type',
+      Header: 'Type',
+      accessor: 'type.name'
+    },
+    {
+      id: 'normal',
+      Header: 'Normal',
+      Cell: ({ cell }) => {
+        const account = cell.row.original;
+        const type = account.type ? account.type.normal : '';
+        const arrowDirection = type === 'credit' ? 'down' : 'up';
 
-  const handleClickCheckboxBulk = account =>
-    handleBooleanChange(value => {
-      if (value) {
-        addBulkActionAccount(account.id);
-      } else {
-        removeBulkActionAccount(account.id);
-      }
-    });
-
-  const columns = [
-    {
-      field: '',
-      headerText: '',
-      template: account => (
-        <Checkbox onChange={handleClickCheckboxBulk(account)} />
-      ),
-      customAttributes: { class: 'checkbox-row' }
-    },
-    {
-      field: 'name',
-      headerText: 'Account Name',
-      customAttributes: { class: 'account-name' }
-    },
-    {
-      field: 'code',
-      headerText: 'Code'
-    },
-    {
-      field: 'type.name',
-      headerText: 'Type'
-    },
-    {
-      headerText: 'Normal',
-      template: column => {
-        const type = column.type ? column.type.normal : '';
-        return type === 'credit' ? (
-          <Icon icon={'arrow-down'} />
-        ) : (
-          <Icon icon={'arrow-up'} />
-        );
+        return (<Icon icon={`arrow-${arrowDirection}`} />);
       },
-      customAttributes: { class: 'account-normal' }
+      className: 'normal',
     },
     {
-      field: 'balance',
-      headerText: 'Balance',
-      template: (column, data) => {
-        return <span>$10,000</span>;
-      }
+      id: 'balance',
+      Header: 'Balance',
+      Cell: ({ cell }) => {
+        const account = cell.row.original;
+        const {balance} = account;
+
+        return ('undefined' !== typeof balance) ?
+          (<span>{ balance.amount }</span>) :
+          (<span>--</span>);
+      },
+      
+      // canResize: false,
     },
     {
-      headerText: '',
-      template: account => (
+      id: 'actions',
+      Header: '',
+      Cell: ({ cell }) => (
         <Popover
-          content={actionMenuList(account)}
-          position={Position.RIGHT_BOTTOM}
-        >
+          content={actionMenuList(cell.row.original)}
+          position={Position.RIGHT_BOTTOM}>
           <Button icon={<Icon icon='ellipsis-h' />} />
         </Popover>
-      )
+      ),
+      className: 'actions',
+      width: 50,
+      // canResize: false
     }
-  ];
+  ], []);
+
+  const handleDatatableFetchData = useCallback(() => {
+    onFetchData && onFetchData();
+  }, []);
 
-  const dataStateChange = state => {};
   return (
-    <LoadingIndicator loading={fetchHook.pending} spinnerSize={30}>
-      <GridComponent
-        allowSorting={true}
-        allowGrouping={true}
-        dataSource={{ result: accounts, count: 12 }}
-        dataStateChange={dataStateChange}
-      >
-        <ColumnsDirective>
-          {columns.map(column => {
-            return (
-              <ColumnDirective
-                field={column.field}
-                headerText={column.headerText}
-                template={column.template}
-                allowSorting={true}
-                customAttributes={column.customAttributes}
-              />
-            );
-          })}
-        </ColumnsDirective>
-        <Inject services={[Sort]} />
-      </GridComponent>
-    </LoadingIndicator>
+    <LoadingIndicator loading={accountsLoading} spinnerSize={30}>
+      <DataTable
+        columns={columns}
+        data={accounts}
+        onFetchData={handleDatatableFetchData}
+        manualSortBy={true} />
+    </LoadingIndicator>    
   );
 }
 
diff --git a/client/src/components/Accounts/AccountsViewsTabs.js b/client/src/components/Accounts/AccountsViewsTabs.js
index 7f489bd4e..fde698a69 100644
--- a/client/src/components/Accounts/AccountsViewsTabs.js
+++ b/client/src/components/Accounts/AccountsViewsTabs.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import { useHistory } from 'react-router';
 import { connect } from 'react-redux';
 import {
@@ -15,10 +15,14 @@ import { Link } from 'react-router-dom';
 import { compose } from 'utils';
 import AccountsConnect from 'connectors/Accounts.connector';
 import DashboardConnect from 'connectors/Dashboard.connector';
+import {useUpdateEffect} from 'hooks';
 
 function AccountsViewsTabs({
   views,
-  setTopbarEditView,  
+  setTopbarEditView,
+  customViewChanged,
+  addAccountsTableQueries,
+  onViewChanged,
 }) {
   const history = useHistory();
   const { custom_view_id: customViewId } = useParams();
@@ -30,6 +34,22 @@ function AccountsViewsTabs({
   const handleViewLinkClick = () => {
     setTopbarEditView(customViewId);
   }
+
+  useUpdateEffect(() => {
+    customViewChanged && customViewChanged(customViewId);
+
+    addAccountsTableQueries({
+      custom_view_id: customViewId || null,
+    });
+    onViewChanged && onViewChanged(customViewId);
+  }, [customViewId]);
+
+  useEffect(() => {
+    addAccountsTableQueries({
+      custom_view_id: customViewId,
+    })   
+  }, [customViewId]);
+
   const tabs = views.map(view => {
     const baseUrl = '/dashboard/accounts';
     const link = (
@@ -38,7 +58,9 @@ function AccountsViewsTabs({
         onClick={handleViewLinkClick}
       >{view.name}</Link>
     );
-    return <Tab id={`custom_view_${view.id}`} title={link} />;
+    return <Tab
+      id={`custom_view_${view.id}`}
+      title={link} />;
   });
   return (
     <Navbar className='navbar--dashboard-views'>
@@ -49,7 +71,9 @@ function AccountsViewsTabs({
           selectedTabId={`custom_view_${customViewId}`}
           className='tabs--dashboard-views'
         >
-          <Tab id='all' title={<Link to={`/dashboard/accounts`}>All</Link>} />
+          <Tab
+            id='all'
+            title={<Link to={`/dashboard/accounts`}>All</Link>} />
 
           {tabs}
           <Button
diff --git a/client/src/components/DataTable.js b/client/src/components/DataTable.js
index e8e25e85e..b7e2f6f04 100644
--- a/client/src/components/DataTable.js
+++ b/client/src/components/DataTable.js
@@ -1,10 +1,41 @@
-import React from 'react';
-import { useTable, useExpanded, usePagination } from 'react-table'
+import React, {useEffect} from 'react';
+import {
+  useTable,
+  useExpanded,
+  useRowSelect,
+  usePagination,
+  useResizeColumns,
+  useAsyncDebounce,
+  useSortBy,
+  useFlexLayout
+} from 'react-table'
+import {Checkbox} from '@blueprintjs/core';
+import classnames from 'classnames';
+import Icon from 'components/Icon';
+// import { FixedSizeList } from 'react-window'
+
+const IndeterminateCheckbox = React.forwardRef(
+  ({ indeterminate, ...rest }, ref) => {
+    const defaultRef = React.useRef()
+    const resolvedRef = ref || defaultRef
+
+    useEffect(() => {
+      resolvedRef.current.indeterminate = indeterminate
+    }, [resolvedRef, indeterminate])
+
+    return (
+      <Checkbox ref={resolvedRef} {...rest} />
+    );
+  }
+);
 
 export default function DataTable({
   columns,
   data,
   loading,
+  onFetchData,
+  onSelectedRowsChange,
+  manualSortBy = 'false'
 }) {
   const {
     getTableProps,
@@ -20,8 +51,10 @@ export default function DataTable({
     nextPage,
     previousPage,
     setPageSize,
+
+    selectedFlatRows,
     // Get the state from the instance
-    state: { pageIndex, pageSize },
+    state: { pageIndex, pageSize, sortBy, selectedRowIds },
   } = useTable(
     {
       columns,
@@ -33,59 +66,102 @@ export default function DataTable({
       // pageCount.
       // pageCount: controlledPageCount,
       getSubRows: row => row.children,
+      manualSortBy
     },
+    useSortBy,
     useExpanded,
+    useRowSelect,
     usePagination,
+    useResizeColumns,
+    useFlexLayout,
+    hooks => {
+      hooks.visibleColumns.push(columns => [
+        // Let's make a column for selection
+        {
+          id: 'selection',
+          disableResizing: true,
+          minWidth: 35,
+          width: 35,
+          maxWidth: 35,
+          // The header can use the table's getToggleAllRowsSelectedProps method
+          // to render a checkbox
+          Header: ({ getToggleAllRowsSelectedProps }) => (
+            <div>
+              <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
+            </div>
+          ),
+          // The cell can use the individual row's getToggleRowSelectedProps method
+          // to the render a checkbox
+          Cell: ({ row }) => (
+            <div>
+              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
+            </div>
+          ),
+        },
+        ...columns,
+      ])
+    }
   );
 
+  // Debounce our onFetchData call for 100ms
+  const onFetchDataDebounced = useAsyncDebounce(onFetchData, 100);
+  const onSelectRowsDebounced = useAsyncDebounce(onSelectedRowsChange, 250);
+
+  // When these table states change, fetch new data!
+  useEffect(() => {
+    onFetchDataDebounced({ pageIndex, pageSize, sortBy })
+  }, []);
+
   return (
     <div className={'bigcapital-datatable'}>
-      <table {...getTableProps()}>
-        <thead>
+      <div {...getTableProps()} className="table"> 
+        <div className="thead">
           {headerGroups.map(headerGroup => (
-            <tr {...headerGroup.getHeaderGroupProps()}>
+            <div {...headerGroup.getHeaderGroupProps()} className="tr">
               {headerGroup.headers.map(column => (
-                <th {...column.getHeaderProps({
-                  className: column.className || '',
+                <div {...column.getHeaderProps({
+                  className: classnames(column.className || '', 'th'),
                 })}>
-                  {column.render('Header')}
-                  <span>
-                    {column.isSorted
-                      ? column.isSortedDesc
-                        ? ' 🔽'
-                        : ' 🔼'
-                      : ''}
-                  </span>
-                </th>
+                  <div {...column.getSortByToggleProps()}>
+                    {column.render('Header')}
+                    <span>
+                      {column.isSorted
+                        ? column.isSortedDesc
+                          ? (<Icon icon="sort-down" />)
+                          : (<Icon icon="sort-up" />)
+                        : ''}
+                    </span>
+                  </div>
+
+                  {column.canResize && (
+                    <div
+                      {...column.getResizerProps()}
+                      className={`resizer ${
+                        column.isResizing ? 'isResizing' : ''
+                      }`}>
+                      <div class="inner-resizer" />
+                    </div>
+                  )}
+                </div>
               ))}
-            </tr>
+            </div>
           ))}
-        </thead>
-        <tbody {...getTableBodyProps()}>
+        </div>
+        <div {...getTableBodyProps()} className="tbody">
           {page.map((row, i) => {
             prepareRow(row)
             return (
-              <tr {...row.getRowProps()}>
+              <div {...row.getRowProps()} className="tr">
                 {row.cells.map((cell) => {
-                  return <td {...cell.getCellProps({
-                    className: cell.column.className || '',
-                  })}>{ cell.render('Cell') }</td>
+                  return <div {...cell.getCellProps({
+                    className: classnames(cell.column.className || '', 'td'),
+                  })}>{ cell.render('Cell') }</div>
                 })}
-              </tr>
+              </div>
             )
           })}
-          <tr>
-            {loading ? (
-              // Use our custom loading state to show a loading indicator
-              <td colSpan="10000">Loading...</td>
-            ) : (
-              <td colSpan="10000">
-                {/* Showing {page.length} of ~{controlledPageCount * pageSize}{' '} results */}
-              </td>
-            )}
-          </tr>
-        </tbody>
-      </table>
+        </div>
+      </div>
     </div>
   )
 }
\ No newline at end of file
diff --git a/client/src/components/DialogsContainer.js b/client/src/components/DialogsContainer.js
index 6e87c7cb7..7528e25cd 100644
--- a/client/src/components/DialogsContainer.js
+++ b/client/src/components/DialogsContainer.js
@@ -6,7 +6,7 @@ export default function DialogsContainer() {
   return (
     <React.Fragment>
       <AccountFormDialog />
-      <UserFormDialog />
+      {/* <UserFormDialog /> */}
     </React.Fragment>
   );
 }
\ No newline at end of file
diff --git a/client/src/components/LoadingIndicator.js b/client/src/components/LoadingIndicator.js
index 2b2ee3160..668658230 100644
--- a/client/src/components/LoadingIndicator.js
+++ b/client/src/components/LoadingIndicator.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect, useMemo} from 'react';
 import { Spinner } from '@blueprintjs/core';
 
 export default function LoadingIndicator({
@@ -6,15 +6,33 @@ export default function LoadingIndicator({
   spinnerSize = 40,
   children
 }) {
+  const [rendered, setRendered] = useState(false);
+
+  useEffect(() => {
+    if (!loading) { setRendered(true); }
+  }, [loading]);
+
+  const componentStyle = useMemo(() => {
+    return {display: !loading ? 'block' : 'none'};
+  }, [loading]);
+
+  const loadingComponent = useMemo(() => (
+    <div class='dashboard__loading-indicator'>
+      <Spinner size={spinnerSize} value={null} />
+    </div>
+  ), [spinnerSize]);
+
+  const renderComponent = useMemo(() => (
+    <div style={componentStyle}>{ children }</div>
+  ), [children, componentStyle]);
+
+  const maybeRenderComponent = rendered && renderComponent;
+  const maybeRenderLoadingSpinner = loading && loadingComponent;
+
   return (
     <>
-      {loading ? (
-        <div class='dashboard__loading-indicator'>
-          <Spinner size={spinnerSize} value={null} />
-        </div>
-      ) : (
-        children
-      )}
+      { maybeRenderLoadingSpinner }
+      { maybeRenderComponent }
     </>
   );
 }
diff --git a/client/src/connectors/Accounts.connector.js b/client/src/connectors/Accounts.connector.js
index 1da75d46b..48f3682ce 100644
--- a/client/src/connectors/Accounts.connector.js
+++ b/client/src/connectors/Accounts.connector.js
@@ -1,11 +1,11 @@
 import { connect } from 'react-redux';
-import {useParams} from 'react-router-dom';
 import t from 'store/types';
 import {
   fetchAccountTypes,
   fetchAccountsList,
   deleteAccount,
   inactiveAccount,
+  fetchAccountsTable,
 } from 'store/accounts/accounts.actions';
 import {
   getAccountsItems,
@@ -17,23 +17,32 @@ import {
 const mapStateToProps = (state, props) => ({
   views: getResourceViews(state, 'accounts'),
   accounts: getAccountsItems(state, state.accounts.currentViewId),
+  tableQuery: state.accounts.tableQuery,
+  accountsLoading: state.accounts.loading,
 });
 
 const mapActionsToProps = (dispatch) => ({
   fetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
   fetchAccountTypes: () => dispatch(fetchAccountTypes()),
-  deleteAccount: (id) => dispatch(deleteAccount({ id })),
-  inactiveAccount: (id) => dispatch(inactiveAccount({ id })),
-  addBulkActionAccount: (id) => dispatch({
-    type: t.ACCOUNT_BULK_ACTION_ADD, account_id: id
-  }),
-  removeBulkActionAccount: (id) => dispatch({
-    type: t.ACCOUNT_BULK_ACTION_REMOVE, account_id: id,
-  }),
+  requestDeleteAccount: (id) => dispatch(deleteAccount({ id })),
+  requestInactiveAccount: (id) => dispatch(inactiveAccount({ id })),
   changeCurrentView: (id) => dispatch({
     type: t.ACCOUNTS_SET_CURRENT_VIEW,
     currentViewId: parseInt(id, 10),
   }),
+
+  setAccountsTableQuery: (key, value) => dispatch({
+    type: 'ACCOUNTS_TABLE_QUERY_SET', key, value,
+  }),
+  addAccountsTableQueries: (queries) => dispatch({
+    type: 'ACCOUNTS_TABLE_QUERIES_ADD', queries,
+  }),
+
+  fetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
+
+  setSelectedRowsAccounts: (ids) => dispatch({
+    type: t.ACCOUNTS_SELECTED_ROWS_SET, ids,
+  }),
 });
 
 export default connect(mapStateToProps, mapActionsToProps);
\ No newline at end of file
diff --git a/client/src/containers/Dashboard/Accounts/AccountsChart.js b/client/src/containers/Dashboard/Accounts/AccountsChart.js
index b645968f8..6e3a1056c 100644
--- a/client/src/containers/Dashboard/Accounts/AccountsChart.js
+++ b/client/src/containers/Dashboard/Accounts/AccountsChart.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import {
   Route,
   Switch,
@@ -22,11 +22,12 @@ import { compose } from 'utils';
 function AccountsChart({
   changePageTitle,
   fetchAccounts,
-  deleteAccount,
-  inactiveAccount,
+  requestDeleteAccount,
+  requestInactiveAccount,
   fetchResourceViews,
   fetchResourceFields,
   getResourceFields,
+  fetchAccountsTable,
 }) {
   const [state, setState] = useState({
     deleteAlertActive: false,
@@ -34,8 +35,8 @@ function AccountsChart({
     inactiveAlertActive: false,
     targetAccount: {},
   });
-
-  const [filterConditions, setFilterConditions] = useState([]);
+  const [deleteAccount, setDeleteAccount] = useState(false);
+  const [inactiveAccount, setInactiveAccount] = useState(false);
  
   const fetchHook = useAsync(async () => {
     await Promise.all([
@@ -44,57 +45,56 @@ function AccountsChart({
     ]);
   });
 
+  // Fetch accounts list according to the given custom view id.
+  const fetchAccountsHook = useAsync(async () => {
+    await Promise.all([
+      fetchAccountsTable(),
+    ]);
+  }, false);
+
   useEffect(() => {
     changePageTitle('Chart of Accounts');
   }, []);
 
-  /**
-   * Handle click and cancel/confirm account delete
-   */
-  const handleDeleteAccount = (account) => {
-    setState({
-      deleteAlertActive: true,
-      deleteAccount: account,
-    });
-  };
- 
-  const handleCancelAccountDelete = () => {
-    setState({ deleteAlertActive: false });
-  };
-  const handleConfirmAccountDelete = () => {
-    const { targetAccount: account } = state;
-    deleteAccount(account.id).then(() => {
-      setState({ deleteAlertActive: false });
-      fetchAccounts();
+  // Handle click and cancel/confirm account delete
+  const handleDeleteAccount = (account) => { setDeleteAccount(account); };
+  
+  // handle cancel delete account alert.
+  const handleCancelAccountDelete = () => { setDeleteAccount(false); };
+  
+  // Handle confirm account delete
+  const handleConfirmAccountDelete = useCallback(() => {
+    requestDeleteAccount(deleteAccount.id).then(() => {
+      setDeleteAccount(false);
+      fetchAccountsHook.execute();
       AppToaster.show({ message: 'the_account_has_been_deleted' });
     });
-  };
+  }, [deleteAccount]);
 
-  /**
-   * Handle cancel/confirm account inactive.
-   */
-  const handleInactiveAccount = (account) => {
-    setState({ inactiveAlertActive: true, targetAccount: account });
-  };
+  // Handle cancel/confirm account inactive.
+  const handleInactiveAccount = useCallback((account) => {
+    setInactiveAccount(account);
+  }, []);
 
-  const handleCancelInactiveAccount = () => {
-    setState({ inactiveAlertActive: false });
-  };
+  // Handle cancel inactive account alert.
+  const handleCancelInactiveAccount = useCallback(() => {
+    setInactiveAccount(false);
+  }, []);
 
-  const handleConfirmAccountActive = () => {
-    const { targetAccount: account } = state;
-    inactiveAccount(account.id).then(() => {
-      setState({ inactiveAlertActive: true });
-      fetchAccounts();
+  // Handle confirm account activation.
+  const handleConfirmAccountActive = useCallback(() => {
+    requestInactiveAccount(inactiveAccount.id).then(() => {
+      setInactiveAccount(false);
+      fetchAccountsTable();
       AppToaster.show({ message: 'the_account_has_been_inactivated' });
     });
-  };
+  }, [inactiveAccount]);
 
   /**
    * Handle cancel/confirm account restore.
    */
   const handleCancelAccountRestore = () => {
-    setState({ restoreAlertActive: false });
+    
   };
 
   const handleEditAccount = (account) => {
@@ -108,16 +108,22 @@ function AccountsChart({
   const handleConfirmAccountRestore = (account) => {
 
   };
-
   const handleDeleteBulkAccounts = (accounts) => {
 
   };
-  const handleFilterChange = (conditions) => { setFilterConditions(conditions); };
+
+  const handleSelectedRowsChange = (accounts) => {
+    console.log(accounts);
+  };
+
+  const handleFilterChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
+  const handleViewChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
+  const handleFetchData = useCallback(() => { fetchAccountsHook.execute(); }, []);
 
   return (
     <DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>
       <DashboardActionsBar
-        onFilterChange={handleFilterChange} />
+        onFilterChanged={handleFilterChanged} />
       <DashboardPageContent>
         <Switch>
           <Route
@@ -126,14 +132,17 @@ function AccountsChart({
               '/dashboard/accounts/:custom_view_id/custom_view',
               '/dashboard/accounts'
             ]}>
-            <AccountsViewsTabs onDeleteBulkAccounts={handleDeleteBulkAccounts} />
- 
+            <AccountsViewsTabs
+              onViewChanged={handleViewChanged}
+              onDeleteBulkAccounts={handleDeleteBulkAccounts} />
+
             <AccountsDataTable
-              filterConditions={filterConditions}
+              onSelectedRowsChange={handleSelectedRowsChange}
               onDeleteAccount={handleDeleteAccount}
               onInactiveAccount={handleInactiveAccount}
               onRestoreAccount={handleRestoreAccount}
-              onEditAccount={handleEditAccount} />
+              onEditAccount={handleEditAccount}
+              onFetchData={handleFetchData} />
           </Route>
         </Switch>
 
@@ -142,7 +151,7 @@ function AccountsChart({
           confirmButtonText="Move to Trash"
           icon="trash"
           intent={Intent.DANGER}
-          isOpen={state.deleteAlertActive}
+          isOpen={deleteAccount}
           onCancel={handleCancelAccountDelete}
           onConfirm={handleConfirmAccountDelete}>
           <p>
@@ -156,7 +165,7 @@ function AccountsChart({
           confirmButtonText="Inactivate"
           icon="trash"
           intent={Intent.WARNING}
-          isOpen={state.inactiveAlertActive}
+          isOpen={inactiveAccount}
           onCancel={handleCancelInactiveAccount}
           onConfirm={handleConfirmAccountActive}>
           <p>
@@ -164,20 +173,6 @@ function AccountsChart({
           but it will become private to you.
           </p>
         </Alert>
-
-        <Alert
-          cancelButtonText="Cancel"
-          confirmButtonText="Move to Trash"
-          icon="trash"
-          intent={Intent.DANGER}
-          isOpen={state.restoreAlertActive}
-          onCancel={handleCancelAccountRestore}
-          onConfirm={handleConfirmAccountRestore}>
-          <p>
-          Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
-          but it will become private to you.
-          </p>
-        </Alert>
       </DashboardPageContent>
     </DashboardInsider>
   );
diff --git a/client/src/containers/Dashboard/Dialogs/AccountFormDialog.js b/client/src/containers/Dashboard/Dialogs/AccountFormDialog.js
index ae82c4ba3..d23e52b67 100644
--- a/client/src/containers/Dashboard/Dialogs/AccountFormDialog.js
+++ b/client/src/containers/Dashboard/Dialogs/AccountFormDialog.js
@@ -21,6 +21,7 @@ import AppToaster from 'components/AppToaster';
 import DialogConnect from 'connectors/Dialog.connector';
 import DialogReduxConnect from 'components/DialogReduxConnect';
 import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
+import AccountsConnect from 'connectors/Accounts.connector';
 
 function AccountFormDialog({
   name,
@@ -33,7 +34,8 @@ function AccountFormDialog({
   closeDialog,
   submitAccount,
   fetchAccount,
-  editAccount
+  editAccount,
+  fetchAccountsTable,
 }) {
   const intl = useIntl();
   const accountFormValidationSchema = Yup.object().shape({
@@ -64,6 +66,7 @@ function AccountFormDialog({
           AppToaster.show({
             message: 'the_account_has_been_edited'
           });
+          refetchAccounts.execute();
         });
       } else {
         submitAccount({ form: { ...omit(values, exclude) } }).then(response => {
@@ -71,6 +74,7 @@ function AccountFormDialog({
           AppToaster.show({
             message: 'the_account_has_been_submit'
           });
+          refetchAccounts.execute();
         });
       }
     }
@@ -131,15 +135,19 @@ function AccountFormDialog({
     await Promise.all([
       fetchAccounts(),
       fetchAccountTypes(),
-
       // Fetch the target in case edit mode.
       ...(payload.action === 'edit' ? [fetchAccount(payload.id)] : [])
     ]);
-  });
+  }, false);
 
-  const onDialogOpening = async () => {
-    fetchHook.execute();
-  };
+  const refetchAccounts = useAsync(async () => {
+    await Promise.all([
+      fetchAccountsTable(),
+    ]);
+  }, false);
+
+  // Fetch requests on dialog opening.
+  const onDialogOpening = async () => { fetchHook.execute(); };
 
   const onChangeAccountType = accountType => {
     setState({ ...state, selectedAccountType: accountType.name });
@@ -294,6 +302,7 @@ function AccountFormDialog({
 
 export default compose(
   AccountFormDialogConnect,
+  AccountsConnect,
   DialogReduxConnect,
   DialogConnect
 )(AccountFormDialog);
diff --git a/client/src/hooks/index.js b/client/src/hooks/index.js
index 6391500fe..07ae38ffb 100644
--- a/client/src/hooks/index.js
+++ b/client/src/hooks/index.js
@@ -1,6 +1,27 @@
+import {useRef, useEffect} from 'react';
 import useAsync from './async';
+
 // import use from 'async';
 
+/**
+ * A custom useEffect hook that only triggers on updates, not on initial mount
+ * Idea stolen from: https://stackoverflow.com/a/55075818/1526448
+ * @param {Function} effect
+ * @param {Array<any>} dependencies
+ */
+export function useUpdateEffect(effect, dependencies = []) {
+  const isInitialMount = useRef(true);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      effect();
+    }
+  }, dependencies);
+}
+
 export default {
   useAsync,
+  useUpdateEffect,
 }
\ No newline at end of file
diff --git a/client/src/static/json/icons.js b/client/src/static/json/icons.js
index 8a199dc15..bb5c12c19 100644
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -78,5 +78,13 @@ export default {
   "pen": {
     path: ['M493.26 56.26l-37.51-37.51C443.25 6.25 426.87 0 410.49 0s-32.76 6.25-45.25 18.74l-74.49 74.49L256 127.98 12.85 371.12.15 485.34C-1.45 499.72 9.88 512 23.95 512c.89 0 1.79-.05 2.69-.15l114.14-12.61L384.02 256l34.74-34.74 74.49-74.49c25-25 25-65.52.01-90.51zM118.75 453.39l-67.58 7.46 7.53-67.69 231.24-231.24 31.02-31.02 60.14 60.14-31.02 31.02-231.33 231.33zm340.56-340.57l-44.28 44.28-60.13-60.14 44.28-44.28c4.08-4.08 8.84-4.69 11.31-4.69s7.24.61 11.31 4.69l37.51 37.51c6.24 6.25 6.24 16.4 0 22.63z'],
     viewBox: '0 0 512 512',
+  },
+  "sort-up": {
+    path: ['M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z'],
+    viewBox: '0 0 320 512'
+  },
+  "sort-down": {
+    path: ['M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z'],
+    viewBox: '0 0 320 512'
   }
 }
\ No newline at end of file
diff --git a/client/src/store/accounts/accounts.actions.js b/client/src/store/accounts/accounts.actions.js
index 3b2d5b6a1..4c7eb26e2 100644
--- a/client/src/store/accounts/accounts.actions.js
+++ b/client/src/store/accounts/accounts.actions.js
@@ -12,9 +12,7 @@ export const fetchAccountTypes = () => {
           });
           resolve(response);
         })
-        .catch(error => {
-          reject(error);
-        });
+        .catch(error => { reject(error); });
     });
 };
 
@@ -40,6 +38,38 @@ export const fetchAccountsList = ({ query } = {}) => {
     });
 };
 
+export const fetchAccountsTable = ({ query } = {}) => {
+  return (dispatch, getState) =>
+    new Promise((resolve, reject) => {
+      const pageQuery = getState().accounts.tableQuery;
+
+      dispatch({
+        type: t.ACCOUNTS_TABLE_LOADING,
+        loading: true,
+      });
+      ApiService.get('accounts', { params: { ...pageQuery, ...query } })
+        .then(response => {
+          dispatch({
+            type: t.ACCOUNTS_PAGE_SET,
+            accounts: response.data.accounts,
+            customViewId: response.data.customViewId
+          });
+          dispatch({
+            type: t.ACCOUNTS_ITEMS_SET,
+            accounts: response.data.accounts
+          });
+          dispatch({
+            type: t.ACCOUNTS_TABLE_LOADING,
+            loading: false,
+          });
+          resolve(response);
+        })
+        .catch(error => {
+          reject(error);
+        });
+    });
+};
+
 export const fetchAccountsDataTable = ({ query }) => {
   return dispatch =>
     new Promise((resolve, reject) => {
@@ -109,7 +139,12 @@ export const inactiveAccount = ({ id }) => {
 };
 
 export const deleteAccount = ({ id }) => {
-  return dispatch => ApiService.delete(`accounts/${id}`);
+  return dispatch => new Promise((resolve, reject) => {
+    ApiService.delete(`accounts/${id}`).then((response) => {
+      dispatch({ type: t.ACCOUNT_DELETE, id });
+      resolve(response);
+    }).catch(error => { reject(error); });
+  });
 };
 
 export const deleteBulkAccounts = ({ ids }) => {};
diff --git a/client/src/store/accounts/accounts.reducer.js b/client/src/store/accounts/accounts.reducer.js
index 14449dfee..b68dc01e3 100644
--- a/client/src/store/accounts/accounts.reducer.js
+++ b/client/src/store/accounts/accounts.reducer.js
@@ -1,5 +1,6 @@
 import t from 'store/types';
-import { createReducer } from '@reduxjs/toolkit';
+import { createReducer, combineReducers } from '@reduxjs/toolkit';
+import { createTableQueryReducers } from 'store/queryReducers';
 
 const initialState = {
   items: {},
@@ -9,10 +10,11 @@ const initialState = {
   accountFormErrors: [],
   datatableQuery: {},
   currentViewId: -1,
-  bulkActions: {},
+  selectedRows: [],
+  loading: false,
 };
 
-export default createReducer(initialState, {
+const accountsReducer = createReducer(initialState, {
   [t.ACCOUNTS_ITEMS_SET]: (state, action) => {
     const _items = {};
 
@@ -44,19 +46,32 @@ export default createReducer(initialState, {
     state.accountsById[action.account.id] = action.account;
   },
 
-  [t.ACCOUNT_BULK_ACTION_ADD]: (state, action) => {
-    state.bulkActions[action.account_id] = true;
+  [t.ACCOUNT_DELETE]: (state, action) => {
+    if (typeof state.items[action.id] !== 'undefined'){
+      delete state.items[action.id];
+    }
   },
 
-  [t.ACCOUNT_BULK_ACTION_REMOVE]: (state, action) => {
-    delete state.bulkActions[action.account_id];
+  [t.ACCOUNTS_SELECTED_ROWS_SET]: (state, action) => {
+    state.selectedRows.push(...action.ids);
   },
 
   [t.ACCOUNTS_SET_CURRENT_VIEW]: (state, action) => {  
     state.currentViewId = action.currentViewId;
-  }
+  },
+
+  [t.ACCOUNTS_TABLE_LOADING]: (state, action) => {
+    state.loading = action.loading;
+  },
 });
 
+export default createTableQueryReducers('accounts', accountsReducer);
+
 export const getAccountById = (state, id) => {
   return state.accounts.accountsById[id];
-};
\ No newline at end of file
+};
+ 
+// export default {
+//   // ...accountsReducer,
+//   // testReducer,
+// }
\ No newline at end of file
diff --git a/client/src/store/accounts/accounts.types.js b/client/src/store/accounts/accounts.types.js
index 0c9b69b1a..fef936003 100644
--- a/client/src/store/accounts/accounts.types.js
+++ b/client/src/store/accounts/accounts.types.js
@@ -5,11 +5,16 @@ export default {
   ACCOUNTS_PAGE_SET: 'ACCOUNTS_PAGE_SET',
   ACCOUNTS_ITEMS_SET: 'ACCOUNTS_ITEMS_SET',
   ACCOUNT_SET: 'ACCOUNT_SET',
+  ACCOUNT_DELETE: 'ACCOUNT_DELETE',
   ACCOUNT_FORM_ERRORS: 'ACCOUNT_FORM_ERRORS',
   CLEAR_ACCOUNT_FORM_ERRORS: 'CLEAR_ACCOUNT_FORM_ERRORS',
 
-  ACCOUNT_BULK_ACTION_ADD: 'ACCOUNT_BULK_ACTION_ADD',
-  ACCOUNT_BULK_ACTION_REMOVE: 'ACCOUNT_BULK_ACTION_REMOVE',
+  ACCOUNTS_SELECTED_ROWS_SET: 'ACCOUNTS_SELECTED_ROWS_SET',
 
   ACCOUNTS_SET_CURRENT_VIEW: 'ACCOUNTS_SET_CURRENT_VIEW',
+  
+  ACCOUNTS_TABLE_QUERY_SET: 'ACCOUNTS_TABLE_QUERY_SET',
+  ACCOUNTS_TABLE_QUERIES_SET: 'ACCOUNTS_TABLE_QUERIES_SET',
+
+  ACCOUNTS_TABLE_LOADING: 'ACCOUNTS_TABLE_LOADING',
 };
\ No newline at end of file
diff --git a/client/src/store/queryReducers.js b/client/src/store/queryReducers.js
new file mode 100644
index 000000000..fddcb5d3b
--- /dev/null
+++ b/client/src/store/queryReducers.js
@@ -0,0 +1,28 @@
+
+
+export const createTableQueryReducers = 
+  (resourceName = '', reducer) =>
+  (state, action) => {
+    const RESOURCE_NAME = resourceName.toUpperCase();
+
+    switch (action.type) {
+      case `${RESOURCE_NAME}_TABLE_QUERY_SET`:
+        return {
+          ...state,
+          tableQuery: {
+            ...state.tableQuery,
+            [state.key]: state.value,
+          }
+        };
+      case `${RESOURCE_NAME}_TABLE_QUERIES_ADD`:
+        return {
+          ...state,
+          tableQuery: {
+            ...state.tableQuery,
+            ...action.queries
+          },
+        };
+      default:
+        return reducer(state, action);
+    }  
+}
\ No newline at end of file
diff --git a/client/src/style/components/data-table.scss b/client/src/style/components/data-table.scss
index f66dcef92..0f0de9052 100644
--- a/client/src/style/components/data-table.scss
+++ b/client/src/style/components/data-table.scss
@@ -1,49 +1,107 @@
 
 .bigcapital-datatable{
+  
+  display: block;
+  // max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
 
-  table {
+  .table {
     text-align: left;
     border-spacing: 0;
-    width: 100%;
+    min-width: 100%;
+    display: block;
+    // width: 100%;
 
-    thead{
-      th{
-        height: 48px;
-        padding: 0.5rem 1.5rem;
+    .thead{
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      .th{
+        
+
+        padding: 1rem 1.5rem;
         background: #F8FAFA;
         font-size: 14px;
         color: #666;
         font-weight: 500;
-
         border-bottom: 1px solid rgb(224, 224, 224);
       }
     }
 
-    tr {
-      :last-child {
-        td {
+    .tr {
+      display: flex;
+      flex: 1 0 auto;
+      
+      &:last-child {
+        .td {
           border-bottom: 0;
         }
       }
     }
 
-    th,
-    td {
+    .th,
+    .td {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      justify-content: flex-start;
+      align-items: flex-start;
+      display: flex;
+      
       margin: 0;
       padding: 0.5rem;
 
       :last-child {
         border-right: 0;
       }
+
+      .bp3-control{
+        margin-bottom: 0;
+      }
+
+      .resizer {
+        display: inline-block;
+        background: transparent;
+        width: 10px;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translateX(50%);
+        z-index: 1;
+        touch-action:none;
+
+        &.isResizing {
+          // background: red;
+        }
+
+        .inner-resizer{
+          height: 100%;
+          width: 1px;
+          background: #ececec;
+          margin: 0 auto;
+        }
+
+        &.isResizing .inner-resizer{
+          background: #1183DA;
+        }
+      }
     }
 
-    tbody{
+    .tbody{
+      overflow-y: scroll;
+      overflow-x: hidden;
+
+      .tr .td{
+        border-bottom: 1px solid #E0E2E2;
+      }
       
-      .#{$ns}-button--action{
+      .td.actions .#{$ns}-button{
         background: #E6EFFB;
         border: 0;
         box-shadow: 0 0 0;
         padding: 5px 15px;
+        border-radius: 2px;
       }
     }
   }
diff --git a/client/src/style/pages/accounts-chart.scss b/client/src/style/pages/accounts-chart.scss
index 5a5ea5676..fdd4ca2aa 100644
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -1,25 +1,12 @@
 
 .dashboard__insider--accounts-chart{
 
-  .e-grid{
-    .e-gridheader{
-      border-top: 0;
-    }
-
-    .account-normal{
-
+  .bigcapital-datatable{
+    .normal{
       .#{$ns}-icon{
         color: #666;
         padding-left: 15px;
       }
     }
-
-    .checkbox-row{
-      width: 0;
-       
-      .#{$ns}-control{
-        margin: 0;
-      }
-    }
   }
 }
\ No newline at end of file
diff --git a/client/src/style/pages/dashboard.scss b/client/src/style/pages/dashboard.scss
index 3264aa960..60bc22c90 100644
--- a/client/src/style/pages/dashboard.scss
+++ b/client/src/style/pages/dashboard.scss
@@ -196,8 +196,7 @@
     width: calc(100% - 220px);
     display: flex;
     flex-direction: column;
-
-    
+    margin-left: 220px;
   }
 
   &__insider{
diff --git a/client/src/style/views/Sidebar.scss b/client/src/style/views/Sidebar.scss
index d9d40edd6..037c2a345 100644
--- a/client/src/style/views/Sidebar.scss
+++ b/client/src/style/views/Sidebar.scss
@@ -10,6 +10,8 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
   background: $sidebar-background;
   color: $sidebar-text-color;
   width: $sidebar-width;
+  position: fixed;
+  height: 100%;
 
   &__inner{
     overflow-y: scroll;