DOCSEARCHbyAlgolia
Submit Docs

React Admin Enterprise Edition

website·Indexed 36 days ago

https://react-admin-ee.marmelab.com/documentation/ra-ai

Documentation for React Admin's enterprise packages, including ra-enterprise for advanced <Admin> and <Layout> components, ra-search for global search functionality via the <Search> component and addSearchMethod helper, and ra-tree for hierarchical data management using <TreeWithDetails>.

Tokens
933.1K
Snippets
4K
Records
4.6K
Agent score
47%

What's inside React Admin Enterprise

  1. Overview of ra-preferences for react-admin

    The ra-preferences module allows developers to store and persist user UI preferences in the browser's local storage. These preferences are device-dependent and are automatically synchronized across multiple open tabs of the same application. Note that preferences are not saved when the user is in incognito mode. The API is synchronous because preferences are maintained in memory and mirrored to localStorage.

  2. Overview of ra-calendar for react-admin

    ra-calendar is a module that integrates FullCalendar into react-admin (requires react-admin ≥ 3.9.3). It allows developers to display and manipulate events, including drag-and-resize appointments, month/week/day/list views, recurring events, and background events. It links directly to the edit and create views of the current resource.

  3. Audit Log Components Overview

    The ra-audit-log module provides three primary components and one hook for displaying and fetching activity logs:

    • <Timeline>: Displays a list of all recent changes in the admin (ideal for dashboards).
    • <RecordTimeline>: Displays recent changes for a specific record (ideal for <Show> or <Edit> views).
    • <EventList>: A full List component with filters and pagination for navigating admin history.
    • useRecordEvents: A hook to fetch events related to a specific record.

  4. Understand the Deleted Record data structure

    A deleted record is represented as an object containing metadata about the deletion and the original record data.
    {
    "id": 123,
    "resource": "products",
    "deleted_at": "2025-06-06T15:32:22Z",
    "deleted_by": "johndoe",
    "data": {
        "id": 456,
        "title": "Lorem ipsum",
        "teaser": "Lorem ipsum dolor sit amet",
        "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
    }
}

  5. Secure React-admin apps with ra-rbac

    ra-rbac provides an implementation for authProvider.canAccess() to manage roles and fine-grained permissions on the client side (showing/hiding UI elements). Because this runs on the client, it is critical to implement corresponding checks on the server-side to properly secure the application and the exposed data.

  6. Implement real-time collaboration features

    The @react-admin/ra-core-ee package provides tools for collaborative applications, supporting:

    • Publishing and subscribing to real-time events.
    • Automatic view updates when other users push changes.
    • User notifications for events.
    • Concurrent editing protection using locks to prevent data loss.

  7. Use AccordionForm to organize form fields into collapsible panels

    The <AccordionForm> component from @react-admin/ra-form-layout allows you to group form inputs into collapsible panels. Each panel is defined using <AccordionForm.Panel>. You can control whether a panel is open by default using the defaultExpanded prop.
    import { Edit, TextInput } from 'react-admin';
import { AccordionForm } from '@react-admin/ra-form-layout';

const CustomerEdit = () => (
    <Edit>
        <AccordionForm>
            <AccordionForm.Panel id="identity" defaultExpanded>
                <TextInput source="first_name" />
                <TextInput source="last_name" />
            </AccordionForm.Panel>
            <AccordionForm.Panel id="address">
                <TextInput source="street" />
            </AccordionForm.Panel>
        </AccordionForm>
    </Edit>
);

  8. Understand Application Location vs Browser Location

    ra-navigation uses the concept of AppLocation to decouple the navigation UI from the actual URL. This allows developers to group resources logically (e.g., "Catalog / Products") or nest resources regardless of the flat URL structure.

    React-admin provides default app locations for standard CRUD pages, but custom pages must have their location defined using the useDefineAppLocation hook.

  9. Track changes with Audit Log and History modules

    The Audit Log module provides traceability of actions and user activity monitoring. The History module adds version control to records, allowing users to view detailed change logs, compare versions using a 'diff' feature, and perform rollbacks to prevent data loss.

  10. Audit Log Components and Hooks Overview

    The ra-audit-log module provides the following tools for displaying and fetching activity logs:

    • <Timeline>: Displays a list of all recent changes in the admin (ideal for dashboards).
    • <RecordTimeline>: Displays recent changes for a specific record (ideal for <Show> or <Edit> views).
    • <EventList>: A full List component with filters and pagination for navigating admin history.
    • useRecordEvents: A hook to fetch events related to a specific record.

  11. Enable real-time collaboration features

    The @react-admin/ra-core-ee package provides tools for collaborative applications, including: publishing/subscribing to real-time events, automatic view updates when other users push changes, user notifications for events, and concurrency locks to prevent data loss when multiple editors work on the same resource.

  12. Understand Application Location (AppLocation) concepts

    ra-navigation uses the concept of application location (AppLocation), which is distinct from the browser URL. This allows the navigation UI to represent logical groupings (e.g., "Catalog / Products") or nested resources regardless of the actual URL structure.

    For standard CRUD pages, ra-navigation defines locations by default:

    • List: [resource]
    • Create: [resource].create
    • Edit: [resource].edit (includes current record)
    • Show: [resource].show (includes current record)