Build an Expandable / Collapsible Data Table with 2 shadcn/ui Components

• papermark

  26 2,284 9.9 TypeScript

  Papermark is the open-source DocSend alternative with built-in analytics and custom domains.

• shadcn/ui

  149 59,102 9.1 TypeScript

  Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

  

Head over to ui.shadcn.com and grab the component. # run this command in your Next.js project npx shadcn-ui@latest add table Enter fullscreen mode Exit fullscreen mode // components/links-table.tsx import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; export default function LinksTable() { const links = [...] // these are link objects, we'll get there later return (

All linksh2>

NameTableHead> LinkTableHead> ViewsTableHead> TableRow> TableHeader> {links ? ( links.map((link) => ( {link.name}TableCell> {link.id}TableCell> {link.viewCount}TableCell> TableRow> )) ) : null} TableBody> Table> div> div> ); } Enter fullscreen mode Exit fullscreen mode #2 Table Interactivity The logic behind the table's expandability is crucial. We need to ensure smooth transitions and ease of access to data. For this, we are using the second shadcn/ui component: . Head over to ui.shadcn.com and grab the Collapsible component. # run this command in your Next.js project npx shadcn-ui@latest add collapsible Enter fullscreen mode Exit fullscreen mode We are creating a new component that will contain our expanded data of visitors for each link // components/links-visitors.tsx import { TableCell, TableRow } from "@/components/ui/table"; import { Gauge } from "@/components/ui/gauge"; export default function LinksVisitors({linkId}: {linkId: string) { const visitors = [...] // these are the visitor objects based on the linkId return ( <> {visitors ? ( visitors.map((visitor) => ( {visitor.name}TableCell> {visitor.totalDuration}TableCell> TableCell> TableRow> )) ) : null} ); } Enter fullscreen mode Exit fullscreen mode Small excursion ✨ Now, you might ask yourself, what is this component? It's a beautiful Vercel UI component that indicates a status from 0 to 100. I recreated it with Tailwindcss and made it open-source 🎉 More detail and source code in this tweet: https://twitter.com/mfts0/status/1691110169319559169 Ok back to our expanding table. Let's add the component to our first component, the links-table // components/links-table.tsx import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import LinksVisitors from "@/components/links-visitors.tsx" export default function LinksTable() { const links = [...] // these are link objects, we'll get there later return (

All linksh2>

NameTableHead> LinkTableHead> ViewsTableHead> TableRow> TableHeader> {links ? ( links.map((link) => ( <> {link.name}TableCell> {link.id}TableCell> {link.viewCount}

{link.viewCount}div> CollapsibleTrigger> TableCell> TableRow> CollapsibleContent> Collapsible> )) ) : null} TableBody> Table> div> div> ); } Enter fullscreen mode Exit fullscreen mode It's important to note that we have to wrap the TableRow in a fragment (<>) and use the property asChild on the component in order for everything to function properly. And there you have it, an impeccably designed, responsive expandable (or collapsible) table, all set to elevate your data presentation! Collapsed table view Expanded table view Conclusion You've successfully built a responsive, expandable/collapsible table for quick data viewing using Next.js and Tailwindcss. While this article provides a foundational guide, you can further enhance the table, adding sorting functionalities, filters, and more! Thank you for joining me on this journey. I'm Marc, an advocate for open-source software. I'm passionately working on papermark.io - your go-to open-source alternative to DocSend. Help me out! If you found this guide enlightening and have a clearer vision for building simple data tables, please give us a star! Your feedback in the comments propels us forward ❤️ https://github.com/mfts/papermark

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project