Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Doc] Fix <SaveButton> is documented in two different chapters #7742

Merged
merged 1 commit into from
May 23, 2022
Merged

[Doc] Fix <SaveButton> is documented in two different chapters #7742

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 0 additions & 28 deletions docs/Buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,33 +260,6 @@ This button is an internal component used by react-admin in [the Filter button/f

To override the style of all instances of `<FilterButton>` using the [MUI style overrides](https://mui.com/customization/globals/#css), use the `RaFilterButton` key.

### `<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.

![Sort Button](./img/sort-button.gif)

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

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

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

| Prop | Required | Type | Default | Description |
|----------|----------|----------------|-----------------------|-------------------------------------|
| `fields` | Required | `string[]` | - | List of fields to offer sort on |
| `icon` | Optional | `ReactElement` | `<ArrowDropDownIcon>` | iconElement, e.g. `<CommentIcon />` |
| `label` | Optional | `string` | 'ra.sort.sort_by' | label or translation message to use |

## Record Buttons

### `<DeleteButton>`
Expand Down Expand Up @@ -333,7 +306,6 @@ const MyEdit = () => (
{% endraw %}

### `<CloneButton>`
### `<SaveButton>`

## Miscellaneous

Expand Down
4 changes: 2 additions & 2 deletions docs/Reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ title: "Reference"
* [`<RichTextField>`](./RichTextField.md)
* [`<RichTextInput>`](./RichTextInput.md)
* [`<RowForm>`](https://marmelab.com/ra-enterprise/modules/ra-editable-datagrid#rowform)<img class="icon" src="./img/premium.svg" />
* `<SaveButton>`
* [`<SaveButton>`](./SaveButton.md)
* [`<SavedQueriesList>`](./SavedQueriesList.md)
* [`<Search>`](https://marmelab.com/ra-enterprise/modules/ra-search#the-search-component)<img class="icon" src="./img/premium.svg" />
* [`<SearchInput>`](./FilteringTutorial.md#searchinput)
Expand All @@ -125,7 +125,7 @@ title: "Reference"
* [`<SimpleList>`](./SimpleList.md)
* [`<SimpleShowLayout>`](./SimpleShowLayout.md)
* [`<SingleFieldList>`](./SingleFieldList.md)
* [`<SortButton>`](./Buttons.md#sortbutton)
* [`<SortButton>`](./SortButton.md)
* `<Tab>`
* [`<TabbedForm>`](./TabbedForm.md)
* [`<TabbedShowLayout>`](./TabbedShowLayout.md)
Expand Down
19 changes: 19 additions & 0 deletions docs/SortButton.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ const ListActions = () => (
);
```

## Props

| Prop | Required | Type | Default | Description |
|----------|----------|----------------|-----------------------|-------------------------------------|
| `fields` | Required | `string[]` | - | List of fields to offer sort on |
| `icon` | Optional | `ReactElement` | `<ArrowDropDownIcon>` | iconElement, e.g. `<CommentIcon />` |
| `label` | Optional | `string` | 'ra.sort.sort_by' | label or translation message to use |

## `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).
Expand All @@ -44,3 +52,14 @@ You can customize the icon rendered on the left of the button by passing an `ico
icon={<SortIcon />}
/>
```

## `label`

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

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