🐛(react) fix datagrid column unique key

If we had more than 1 columns with custom cells, we would get a warning
about duplicate keys, because every columns got the key `actions`.
We add the column index to the key to make it unique.

.changeset/selfish-phones-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+fix datagrid column unique key

packages/react/src/components/DataGrid/index.spec.tsx

@@ -235,6 +235,17 @@ describe("<DataGrid/>", () => {
                 highlight: true,
               },
               {
+                id: "firstName2",
+                field: "firstName",
+                headerName: "First name",
+              },
+              {
+                id: "lastName",
+                headerName: "Last Name",
+                renderCell: ({ row: { lastName } }) => lastName,
+              },
+              {
+                id: "buttonValidator",
                 renderCell: () => (
                   <Button
                     color="tertiary"
@@ -250,17 +261,23 @@ describe("<DataGrid/>", () => {
       );
     };
 
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+
     render(<Component />);
 
     database.forEach((row) => {
       const element = screen.getByTestId(row.id);
       const tds = getAllByRole(element, "cell");
-      expect(tds.length).toBe(2);
+      expect(tds.length).toBe(4);
       expect(tds[0].textContent).toEqual(row.firstName);
-      getByRole(tds[1], "button", {
+      expect(tds[1].textContent).toEqual(row.firstName);
+      expect(tds[2].textContent).toEqual(row.lastName);
+      getByRole(tds[3], "button", {
         name: "delete",
       });
     });
+
+    expect(error).not.toHaveBeenCalled();
   });
 
   it("should render highlighted column", async () => {

packages/react/src/components/DataGrid/index.tsx

@@ -23,13 +23,25 @@ export interface Row extends Record<string, any> {
   id: string;
 }
 
-export interface Column<T extends Row = Row> {
-  field?: string;
+export interface ColumnField {
+  id?: string;
+  field: string;
+  renderCell?: never;
+}
+
+export interface ColumnCustomCell<T extends Row = Row> {
+  id: string;
+  renderCell: (params: { row: T }) => React.ReactNode;
+}
+
+export type Column<T extends Row = Row> = (
+  | ColumnCustomCell<T>
+  | ColumnField
+) & {
   headerName?: string;
   highlight?: boolean;
-  renderCell?: (params: { row: T }) => React.ReactNode;
   enableSorting?: boolean;
-}
+};
 
 export type SortModel = { field: string; sort: "asc" | "desc" | null }[];
 

packages/react/src/components/DataGrid/utils.tsx

@@ -24,19 +24,20 @@ export const useHeadlessColumns = <T extends Row>({
   const columnHelper = createColumnHelper<T>();
   let headlessColumns = columns.map((column) => {
     const opts = {
-      id: column.field ?? "actions",
+      id: column.renderCell ? column.id : column.id ?? column.field,
       enableSorting: column.enableSorting,
       header: column.headerName,
     };
-    if (column.field) {
+    if (!column.renderCell) {
       // The any cast is needed because the type of the accessor is hard-defined on react-table.
       // On our side we only use string as type for simplicity purpose.
       return columnHelper.accessor(column.field as any, opts);
     }
+
     return columnHelper.display({
       ...opts,
       cell: (info) => {
-        return column.renderCell!({ row: info.row.original });
+        return column.renderCell({ row: info.row.original });
       },
     });
   });