ShowButton

ShowButton

The <ShowButton> component is a link button that navigates to the show/detail page of the current record. It must be used inside a RecordContext.

Usage

Use it in a DataTable or as an action button:

import { DataTable, ShowButton, EditButton } from '@/components/admin';

const PostList = () => (
  <DataTable>
    <DataTable.Col source="title" />
    <DataTable.Col source="author" />
    <DataTable.Col label="Actions">
      <div className="flex gap-2">
        <ShowButton />
        <EditButton />
      </div>
    </DataTable.Col>
  </DataTable>
);

Installation

Terminal
npx better-admin add show-button

Props

PropRequiredTypeDefaultDescription
labelOptionalstring"Show"Button label text
recordOptionalobjectFrom contextRecord object with id
resourceOptionalstringFrom contextResource name
iconOptionalReactNodeEye iconCustom button icon
variantOptionalstring"ghost"Button variant

Row Click Alternative

Make entire rows clickable to navigate to show page:

<DataTable rowClick="show">
  <DataTable.Col source="title" />
  <DataTable.Col source="author" />
  <DataTable.Col source="published_at" />
</DataTable>

Custom Label

<ShowButton label="View" />
<ShowButton label="Details" />

Custom Icon

import { Eye } from 'lucide-react';

<ShowButton icon={<Eye />} />

Different Variants

<ShowButton variant="default" />
<ShowButton variant="outline" />
<ShowButton variant="ghost" />

With better-query

ShowButton works with better-query data:

import { List, DataTable, ShowButton } from '@/components/admin';
import { useQuery } from 'better-admin';
import { query } from '@/lib/query';

export function UserList() {
  const { data } = useQuery("user", query);

  return (
    <List>
      <DataTable data={data}>
        <DataTable.Col source="name" />
        <DataTable.Col source="email" />
        <DataTable.Col label="Actions">
          <ShowButton />
        </DataTable.Col>
      </DataTable>
    </List>
  );
}

Complete Example

import {
  DataTable,
  ShowButton,
  EditButton,
  DeleteButton,
  TextField,
  DateField,
} from '@/components/admin';

export const OrderList = () => (
  <DataTable>
    <DataTable.Col source="id" />
    <DataTable.Col source="order_number">
      <TextField />
    </DataTable.Col>
    <DataTable.Col source="total" />
    <DataTable.Col source="created_at">
      <DateField />
    </DataTable.Col>
    <DataTable.Col label="Actions">
      <div className="flex gap-2">
        <ShowButton variant="outline" />
        <EditButton />
        <DeleteButton variant="destructive" />
      </div>
    </DataTable.Col>
  </DataTable>
);

Next Steps

Edit on GitHub

On this page