# Dashboard Tables * **Component**: \ * **Path**: /components/table/table.tsx * **Import**: ```typescript import { TableComponent } from "@/components/table/table"; ```

*Table components can be tedious to set up...* DirectoryFast attempts to solve this problem by using and simplifying the already excellent [Shadcn/ui Table](https://ui.shadcn.com/docs/components/data-table) components, and adding its own logic for maximum reusability. To add a new table to your dashboard (or wherever you need one), simply follow these 3 steps: 1. Add the Table component with your data to your page: ```typescript import { TableComponent } from "@/components/table/table"; import { [YOUR_FOLDER]_columns } from "data/dashboard/[YOUR_FOLDER]/columns"; ... ``` 2. Define the columns in `/data/config/[YOUR_FOLDER]/columns.tsx`: Check [TanStack-Table documentation](https://tanstack.com/table/latest/docs/api/core/column-def) for more informations. {% code title="Suggestion Table Columns example" overflow="wrap" lineNumbers="true" %} ```typescript "use client"; import { Suggestion } from "@prisma/client"; import { ColumnDef } from "@tanstack/react-table"; import { ExternalLink } from "lucide-react"; import { DataTableColumnHeader } from "@/components/table/table-column-header"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { statuses } from "@/lib/tables/data"; import { DataTableRowActions } from "./actions"; interface SuggestionWithCategory extends Suggestion { category: { name: string; }; } export const suggestions_columns: ColumnDef[] = [ { id: "select", header: ({ table }) => ( table.toggleAllPageRowsSelected(!!value)} aria-label="Select all" className="translate-y-[2px]" /> ), cell: ({ row }) => ( row.toggleSelected(!!value)} aria-label="Select row" className="translate-y-[2px]" /> ), enableSorting: false, enableHiding: false, }, { accessorKey: "id", header: ({ column }) => ( ), cell: ({ row }) => (

{row.getValue("id")}

), enableSorting: false, enableHiding: false, }, { accessorKey: "title", header: ({ column }) => ( ), cell: ({ row }) =>

{row.getValue("title")}

, enableHiding: false, }, { accessorKey: "owner", header: ({ column }) => ( ), cell: ({ row }) =>

{row.getValue("owner")}

, enableHiding: false, }, { accessorKey: "category", accessorFn: (row) => row.category?.name, header: ({ column }) => ( ), cell: ({ row }) => (

{row.getValue("category")}

), enableHiding: false, }, { accessorKey: "link", header: ({ column }) => ( ), cell: ({ row }) => (

{row.getValue("link")}

), enableSorting: false, }, { accessorKey: "comment", header: ({ column }) => ( ), cell: ({ row }) => (

{row.getValue("comment")}

), enableSorting: false, }, { accessorKey: "status", header: ({ column }) => ( ), cell: ({ row }) => { const status = statuses.find( (status) => status.value === row.getValue("status"), ); if (!status) { return null; } return ( {status.icon && ( )} {status.label} ); }, filterFn: (row, id, value) => { return value.includes(row.getValue(id)); }, }, // { // accessorKey: "priority", // header: ({ column }) => ( // // ), // cell: ({ row }) => { // const priority = priorities.find( // (priority) => priority.value === row.getValue("priority"), // ); // if (!priority) { // return null; // } // return ( //

// {priority.icon && ( // // )} // {priority.label} //

// ); // }, // filterFn: (row, id, value) => { // return value.includes(row.getValue(id)); // }, // }, { id: "actions", cell: ({ row }) => , }, ]; ``` {% endcode %} 3. Create your Actions page (delete/edit...) in the same folder `/data/config/[YOUR_FOLDER]/actions.tsx`

