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.
Properties
canDelete
and canEdit
canDelete
and canEdit
allows us to add the delete and edit buttons inside the <Show>
component. If the resource has canDelete
or canEdit
property refine adds the buttons by default.
When clicked on, delete button executes the useDelete
method provided by the dataProvider
and the edit button redirects the user to the record edit page.
Refer to the <DeleteButton>
and the <EditButton>
documentation for detailed usage.
import { usePermissions } from "@pankod/refine-core";
import { Show } from "@pankod/refine-mui";
export const ShowPage: React.FC = () => {
const { data } = usePermissions<string>();
return (
<Show
canDelete={data === "admin"}
canEdit={data === "editor" || data === "admin"}
>
...
</Show>
);
};
Refer to the usePermission
documentation for detailed usage. β
actionButtons
<Show>
uses the Material UI <CardActions>
component. By default,The children of the <CardActions>
component shows nothing in the <Show>
component.
import { Show, Button } from "@pankod/refine-mui";
export const ShowPage: React.FC = () => {
return (
<Show
actionButtons={
<>
<Button type="primary">Custom Button 1</Button>
<Button type="default">Custom Button 2</Button>
</>
}
>
...
</Show>
);
};

cardProps
<Show>
uses the Material UI <Card>
components so you can customize with the props of cardProps
.
cardHeaderProps
<Show>
uses the Material UI <CardHeader>
components so you can customize with the props of cardHeaderProps
.
import { useShow } from "@pankod/refine-core";
import { Show, Typography, Stack } from "@pankod/refine-mui";
export const ShowPage: React.FC = () => {
const { queryResult } = useShow<IPost>();
const { data, isLoading } = queryResult;
const record = data?.data;
return (
<Show
isLoading={isLoading}
cardHeaderProps={{
title: <Typography variant="h5">Custom Title</Typography>,
}}
>
<Stack gap="10px">
<Typography fontWeight="bold">Id</Typography>
<Typography>{record?.id}</Typography>
<Typography fontWeight="bold">Title</Typography>
<Typography>{record?.title}</Typography>
</Stack>
</Show>
);
};
interface IPost {
id: number;
title: string;
}

cardContentProps
<Show>
uses the Material UI <CardContent>
components so you can customize with the props of cardContentProps
.
cardActionsProps
<Show>
uses the Material UI <CardActions>
components so you can customize with the props of cardActionsProps
.
recordItemId
<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).
import { useState } from "react";
import { useShow } from "@pankod/refine-core";
import { Show, Dialog, ShowButton } from "@pankod/refine-mui";
export const ShowPage: React.FC = () => {
const [visibleShowDialog, setVisibleShowDialog] = useState<boolean>(false);
const { queryResult, showId, setShowId } = useShow();
const { data, isLoading } = queryResult;
return (
<>
<ShowButton
size="small"
onClick={() => {
setShowId(data?.data.id);
setVisibleShowDialog(true);
}}
/>
<Dialog
open={visibleShowDialog}
onClose={() => setVisibleShowDialog(false)}
>
<Show recordItemId={showId} isLoading={isLoading}></Show>
</Dialog>
</>
);
};
note
<Show>
component needs the id
information for <RefreshButton>
to work properly.
resource
The <Show>
component reads the resource
information from the route by default. This default behavior will not work on custom pages. If you want to use the <Show>
component in a custom page, you can use the resource
property.
Refer to the custom pages documentation for detailed usage. β
import { Refine } from "@pankod/refine-core";
import { Show } from "@pankod/refine-mui";
import dataProvider from "@pankod/refine-simple-rest";
import routerProvider from "@pankod/refine-react-router-v6";
const CustomPage = () => {
return (
<Show resource="posts" recordItemId="postId">
...
</Show>
);
};
export const App: React.FC = () => {
return (
<Refine
routerProvider={{
...routerProvider,
routes: [
{
element: <CustomPage />,
path: "/custom",
},
],
}}
dataProvider={dataProvider("https://api.fake-rest.refine.dev/")}
resources={[{ name: "posts" }]}
/>
);
};
caution
The <Show>
component needs the id
information for work properly, so if you use the <Show>
component in custom pages, you should pass the recordItemId
property.
API Reference
Properties
Property | Description | Type | Default |
---|---|---|---|
canDelete | Adds a <DeleteButton> | boolean | If the resource has canDelete prop it is true else false |
canEdit | Adds an <EditButton> | boolean | If the resource has canEdit prop it is true else false |
actionButtons | Passes the props for <CardActions> | React.ReactNode | <SaveButton> and depending on your resource configuration (canDelete prop) |
cardProps | Passes the props for <Card> | CardProps | <SaveButton> and depending on your resource configuration (canDelete prop) |
cardHeaderProps | Passes the props for <CardHeader> | CardHeaderProps | |
cardContentProps | Passes the props for <CardContent> | CardContentProps | |
cardActionsProps | Passes the props for <CardActions> | CardActionsProps | |
recordItemId | The record id for <RefreshButton> | BaseKey | |
resource | Resource name for API data interactions | string | Resource name that it reads from the URL. |
isLoading | Passes the props for <RefreshButton> | boolean | false |