tanstack-shadcn-table
Version:
A powerful, feature-rich React table component built on top of TanStack Table v8 with shadcn/ui styling. Optimized bundle size with 55% reduction through peer dependencies.
111 lines (110 loc) • 2.75 kB
TypeScript
import * as React from "react";
import { Row } from "@tanstack/react-table";
export interface RowAction<T = unknown> {
/**
* Unique identifier for the action
*/
id: string;
/**
* Label to display
*/
label: string;
/**
* Icon component (from lucide-react)
*/
icon?: React.ComponentType<{
className?: string;
}>;
/**
* Click handler
*/
onClick: (row: Row<T>) => void;
/**
* Whether the action is disabled
*/
disabled?: boolean | ((row: Row<T>) => boolean);
/**
* Whether the action is destructive (will be styled differently)
*/
destructive?: boolean;
/**
* Separator before this action
*/
separator?: boolean;
}
export interface RowActionsProps<T = unknown> {
/**
* The table row
*/
row: Row<T>;
/**
* Array of actions to display
*/
actions: RowAction<T>[];
/**
* Custom trigger button (optional)
*/
trigger?: React.ReactNode;
/**
* Alignment of the dropdown menu
*/
align?: "start" | "center" | "end";
/**
* Side of the trigger to show the dropdown
*/
side?: "top" | "right" | "bottom" | "left";
/**
* Additional className for the trigger button
*/
className?: string;
/**
* Size of the trigger button
*/
size?: "default" | "sm" | "lg" | "icon";
}
/**
* RowActions - A flexible row actions component for table rows
*
* Displays a dropdown menu with customizable actions for each table row.
*
* @example
* ```tsx
* import { RowActions } from "tanstack-shadcn-table/table-elements";
* import { Edit, Trash2, Eye } from "lucide-react";
*
* const columns: ColumnDef<Person>[] = [
* // ... other columns
* {
* id: "actions",
* header: "Actions",
* cell: ({ row }) => (
* <RowActions
* row={row}
* actions={[
* {
* id: "view",
* label: "View",
* icon: Eye,
* onClick: (row) => console.log("View", row.original),
* },
* {
* id: "edit",
* label: "Edit",
* icon: Edit,
* onClick: (row) => console.log("Edit", row.original),
* },
* {
* id: "delete",
* label: "Delete",
* icon: Trash2,
* destructive: true,
* onClick: (row) => console.log("Delete", row.original),
* },
* ]}
* />
* ),
* },
* ];
* ```
*/
export declare function RowActions<T>({ row, actions, trigger, align, side, className, size, }: Readonly<RowActionsProps<T>>): import("react/jsx-runtime").JSX.Element | null;