# How to Use Table.ShowAction, Table.EditAction, and Table.DeleteAction in refine-shadcn

> Effortlessly add permission-aware row actions like show edit and delete to your refine-shadcn tables. Learn to use Table.ShowAction Table.EditAction and Table.DeleteAction for seamless data management.

- Repository: [Ferdi ÜNAL/refine-shadcn](https://github.com/ferdiunal/refine-shadcn)
- Tags: how-to-guide
- Published: 2026-03-01

---

**Use `Table.ShowAction`, `Table.EditAction`, and `Table.DeleteAction` inside `Table.Actions` to add permission-aware row-level actions to any refine-shadcn table; these components automatically handle URL generation, access control via `useCan`, and delete confirmations through `DeleteProvider`.**

The **refine-shadcn** library provides a composable `Table` component that simplifies building data grids with integrated CRUD operations. These action sub-components abstract away routing logic and permission checks, letting you declare row actions declaratively while the library handles navigation, disabling unauthorized actions, and modal confirmations.

## Understanding the Action Components

The Table component exposes three specialized action wrappers that render as dropdown menu items. Each wraps the shared **RowAction** UI element and integrates with Refine’s access-control system.

### Table.ShowAction

**`Table.ShowAction`** generates a navigation link to the resource’s show page. In [`packages/theme/src/table/actions/show.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/show.tsx), the component calls the `useGetShowUrl` hook to construct the URL and check permissions via Refine’s `useCan`. If the user lacks view permission, the button disables automatically and displays the restriction reason as a tooltip.

### Table.EditAction

**`Table.EditAction`** functions identically to ShowAction but targets the edit route. Located in [`packages/theme/src/table/actions/edit.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/edit.tsx), it uses `useGetEditUrl` to generate the edit path (e.g., `/users/edit/:id`) and applies the same permission-based disabling logic.

### Table.DeleteAction

**`Table.DeleteAction`** differs from the navigation actions—it triggers a confirmation modal rather than a route change. Implemented in [`packages/theme/src/table/actions/delete.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/delete.tsx), it leverages `useDeleteHelper` to verify delete permissions and communicates with **DeleteProvider** (defined in [`packages/theme/src/providers/deleteProvider.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/providers/deleteProvider.tsx)) to open the confirmation dialog. Upon confirmation, it executes the delete request and optionally runs an `onAfterHandle` callback.

### RowAction Shared UI

All three actions render through **RowAction**, defined in [`packages/theme/src/table/actions/index.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/index.tsx). This component renders a `DropdownMenuItem` that adapts based on props: it renders as a `<Link>` when a `to` URL is provided (Show/Edit) or as a button with an `onClick` handler (Delete).

## Basic Implementation

Import `Table` from `@ferdiunal/refine-shadcn` and render the actions inside a column’s `cell` function wrapped by `Table.Actions`.

```tsx
import { ListPage, Table } from "@ferdiunal/refine-shadcn";
import { Eye, Edit, Trash2 } from "lucide-react";

export const UserList = () => (
  <ListPage>
    <Table enableSorting enableFilters>
      <Table.Column
        accessorKey="id"
        header="Actions"
        cell={({ row: { original } }) => (
          <Table.Actions>
            <Table.ShowAction
              title="View Details"
              row={original}
              resource="users"
              icon={<Eye size={16} />}
            />
            <Table.EditAction
              title="Edit User"
              row={original}
              resource="users"
              icon={<Edit size={16} />}
            />
            <Table.DeleteAction
              title="Delete User"
              row={original}
              resource="users"
              icon={<Trash2 size={16} />}
            />
          </Table.Actions>
        )}
      />
    </Table>
  </ListPage>
);

```

The `row` prop receives the current row data, and `resource` specifies the Refine resource name for URL generation and permission checks.

## Permission Handling and Architecture

Each action follows a consistent three-step flow defined in the source hooks:

1. **Permission check** – `useGetShowUrl`, `useGetEditUrl`, and `useDeleteHelper` (located in `packages/theme/src/hooks/`) internally call `useCan` to verify access.
2. **Conditional rendering** – The hook returns `{ can, reason, url }`. If `can` is `false`, **RowAction** receives `disabled={true}` and displays `reason` as a tooltip.
3. **Navigation or modal** – Show and Edit actions render as links to the generated `url`. DeleteAction calls `DeleteContext.updateData` to open the modal from `DeleteProvider`.

The `Table` component automatically wraps its children with `DeleteProvider` (see lines 166-168 of [`packages/theme/src/table/index.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/index.tsx)), so you do not need to manually provide the context to use `Table.DeleteAction`.

