0
# Detail Views
1

2
Page-level components for creating, editing, and displaying individual records with Material UI styling and full integration with react-admin's data layer.
3

4
## Capabilities
5

6
### Create Component
7

8
Page component for creating new records with form submission and validation.
9

10
```typescript { .api }
11
/**
12
 * Page component for the Create view with form rendering and actions
13
 * @param props - Create page configuration props
14
 * @returns Complete create page with title, actions, and form container
15
 */
16
function Create<RecordType>(props: CreateProps<RecordType>): ReactElement;
17

18
interface CreateProps<RecordType> {
19
  /** Custom actions component for the create page */
20
  actions?: ComponentType<CreateActionsProps>;
21
  /** Aside component displayed next to the main content */
22
  aside?: ComponentType<CreateAsideProps>;
23
  /** Custom component to replace the default CreateView */
24
  component?: ComponentType<CreateViewProps>;
25
  /** Whether the record has an edit view */
26
  hasEdit?: boolean;
27
  /** Whether the record has a show view */
28
  hasShow?: boolean;
29
  /** Mutation options for the create operation */
30
  mutationOptions?: UseMutationOptions;
31
  /** Record data (for cloning scenarios) */
32
  record?: Partial<RecordType>;
33
  /** Redirect location after successful creation */
34
  redirect?: string | false | RedirectToFunction;
35
  /** Resource name */
36
  resource?: string;
37
  /** Page title */
38
  title?: string | ComponentType<TitleProps>;
39
  /** Transform function to modify data before submission */
40
  transform?: TransformData;
41
  /** Material UI sx prop for styling */
42
  sx?: SxProps;
43
}
44
```
45

46
**Usage Examples:**
47

48
```typescript
49
import { Create, SimpleForm, TextInput } from "ra-ui-materialui";
50

51
// Basic create page
52
const PostCreate = () => (
53
  <Create>
54
    <SimpleForm>
55
      <TextInput source="title" />
56
      <TextInput source="body" multiline />
57
    </SimpleForm>
58
  </Create>
59
);
60

61
// Create with custom actions and redirect
62
const PostCreateCustom = () => (
63
  <Create 
64
    actions={<CustomCreateActions />}
65
    redirect="show"
66
    transform={(data) => ({ ...data, status: 'draft' })}
67
  >
68
    <SimpleForm>
69
      <TextInput source="title" validate={required()} />
70
      <TextInput source="body" multiline rows={5} />
71
    </SimpleForm>
72
  </Create>
73
);
74
```
75

76
### Edit Component
77

78
Page component for editing existing records with data loading and form submission.
79

80
```typescript { .api }
81
/**
82
 * Page component for the Edit view with record loading and form rendering
83
 * @param props - Edit page configuration props
84
 * @returns Complete edit page with title, actions, and form container
85
 */
86
function Edit<RecordType>(props: EditProps<RecordType>): ReactElement;
87

88
interface EditProps<RecordType> {
89
  /** Custom actions component for the edit page */
90
  actions?: ComponentType<EditActionsProps>;
91
  /** Aside component displayed next to the main content */
92
  aside?: ComponentType<EditAsideProps>;
93
  /** Custom component to replace the default EditView */
94
  component?: ComponentType<EditViewProps>;
95
  /** Record identifier */
96
  id?: Identifier;
97
  /** Mutation mode for the edit operation */
98
  mutationMode?: 'pessimistic' | 'optimistic' | 'undoable';
99
  /** Mutation options for the edit operation */
100
  mutationOptions?: UseMutationOptions;
101
  /** Query options for loading the record */
102
  queryOptions?: UseQueryOptions;
103
  /** Redirect location after successful edit */
104
  redirect?: string | false | RedirectToFunction;
105
  /** Resource name */
106
  resource?: string;
107
  /** Page title */
108
  title?: string | ComponentType<TitleProps>;
109
  /** Transform function to modify data before submission */
110
  transform?: TransformData;
111
  /** Material UI sx prop for styling */
112
  sx?: SxProps;
113
}
114
```
115

116
**Usage Examples:**
117

118
```typescript
119
import { Edit, SimpleForm, TextInput, DateInput } from "ra-ui-materialui";
120

121
// Basic edit page
122
const PostEdit = () => (
123
  <Edit>
124
    <SimpleForm>
125
      <TextInput source="id" disabled />
126
      <TextInput source="title" />
127
      <TextInput source="body" multiline />
128
      <DateInput source="published_at" />
129
    </SimpleForm>
130
  </Edit>
131
);
132

133
// Edit with custom title and mutation mode
134
const PostEditCustom = () => (
135
  <Edit 
136
    title={<PostTitle />}
137
    mutationMode="undoable"
138
    redirect={false}
139
  >
140
    <TabbedForm>
141
      <TabbedForm.Tab label="summary">
142
        <TextInput source="title" validate={required()} />
143
        <TextInput source="teaser" multiline />
144
      </TabbedForm.Tab>
145
      <TabbedForm.Tab label="body">
146
        <RichTextInput source="body" />
147
      </TabbedForm.Tab>
148
    </TabbedForm>
149
  </Edit>
150
);
151
```
152

153
### Show Component
154

155
Page component for displaying record details in a read-only format.
156

