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>
    );
};

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;
}

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

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