## Advanced Usage Patterns

### Custom Post-Delete Callbacks

Pass `onAfterHandle` to `Table.DeleteAction` to run logic after successful deletion, such as invalidating queries or showing toast notifications.

```tsx
<Table.DeleteAction
  title="Remove Comment"
  row={original}
  resource="comments"
  icon={<Trash2 size={16} />}
  onAfterHandle={() => {
    toast.success("Comment deleted successfully");
    queryClient.invalidateQueries({ queryKey: ["comments"] });
  }}
/>

```

### Overriding Default Icons and Labels

Each action accepts standard props to customize appearance. The `title` prop sets the tooltip text and accessible label, while `icon` accepts any React element.

```tsx
<Table.ShowAction
  title="Preview"
  row={original}
  resource="posts"
  icon={<EyeOff size={16} />}  // Custom icon
/>

```

## Key Source Files

Reference these locations in the `ferdiunal/refine-shadcn` repository for implementation details:

- [`packages/theme/src/table/index.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/index.tsx) – Core Table component exposing `Table.Actions` and action sub-components.
- [`packages/theme/src/table/actions/show.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/show.tsx) – ShowAction implementation using `useGetShowUrl`.
- [`packages/theme/src/table/actions/edit.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/edit.tsx) – EditAction implementation using `useGetEditUrl`.
- [`packages/theme/src/table/actions/delete.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/delete.tsx) – DeleteAction implementation using `useDeleteHelper`.
- [`packages/theme/src/table/actions/index.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/index.tsx) – RowAction shared UI component.
- [`packages/theme/src/providers/deleteProvider.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/providers/deleteProvider.tsx) – Modal context provider for delete confirmations.
- [`templates/vite-react/src/pages/users/list.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/templates/vite-react/src/pages/users/list.tsx) – Complete working example demonstrating all three actions.

## Summary

- **Table.ShowAction** and **Table.EditAction** generate permission-aware navigation links to show and edit routes using `useGetShowUrl` and `useGetEditUrl`.
- **Table.DeleteAction** triggers a confirmation modal via `DeleteProvider` and handles deletion through `useDeleteHelper`.
- All actions disable automatically when the user lacks permission, showing the restriction reason as a tooltip.
- Wrap actions inside `Table.Actions` within a `Table.Column` cell to render a dropdown menu of row operations.
- The `DeleteProvider` context is included automatically in the `Table` component, requiring no manual setup.

## Frequently Asked Questions

### How do I disable an action manually regardless of permissions?

Pass the `disabled` prop directly to any action component. While the components automatically disable based on `useCan` results, you can force a disabled state by setting `disabled={true}`, which takes precedence in the RowAction component.

### Why is my DeleteAction not opening a modal?

Ensure you are using the `Table` component from `@ferdiunal/refine-shadcn` and not a raw table. The `Table` component internally renders `DeleteProvider` (as seen in [`packages/theme/src/table/index.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/index.tsx)). If you extract the actions for use outside of `Table`, you must manually wrap your application with `DeleteProvider` from the same package.

### Can I use these actions outside of a Table component?

Technically yes, but you lose automatic context integration. The actions expect a `row` object and resource name. For standalone usage, import `RowAction` directly from [`packages/theme/src/table/actions/index.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/table/actions/index.tsx) and provide your own `onClick` or `to` props, though you must manually handle permission checks using Refine’s `useCan` hook.

### How do I customize the delete confirmation modal text?

The modal content is controlled by `DeleteProvider` in [`packages/theme/src/providers/deleteProvider.tsx`](https://github.com/ferdiunal/refine-shadcn/blob/main/packages/theme/src/providers/deleteProvider.tsx). To customize the confirmation text, you would need to shadow or fork the provider component, as the current implementation does not expose props for modal text customization through the action components themselves.