From b6c0565958e58408314c4f0483410e4694cd0524 Mon Sep 17 00:00:00 2001
From: jbpenrath <jb.penrath@gmail.com>
Date: Mon, 27 May 2024 12:17:20 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20allow=20to=20set=20column?=
 =?UTF-8?q?=20size=20for=20data=20grid=20without=20header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently, to set the width of column we define a width to the
corresponding header cell. But DataGrid components allows to not render
header rows so in this case, the size is not set. In order to fix that,
if header is not rendered, we set width of cell to the corresponding
column.
---
 .changeset/grumpy-cobras-roll.md              |  5 ++
 .../src/components/DataGrid/index.spec.tsx    | 50 ++++++++++++++++++-
 .../react/src/components/DataGrid/index.tsx   |  8 +++
 3 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/grumpy-cobras-roll.md

diff --git a/.changeset/grumpy-cobras-roll.md b/.changeset/grumpy-cobras-roll.md
new file mode 100644
index 0000000..ecf30f0
--- /dev/null
+++ b/.changeset/grumpy-cobras-roll.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+allow to set column size for data grid without header
diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx
index f310d99..130fbcc 100644
--- a/packages/react/src/components/DataGrid/index.spec.tsx
+++ b/packages/react/src/components/DataGrid/index.spec.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { faker } from "@faker-js/faker";
 import { act, render, screen, waitFor } from "@testing-library/react";
-import { getAllByRole, getByRole } from "@testing-library/dom";
+import { getAllByRole, getByRole, queryAllByRole } from "@testing-library/dom";
 import userEvent from "@testing-library/user-event";
 import { usePagination } from ":/components/Pagination";
 import { DataGrid, SortModel } from ":/components/DataGrid/index";
@@ -441,4 +441,52 @@ describe("<DataGrid/>", () => {
     expect(ths[0].style.width).toEqual("50px");
     expect(ths[1].style.width).toEqual("");
   });
+
+  it("should render column with specific width even without header", async () => {
+    const database = Array.from(Array(10)).map(() => ({
+      id: faker.string.uuid(),
+      name: faker.person.fullName(),
+      email: faker.internet.email(),
+    }));
+
+    const Component = () => {
+      return (
+        <CunninghamProvider>
+          <DataGrid
+            displayHeader={false}
+            columns={[
+              {
+                field: "name",
+                size: 50,
+              },
+              {
+                field: "email",
+                headerName: "Email",
+              },
+            ]}
+            rows={database}
+          />
+        </CunninghamProvider>
+      );
+    };
+
+    render(<Component />);
+
+    const table = screen.getByRole("table");
+    const ths = queryAllByRole(table, "columnheader");
+
+    // No header should be displayed.
+    expect(ths.length).toBe(0);
+
+    database.forEach((data) => {
+      // Each data should have a row.
+      const element = screen.getByTestId(data.id);
+      // Then cells containing "name" should have a width of 50px.
+      let td = getByRole(element, "cell", { name: data.name });
+      expect(td.style.width).toEqual("50px");
+
+      td = getByRole(element, "cell", { name: data.email });
+      expect(td.style.width).toEqual("");
+    });
+  });
 });
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index 65477f2..ddb2bac 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -282,6 +282,13 @@ export const DataGrid = <T extends Row>({
                         } else {
                           highlight = !!columns[i].highlight;
                         }
+                        const style: CSSProperties = {};
+                        if (displayHeader === false) {
+                          const column = columns[i];
+                          if (column && typeof column.size === "number") {
+                            style.width = `${column.size}px`;
+                          }
+                        }
                         return (
                           <td
                             key={cell.id}
@@ -292,6 +299,7 @@ export const DataGrid = <T extends Row>({
                               "c__datagrid__row__cell--select":
                                 cell.column.id === "select",
                             })}
+                            style={style}
                           >
                             {flexRender(
                               cell.column.columnDef.cell,