Column CustomHeadRender reuse the sortToggle function

Column CustomHeadRender rehuse the sort function

Right now I want to create a custom head and use the sort function provided by the table.

Current Behavior

right now is not possible,

Proposal

I noticed the sort function is passed on the customHeadRender function so I made a few changes on the MUIDataTableHead component

line 55

column.customHeadRender({ index, ...column }, (columnIndex) => this.handleToggleColumn(columnIndex))

This give us the oportunity of continue using the sortToggle using the current index or other column index. 😃 I changed the name to columnIndex because the name index is shared inside of the map function on columns array.

    const columns = ["Name", "Title", "Location", "Age", {
        name: "Salary", 
        sortDirection: 'asc',
        options: {
          customHeadRender: ({index, ...column}, sortColumn) => {
            return (
              <TableCell onClick={() => sortColumn(index)} key={index}>
                {column.name}
              </TableCell>
            );
          }
        }
    }];

I can create the PR to include this small functionality.

[dandrei]

A quick heads up for this thread: a recent update in mui-datatables changed the default value of an unsorted sortDirection to "none" (as opposed to null).

Anyone who used the above example to build their own custom TH renderer, if upgrading to versions higher than 2.10.3 (when I noticed it, but may be in an earlier build as well) should update the code accordingly:

<TableSortLabel active={column.sortDirection !== "none"} ... />

[pcrane-zag]

I would find this useful as well; for a tooltip I can use hint but I’d like to just override the basic Sort tooltip and skip the icon without re-implementing the rest of the header.