SingleFieldList

Inline list layout rendering its child once per record.

Installation

pnpm dlx shadcn@latest add @shadmin/single-field-list

Usage

Use it inside any component creating a ListContext (e.g. <ArrayField>, <ReferenceArrayField>, <ReferenceManyField>).

Here is an example of a Post show page showing the list of tags for the current post:

import {
  Show,
  TextField,
  ReferenceArrayField,
  SingleFieldList,
} from "@/components/admin";
 
const PostShow = () => (
  <Show>
    <div className="flex flex-col gap-4">
      <TextField source="title" />
      <ReferenceArrayField label="Tags" reference="tags" source="tag_ids">
        <SingleFieldList />
      </ReferenceArrayField>
    </div>
  </Show>
);

<SingleFieldList> creates one RecordContext per item in the list. By default, it renders each item as a badge, using <BadgeField> and the resource recordRepresentation.

You can customize the rendering by providing a children or render prop:

<SingleFieldList>
    <TextField source="name" />
</SingleFieldList>
 
<SingleFieldList render={(record) => <>{record.name</>} />

Props

Prop	Required	Type	Default	Description
`children`	Optional	`ReactNode`	`<BadgeField>`	Content for each record
`className`	Optional	`string`	-	Extra classes on wrapper div
`render`	Optional	`(record, index) => ReactNode`	-	Custom render function per record