fix financial statements.

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -31,65 +31,30 @@ function TrialBalanceSheetTable({
 
   const columns = useMemo(() => [
     {
-      // Build our expander column
-      id: 'expander', // Make sure it has an ID
-      className: 'expander',      
-      Header: ({
-        getToggleAllRowsExpandedProps,
-        isAllRowsExpanded
-      }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
-            (<span class="arrow-down" />) : (<span class="arrow-right" />)
-          }
-        </span>
-      ),
-      Cell: ({ row }) =>
-        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
-        // to build the toggle for expanding a row
-        row.canExpand ? (
-          <span
-            {...row.getToggleRowExpandedProps({
-              style: {
-                // We can even use the row.depth property
-                // and paddingLeft to indicate the depth
-                // of the row
-                paddingLeft: `${row.depth * 2}rem`,
-              },
-              className: 'toggle',
-            })}
-          >
-            {row.isExpanded ? (<span class="arrow-down" />) : (<span class="arrow-right" />) }
-          </span>
-        ) : null,
-      width: 20,
-      disableResizing: true,
-    },
-    {
-      Header: formatMessage({id:'account_name'}),
+      Header: formatMessage({ id:'account_name' }),
       accessor: 'name',
       className: "name",
     },
     {
-      Header: formatMessage({id:'code'}), 
+      Header: formatMessage({ id:'code' }), 
       accessor: 'code',
       className: "code",
       width: 120,
     },
     {
-      Header: formatMessage({id:'credit'}),
+      Header: formatMessage({ id:'credit' }),
       accessor: r => (<Money amount={r.credit} currency="USD" />),
       className: 'credit',
       width: 120,
     },
     {
-      Header: formatMessage({id:'debit'}),
+      Header: formatMessage({ id:'debit' }),
       accessor: r => (<Money amount={r.debit} currency="USD" />),
       className: 'debit',
       width: 120,
     },
     {
-      Header: formatMessage({id:'balance'}),
+      Header: formatMessage({ id:'balance' }),
       accessor: r => (<Money amount={r.balance} currency="USD" />),
       className: 'balance',
       width: 120,
@@ -113,12 +78,13 @@ function TrialBalanceSheetTable({
         className="bigcapital-datatable--financial-report"
         columns={columns}
         data={trialBalanceAccounts}
-        onFetchData={handleFetchData} />
+        onFetchData={handleFetchData}
+        expandable={true}
+        expandToggleColumn={1} />
     </FinancialSheet>
   ); 
 }
 
-
 const mapStateToProps = (state, props) => {
   const { trialBalanceQuery } = props;
   return {