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.
"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;