fix: accounts types with new design.

client/src/components/Datatable/TableCell.js

@@ -7,11 +7,17 @@ import TableContext from './TableContext';
 /**
  * Tabl cell.
  */
-export default function TableCell({ cell, row, index }) {
+export default function TableCell({
+  cell,
+  row: { depth, getToggleRowExpandedProps, isExpanded },
+  index,
+}) {
   const {
-    props: { expandToggleColumn, expandable }
+    props: { expandToggleColumn, expandColumnSpace, expandable },
   } = useContext(TableContext);
 
+  const isExpandColumn = expandToggleColumn === index;
+
   return (
     <div
       {...cell.getCellProps({
@@ -20,33 +26,34 @@ export default function TableCell({ cell, row, index }) {
         }),
       })}
     >
-      {
-        // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
-        // to build the toggle for expanding a row
-      }
-      <If
-        condition={
-          cell.row.canExpand && expandable && index === expandToggleColumn
+      <div
+        className={classNames({
+          'text-overview': cell.column.textOverview,
+        })}
+        style={{
+          'padding-left':
+            isExpandColumn && expandable
+              ? `${depth * expandColumnSpace}rem`
+              : '',
+        }}
+      >
+        {
+          // Use the row.canExpand and row.getToggleRowExpandedProps prop getter
+          // to build the toggle for expanding a row
         }
-      >
-        <span
-          {...row.getToggleRowExpandedProps({ className: 'expand-toggle' })}
-        >
-          <span
-            className={classNames({
-              'arrow-down': row.isExpanded,
-              'arrow-right': !row.isExpanded,
-            })}
-          />
-        </span>
-      </If>
+        <If condition={cell.row.canExpand && expandable && isExpandColumn}>
+          <span {...getToggleRowExpandedProps({ className: 'expand-toggle' })}>
+            <span
+              className={classNames({
+                'arrow-down': isExpanded,
+                'arrow-right': !isExpanded,
+              })}
+            />
+          </span>
+        </If>
 
-      <ConditionalWrapper
-        condition={cell.column.textOverview}
-        wrapper={(children) => <span class="text-overview">{children}</span>}
-      >
         {cell.render('Cell')}
-      </ConditionalWrapper>
+      </div>
     </div>
   );
 }

client/src/components/Datatable/TablePage.js

@@ -12,7 +12,7 @@ export default function TablePage() {
       loading,
       TableRowsRenderer,
       TableLoadingRenderer,
-      TableNoResultsRow,
+      TableNoResultsRowRenderer,
     },
   } = useContext(TableContext);
 
@@ -20,7 +20,7 @@ export default function TablePage() {
     return <TableLoadingRenderer spinnerProps={spinnerProps} />;
   }
   if (page.length === 0) {
-    return <TableNoResultsRow />;
+    return <TableNoResultsRowRenderer />;
   }
   return (<TableRowsRenderer />);
 }