🐛(react) add warning when onSortModelChange is missing

We encountered the case were a user reported that the column were
making cursor pointer but clicking on it was doing nothing. It was
caused by the fact that onSortModelChange was not provided. So in
this case we trigger a warning only if enableSorting is true on one
column at least.

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

@@ -2,5 +2,15 @@ import React from "react";
 import { BaseProps, DataGrid, Row } from ":/components/DataGrid/index";
 
 export const DataList = <T extends Row>({ rows, ...props }: BaseProps<T>) => {
-  return <DataGrid {...props} displayHeader={false} rows={rows} />;
+  return (
+    <DataGrid
+      {...props}
+      displayHeader={false}
+      rows={rows}
+      columns={props.columns.map((column) => ({
+        ...column,
+        enableSorting: false,
+      }))}
+    />
+  );
 };

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

@@ -92,6 +92,14 @@ export const DataGrid = <T extends Row>({
   const { t } = useCunningham();
   const headlessColumns = useHeadlessColumns({ columns, enableRowSelection });
 
+  headlessColumns.forEach((column) => {
+    if (column.enableSorting && !onSortModelChange) {
+      console.warn(
+        "You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected.",
+      );
+    }
+  });
+
   /**
    * Features.
    */

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

@@ -28,7 +28,8 @@ export const useHeadlessColumns = <T extends Row>({
     const id = (column.id ?? column.field) as string;
     const opts = {
       id,
-      enableSorting: column.enableSorting,
+      enableSorting:
+        column.enableSorting === undefined ? true : column.enableSorting,
       header: column.headerName,
       cell: (info: CellContext<any, any>) => {
         if (column.renderCell) {