Decide what activating a record should do before adding row actions. Use consultation for reading, an edit form for changes, and explicit links for navigation.

Built-in capabilities

allowCreate, allowEdit, allowDuplicate and allowDelete control built-in affordances. Supply the corresponding create, update, duplicate and delete actions. Row guards refine permissions. Do not enable a mutation merely to show its button when no handler exists.

Row click modes

rowClickMode accepts default, activate, edit, link or none. default opens the record view in every display mode — the application's onOpenDetails/onRowActivate when provided, otherwise the built-in record view, with fields derived from the columns when details is not given. enableRowClickEdit or rowClickMode: 'edit' opens the edit form instead, and a row-link column still navigates. Pass details={false} (:details="false" in Vue) to remove the built-in record view, or rowClickMode: 'none' to turn clicks off entirely. Use onRowActivate to coordinate a host detail panel; onRowClick handles row-link navigation. Row action menus show the Info entry whenever the record view is reachable. Keep links and inline editing separate from row-click editing.

Complete examples

See record consultation for a working detail configuration, permissions for row predicates, and the record recipe for editing, activity and undo. DataTable reference documents callback parameters; React bulk callbacks receive TanStack rows, whereas Vue receives records directly.

Custom row actions

DataTable.rowActions appends application actions to the standard menu. Each item has type, label, an optional icon, disabled (boolean or row predicate), and onClick(row). Use React's icon node or Vue's iconComponent for framework-native icons. The backend must recheck permissions. Native media configuration supplies Preview and Copy link automatically; avoid adding duplicate actions. Info opens the record and is distinct from Preview.

Try it inline

Select rows, open the actions menu and compare the available operations for a locked record.

Expand ↗

Sample data. Changes stay in this preview.

recipe-admin.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Archive, type LucideProps } from "lucide-react";
import { NuqsAdapter } from "nuqs/adapters/react";
import { useState } from "react";
import { Toaster } from "sonner";
import { DataTable } from "@/components/ui/yayaw-table";
import { adminMutations } from "../shared/admin-mutations";
import { getAdminActions } from "./admin-actions";
import { adminConfig } from "./admin-config";
import { getFormConfig } from "./get-form-config";
import type { ExamplePresentation } from "./presentation";

const getConfig = () => adminConfig;

// Custom bulk actions accept a function component for their icon.
const ArchiveIcon = (props: LucideProps) => <Archive {...props} />;

export default function AdminRecipe(presentation: ExamplePresentation = {}) {
  const [queryClient] = useState(() => new QueryClient());
  return (
    <QueryClientProvider client={queryClient}>
      <NuqsAdapter>
        <DataTable
          {...presentation}
          customBulkActions={(selection) => [
            {
              id: "archive-products",
              icon: ArchiveIcon,
              label: "Archive",
              confirm: {
                title: "Archive selected products?",
                description:
                  "Archived products remain visible but cannot be edited or selected.",
                confirmLabel: "Archive",
              },
              onClick: async () => {
                const result = adminMutations.bulkUpdate(
                  selection.selectedOriginalRows.map((row) => String(row.id)),
                  { status: "archived" }
                );
                await queryClient.invalidateQueries({
                  queryKey: ["tableData", "recipe-admin"],
                });
                return {
                  ...result,
                  clearSelection: result.success,
                  closeMenu: result.success,
                };
              },
            },
          ]}
          getFormConfig={getFormConfig}
          getRowId={(row) => String(row.id)}
          getTableActions={getAdminActions}
          getTableConfig={getConfig}
          tableId="recipe-admin"
          tableType="products"
          title={presentation.title ?? "Admin"}
        />
        <Toaster />
      </NuqsAdapter>
    </QueryClientProvider>
  );
}