-
-
Notifications
You must be signed in to change notification settings - Fork 5.4k
Add empty property to ListBase and InfiniteListBase #10940
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.
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
Conversation
1f237fa to
60b0fd2
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR adds an empty prop to ListBase and InfiniteListBase components, allowing developers to display a custom component when the list has no data and no active filters. This provides a better user experience by enabling custom empty states, such as inviting users to create their first record.
Key changes:
- Added
emptyprop toListBaseandInfiniteListBasecomponents and their TypeScript interfaces - Implemented logic to show the empty component when specific conditions are met (no errors, not loading, no data, no filters)
- Excluded the
emptyprop fromListandInfiniteListTypeScript interfaces since they delegate toListView - Added documentation for the new
emptyprop with usage examples
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ra-core/src/controller/list/ListBase.tsx | Added empty prop to ListBase component with conditional rendering logic |
| packages/ra-core/src/controller/list/InfiniteListBase.tsx | Added empty prop to InfiniteListBase component with conditional rendering logic |
| packages/ra-ui-materialui/src/list/List.tsx | Excluded empty prop from List interface to avoid conflicts with ListView |
| packages/ra-ui-materialui/src/list/InfiniteList.tsx | Excluded empty prop from InfiniteList interface to avoid conflicts with ListView |
| packages/ra-core/src/controller/list/ListBase.stories.tsx | Added Empty story demonstrating the new empty prop functionality |
| packages/ra-core/src/controller/list/InfiniteListBase.stories.tsx | Added Empty story demonstrating the new empty prop functionality |
| packages/ra-core/src/controller/list/ListBase.spec.tsx | Added test for custom empty component rendering |
| packages/ra-core/src/controller/list/InfiniteListBase.spec.tsx | Added test for custom empty component rendering |
| docs_headless/src/content/docs/ListBase.md | Added documentation for the empty prop with usage examples |
| docs/ListBase.md | Added reference link to the empty prop documentation |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ); | ||
| ``` | ||
| ## `empty` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's a subtle difference between <ListBase empty> and <WithListContext empty> that could be worth mentioning IMO, for instance as a tip: <ListBase empty> renders only when there are no filters, whereas <WithListContext empty> renders as soon as the list is empty.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Don't know if that's needed
Problem
There's no empty property to
ListBaseandInfiniteListBaseto show something when the list is empty. We currently need to useWithListContextto do so.Solution
Add
emptyprop toListBaseandInfiniteListBase.TODO
How To Test
Additional Checks
masterfor a bugfix or a documentation fix, ornextfor a feature