<SortButton>

Some List views don’t have a natural UI for sorting - e.g. the <SimpleList>, or a list of images, don’t have column headers like the <Datagrid>. For these cases, react-admin offers the <SortButton>, which displays a dropdown list of fields that the user can choose to sort on.

Usage

<SortButton> requires a fields prop, containing the list of field names it should allow to sort on. For instance, here is how to offer a button to sort on the reference, sales, and stock fields:

import * as React from 'react';
import { TopToolbar, SortButton, CreateButton, ExportButton } from 'react-admin';

const ListActions = () => (
    <TopToolbar>
        <SortButton fields={['reference', 'sales', 'stock']} />
        <CreateButton />
        <ExportButton />
    </TopToolbar>
);

Props

className

The className prop is passed down to the button container. Use it to customize the button style.

<SortButton 
    fields={['reference', 'sales', 'stock']}
    className="my-sort-button"
/>

fields

The fields prop expects an array of strings. Each string is the name of a field to sort on. The <SortButton> renders the corresponding menu item depending on the current sort order (ASC by default, or DESC if the current sort field is active).

<SortButton fields={['reference', 'sales', 'stock']} />

icon

You can customize the icon rendered on the left of the button by passing an icon prop.

<SortButton 
    fields={['reference', 'sales', 'stock']}
    icon={<SortIcon />}
/>

label

You can customize the label of the button by passing a label prop.

<SortButton 
    fields={['reference', 'sales', 'stock']}
    label="Sort by"
/>

sx: CSS API

You can override the style of <SortButton> and its inner components thanks to the sx property (see the sx documentation for details).

<SortButton 
    fields={['reference', 'sales', 'stock']}
    sx={{
        mx: 1,
        '& .MuiButton-root': {
            color: 'text.secondary',
        },
    }}
/>

This property accepts the following subclasses: