Skip to main content
RefineDocumentation
Version: 5.xx.xx
Source Code

Show

<ShowView /> provides us a layout to display the page. It does not contain any logic but adds extra functionalities like action buttons and giving titles to the page.

The ShowView component is designed for displaying detailed information about a single record with automatic navigation, resource integration, breadcrumb navigation, and action buttons.

Installation​

npx shadcn@latest add https://ui.refine.dev/r/views.json

This will install all view components including ShowView.

Usage​

import {
  ShowView,
  ShowViewHeader,
} from "@/components/refine-ui/views/show-view";
import { LoadingOverlay } from "@/components/refine-ui/layout/loading-overlay";

export default function PostShowPage() {
  const isLoading = false; // or true, based on your data fetching state
  const error = null; // or object, based on your data fetching state

  if (error) {
    return (
      <ShowView>
        <ShowViewHeader />
        {/* Error content */}
      </ShowView>
    );
  }

  return (
    <ShowView>
      <ShowViewHeader />
      <LoadingOverlay loading={isLoading}>
        {/* Record content (e.g., Record details) */}
      </LoadingOverlay>
    </ShowView>
  );
}

Features​

  • Automatic Navigation: Back button and List button functionality
  • Resource Integration: Automatic resource detection and title generation
  • Breadcrumb Navigation: Built-in breadcrumb component
  • Action Buttons: Includes RefreshButton and EditButton (if applicable)

API Reference​

ShowView Properties​

PropTypeDefaultDescription
childrenReactNode-Content to render inside the view
classNamestring-Additional CSS classes for the container

ShowViewHeader Properties​

Includes EditButton (if resource has an edit page), ListButton, and RefreshButton by default.

PropTypeDefaultDescription
resourcestringCurrent resourceOverride the resource name for title and actions
titlestringAuto-generatedCustom title for the header
hideBreadcrumbbooleanfalseSet to true to hide the breadcrumb
wrapperClassNamestring-CSS classes for the header's main wrapper div
headerClassNamestring-CSS classes for the div containing title and actions

Advanced Usage​

Custom Title​

import {
  ShowView,
  ShowViewHeader,
} from "@/components/refine-ui/views/show-view";

export default function PostShowPage() {
  return (
    <ShowView>
      <ShowViewHeader title="Post Details" />
      {/* Your record details */}
    </ShowView>
  );
}

Hide Breadcrumb​

<ShowViewHeader hideBreadcrumb={true} />

Custom CSS Classes​

<ShowView className="my-custom-show">
  <ShowViewHeader
    wrapperClassName="custom-header-wrapper"
    headerClassName="custom-header-content"
  />
</ShowView>

With Data Loading​

import { useShow } from "@refinedev/core";

export default function PostShowPage() {
  const { queryResult } = useShow();
  const { data, isLoading, error } = queryResult;

  if (error) {
    return (
      <ShowView>
        <ShowViewHeader />
        <div>Error loading record</div>
      </ShowView>
    );
  }

  return (
    <ShowView>
      <ShowViewHeader />
      <LoadingOverlay loading={isLoading}>
        {/* Display your record details */}
        <div>
          <h3>{data?.data.title}</h3>
          <p>{data?.data.content}</p>
        </div>
      </LoadingOverlay>
    </ShowView>
  );
}

Display Field Components​

import {
  ShowView,
  ShowViewHeader,
} from "@/components/refine-ui/views/show-view";
import { TextField } from "@/components/refine-ui/fields/text-field";
import { DateField } from "@/components/refine-ui/fields/date-field";

export default function PostShowPage() {
  const { queryResult } = useShow();
  const { data, isLoading } = queryResult;
  const record = data?.data;

  return (
    <ShowView>
      <ShowViewHeader />
      <LoadingOverlay loading={isLoading}>
        <div className="space-y-4">
          <div>
            <label className="font-semibold">Title:</label>
            <TextField value={record?.title} />
          </div>
          <div>
            <label className="font-semibold">Created At:</label>
            <DateField value={record?.createdAt} />
          </div>
          <div>
            <label className="font-semibold">Content:</label>
            <TextField value={record?.content} />
          </div>
        </div>
      </LoadingOverlay>
    </ShowView>
  );
}
Previous
List
Next
<SignInForm />