0
# Field Components
1

2
Data display components for showing various data types with proper formatting and styling in react-admin applications.
3

4
## Capabilities
5

6
### Text Display Fields
7

8
Components for displaying text-based data with formatting options.
9

10
```typescript { .api }
11
/**
12
 * Standard text field component for displaying string data
13
 * @param props - TextField configuration props
14
 * @returns Formatted text display component
15
 */
16
function TextField(props: TextFieldProps): ReactElement;
17

18
/**
19
 * Rich text field component for displaying HTML content
20
 * @param props - RichTextField configuration props
21
 * @returns HTML content display with sanitization
22
 */
23
function RichTextField(props: RichTextFieldProps): ReactElement;
24

25
interface TextFieldProps {
26
  /** Field source property name */
27
  source: string;
28
  /** Field label text */
29
  label?: string;
30
  /** Whether field is sortable */
31
  sortable?: boolean;
32
  /** Custom text color */
33
  color?: string;
34
  /** Text transform */
35
  transform?: 'uppercase' | 'lowercase' | 'capitalize';
36
  /** Maximum length before truncation */
37
  maxLength?: number;
38
  /** Whether to strip HTML tags */
39
  stripTags?: boolean;
40
}
41

42
interface RichTextFieldProps {
43
  /** Field source property name */
44
  source: string;
45
  /** Field label text */
46
  label?: string;
47
  /** Whether field is sortable */
48
  sortable?: boolean;
49
  /** Whether to strip dangerous HTML */
50
  stripTags?: boolean;
51
}
52
```
53

54
### Numeric Display Fields
55

56
Components for displaying numeric data with formatting.
57

58
```typescript { .api }
59
/**
60
 * Number field component with formatting options
61
 * @param props - NumberField configuration props
62
 * @returns Formatted number display component
63
 */
64
function NumberField(props: NumberFieldProps): ReactElement;
65

66
interface NumberFieldProps {
67
  /** Field source property name */
68
  source: string;
69
  /** Field label text */
70
  label?: string;
71
  /** Whether field is sortable */
72
  sortable?: boolean;
73
  /** Number of decimal places */
74
  precision?: number;
75
  /** Currency code for formatting */
76
  currency?: string;
77
  /** Number format options */
78
  options?: Intl.NumberFormatOptions;
79
  /** Custom format function */
80
  format?: (value: number) => string;
81
}
82
```
83

84
### Date and Time Display Fields
85

86
Components for displaying date and time data with localization.
87

88
```typescript { .api }
89
/**
90
 * Date field component with localization support
91
 * @param props - DateField configuration props
92
 * @returns Formatted date display component
93
 */
94
function DateField(props: DateFieldProps): ReactElement;
95

96
/**
97
 * DateTime field component with date and time display
98
 * @param props - DateTimeField configuration props
99
 * @returns Formatted datetime display component
100
 */
101
function DateTimeField(props: DateTimeFieldProps): ReactElement;
102

103
interface DateFieldProps {
104
  /** Field source property name */
105
  source: string;
106
  /** Field label text */
107
  label?: string;
108
  /** Whether field is sortable */
109
  sortable?: boolean;
110
  /** Date format string */
111
  format?: string;
112
  /** Locale for date formatting */
113
  locale?: string;
114
  /** Show relative time (e.g., '2 hours ago') */
115
  showTime?: boolean;
116
}
117

118
interface DateTimeFieldProps extends DateFieldProps {
119
  /** Time format string */
120
  timeFormat?: string;
121
  /** Whether to show seconds */
122
  showSeconds?: boolean;
123
}
124
```
125

126
### Boolean Display Fields
127

128
Components for displaying boolean data with customizable representations.
129

130
```typescript { .api }
131
/**
132
 * Boolean field component with customizable true/false display
133
 * @param props - BooleanField configuration props
134
 * @returns Boolean value display component
135
 */
136
function BooleanField(props: BooleanFieldProps): ReactElement;
137

138
interface BooleanFieldProps {
139
  /** Field source property name */
140
  source: string;
141
  /** Field label text */
142
  label?: string;
143
  /** Whether field is sortable */
144
  sortable?: boolean;
145
  /** Text to display for true values */
146
  trueText?: string;
147
  /** Text to display for false values */
148
  falseText?: string;
149
  /** Color for true values */
150
  trueColor?: string;
151
  /** Color for false values */
152
  falseColor?: string;
153
  /** Use icon instead of text */
154
  useIcon?: boolean;
155
}
156
```
157

158
### Link and Contact Fields
159

160
Components for displaying clickable links and contact information.
161

162
```typescript { .api }
163
/**
164
 * Email field component with mailto link
165
 * @param props - EmailField configuration props
166
 * @returns Email display with clickable mailto link
167
 */
168
function EmailField(props: EmailFieldProps): ReactElement;
169

170
/**
171
 * URL field component with clickable link
172
 * @param props - UrlField configuration props
173
 * @returns URL display with clickable link
174
 */
175
function UrlField(props: UrlFieldProps): ReactElement;
176

177
interface EmailFieldProps {
178
  /** Field source property name */
179
  source: string;
180
  /** Field label text */
181
  label?: string;
182
  /** Whether field is sortable */
183
  sortable?: boolean;
184
  /** Link target */
185
  target?: '_blank' | '_self' | '_parent' | '_top';
186
}
187

188
interface UrlFieldProps {
189
  /** Field source property name */
190
  source: string;
191
  /** Field label text */
192
  label?: string;
193
  /** Whether field is sortable */
194
  sortable?: boolean;
195
  /** Link target */
196
  target?: '_blank' | '_self' | '_parent' | '_top';
197
  /** Custom link text */
198
  text?: string;
199
}
200
```
201

