From 1514e4f0b3ce6afc5f92a18692bcdb11c98f2e47 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 2 Aug 2024 15:32:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20make=20datagrid=20select?=
 =?UTF-8?q?=20column=20visible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Due to a previous commit f398e51db30b77aa36ee4960099b1f96436c7599 the selection
column was invisible, this way caused by having table-layout: fixed and
width: 0 on the select column at the same time.
---
 .changeset/fair-melons-exercise.md                 | 5 +++++
 packages/react/src/components/DataGrid/_index.scss | 6 ------
 packages/react/src/components/DataGrid/index.tsx   | 4 ++--
 packages/react/src/components/DataGrid/utils.tsx   | 1 +
 4 files changed, 8 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/fair-melons-exercise.md

diff --git a/.changeset/fair-melons-exercise.md b/.changeset/fair-melons-exercise.md
new file mode 100644
index 0000000..c68a28b
--- /dev/null
+++ b/.changeset/fair-melons-exercise.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+make datagrid select column visible
diff --git a/packages/react/src/components/DataGrid/_index.scss b/packages/react/src/components/DataGrid/_index.scss
index 5668e97..4426c2e 100644
--- a/packages/react/src/components/DataGrid/_index.scss
+++ b/packages/react/src/components/DataGrid/_index.scss
@@ -84,12 +84,6 @@
       tbody {
         background-color: var(--c--theme--colors--greyscale-000);
       }
-
-      .c__datagrid__row__cell--select, .c__datagrid__header--select {
-        width: 0;
-        padding-right: 0;
-      }
-
     }
   }
 
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index ddb2bac..01a17ad 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -199,8 +199,8 @@ export const DataGrid = <T extends Row>({
                       <tr key={headerGroup.id}>
                         {headerGroup.headers.map((header, i) => {
                           const style: CSSProperties = {};
-                          const column = columns[i];
-                          if (column && typeof column.size === "number") {
+                          const column = headlessColumns[i];
+                          if (column && typeof column.size !== "undefined") {
                             style.width = `${column.size}px`;
                           }
 
diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx
index c72009a..c48070b 100644
--- a/packages/react/src/components/DataGrid/utils.tsx
+++ b/packages/react/src/components/DataGrid/utils.tsx
@@ -50,6 +50,7 @@ export const useHeadlessColumns = <T extends Row>({
     headlessColumns = [
       columnHelper.display({
         id: HEADER_ID_SELECT,
+        size: 34,
         header: () => null,
         cell: ({ row }) => (
           <Checkbox