Allow sorting on custom columns in the data grid

[lebaudantoine]

When defining a custom column in the data grid, I cannot enable sorting on this custom column. This is my data grid:

<DataGrid
        columns={[
          {
            headerName: t('Names'),
            field: 'user.name',
          },
          {
            field: 'user.email',
            headerName: t('Emails'),
          },
          {
            id: 'role',
            headerName: t('Roles'),
            renderCell({ row }) {
              return dictRole[row.role];
            },
          },
        ]}
        rows={accesses || []}
        isLoading={isLoading}
        pagination={pagination}
        onSortModelChange={setSortModel}
        sortModel={sortModel}
      />

I want to allow server side sorting on the column role. However, I cannot find a way to activate it / show the sorting header. Did I miss something? I tried to pass enableSorting: true to my custom column definition, but it had no effect.

I'll dig source code next week, to propose a fix, but I might misuse the DataGrid component.

[lebaudantoine]

Also, I noticed, before passing the sortModel and onSortModelChange props, the sorting header was not showing, however the cursor was still set to pointer. Please find a screen recording

https://github.com/openfun/cunningham/assets/45729124/ae2487e9-a4c9-4534-a662-3cc55a30dcc5

[NathanVss]

Hi @lebaudantoine, it seems to be a duplicate of https://github.com/openfun/cunningham/issues/100, I will start to work on this today as it seems that the problem affect multiple people.