faet: Account Transcations.

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { DataTable, TableFastCell } from 'components';
+import { TABLES } from 'common/tables';
+
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withSettings from '../../Settings/withSettings';
+
+import { useMemorizedColumnsWidths } from '../../../hooks';
+import { useAccountTransactionsColumns } from './components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { compose } from 'utils';
+
+/**
+ * Account transactions data table.
+ */
+function AccountTransactionsDataTable({
+  // #withSettings
+  cashflowTansactionsTableSize,
+}) {
+  // Retrieve table columns.
+  const columns = useAccountTransactionsColumns();
+
+  // Retrieve list context.
+  const {
+    cashflowTransactions,
+    isCashFlowTransactionsFetching,
+    isCashFlowTransactionsLoading,
+  } = useAccountTransactionsContext();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
+
+  return (
+    <DataTable
+      noInitialFetch={true}
+      columns={columns}
+      data={cashflowTransactions}
+      selectionColumn={true}
+      sticky={true}
+      loading={isCashFlowTransactionsLoading}
+      headerLoading={isCashFlowTransactionsLoading}
+      progressBarLoading={isCashFlowTransactionsFetching}
+      expandColumnSpace={1}
+      expandToggleColumn={2}
+      selectionColumnWidth={45}
+      TableCellRenderer={TableFastCell}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableRowsRenderer={TableVirtualizedListRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      // #TableVirtualizedListRows props.
+      vListrowHeight={cashflowTansactionsTableSize == 'small' ? 40 : 42}
+      vListOverscanRowCount={0}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      size={cashflowTansactionsTableSize}
+    />
+  );
+}
+
+export default compose(
+  withSettings(({ cashflowTransactionsSettings }) => ({
+    cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+  })),
+)(AccountTransactionsDataTable);