✨(react) add enableSorting support on DataGrid

Previously it was only available at column level. This way we will
be able to disable sorting on all columns at once.

Closes #298

.changeset/three-tables-leave.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+add enableSorting support on DataGrid

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

@@ -9,8 +9,8 @@ export const DataList = <T extends Row>({ rows, ...props }: BaseProps<T>) => {
       rows={rows}
       columns={props.columns.map((column) => ({
         ...column,
-        enableSorting: false,
       }))}
+      enableSorting={false}
     />
   );
 };

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

@@ -678,4 +678,66 @@ describe("<SimpleDataGrid/>", () => {
       name: "Loading data",
     });
   });
+
+  it("should render a grid with non-sortable columns by using enableSorting=false at DataGrid level", async () => {
+    const rows = 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(),
+      }))
+      .sort((a, b) => a.firstName.localeCompare(b.firstName));
+
+    const Wrapper = ({ enableSorting }: { enableSorting: boolean }) => {
+      return (
+        <CunninghamProvider>
+          <SimpleDataGrid
+            columns={[
+              {
+                field: "firstName",
+                headerName: "First name",
+              },
+              {
+                field: "lastName",
+                headerName: "Last name",
+              },
+              {
+                field: "email",
+                headerName: "Email",
+              },
+              {
+                field: "address",
+                headerName: "Address",
+              },
+            ]}
+            rows={rows}
+            defaultPaginationParams={{
+              pageSize: 10,
+            }}
+            enableSorting={enableSorting}
+          />
+        </CunninghamProvider>
+      );
+    };
+
+    const { rerender } = render(<Wrapper enableSorting={true} />);
+
+    const table = screen.getByRole("table");
+    const ths = getAllByRole(table, "columnheader");
+    expect(ths.length).toBe(4);
+
+    ths.forEach((th) => {
+      // headers are turned into buttons exclusively when they are sortable
+      expect(within(th).queryByRole("button")).toBeInTheDocument();
+    });
+
+    rerender(<Wrapper enableSorting={false} />);
+
+    ths.forEach((th) => {
+      // headers are turned into buttons exclusively when they are sortable
+      expect(within(th).queryByRole("button")).not.toBeInTheDocument();
+    });
+  });
 });

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

@@ -62,6 +62,7 @@ export interface BaseProps<T extends Row = Row> {
   emptyPlaceholderLabel?: string;
   emptyCta?: ReactNode;
   hideEmptyPlaceholderImage?: boolean;
+  enableSorting?: boolean;
 }
 
 export interface DataGridProps<T extends Row = Row> extends BaseProps<T> {
@@ -88,6 +89,7 @@ export const DataGrid = <T extends Row>({
   emptyCta,
   hideEmptyPlaceholderImage,
   displayHeader = true,
+  enableSorting = true,
 }: DataGridProps<T>) => {
   const { t } = useCunningham();
   const headlessColumns = useHeadlessColumns({ columns, enableRowSelection });
@@ -124,6 +126,7 @@ export const DataGrid = <T extends Row>({
       pagination: paginationState,
     },
     // Sorting
+    enableSorting,
     getSortedRowModel: getSortedRowModel(),
     manualSorting: true,
     onSortingChange: (newHeadlessSorting) => {