From f398e51db30b77aa36ee4960099b1f96436c7599 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Wed, 28 Feb 2024 16:57:42 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20width=20property=20to?=
 =?UTF-8?q?=20DataGrid=20columns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Without this feature we needed to override CSS directly in order to
make columns a specific width.

Closes #240
---
 .changeset/popular-wasps-bathe.md             |  5 ++
 .../react/src/components/DataGrid/_index.scss |  2 +
 .../src/components/DataGrid/index.spec.tsx    | 40 ++++++++++++++
 .../src/components/DataGrid/index.stories.tsx | 54 +++++++++++++++++++
 .../react/src/components/DataGrid/index.tsx   | 12 ++++-
 .../react/src/components/DataGrid/utils.tsx   |  1 +
 6 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/popular-wasps-bathe.md

diff --git a/.changeset/popular-wasps-bathe.md b/.changeset/popular-wasps-bathe.md
new file mode 100644
index 0000000..9b8ad65
--- /dev/null
+++ b/.changeset/popular-wasps-bathe.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+add width property to DataGrid columns
diff --git a/packages/react/src/components/DataGrid/_index.scss b/packages/react/src/components/DataGrid/_index.scss
index ab83e41..5668e97 100644
--- a/packages/react/src/components/DataGrid/_index.scss
+++ b/packages/react/src/components/DataGrid/_index.scss
@@ -23,6 +23,7 @@
       border-collapse: collapse;
       font-weight: var(--c--theme--font--weights--regular);
       width: 100%;
+      table-layout: fixed;
 
       th, td {
         text-align: left;
@@ -30,6 +31,7 @@
         white-space: nowrap;
         font-size: var(--c--theme--font--sizes--m);
         height: 3rem;
+        overflow: hidden;
       }
 
       th {
diff --git a/packages/react/src/components/DataGrid/index.spec.tsx b/packages/react/src/components/DataGrid/index.spec.tsx
index 467915e..83378fd 100644
--- a/packages/react/src/components/DataGrid/index.spec.tsx
+++ b/packages/react/src/components/DataGrid/index.spec.tsx
@@ -381,4 +381,44 @@ describe("<DataGrid/>", () => {
       expect(tds[0].textContent).toEqual(row.sub.name);
     });
   });
+
+  it("should render column with specific width", 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
+            columns={[
+              {
+                field: "firstName",
+                headerName: "First name",
+                size: 50,
+              },
+              {
+                field: "email",
+                headerName: "Email",
+              },
+            ]}
+            rows={database}
+          />
+        </CunninghamProvider>
+      );
+    };
+
+    render(<Component />);
+
+    const table = screen.getByRole("table");
+    const ths = getAllByRole(table, "columnheader");
+    expect(ths.length).toBe(2);
+    expect(ths[0].textContent).toEqual("First name");
+    expect(ths[1].textContent).toEqual("Email");
+
+    expect(ths[0].style.width).toEqual("50px");
+    expect(ths[1].style.width).toEqual("");
+  });
 });
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index c4a4bf2..a8a20ec 100644
--- a/packages/react/src/components/DataGrid/index.stories.tsx
+++ b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -335,3 +335,57 @@ export const DataListOnly = () => {
     />
   );
 };
+
+export const WithColumnWidth = () => {
+  const database = useMemo(
+    () =>
+      Array.from(Array(23)).map(() => ({
+        id: faker.string.uuid(),
+        firstName: faker.person.firstName(),
+        lastName: faker.person.lastName(),
+        email: faker.internet.email(),
+        address: faker.location.streetAddress(),
+      })),
+    [],
+  );
+  return (
+    <SimpleDataGrid
+      columns={[
+        {
+          field: "firstName",
+          headerName: "First name",
+          highlight: true,
+          size: 100,
+        },
+        {
+          field: "lastName",
+          headerName: "Last name",
+          size: 100,
+        },
+        {
+          field: "email",
+          headerName: "Email",
+          highlight: true,
+        },
+        {
+          field: "address",
+          headerName: "Address",
+          enableSorting: false,
+        },
+        {
+          headerName: "Actions",
+          id: "actions",
+          size: 50,
+          renderCell: () => (
+            <Button
+              color="tertiary-text"
+              size="small"
+              icon={<span className="material-icons">delete</span>}
+            />
+          ),
+        },
+      ]}
+      rows={database}
+    />
+  );
+};
diff --git a/packages/react/src/components/DataGrid/index.tsx b/packages/react/src/components/DataGrid/index.tsx
index acf4ed7..27873b5 100644
--- a/packages/react/src/components/DataGrid/index.tsx
+++ b/packages/react/src/components/DataGrid/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useMemo } from "react";
+import React, { CSSProperties, ReactNode, useMemo } from "react";
 import classNames from "classnames";
 import {
   flexRender,
@@ -48,6 +48,7 @@ export type Column<T extends Row = Row> = (
   headerName?: string;
   highlight?: boolean;
   enableSorting?: boolean;
+  size?: number;
 };
 
 export type SortModel = { field: string; sort: "asc" | "desc" | null }[];
@@ -192,7 +193,13 @@ export const DataGrid = <T extends Row>({
                   {displayHeader &&
                     table.getHeaderGroups().map((headerGroup) => (
                       <tr key={headerGroup.id}>
-                        {headerGroup.headers.map((header) => {
+                        {headerGroup.headers.map((header, i) => {
+                          const style: CSSProperties = {};
+                          const column = columns[i];
+                          if (column && typeof column.size === "number") {
+                            style.width = `${column.size}px`;
+                          }
+
                           return (
                             <th
                               key={header.id}
@@ -201,6 +208,7 @@ export const DataGrid = <T extends Row>({
                                 "c__datagrid__header--select":
                                   header.id === "select",
                               })}
+                              style={style}
                             >
                               {header.isPlaceholder ? null : (
                                 <div
diff --git a/packages/react/src/components/DataGrid/utils.tsx b/packages/react/src/components/DataGrid/utils.tsx
index aee8256..574b0b0 100644
--- a/packages/react/src/components/DataGrid/utils.tsx
+++ b/packages/react/src/components/DataGrid/utils.tsx
@@ -31,6 +31,7 @@ export const useHeadlessColumns = <T extends Row>({
       enableSorting:
         column.enableSorting === undefined ? true : column.enableSorting,
       header: column.headerName,
+      size: column.size,
       cell: (info: CellContext<any, any>) => {
         if (column.renderCell) {
           return column.renderCell({ row: info.row.original });