"use client";

   import { useState } from "react";

   import { zodResolver } from "@hookform/resolvers/zod";
   import { Category } from "@prisma/client";
   import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
   import { Row } from "@tanstack/react-table";
   import { MoreHorizontal } from "lucide-react";
   import { useSession } from "next-auth/react";
   import { useForm } from "react-hook-form";
   import * as z from "zod";

   import { LoadingSpinner } from "@/components/shared/icons";
   import { Button } from "@/components/ui/button";
   import { Dialog, DialogTrigger } from "@/components/ui/dialog";
   import {
     DialogContent,
     DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
   } from "@/components/ui/dialog";
   import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuSeparator,
     DropdownMenuTrigger,
   } from "@/components/ui/dropdown-menu";
   import {
     Form,
     FormControl,
     FormDescription,
     FormField,
     FormItem,
     FormLabel,
     FormMessage,
   } from "@/components/ui/form";
   import { Input } from "@/components/ui/input";
   import {
     Select,
     SelectContent,
     SelectItem,
     SelectTrigger,
     SelectValue,
   } from "@/components/ui/select";
   import { Textarea } from "@/components/ui/textarea";
   import { toast, useToast } from "@/components/ui/use-toast";
   import { metadata } from "@/data/config/metadata";

   interface DataTableRowActionsProps<TData> {
     row: Row<TData>;
   }

   export function DataTableRowActions<TData>({
     row,
   }: DataTableRowActionsProps<TData>) {
     const [open, setOpen] = useState(false);

     return (
       <Dialog open={open} onOpenChange={setOpen}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button
               variant="ghost"
               className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
             >
               <MoreHorizontal className="h-4 w-4" />
               <span className="sr-only">Open menu</span>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-[160px]">
             <DialogTrigger asChild>
               <DropdownMenuItem>Edit</DropdownMenuItem>
             </DialogTrigger>
             <DropdownMenuSeparator />
             <TableActionDelete row={row} />
           </DropdownMenuContent>
         </DropdownMenu>
         <TableActionEdit setOpen={setOpen} row={row} />
       </Dialog>
     );
   }

   //EDIT
   const formSchema = z.object({
     title: z.string().min(2).max(150),
     owner: z.string().min(2).max(150),
     category: z.union([z.string().min(2).max(100).optional(), z.literal("")]),
     link: z.union([z.string().min(5).max(255).optional(), z.literal("")]),
     comment: z.union([z.string().min(3).max(255).optional(), z.literal("")]),
   });

   export const TableActionEdit = ({
     setOpen,
     row,
   }: {
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
     row: any;
   }) => {
     const queryClient: any = useQueryClient();

     const session = useSession();
     const userId = session?.data?.user?.id;

     const {
       isLoading,
       error,
       data: categories,
     } = useQuery({
       queryKey: ["categories"],
       queryFn: async () => {
         const res = await fetch("/api/categories");
         return res.json();
       },
     });

     const { toast } = useToast();

     const form = useForm<z.infer<typeof formSchema>>({
       resolver: zodResolver(formSchema),
       defaultValues: {
         title: row.original.title || undefined,
         owner: row.original.owner || undefined,
         category: row.original.category.slug || undefined,
         link: row.original.link || undefined,
         comment: row.original.comment || undefined,
       },
     });

     const mutation = useMutation({
       mutationFn: async (values: z.infer<typeof formSchema>) => {
         const res = await fetch(`/api/suggestions/${row.original.id}`, {
           method: "PATCH",
           body: JSON.stringify(values),
           headers: {
             "Content-Type": "application/json",
           },
         });
         return res.json();
       },
       onSuccess: () => {
         queryClient.invalidateQueries({ queryKey: [`product-sub-${userId}`] });
         toast({
           title: `Updating ${metadata.productLabel} suggestion`,
           description: `Your ${metadata.productLabel} suggestion has been updated before review.`,
         });
         setOpen(false);
         form.reset();
       },
       onError: () => {
         toast({
           title: "Error",
           description: `An error occurred while submitting your ${metadata.productLabel}.`,
           variant: "destructive",
         });
       },
     });

     function onSubmit(values: z.infer<typeof formSchema>) {
       mutation.mutate(values);
     }

     return (
       <>
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Edit a {metadata.productLabel} suggestion</DialogTitle>
             <DialogDescription>
               You can edit your {metadata.productLabel} suggestion before it is
               reviewed.
             </DialogDescription>
           </DialogHeader>
           <Form {...form}>
             <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
               <div className="grid gap-4 py-4">
                 <FormField
                   control={form.control}
                   name="title"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel className="capitalize">
                         {metadata.productLabel} Title
                       </FormLabel>
                       <FormControl>
                         <Input
                           placeholder={`An awesome ${metadata.productLabel}`}
                           defaultValue={field.value}
                           {...field}
                         />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
                 <FormField
                   control={form.control}
                   name="owner"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>Owner</FormLabel>
                       <FormControl>
                         <Input
                           placeholder="An awesome guy"
                           defaultValue={field.value}
                           {...field}
                         />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
                 <FormField
                   control={form.control}
                   name="category"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>Category</FormLabel>
                       <Select
                         onValueChange={field.onChange}
                         defaultValue={field.value}
                       >
                         <FormControl>
                           <SelectTrigger>
                             <SelectValue placeholder="Select a category" />
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
                           {isLoading && <LoadingSpinner />}
                           {error && "An error has occurred, please try again."}
                           {categories?.map((category: Category) => (
                             <SelectItem key={category.id} value={category.slug}>
                               {category.name}
                             </SelectItem>
                           ))}
                         </SelectContent>
                       </Select>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
                 <FormField
                   control={form.control}
                   name="link"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>URL</FormLabel>
                       <FormControl>
                         <Input
                           placeholder="https://awesomeproduct.com"
                           defaultValue={field.value}
                           {...field}
                         />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
                 <FormField
                   control={form.control}
                   name="comment"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>Comment</FormLabel>
                       <FormControl>
                         <Textarea
                           maxLength={255}
                           placeholder={`This ${metadata.productLabel} is a good addition because...`}
                           defaultValue={field.value}
                           {...field}
                           className="resize-none"
                         />
                       </FormControl>
                       <FormDescription>
                         This is optional, but it will help us review your{" "}
                         {metadata.productLabel}
                         faster.
                       </FormDescription>
                       <FormMessage />
                     </FormItem>
                   )}
                 />
               </div>
               <DialogFooter>
                 <Button type="submit">Suggest {metadata.productLabel}</Button>
               </DialogFooter>
             </form>
           </Form>
         </DialogContent>
       </>
     );
   };

   // DELETE
   function TableActionDelete<TData>({ row }: DataTableRowActionsProps<TData>) {
     const queryClient = useQueryClient();

     const session = useSession();
     const userId = session?.data?.user?.id;

     const suggestion: any = row.original;
     const deleteMutation = useMutation({
       mutationKey: [`suggestion-${suggestion.id}`],
       mutationFn: async () => {
         const res = await fetch(`/api/suggestions/${suggestion.id}`, {
           method: "DELETE",
         });
         return res.json();
       },
       onSuccess: () => {
         toast({
           title: "Suggestion deleted",
           description: "The suggestion has been deleted.",
         });
         queryClient.invalidateQueries({ queryKey: [`product-sub-${userId}`] });
       },
       onError: () => {
         toast({
           title: "Error",
           description: "Something went wrong. Please try again.",
           variant: "destructive",
         });
       },
     });
     return (
       <DropdownMenuItem onClick={() => deleteMutation.mutate()}>
         Delete
       </DropdownMenuItem>
     );
   }

Your Table is now functional! {% hint style="info" %} If you want to build a more specific table, follow the comprehensive [Shadcn/ui guide](https://ui.shadcn.com/docs/components/data-table). {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.directoryfa.st/directory-components/dashboard-tables.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.