- Data table sticky header.

- Mini sidebar toggle.
- Refactor withDashboard and withDashboardActions.

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -7,12 +7,9 @@ import DataTable from 'components/DataTable';
 import Money from 'components/Money';
 
 import { compose, defaultExpanderReducer } from 'utils';
-import {
-  getFinancialSheetIndexByQuery,
-} from 'store/financialStatement/financialStatements.selectors';
+import { getFinancialSheetIndexByQuery } from 'store/financialStatement/financialStatements.selectors';
 import withProfitLossDetail from './withProfitLoss';
 
-
 function ProfitLossSheetTable({
   // #withProfitLoss
   profitLossTableRows,
@@ -24,63 +21,79 @@ function ProfitLossSheetTable({
   onFetchData,
   companyName,
 }) {
+  const { formatMessage } = useIntl();
 
-  const {formatMessage} =useIntl();
-
-  const columns = useMemo(() => [ 
-    {
-      Header: formatMessage({id:'account_name'}),
-      accessor: 'name',
-      className: "name",
-    },
-    {
-      Header: formatMessage({id:'acc_code'}),
-      accessor: 'code',
-      className: "account_code",
-    },
-    ...(profitLossQuery.display_columns_type === 'total') ? [
+  const columns = useMemo(
+    () => [
       {
-        Header: formatMessage({id:'total'}),
-        Cell: ({ cell }) => {
-          const row = cell.row.original;
-          if (row.total) {
-            return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
-          }
-          return '';          
-        },
-        className: "total",
-      }
-    ] : [],
-    ...(profitLossQuery.display_columns_type === 'date_periods') ? 
-      (profitLossColumns.map((column, index) => ({
-        id: `date_period_${index}`,
-        Header: column,
-        accessor: (row) => {
-          if (row.periods && row.periods[index]) {
-            const amount = row.periods[index].formatted_amount;
-            return (<Money amount={amount} currency={'USD'} />);
-          }
-          return '';
-        },
-        width: 100,
-      })))
-    : [],
-  ], [profitLossQuery.display_columns_type, profitLossColumns,formatMessage]);
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: 'name',
+        className: 'name',
+      },
+      {
+        Header: formatMessage({ id: 'acc_code' }),
+        accessor: 'code',
+        className: 'account_code',
+      },
+      ...(profitLossQuery.display_columns_type === 'total'
+        ? [
+            {
+              Header: formatMessage({ id: 'total' }),
+              Cell: ({ cell }) => {
+                const row = cell.row.original;
+                if (row.total) {
+                  return (
+                    <Money
+                      amount={row.total.formatted_amount}
+                      currency={'USD'}
+                    />
+                  );
+                }
+                return '';
+              },
+              className: 'total',
+            },
+          ]
+        : []),
+      ...(profitLossQuery.display_columns_type === 'date_periods'
+        ? profitLossColumns.map((column, index) => ({
+            id: `date_period_${index}`,
+            Header: column,
+            accessor: (row) => {
+              if (row.periods && row.periods[index]) {
+                const amount = row.periods[index].formatted_amount;
+                return <Money amount={amount} currency={'USD'} />;
+              }
+              return '';
+            },
+            width: 100,
+          }))
+        : []),
+    ],
+    [profitLossQuery.display_columns_type, profitLossColumns, formatMessage],
+  );
 
   // Handle data table fetch data.
-  const handleFetchData = useCallback((...args) => {
-    onFetchData && onFetchData(...args);
-  }, [onFetchData]);
+  const handleFetchData = useCallback(
+    (...args) => {
+      onFetchData && onFetchData(...args);
+    },
+    [onFetchData],
+  );
 
   // Retrieve default expanded rows of balance sheet.
-  const expandedRows = useMemo(() => 
-    defaultExpanderReducer(profitLossTableRows, 1),
-    [profitLossTableRows]);
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(profitLossTableRows, 1),
+    [profitLossTableRows],
+  );
 
   // Retrieve conditional datatable row classnames.
-  const rowClassNames = useCallback((row) => ({
-    [`row--${row.rowType}`]: row.rowType,
-  }), []);
+  const rowClassNames = useCallback(
+    (row) => ({
+      [`row--${row.rowType}`]: row.rowType,
+    }),
+    [],
+  );
 
   return (
     <FinancialSheet
@@ -90,8 +103,8 @@ function ProfitLossSheetTable({
       toDate={profitLossQuery.to_date}
       name="profit-loss-sheet"
       loading={loading}
-      basis={profitLossQuery.basis}>
-
+      basis={profitLossQuery.basis}
+    >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
@@ -100,7 +113,9 @@ function ProfitLossSheetTable({
         expanded={expandedRows}
         rowClassNames={rowClassNames}
         expandable={true}
-        expandToggleColumn={1} />
+        expandToggleColumn={1}
+        sticky={true}
+      />
     </FinancialSheet>
   );
 }
@@ -116,9 +131,11 @@ const withProfitLossTable = connect(mapStateToProps);
 
 export default compose(
   withProfitLossTable,
-  withProfitLossDetail(({ profitLossQuery, profitLossColumns, profitLossTableRows }) => ({
-    profitLossColumns,
-    profitLossQuery,
-    profitLossTableRows,
-  })),
-)(ProfitLossSheetTable);
+  withProfitLossDetail(
+    ({ profitLossQuery, profitLossColumns, profitLossTableRows }) => ({
+      profitLossColumns,
+      profitLossQuery,
+      profitLossTableRows,
+    }),
+  ),
+)(ProfitLossSheetTable);