Project Data Table

Cards 429

About

Project Data Table This component provides a responsive, animated table for displaying a list of projects. It features a clean, modern design inspired by your image, with status badges and contributor avatars. The rows gracefully animate into view using framer-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Project Data Table to your project and fits it to your theme.

Code

How Project Data Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React, { useState, useMemo } from "react";
import { ProjectDataTable, Project } from "@/components/ui/project-data-table"; // Adjust path as needed
import { Input } from "@/components/ui/input";
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { ListFilter, Columns } from "lucide-react";

// --- MOCK DATA ---
const mockProjects: Project[] = [
    { id: "proj-01", name: "ShadCN Clone", repository: "https://github.com/ruixenui/ruixen-buttons", team: "UI Guild", tech: "Next.js", createdAt: "2024-06-01", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg", alt: "User 1", fallback: "U1" }, { src: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg", alt: "User 2", fallback: "U2" }], status: { text: "Active", variant: "active" } },
    { id: "proj-02", name: "RUIXEN Components", repository: "https://github.com/ruixenui/ruixen-buttons", team: "Component Devs", tech: "React", createdAt: "2024-05-22", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/d3/d34ef3efc6b0394c8619c72468c326f88ef56f849670d7b316c237de61f01a18.jpg", alt: "User 3", fallback: "U3" }, { src: "https://cdn.21st.dev/assets/mirror/cc/ccedc2f61c957400a3092c930403ad45edd8e7b1597868aca97a91ceb81d773c.jpg", alt: "User 4", fallback: "U4" }, { src: "https://cdn.21st.dev/assets/mirror/d5/d54ea6604bc1b3bb37b31bb96a4811ce47d8c83c170ae46071440284f5fa2abf.jpg", alt: "User 5", fallback: "U5" }], status: { text: "Progress", variant: "inProgress" } },
    { id: "proj-03", name: "CV Jobs Platform", repository: "https://github.com/ruixenui/ruixen-buttons", team: "CV Core", tech: "Spring Boot", createdAt: "2024-06-05", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/b7/b78f8c42f62ae61f6ebe5c4e79f3af27f49dc05c4f366d2be599d1e14318be86.jpg", alt: "User 6", fallback: "U6" }], status: { text: "Active", variant: "active" } },
    { id: "proj-04", name: "Ruixen UI Docs", repository: "https://github.com/ruixenui/ruixen-buttons", team: "Tech Writers", tech: "Markdown", createdAt: "2024-04-19", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/38/388de849a8a0cac613d63c4a11e61f3b2f853997ac9b5d28e4268d41ece147a5.jpg", alt: "User 7", fallback: "U7" }, { src: "https://cdn.21st.dev/assets/mirror/d0/d066ce85ffca59255ef063ca3ebbcd4f31531ad3ea85bd54f59b79568d4c0fb3.jpg", alt: "User 8", fallback: "U8" }], status: { text: "Active", variant: "active" } },
    { id: "proj-05", name: "Job Portal Analytics", repository: "https://github.com/ruixenui/ruixen-buttons", team: "Data Squad", tech: "Python", createdAt: "2024-03-30", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/c9/c9038553755a8c1c3753ccd0a14af4854745b83bd3a97609f81d2c0d48f35517.jpg", alt: "User 9", fallback: "U9" }], status: { text: "Active", variant: "active" } },
    { id: "proj-06", name: "Ui Ux Design", repository: "https://github.com/ruixenui/ruixen-buttons", team: "Infra", tech: "Socket.io", createdAt: "2024-06-03", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/cd/cdefddb3068a0bc9ce7cbd5afaca815e5649326e72d81e5ca6f3dc34551d7bc8.jpg", alt: "User 10", fallback: "U10" }, { src: "https://cdn.21st.dev/assets/mirror/81/8177f9ffe3b332b2ae9dce0dfa11858f3627fafceee971fac39652f45a5c67b7.jpg", alt: "User 11", fallback: "U11" }], status: { text: "Active", variant: "active" } },
    { id: "proj-01", name: "ShadCN Clone", repository: "https://github.com/ruixenui/ruixen-buttons", team: "UI Guild", tech: "Next.js", createdAt: "2024-06-01", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/ff/ff4b0fe2f7d11aff0d68f760e5fdcfeebf8b884c024ae24c9a6cf1d2edf76f49.jpg", alt: "User 1", fallback: "U1" }, { src: "https://cdn.21st.dev/assets/mirror/a3/a37358a09c532474e3246a94e5e5104b1b6b6907f83b44259509f8c776506120.jpg", alt: "User 2", fallback: "U2" }], status: { text: "Active", variant: "active" } },
    { id: "proj-02", name: "RUIXEN Components", repository: "https://github.com/ruixenui/ruixen-buttons", team: "Component Devs", tech: "React", createdAt: "2024-05-22", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/d3/d34ef3efc6b0394c8619c72468c326f88ef56f849670d7b316c237de61f01a18.jpg", alt: "User 3", fallback: "U3" }, { src: "https://cdn.21st.dev/assets/mirror/cc/ccedc2f61c957400a3092c930403ad45edd8e7b1597868aca97a91ceb81d773c.jpg", alt: "User 4", fallback: "U4" }, { src: "https://cdn.21st.dev/assets/mirror/d5/d54ea6604bc1b3bb37b31bb96a4811ce47d8c83c170ae46071440284f5fa2abf.jpg", alt: "User 5", fallback: "U5" }], status: { text: "Progress", variant: "inProgress" } },
    { id: "proj-03", name: "CV Jobs Platform", repository: "https://github.com/ruixenui/ruixen-buttons", team: "CV Core", tech: "Spring Boot", createdAt: "2024-06-05", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/b7/b78f8c42f62ae61f6ebe5c4e79f3af27f49dc05c4f366d2be599d1e14318be86.jpg", alt: "User 6", fallback: "U6" }], status: { text: "Active", variant: "active" } },
    { id: "proj-04", name: "Ruixen UI Docs", repository: "https://github.com/ruixenui/ruixen-buttons", team: "Tech Writers", tech: "Markdown", createdAt: "2024-04-19", contributors: [{ src: "https://cdn.21st.dev/assets/mirror/38/388de849a8a0cac613d63c4a11e61f3b2f853997ac9b5d28e4268d41ece147a5.jpg", alt: "User 7", fallback: "U7" }, { src: "https://cdn.21st.dev/assets/mirror/d0/d066ce85ffca59255ef063ca3ebbcd4f31531ad3ea85bd54f59b79568d4c0fb3.jpg", alt: "User 8", fallback: "U8" }], status: { text: "Active", variant: "active" } },
];

const allColumns: (keyof Project)[] = ["name", "repository", "team", "tech", "createdAt", "contributors", "status"];

const Demo = () => {
  const [techFilter, setTechFilter] = useState("");
  const [statusFilter, setStatusFilter] = useState<string>("all");
  const [visibleColumns, setVisibleColumns] = useState<Set<keyof Project>>(new Set(allColumns));

  const filteredProjects = useMemo(() => {
    return mockProjects.filter((project) => {
      const techMatch = techFilter === "" || project.tech.toLowerCase().includes(techFilter.toLowerCase());
      const statusMatch = statusFilter === "all" || project.status.variant === statusFilter;
      return techMatch && statusMatch;
    });
  }, [techFilter, statusFilter]);

  const toggleColumn = (column: keyof Project) => {
    setVisibleColumns((prev) => {
      const newSet = new Set(prev);
      if (newSet.has(column)) {
        newSet.delete(column);
      } else {
        newSet.add(column);
      }
      return newSet;
    });
  };

  return (
    <div className="container mx-auto p-4 md:p-6">
      <div className="flex flex-col gap-4 mb-6 sm:flex-row sm:items-center">
        <div className="flex flex-1 gap-4">
          <Input
            placeholder="Filter by technology..."
            value={techFilter}
            onChange={(e) => setTechFilter(e.target.value)}
            className="max-w-xs"
          />
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" className="flex items-center gap-2">
                <ListFilter className="h-4 w-4" />
                <span>Status</span>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuLabel>Filter by Status</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuCheckboxItem checked={statusFilter === "all"} onCheckedChange={() => setStatusFilter("all")}>All</DropdownMenuCheckboxItem>
              <DropdownMenuCheckboxItem checked={statusFilter === "active"} onCheckedChange={() => setStatusFilter("active")}>Active</DropdownMenuCheckboxItem>
              <DropdownMenuCheckboxItem checked={statusFilter === "inProgress"} onCheckedChange={() => setStatusFilter("inProgress")}>In Progress</DropdownMenuCheckboxItem>
              <DropdownMenuCheckboxItem checked={statusFilter === "onHold"} onCheckedChange={() => setStatusFilter("onHold")}>On Hold</DropdownMenuCheckboxItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" className="flex items-center gap-2">
              <Columns className="h-4 w-4" />
              <span>Columns</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {allColumns.map((column) => (
              <DropdownMenuCheckboxItem
                key={column}
                className="capitalize"
                checked={visibleColumns.has(column)}
                onCheckedChange={() => toggleColumn(column)}
              >
                {column}
              </DropdownMenuCheckboxItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>

      <ProjectDataTable projects={filteredProjects} visibleColumns={visibleColumns} />
    </div>
  );
};

export default Demo;