157
```typescript { .api }
158
/**
159
 * Page component for the Show view with record loading and display
160
 * @param props - Show page configuration props
161
 * @returns Complete show page with title, actions, and content display
162
 */
163
function Show<RecordType>(props: ShowProps<RecordType>): ReactElement;
164

165
interface ShowProps<RecordType> {
166
  /** Custom actions component for the show page */
167
  actions?: ComponentType<ShowActionsProps>;
168
  /** Aside component displayed next to the main content */
169
  aside?: ComponentType<ShowAsideProps>;
170
  /** Child components for displaying record data */
171
  children?: ReactNode;
172
  /** Custom component to replace the default ShowView */
173
  component?: ComponentType<ShowViewProps>;
174
  /** Whether to show loading while data is being fetched */
175
  emptyWhileLoading?: boolean;
176
  /** Record identifier */
177
  id?: Identifier;
178
  /** Query options for loading the record */
179
  queryOptions?: UseQueryOptions;
180
  /** Resource name */
181
  resource?: string;
182
  /** Page title */
183
  title?: string | ComponentType<TitleProps>;
184
  /** Material UI sx prop for styling */
185
  sx?: SxProps;
186
}
187
```
188

189
**Usage Examples:**
190

191
```typescript
192
import { Show, SimpleShowLayout, TextField, DateField, RichTextField } from "ra-ui-materialui";
193

194
// Basic show page
195
const PostShow = () => (
196
  <Show>
197
    <SimpleShowLayout>
198
      <TextField source="id" />
199
      <TextField source="title" />
200
      <RichTextField source="body" />
201
      <DateField source="published_at" />
202
    </SimpleShowLayout>
203
  </Show>
204
);
205

206
// Show with tabbed layout and custom actions
207
const PostShowCustom = () => (
208
  <Show 
209
    actions={<PostShowActions />}
210
    title={<PostTitle />}
211
  >
212
    <TabbedShowLayout>
213
      <TabbedShowLayout.Tab label="summary">
214
        <TextField source="id" />
215
        <TextField source="title" />
216
        <TextField source="teaser" />
217
      </TabbedShowLayout.Tab>
218
      <TabbedShowLayout.Tab label="body">  
219
        <RichTextField source="body" />
220
      </TabbedShowLayout.Tab>
221
      <TabbedShowLayout.Tab label="metadata">
222
        <DateField source="created_at" />
223
        <DateField source="updated_at" />
224
        <NumberField source="nb_views" />
225
      </TabbedShowLayout.Tab>
226
    </TabbedShowLayout>
227
  </Show>
228
);
229
```
230

231
### Action Components
232

233
Default action components for detail view pages.
234

235
```typescript { .api }
236
/**
237
 * Default actions for Create pages
238
 * @param props - Create actions configuration props
239
 * @returns Action toolbar with save and cancel buttons
240
 */
241
function CreateActions(props: CreateActionsProps): ReactElement;
242

243
/**
244
 * Default actions for Edit pages
245
 * @param props - Edit actions configuration props
246
 * @returns Action toolbar with save, delete, and show buttons
247
 */
248
function EditActions(props: EditActionsProps): ReactElement;
249

250
/**
251
 * Default actions for Show pages
252
 * @param props - Show actions configuration props  
253
 * @returns Action toolbar with edit and delete buttons
254
 */
255
function ShowActions(props: ShowActionsProps): ReactElement;
256

257
interface CreateActionsProps {
258
  className?: string;
259
  hasEdit?: boolean;
260
  hasShow?: boolean;
261
  hasList?: boolean;
262
}
263

264
interface EditActionsProps {
265
  className?: string;
266
  hasCreate?: boolean;
267
  hasEdit?: boolean;
268
  hasShow?: boolean;
269
  hasList?: boolean;
270
}
271

272
interface ShowActionsProps {
273
  className?: string;
274
  hasCreate?: boolean;
275
  hasEdit?: boolean;
276
  hasList?: boolean;
277
}
278
```
279

280
### Layout Components
281

282
Layout components for organizing content within detail views.
283

284
```typescript { .api }
285
/**
286
 * Simple layout component for Show pages
287
 * @param props - Simple show layout props
288
 * @returns Single-column layout for displaying fields
289
 */
290
function SimpleShowLayout(props: SimpleShowLayoutProps): ReactElement;
291

292
/**
293
 * Tabbed layout component for Show pages
294
 * @param props - Tabbed show layout props
295
 * @returns Multi-tab layout for organizing fields
296
 */
297
function TabbedShowLayout(props: TabbedShowLayoutProps): ReactElement;
298

299
/**
300
 * Individual tab component for TabbedShowLayout
301
 * @param props - Tab props
302
 * @returns Tab panel with field content
303
 */
304
function Tab(props: TabProps): ReactElement;
305

306
interface SimpleShowLayoutProps {
307
  children?: ReactNode;
308
  className?: string;
309
  spacing?: number;
310
  sx?: SxProps;
311
}
312

313
interface TabbedShowLayoutProps {
314
  children?: ReactNode;
315
  className?: string;
316
  spacing?: number;
317
  sx?: SxProps;
318
  syncWithLocation?: boolean;
319
}
320

321
interface TabProps {
322
  children?: ReactNode;
323
  className?: string;
324
  count?: number;
325
  icon?: ReactElement;
326
  label?: string | ReactElement;
327
  path?: string;
328
  sx?: SxProps;
329
  value?: string | number;
330
}
331
```
332

333
## Types
334

335
```typescript { .api }
336
type Identifier = string | number;
337

338
type RedirectToFunction = (
339
  resource: string,
340
  id: Identifier,
341
  data: RaRecord
342
) => string;
343

344
type TransformData = (data: any) => any;
345

346
interface TitleProps {
347
  record?: RaRecord;
348
  defaultTitle?: string;
349
}
350

351
interface RaRecord {
352
  id: Identifier;
353
  [key: string]: any;
354
}
355

356
type MutationMode = 'pessimistic' | 'optimistic' | 'undoable';
357
```