# 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 %}