Merge pull request #1163 from securityscorecard/beta

fix(DatatableV2): fix Rendered fewer hooks than expected issue
securityscorecard · Oct 10, 2024 · 9070aea · 9070aea
2 parents 0af3cdc + f00dd17
commit 9070aea
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/src/components/DatatableV2/buttons/ExpandAllButton.tsx b/src/components/DatatableV2/buttons/ExpandAllButton.tsx
@@ -3,16 +3,18 @@ import IconButton from '../../ButtonV2/IconButton';
 import { useSafeTranslation } from '../../../hooks/useSafeTranslation';
 
 const ExpandAllButton = <D,>({ table }: { table: DatatableInstance<D> }) => {
+  const { t } = useSafeTranslation();
   const {
     getIsSomeRowsExpanded,
     getState,
-    options: { renderDetailPanel },
+    options: { renderDetailPanel, enableExpandAll },
     toggleAllRowsExpanded,
   } = table;
 
   const { isLoading } = getState();
   const areSomeRowsExpanded = getIsSomeRowsExpanded();
-  const { t } = useSafeTranslation();
+
+  if (!enableExpandAll) return null;
 
   return (
     <IconButton

diff --git a/src/components/DatatableV2/buttons/ExpandButton.tsx b/src/components/DatatableV2/buttons/ExpandButton.tsx
@@ -9,14 +9,14 @@ const ExpandButton = <D,>({
   table: DatatableInstance<D>;
   row: DatatableRow<D>;
 }) => {
+  const { t } = useSafeTranslation();
   const {
     options: { renderDetailPanel },
   } = table;
   const { getIsExpanded, getCanExpand, toggleExpanded } = row;
 
   const canExpand = getCanExpand();
   const isExpanded = getIsExpanded();
-  const { t } = useSafeTranslation();
 
   return (
     <IconButton

diff --git a/src/components/DatatableV2/header/HeaderCell.tsx b/src/components/DatatableV2/header/HeaderCell.tsx
@@ -103,7 +103,7 @@ const HeaderCell = <D,>({
             <HeaderCellResizeHandler header={header} table={table} />
           )}
         </Inline>
-      ) : Object.values(displayColumnIds).indexOf(columnDef.id) > 0 ? (
+      ) : Object.values(displayColumnIds).includes(columnDef.id) ? (
         <Inline align="center" justify="center">
           {headerElement}
         </Inline>

diff --git a/src/components/DatatableV2/hooks/useDisplayColumns.tsx b/src/components/DatatableV2/hooks/useDisplayColumns.tsx
@@ -21,10 +21,8 @@ export const useDisplayColumns = <D,>(
           tableOptions.enableExpanding && {
             id: displayColumnIds.expand,
             header: '',
-            headerComponent: tableOptions.enableExpandAll
-              ? ExpandAllButton
-              : null,
-            cell: ExpandButton,
+            headerComponent: (props) => <ExpandAllButton {...props} />,
+            cell: (props) => <ExpandButton {...props} />,
             size: 56,
             ...tableOptions.defaultDisplayColumn,
           },
@@ -59,7 +57,6 @@ export const useDisplayColumns = <D,>(
       ).filter(Boolean),
     [
       tableOptions.enableExpanding,
-      tableOptions.enableExpandAll,
       tableOptions.enableRowSelection,
       tableOptions.enableSelectAll,
       tableOptions.enableMultiRowSelection,