如何强制排序箭头始终显示在 react-admin Datagrid 中？

Question

It doesn't feel like best practice, but my users want to always see the arrows next to every column that's sortable in a list view. I'm building a web app in react, using the react-admin Datagrid object:

export const PermitList: FunctionComponent<FullProps> = (props) => {
    const { hasShow, ...rest } = props;
    return (
        <Datagrid {...rest}>
            <TextInput source="permitID" />
            <TextInput source="dept" />
            <TextInput source="workOrder" />
            <TextInput source="status" getColor={getColorFromStatus} />
            <ListButtons hasShow={hasShow!} label="Edit Permit" canDelete={false} />
        </Datagrid>
    );
};

Fields permitID, dept, workOrder, and status are all sortable. The sort arrow appears by default when the grid header is clicked and the field sorts, but my users want to see all sort arrows all the time. I haven't been able to find any documentation on this. Is there a way to display it using Datagrid, or do I need to use a different grid object?

Answer 1

You can manually add your own arrow elements using headerClassName for each sortable field:

const useListStyles = makeStyles(theme => ({
  myHeader: {
    "&&:before": { 
      content: '" ⇅ "',
      color: 'red',
    },
  },
}))

const CardList = (props) => {
  const classes = useListStyles()

  return (
    <List {...props} >
      <Datagrid>
        <TextField source="id" />
        <TextField source="name" headerClassName={classes.myHeader} />
      </Datagrid>
    </List>
  )
}