Dashboard Tables

Dashboard tables made easy with a 2 files config!

• Component: <TableComponent/>

• Path: /components/table/table.tsx

• Import:

import { TableComponent } from "@/components/table/table";

Dashboard 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 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:

import { TableComponent } from "@/components/table/table";
import { [YOUR_FOLDER]_columns } from "data/dashboard/[YOUR_FOLDER]/columns";
...
<TableComponent
    data={data}
    columns={[YOUR_FOLDER]_columns}
    isLoading={isLoading}
    error={error}
    sort={{ id: "title", desc: true }}
/>

1. Define the columns in /data/config/[YOUR_FOLDER]/columns.tsx:

   Check TanStack-Table documentation for more informations.

Suggestion Table Columns example

"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<SuggestionWithCategory>[] = [
  {
    id: "select",
    header: ({ table }) => (
      <Checkbox
        checked={
          table.getIsAllPageRowsSelected() ||
          (table.getIsSomePageRowsSelected() && "indeterminate")
        }
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label="Select all"
        className="translate-y-[2px]"
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label="Select row"
        className="translate-y-[2px]"
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "id",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Suggestion" />
    ),
    cell: ({ row }) => (
      <TooltipProvider delayDuration={100}>
        <Tooltip>
          <TooltipTrigger asChild>
            <div className="w-16 truncate">{row.getValue("id")}</div>
          </TooltipTrigger>
          <TooltipContent>
            <p>{row.getValue("id")}</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    accessorKey: "title",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Title" />
    ),
    cell: ({ row }) => <div className="w-48">{row.getValue("title")}</div>,
    enableHiding: false,
  },
  {
    accessorKey: "owner",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Owner" />
    ),
    cell: ({ row }) => <div className="w-32">{row.getValue("owner")}</div>,
    enableHiding: false,
  },
  {
    accessorKey: "category",
    accessorFn: (row) => row.category?.name,
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Category" />
    ),
    cell: ({ row }) => (
      <div className="w-32">
        <Badge>{row.getValue("category")}</Badge>
      </div>
    ),
    enableHiding: false,
  },
  {
    accessorKey: "link",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Link" />
    ),
    cell: ({ row }) => (
      <TooltipProvider delayDuration={100}>
        <Tooltip>
          <TooltipTrigger asChild>
            <a
              href={row.getValue("link")}
              target="_blank"
              rel="noreferrer"
              className="w-[80px]"
            >
              <Button variant="outline" size="icon">
                <ExternalLink className="h-4 w-4" />
              </Button>
            </a>
          </TooltipTrigger>
          <TooltipContent>
            <p>{row.getValue("link")}</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    ),
    enableSorting: false,
  },
  {
    accessorKey: "comment",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Comment" />
    ),
    cell: ({ row }) => (
      <div className="line-clamp-3 w-64">{row.getValue("comment")}</div>
    ),
    enableSorting: false,
  },
  {
    accessorKey: "status",
    header: ({ column }) => (
      <DataTableColumnHeader column={column} title="Status" />
    ),
    cell: ({ row }) => {
      const status = statuses.find(
        (status) => status.value === row.getValue("status"),
      );

      if (!status) {
        return null;
      }

      return (
        <Badge variant="secondary">
          {status.icon && (
            <status.icon className="mr-2 h-4 w-4 text-muted-foreground" />
          )}
          <span>{status.label}</span>
        </Badge>
      );
    },
    filterFn: (row, id, value) => {
      return value.includes(row.getValue(id));
    },
  },
  // {
  //   accessorKey: "priority",
  //   header: ({ column }) => (
  //     <DataTableColumnHeader column={column} title="Priority" />
  //   ),
  //   cell: ({ row }) => {
  //     const priority = priorities.find(
  //       (priority) => priority.value === row.getValue("priority"),
  //     );

  //     if (!priority) {
  //       return null;
  //     }

  //     return (
  //       <div className="flex items-center">
  //         {priority.icon && (
  //           <priority.icon className="mr-2 h-4 w-4 text-muted-foreground" />
  //         )}
  //         <span>{priority.label}</span>
  //       </div>
  //     );
  //   },
  //   filterFn: (row, id, value) => {
  //     return value.includes(row.getValue(id));
  //   },
  // },
  {
    id: "actions",
    cell: ({ row }) => <DataTableRowActions row={row} />,
  },
];

1. Create your Actions page (delete/edit...) in the same folder /data/config/[YOUR_FOLDER]/actions.tsx

   Suggestion Table Actions example

   "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!

If you want to build a more specific table, follow the comprehensive Shadcn/ui guide.