Crud API
API reference docs for the React Crud component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { Crud } from '@toolpad/core/Crud';
// or
import { Crud } from '@toolpad/core';Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| dataSource* | object | - | Server-side data source. |
| rootPath* | string | - | Root path to CRUD pages. |
| dataSourceCache | { cache: object, clear: func, get: func, set: func, ttl: number } | - | Cache for the data source. |
| defaultValues | object | {} | Default form values for a new item. |
| initialPageSize | number | 100 | Initial number of rows to show per page. |
| pageTitles | { create?: string, edit?: string, list?: string, show?: string } | - | The title of each CRUD page. |
| slotProps | { form?: { checkbox?: object, datePicker?: object, dateTimePicker?: object, select?: object, textField?: object }, list?: { dataGrid?: object, pageContainer?: object }, pageContainer?: object } | {} | The props used for each slot inside. |
| slots | { form?: { checkbox?: elementType, datePicker?: elementType, dateTimePicker?: elementType, select?: elementType, textField?: elementType }, list?: { dataGrid?: func, pageContainer?: elementType }, pageContainer?: elementType } | {} | The components used for each slot inside. See Slots API below for more details. |
The component cannot hold a ref.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.