Skip to main content
Version: 3.xx.xx

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.

src/pages/posts/show.tsx
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.

src/pages/posts/show.tsx
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>
);
};
actionButton Usage

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.

src/pages/posts/show.tsx
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;
}
cardHeaderProps Usage

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).

src/pages/posts/show.tsx
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. β†’

src/app.tsx
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

PropertyDescriptionTypeDefault
canDeleteAdds a <DeleteButton>booleanIf the resource has canDelete prop it is true else false
canEditAdds an <EditButton>booleanIf the resource has canEdit prop it is true else false
actionButtonsPasses the props for <CardActions>React.ReactNode<SaveButton> and depending on your resource configuration (canDelete prop)
cardPropsPasses the props for <Card>CardProps<SaveButton> and depending on your resource configuration (canDelete prop)
cardHeaderPropsPasses the props for <CardHeader>CardHeaderProps
cardContentPropsPasses the props for <CardContent>CardContentProps
cardActionsPropsPasses the props for <CardActions>CardActionsProps
recordItemIdThe record id for <RefreshButton>BaseKey
resourceResource name for API data interactionsstringResource name that it reads from the URL.
isLoadingPasses the props for <RefreshButton>booleanfalse