Show

Show

The Show component provides a container for displaying detailed information about a single record. It handles data fetching and provides a clean layout for showing record details.

Usage

import { Show, SimpleShowLayout, TextField, DateField } from '@/components/admin';

export const PostShow = () => (
  <Show resource="posts">
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField source="content" />
      <TextField source="status" />
      <DateField source="created_at" />
    </SimpleShowLayout>
  </Show>
);

Props

PropTypeDescription
resourcestringResource name for API calls
idstring | numberRecord ID (auto-detected from URL)
titlestringPage title override
childrenReactNodeShow content
actionsReactNodeCustom action buttons

Examples

Basic Show Page

import { Show, SimpleShowLayout, TextField, DateField } from '@/components/admin';

export const PostShow = () => (
  <Show resource="posts">
    <SimpleShowLayout>
      <TextField source="id" label="ID" />
      <TextField source="title" label="Title" />
      <TextField source="content" label="Content" />
      <TextField source="status" label="Status" />
      <DateField source="created_at" label="Created At" />
      <DateField source="updated_at" label="Updated At" />
    </SimpleShowLayout>
  </Show>
);

With Custom Actions

import { Show, SimpleShowLayout, TextField, EditButton, DeleteButton } from '@/components/admin';

export const PostShow = () => (
  <Show 
    resource="posts"
    actions={
      <div className="flex gap-2">
        <EditButton />
        <DeleteButton />
        <Button variant="outline">Duplicate</Button>
      </div>
    }
  >
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField source="content" />
    </SimpleShowLayout>
  </Show>
);

With Custom Title

import { Show, SimpleShowLayout, TextField } from '@/components/admin';

export const PostShow = () => (
  <Show resource="posts" title="Blog Post Details">
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField source="content" />
    </SimpleShowLayout>
  </Show>
);
import { Show, SimpleShowLayout, TextField, ReferenceField } from '@/components/admin';

export const PostShow = () => (
  <Show resource="posts">
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField source="content" />
      <ReferenceField source="author_id" reference="users">
        <TextField source="name" />
      </ReferenceField>
      <ReferenceField source="category_id" reference="categories">
        <TextField source="name" />
      </ReferenceField>
    </SimpleShowLayout>
  </Show>
);

With One-to-Many Relations

import { Show, SimpleShowLayout, TextField, ReferenceManyField, DataTable } from '@/components/admin';

export const PostShow = () => (
  <Show resource="posts">
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField source="content" />
      
      <ReferenceManyField reference="comments" target="post_id" label="Comments">
        <DataTable>
          <DataTable.Col source="content" />
          <DataTable.Col source="author" />
          <DataTable.Col source="created_at" />
        </DataTable>
      </ReferenceManyField>
    </SimpleShowLayout>
  </Show>
);

With Custom Field Rendering

import { Show, SimpleShowLayout, TextField, DateField } from '@/components/admin';
import { Badge } from '@/components/ui/badge';

export const PostShow = () => (
  <Show resource="posts">
    <SimpleShowLayout>
      <TextField source="title" />
      <TextField 
        source="status"
        render={(value) => (
          <Badge variant={value === 'published' ? 'default' : 'secondary'}>
            {value}
          </Badge>
        )}
      />
      <TextField 
        source="content"
        render={(value) => (
          <div className="prose max-w-none">
            {value}
          </div>
        )}
      />
      <DateField source="created_at" />
    </SimpleShowLayout>
  </Show>
);

With Sections

import { Show, SimpleShowLayout, TextField, DateField } from '@/components/admin';

export const PostShow = () => (
  <Show resource="posts">
    <SimpleShowLayout>
      <div className="space-y-6">
        <section>
          <h3 className="text-lg font-semibold mb-4">Basic Information</h3>
          <div className="grid grid-cols-2 gap-4">
            <TextField source="title" />
            <TextField source="status" />
          </div>
        </section>
        
        <section>
          <h3 className="text-lg font-semibold mb-4">Content</h3>
          <TextField source="content" />
        </section>
        
        <section>
          <h3 className="text-lg font-semibold mb-4">Metadata</h3>
          <div className="grid grid-cols-2 gap-4">
            <DateField source="created_at" />
            <DateField source="updated_at" />
          </div>
        </section>
      </div>
    </SimpleShowLayout>
  </Show>
);

Field Components

TextField

Display text values:

<TextField source="title" label="Post Title" />

DateField

Display formatted dates:

<DateField source="created_at" label="Created" showTime />

BooleanField

Display boolean values:

<BooleanField source="is_published" label="Published" />

NumberField

Display formatted numbers:

<NumberField source="view_count" label="Views" />

Data Loading

The Show component automatically:

  • Fetches the record data using the ID from the URL
  • Provides loading states while fetching
  • Handles errors if the record is not found
  • Provides data to field components

Error Handling

Automatic error handling for:

  • Network errors
  • Not found errors
  • Server errors

Installation

npx better-admin add show
Edit on GitHub

On this page