Show
<Show>
provides us a layout for displaying the page. It does not contain any logic but adds extra functionalities like a refresh button or giving title to the page.
We will show what <Show>
does using properties with examples.
You can swizzle this component to customize it with the refine CLI
Properties
title
title
allows you to add a title inside the <Show>
component. If you don't pass title props, it uses the "Show" prefix and the singular resource name by default. For example, for the "posts" resource, it will be "Show post".
resource
The <Show>
component reads the resource
information from the route by default. If you want to use a custom resource for the <Show>
component, you can use the resource
prop:
If you have multiple resources with the same name, you can pass the identifier
instead of the name
of the resource. It will only be used as the main matching key for the resource, data provider methods will still work with the name
of the resource defined in the <Refine/>
component.
For more information, refer to the
identifier
of the<Refine/>
component documentation →
canDelete
and canEdit
canDelete
and canEdit
allows us to add the delete and edit buttons inside the <Show>
component.
When clicked on, the delete button executes the useDelete
method provided by the dataProvider
and the edit button redirects the user to the record edit page.
For more information, refer to the
usePermission
documentation →
For more information, refer to the
<DeleteButton>
and the<EditButton>
documentations.
recordItemId
The<Show>
component reads the id
information from the route by default. recordItemId
is used when it cannot read from the URL (when used on a custom page, modal or drawer).
The <Show>
component needs the id
information for <RefreshButton>
to work properly.
dataProviderName
If not specified, refine will use the default data provider. If you have multiple data providers, you can use the dataProviderName
property to specify which one you want to use:
import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import { Show } from "@refinedev/antd";
const PostShow = () => {
return <Show dataProviderName="other">...</Show>;
};
export const App: React.FC = () => {
return (
<Refine
dataProvider={{
default: dataProvider("https://api.fake-rest.refine.dev/"),
other: dataProvider("https://other-api.fake-rest.refine.dev/"),
}}
>
{/* ... */}
</Refine>
);
};
goBack
To customize the back button or to disable it, you can use the goBack
property:
If your route has no :action
parameter or your action is list
, the back button will not be shown even if you pass a goBack
property. You can override this behavior by using the headerProps
property:
import { useBack } from "@refinedev/core";
import { Show } from "@refinedev/antd";
import { Button } from "antd";
const PostShow: React.FC = () => {
const back = useBack();
const BackButton = () => <Button>←</Button>;
return (
<Show goBack={<BackButton />} headerProps={{ onBack: back }}>
<p>Rest of your page here</p>
</Show>
);
};
isLoading
Since <Show>
uses the Ant Design <Card>
component, the isLoading
property can be set like the below:
breadcrumb
To customize or disable the breadcrumb, you can use the breadcrumb
property. By default the Breadcrumb
component from the @refinedev/antd
package is used for breadcrumbs.
This feature can be managed globally via the <Refine>
component's options
For more information, refer to the
Breadcrumb
documentation → :::
wrapperProps
You can use the wrapperProps
property if you want to customize the wrapper of the <Show/>
component. The @refinedev/antd
wrapper elements are simply <div/>
s and wrapperProps
and can get every attribute that <div/>
can get.
headerProps
You can use the headerProps
property to customize the header of the <Show/>
component:
For more information, refer to the
PageHeader
documentation →
contentProps
You can use the contentProps
property to customize the content of the <Show/>
component:
For more information, refer to the
Card
documentation →
headerButtons
By default, the <Show/>
component has a <ListButton>
, <EditButton>
, <DeleteButton>
, and a <RefreshButton>
at the header.
You can customize the buttons at the header by using the headerButtons
property. It accepts React.ReactNode
or a render function ({ defaultButtons, listButtonProps, editButtonProps, deleteButtonProps, refreshButtonProps }) => React.ReactNode
which you can use to keep the existing buttons and add your own.
If the "list" resource is not defined, the <ListButton>
will not render and listButtonProps
will be undefined
.
If canDelete
is false
, the <DeleteButton>
will not render and deleteButtonProps
will be undefined
.
If canEdit
is false
, <EditButton>
will not render and editButtonProps
will be undefined
.
Or, instead of using the defaultButtons
, you can create your own buttons. If you want, you can use createButtonProps
to utilize the default values of the <ListButton>
, <EditButton>
, <DeleteButton>
, and <RefreshButton>
components.
headerButtonProps
You can use the headerButtonProps
proeprty to customize the wrapper element of the buttons at the header:
For more information, refer to the
Space
documentation →
footerButtons
You can customize the buttons at the footer by using the footerButtons
property. It accepts React.ReactNode
or a render function ({ defaultButtons }) => React.ReactNode
which you can use to keep the existing buttons and add your own.
footerButtonProps
You can customize the wrapper element of the buttons at the footer by using the footerButtonProps
property.
For more information, refer to the
Space
documentation →