🐛(react) make datagrid select column visible

Due to a previous commit f398e51db3 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

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+make datagrid select column visible

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;
-      }
-
     }
   }
 

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`;
                           }
 

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