fix: Expanded Rows with deep nesting example (#2500)

coingaming · Nov 20, 2023 · 1203bd1 · 1203bd1
1 parent a40f501
commit 1203bd1
Show file tree

Hide file tree

Showing 2 changed files with 1,696 additions and 1,284 deletions.
diff --git a/next-docs/public/examples/table/DeepTable.tsx b/next-docs/public/examples/table/DeepTable.tsx
@@ -12,12 +12,24 @@ const Example = () => {
           {isAllRowsExpanded ? <ControlsChevronDown /> : <ControlsChevronRight />}
         </span>
       ),
-      Cell: ({ row }: any) =>
-        row.canExpand ? (
-          <span style={{ paddingLeft: `${row.depth * 2}rem` }}>
+      Cell: ({ row, toggleRowExpanded }: any) =>
+      <div className="flex h-full items-center">
+        {row.canExpand ? (
+          <span
+            {...row.getToggleRowExpandedProps({
+              style: {
+                paddingLeft: `${row.depth * 2}rem`,
+              },
+            })}
+            onClick={(e) => {
+              e.preventDefault();
+              toggleRowExpanded(row.id, row.isExpanded !== true);
+            }}
+          >
             {row.isExpanded ? <ControlsChevronDown /> : <ControlsChevronRight />}
           </span>
-        ) : null,
+        ) : null}
+      </div>
     },
     {
       Header: 'Name',