If you're using Material-UI's DataGrid and want to customize the icon for the no-sort state, you'll need to do some manual work.
Attempting to use renderHeader within ColDef to add custom icons when SortModel changes didn't produce satisfactory results.
To recreate the default sort icon, it's essential to understand which components are rendered in the column header during sorting. By examining the source code of DataGrid, you can discover the following:
In GridColumnHeaderItem: If a custom renderHeader is not provided, it defaults to rendering GridColumnHeaderTitle. Use this component for rendering your own header.
In GridColumnHeaderSortIcon: This component embeds the sort icon within an IconButton of small size that is further wrapped inside a container. When creating your custom header icon, ensure to mimic this structure.
Combining these insights, here's an example implementation:
import { GridColumnHeaderTitle } from "@material-ui/x-grid";
{
field: "firstName",
headerName: "First name",
width: 130,
renderHeader: (params) => {
const { field, api, colDef } = params;
const sort = api.state.sorting.sortModel.filter(
(s) => s.field === field
)?.[0]?.sort;
const isSorting = Boolean(sort);
return (
<>
<GridColumnHeaderTitle
label={colDef.headerName || colDef.field}
description={colDef.description}
columnWidth={colDef.width}
/>
{!isSorting && (
<div className="MuiDataGrid-iconButtonContainer">
<IconButton size="small">
<ClearIcon className="MuiDataGrid-sortIcon" />
</IconButton>
</div>
)}
</>
);
}
},
Live Demo
https://codesandbox.io/s/66899204is-there-a-way-to-add-an-icon-when-sort-direction-is-null-on-material-uis-datag-zd9f9?file=/demo.tsx:1603-1607