🐛(react) fix DataGrid selection checkbox rerendering

Each time a row was select or unselect the checkbox was re-triggering its animation, which looked buggy. Fixes #37
openfun · Mar 19, 2024 · b4a6367 · b4a6367
1 parent 20f5bb7
commit b4a6367
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/.changeset/famous-mice-explode.md b/.changeset/famous-mice-explode.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix DataGrid selection checkbox rerendering
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
@@ -12,12 +12,14 @@ import { Pagination, PaginationProps } from ":/components/Pagination";
 import { useCunningham } from ":/components/Provider";
 import { Loader } from ":/components/Loader";
 import {
+  HEADER_ID_SELECT,
   paginationToPaginationState,
   sortingStateToSortModel,
   sortModelToSortingState,
   useHeadlessColumns,
 } from ":/components/DataGrid/utils";
 import emptyImageUrl from ":/components/DataGrid/empty.svg";
+import { Checkbox } from ":/components/Forms/Checkbox";
 
 export interface Row extends Record<string, any> {
   id: string;
@@ -208,7 +210,7 @@ export const DataGrid = <T extends Row>({
                               colSpan={header.colSpan}
                               className={classNames({
                                 "c__datagrid__header--select":
-                                  header.id === "select",
+                                  header.id === HEADER_ID_SELECT,
                               })}
                               style={style}
                             >
@@ -230,9 +232,22 @@ export const DataGrid = <T extends Row>({
                                       }
                                     : {})}
                                 >
-                                  {flexRender(
-                                    header.column.columnDef.header,
-                                    header.getContext(),
+                                  {/* We cant use flexRender for select header because it triggers a re-render each time */}
+                                  {/* a row is selected or unselected, re-triggering the animation each time, which looks buggy. */}
+                                  {header.id === HEADER_ID_SELECT ? (
+                                    <Checkbox
+                                      checked={table.getIsAllRowsSelected()}
+                                      indeterminate={table.getIsSomeRowsSelected()}
+                                      onChange={table.getToggleAllRowsSelectedHandler()}
+                                      aria-label={t(
+                                        "components.datagrid.rows_selection_aria",
+                                      )}
+                                    />
+                                  ) : (
+                                    flexRender(
+                                      header.column.columnDef.header,
+                                      header.getContext(),
+                                    )
                                   )}
                                   {header.column.getIsSorted() === "asc" && (
                                     <span className="material-icons">

diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx
@@ -11,6 +11,8 @@ import { PaginationProps } from ":/components/Pagination";
 import { BaseProps, Column, Row, SortModel } from ":/components/DataGrid/index";
 import { useCunningham } from ":/components/Provider";
 
+export const HEADER_ID_SELECT = "cunningham-select";
+
 /**
  * Converts Cunningham's columns to the underlying tanstack table.
  */
@@ -47,15 +49,8 @@ export const useHeadlessColumns = <T extends Row>({
   if (enableRowSelection) {
     headlessColumns = [
       columnHelper.display({
-        id: "select",
-        header: ({ table }) => (
-          <Checkbox
-            checked={table.getIsAllRowsSelected()}
-            indeterminate={table.getIsSomeRowsSelected()}
-            onChange={table.getToggleAllRowsSelectedHandler()}
-            aria-label={t("components.datagrid.rows_selection_aria")}
-          />
-        ),
+        id: HEADER_ID_SELECT,
+        header: () => null,
         cell: ({ row }) => (
           <Checkbox
             checked={row.getIsSelected()}