Skip to content

[Chore] Sync tips from tips repository #10815

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

Merged
djhi merged 2 commits into from
Jul 1, 2025
Merged

[Chore] Sync tips from tips repository #10815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9358f22
Chore(tips): Sync tips from tips repository
jonathanarnault Jul 1, 2025
f705bfa
Fix links to react-admin-ee.marmelab.com in features
jonathanarnault Jul 1, 2025
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
12 changes: 9 additions & 3 deletions docs/assets/features.md_ignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ With your admin getting bigger, or if you have to manage many resources and/or s

<video controls autoplay playsinline muted loop width="100%">
<source
src="https://react-admin-ee.marmelab.com/assets/breadcumb-nested-resource.mp4"
src="https://react-admin-ee.marmelab.com/assets/ra-navigation/latest/breadcumb-nested-resource.webm"
type="video/webm"
/>
Your browser does not support the video tag.
Expand Down Expand Up @@ -177,6 +177,7 @@ Edition forms in react-admin have a built-in "Undo" feature, letting end users c
`<Edit>` is designed to be a page component, passed to the edit prop of the `<Resource>` component. But you may want to let users edit a record in a dialiog without leaving the context of the list page. If so, you can use the `<EditDialog>` component. #form https://marmelab.com/react-admin/EditDialog.html

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/edit-dialog.webm" type="video/webm">
<source src="https://react-admin-ee.marmelab.com/assets/edit-dialog.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Expand All @@ -186,6 +187,7 @@ Edition forms in react-admin have a built-in "Undo" feature, letting end users c
If you want to let users edit a record from another page, use the `<EditInDialogButton>` component. #form https://marmelab.com/react-admin/EditInDialogButton.html

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-form-layout/latest/InDialogButtons.webm" type="video/webm">
<source src="https://react-admin-ee.marmelab.com/assets/ra-form-layout/latest/InDialogButtons.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Expand Down Expand Up @@ -215,6 +217,7 @@ Use `<ReferenceOneInput>` in an `<Edit>` or `<Create>` view to edit a record lin
The `<Search>` component renders a global search input. It’s designed to be always accessible in the top `<AppBar>`. #ui https://marmelab.com/react-admin/Search.html

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-search-demo.webm" type="video/webm">
<source src="https://react-admin-ee.marmelab.com/assets/ra-search-demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Expand All @@ -231,9 +234,10 @@ The `<Configurable>` component makes another component configurable by the end u

---

In the case you want keep track of user actions, and get an overview of the activity of your admin, you can display event lists and audit logs with `<TimeLine>`, `<RecordTimeline>` and with `<EventList>` components. #activitylog #timeline #eventlog https://marmelab.com/ra-enterprise/modules/ra-audit-log
In the case you want keep track of user actions, and get an overview of the activity of your admin, you can display event lists and audit logs with `<TimeLine>`, `<RecordTimeline>` and with `<EventList>` components. #activitylog #timeline #eventlog https://react-admin-ee.marmelab.com/ra-audit-log

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-audit-log/latest/ra-audit-log-event-list.webm" type="video/webm">
<source src="https://react-admin-ee.marmelab.com/assets/ra-audit-log/latest/ra-audit-log-event-list.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Expand Down Expand Up @@ -261,6 +265,7 @@ With your admin getting bigger, the default sidebar menu might become too crowde
If your app needs to display **events**, **appointments**, **time intervals**, or any other kind of time-based data, you can use the `<Calendar>` component. #ui https://marmelab.com/react-admin/Calendar.html

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-calendar.webm" type="video/webm">
<source src="https://react-admin-ee.marmelab.com/assets/ra-calendar.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Expand All @@ -276,9 +281,10 @@ If your app needs to display **events**, **appointments**, **time intervals**, o

---

The `<SearchWithResult>` component renders a search input and the search results directly below the input. It's ideal for dashboards or menu panels. #ui #search https://marmelab.com/ra-enterprise/modules/ra-search#searchwithresult
The `<SearchWithResult>` component renders a search input and the search results directly below the input. It's ideal for dashboards or menu panels. #ui #search https://react-admin-ee.marmelab.com/ra-search#searchwithresult

<video controls autoplay playsinline muted loop>
<source src="https://react-admin-ee.marmelab.com/assets/ra-search-with-result-overview.webm" type="video/webm">
<source src="https://react-admin-ee.marmelab.com/assets/ra-search-with-result-overview.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Expand Down
63 changes: 57 additions & 6 deletions docs/assets/tips.md_ignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1226,6 +1226,34 @@ export const PostList = () => (

---

The `canAccess` helper function allows you to check if the current user has the permissions to execute an action. You can use it to disable desired links on a menu for instance. #Role-Based-Access-Control #RBAC https://react-admin-ee.marmelab.com/ra-rbac#canaccess

```tsx
import { usePermissions, Menu } from "react-admin";
import { canAccess } from "@react-admin/ra-rbac";

const MyMenu = () => {
const { permissions } = usePermissions();
return (
<Menu>
<Menu.DashboardItem />
<Menu.Item
to="/categories"
primaryText="Categories"
disabled={
!canAccess({
permissions,
resource: "categories",
})
}
/>
</Menu>
);
};
```

---

If you render more than one `<DatagridConfigurable>` on the same page, you must pass a unique preferenceKey prop to each one. Do not forget to link their `<SelectColumnsButton>` components by giving them the same preferenceKey. #datagrid https://marmelab.com/react-admin/Datagrid.html#configurable

{% raw %}
Expand Down Expand Up @@ -2000,18 +2028,41 @@ You can add custom CSS classes to any column or cell in `DatagridAG` or `Datagri
{% raw %}
```tsx
const columnDefs = [
{ field: 'static', cellClass: 'my-class' },
{ field: 'staticArray', cellClass: ['my-class1','my-class2'] },
{ field: 'function', cellClass: params => params.value === 'something' ? 'my-class-1' : 'my-class-2' },
{ field: 'functionArray', cellClass: params => ['my-class-1','my-class-2'] },
// return same class for each row
{
field: 'static',
cellClass: 'my-class'
},
// return same array of classes for each row
{
field: 'staticArray',
cellClass: ['my-class1','my-class2'],
},
// return class based on function
{
field: 'function',
cellClass: params => {
return params.value === 'something' ? 'my-class-1' : 'my-class-2';
},
},
// return array of classes based on function
{
field: 'functionArray',
cellClass: params => ['my-class-1','my-class-2'],
},
// return array of classes based on many functions with `cellClassRules`
{
field: 'functionRules',
cellClassRules: {
// apply green to 2008
'rag-green-outer': params => params.value === 2008,
// apply blue to 2004
'rag-blue-outer': params => params.value === 2004,
// apply red to 2000
'rag-red-outer': params => params.value === 2000,
}
},
}
// return array of classes based on many functions with `cellClassRules`
{
field: 'simplifiedFunctionRules',
cellClassRules: {
Expand All @@ -2024,4 +2075,4 @@ const columnDefs = [
```
{% endraw %}

https://www.ag-grid.com/react-data-grid/cell-styles
https://www.ag-grid.com/react-data-grid/cell-styles
Loading