0ca37364ea
Continuation of #10741. Field-level admin options, including the conditional logic and custom field components, are currently documented within the "admin > customizing views" page. This makes them hard to find because users, myself included, intuitively navigate to the fields overview doc first to locate this information. Now, they are rendered within "fields > overview" as expected. This should help keep the user from jumping around from doc to doc and getting lost.
79 lines
2.5 KiB
Plaintext
79 lines
2.5 KiB
Plaintext
---
|
|
title: Row Field
|
|
label: Row
|
|
order: 150
|
|
desc: With the Row field you can arrange fields next to each other in the Admin Panel to help you customize your Dashboard.
|
|
keywords: row, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
|
|
---
|
|
|
|
The Row Field is presentational-only and only affects the [Admin Panel](../admin/overview). By using it, you can arrange [Fields](./overview) next to each other horizontally.
|
|
|
|
<LightDarkImage
|
|
srcLight="https://payloadcms.com/images/docs/fields/row.png"
|
|
srcDark="https://payloadcms.com/images/docs/fields/row-dark.png"
|
|
alt="Shows a row field in the Payload Admin Panel"
|
|
caption="Admin Panel screenshot of a Row field"
|
|
/>
|
|
|
|
To add a Row Field, set the `type` to `row` in your [Field Config](./overview):
|
|
|
|
```ts
|
|
import type { Field } from 'payload'
|
|
|
|
export const MyRowField: Field = {
|
|
// ...
|
|
// highlight-start
|
|
type: 'row',
|
|
fields: [
|
|
// ...
|
|
]
|
|
// highlight-end
|
|
}
|
|
```
|
|
|
|
## Config Options
|
|
|
|
| Option | Description |
|
|
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| **`fields`** * | Array of field types to nest within this Row. |
|
|
| **`admin`** | Admin-specific configuration excluding `description`, `readOnly`, and `hidden`. [More details](./overview#admin-options). |
|
|
| **`custom`** | Extension point for adding custom data (e.g. for plugins) |
|
|
|
|
_* An asterisk denotes that a property is required._
|
|
|
|
## Example
|
|
|
|
`collections/ExampleCollection.ts`
|
|
|
|
```ts
|
|
import type { CollectionConfig } from 'payload'
|
|
|
|
export const ExampleCollection: CollectionConfig = {
|
|
slug: 'example-collection',
|
|
fields: [
|
|
{
|
|
type: 'row', // required
|
|
fields: [
|
|
// required
|
|
{
|
|
name: 'label',
|
|
type: 'text',
|
|
required: true,
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
},
|
|
{
|
|
name: 'value',
|
|
type: 'text',
|
|
required: true,
|
|
admin: {
|
|
width: '50%',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
```
|