Skip to content

Add a *SELECT ALL* button in the <BulkActionsToolbar>#10367

Merged
fzaninotto merged 147 commits intonextfrom
feat/next/select_all
Jan 3, 2025
Merged

Add a *SELECT ALL* button in the <BulkActionsToolbar>#10367
fzaninotto merged 147 commits intonextfrom
feat/next/select_all

Conversation

@erwanMarmelab
Copy link
Contributor

@erwanMarmelab erwanMarmelab commented Nov 20, 2024

Problem

The Datagrid already allows to select all the records of a given page. But sometimes users want to select all records across all pages, e.g. to delete all the records of a resource. Also, when not in a datagrid (e.g. contact list in CRM demo), there is no way to select all records.

Solution

In the bulk actions toolbar, add a “select all” link close to the number of selected items.

Already started in #9043, but needs a different approach

To do - V1

  • Add a "Select all" button
  • make it customizable (selectAllLimit)
  • document is the jsDoc
  • document
  • make it for the:
    • List
    • ReferenceManyField
    • ReferenceArrayField
    • InfiniteList
  • add stories:
  • change ra-core tests to transfor rendered component to stories

Informations

The limit prop is not usefull for the useList hook because this hook received all the data directly so we don't need to call it.

So, the <RerefenceArrayField> doesn't need the limit prop.

The "SELECT ALL" button will alway display when the API use a partial pagination.

To do - V2

  • Change the structure to only modify the new SelectAllButton for meta and limit
  • Document the new button
  • Test the new button

Additional Checks

  • The PR targets master for a bugfix, or next for a feature
  • The PR includes unit tests (if not possible, describe why)
  • The PR includes one or several stories (if not possible, describe why)
  • The documentation is up to date

name: getResourceLabel(resource, 2),
});

const { data: allData } = useGetList<RecordType>(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'd better use the data provider directly in the callback, or using react-query's useMutation. useGetList is really designed for queries triggered on mount.

@fzaninotto fzaninotto merged commit 1d6525a into next Jan 3, 2025
@fzaninotto fzaninotto deleted the feat/next/select_all branch January 3, 2025 12:40
@fzaninotto fzaninotto added this to the 5.5.0 milestone Jan 3, 2025
@djhi djhi changed the title Add a “SELECT ALL” button in the <BulkActionsToolbar> Add a *SELECT ALL* button in the <BulkActionsToolbar> Jan 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

RFR Ready For Review

Development

Successfully merging this pull request may close these issues.

3 participants