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

Enregistrement.de.l.ecran.2024-03-09.a.19.52.44.mov

[NathanVss]

Hi @lebaudantoine, it seems to be a duplicate of #100, I will start to work on this today as it seems that the problem affect multiple people.