202
### Media Display Fields
203

204
Components for displaying images and files.
205

206
```typescript { .api }
207
/**
208
 * Image field component with preview functionality
209
 * @param props - ImageField configuration props
210
 * @returns Image display with preview options
211
 */
212
function ImageField(props: ImageFieldProps): ReactElement;
213

214
/**
215
 * File field component with download link
216
 * @param props - FileField configuration props
217
 * @returns File display with download functionality
218
 */
219
function FileField(props: FileFieldProps): ReactElement;
220

221
interface ImageFieldProps {
222
  /** Field source property name */
223
  source: string;
224
  /** Field label text */
225
  label?: string;
226
  /** Image title source */
227
  title?: string;
228
  /** Image width */
229
  width?: number;
230
  /** Image height */
231
  height?: number;
232
  /** Alt text for accessibility */
233
  alt?: string;
234
}
235

236
interface FileFieldProps {
237
  /** Field source property name */
238
  source: string;
239
  /** Field label text */
240
  label?: string;
241
  /** File title source */
242
  title?: string;
243
  /** Link target */
244
  target?: '_blank' | '_self' | '_parent' | '_top';
245
  /** Download filename */
246
  download?: string;
247
}
248
```
249

250
### Reference Fields
251

252
Components for displaying related record data.
253

254
```typescript { .api }
255
/**
256
 * Reference field component for displaying related record data
257
 * @param props - ReferenceField configuration props
258
 * @returns Related record display component
259
 */
260
function ReferenceField(props: ReferenceFieldProps): ReactElement;
261

262
/**
263
 * Reference array field for displaying multiple related records
264
 * @param props - ReferenceArrayField configuration props
265
 * @returns Multiple related records display component
266
 */
267
function ReferenceArrayField(props: ReferenceArrayFieldProps): ReactElement;
268

269
interface ReferenceFieldProps {
270
  /** Field source property name */
271
  source: string;
272
  /** Reference resource name */
273
  reference: string;
274
  /** Field label text */
275
  label?: string;
276
  /** Whether field is sortable */
277
  sortable?: boolean;
278
  /** Child component to render referenced data */
279
  children: ReactElement;
280
  /** Link to referenced record */
281
  link?: string | Function;
282
}
283

284
interface ReferenceArrayFieldProps {
285
  /** Field source property name */
286
  source: string;
287
  /** Reference resource name */
288
  reference: string;
289
  /** Field label text */
290
  label?: string;
291
  /** Child component to render referenced data */
292
  children: ReactElement;
293
}
294
```
295

296
### Specialized Fields
297

298
Specialized field components for specific use cases.
299

300
```typescript { .api }
301
/**
302
 * Chip field component for displaying data as Material UI chips
303
 * @param props - ChipField configuration props
304
 * @returns Data display as chip component
305
 */
306
function ChipField(props: ChipFieldProps): ReactElement;
307

308
/**
309
 * Array field component for displaying array data
310
 * @param props - ArrayField configuration props
311
 * @returns Array data display component
312
 */
313
function ArrayField(props: ArrayFieldProps): ReactElement;
314

315
/**
316
 * Function field component for computed values
317
 * @param props - FunctionField configuration props
318
 * @returns Computed value display component
319
 */
320
function FunctionField(props: FunctionFieldProps): ReactElement;
321

322
interface ChipFieldProps {
323
  /** Field source property name */
324
  source: string;
325
  /** Field label text */
326
  label?: string;
327
  /** Whether field is sortable */
328
  sortable?: boolean;
329
  /** Chip color */
330
  color?: 'default' | 'primary' | 'secondary';
331
  /** Chip variant */
332
  variant?: 'filled' | 'outlined';
333
  /** Chip size */
334
  size?: 'small' | 'medium';
335
}
336

337
interface ArrayFieldProps {
338
  /** Field source property name */
339
  source: string;
340
  /** Field label text */
341
  label?: string;
342
  /** Child component to render array items */
343
  children: ReactElement;
344
}
345

346
interface FunctionFieldProps {
347
  /** Field label text */
348
  label?: string;
349
  /** Function to compute display value */
350
  render: (record: any, source?: string) => any;
351
  /** Whether field is sortable */
352
  sortable?: boolean;
353
}
354
```
355

356
## Types
357

358
```typescript { .api }
359
interface FieldProps {
360
  source: string;
361
  label?: string;
362
  sortable?: boolean;
363
  record?: any;
364
  resource?: string;
365
}
366

367
interface Record {
368
  id: Identifier;
369
  [key: string]: any;
370
}
371

372
type Identifier = string | number;
373
```