tablecn: جدول حرفهای با shadcn و Next.js
جاوااسکریپت
فرانتاندخلاصهٔ کاملتر
tablecn یه پروژه اپنسورس هست که یه کامپوننت جدول قدرتمند و آماده برای اپهای Next.js ارائه میده. اگه تا حالا درد کشیدی که بخوای جدولهای دادهای با فیلتر و سورت و صفحهبندی سمت سرور بسازی، این پروژه دقیقاً برای همین دردسر ساخته شده.
پروژه با create-t3-app بوتاسترپ شده و از یه تکاستک منسجم و مدرن استفاده میکنه: Next.js به عنوان فریمورک، Tailwind CSS برای استایلدهی، shadcn/ui برای کامپوننتهای UI، TanStack React Table برای منطق جدول، PlanetScale به عنوان دیتابیس، Drizzle ORM برای ارتباط با دیتابیس، و Zod برای ولیدیشن دادهها.
یکی از مهمترین ویژگیهای tablecn اینه که تمام عملیات سنگین مثل سورت، فیلتر و صفحهبندی کاملاً سمت سرور انجام میشه. این یعنی حتی با حجم بالای داده هم پرفورمنس خوبی خواهی داشت و مرورگر کاربر زیر بار داده نمیره.
فیلترهای جدول به صورت خودکار از تعریف ستونها تولید میشن که این خودش یه صرفهجویی بزرگ در وقت توسعهست. علاوه بر اون یه Data-Table-Toolbar داینامیک داری که شامل جستجو، فیلتر و اکشنها میشه.
از نظر تجربه کاربری، سیستم فیلترگذاری پیشرفتهای شبیه Notion و Airtable داره که کاربرها میتونن فیلترهای ترکیبی بسازن. همچنین یه منوی فیلتر شبیه Linear هم وجود داره که از command palette الهام گرفته و تجربه کاربری روانی ارائه میده. وقتی هم ردیفهایی انتخاب بشن، یه نوار اکشن ظاهر میشه که امکان عملیات دستهجمعی رو میده.
برای راهاندازی محلی دو روش وجود داره: روش سریع با Docker که با چند دستور ساده همه چیز رو نصب میکنه، دیتابیس PostgreSQL رو راه میندازه و دادههای نمونه رو هم وارد میکنه؛ یا روش دستی که میتونی از یه دیتابیس PostgreSQL موجود استفاده کنی و تنظیمات محیطی رو خودت ست کنی.
برای دیپلوی هم این پروژه با Vercel، Netlify و Docker سازگاره و میشه به راحتی روی اونها منتشرش کرد.
نکات کلیدی:
- جدول دادهای آماده با Next.js و shadcn/ui
- سورت، فیلتر و صفحهبندی کاملاً سمت سرور
- فیلترهای خودکار بر اساس تعریف ستونها
- فیلترگذاری پیشرفته شبیه Notion و Airtable
- منوی فیلتر command palette الهامگرفته از Linear
- نوار اکشن روی انتخاب ردیفها
- راهاندازی آسان با Docker یا PostgreSQL موجود
- پشتیبانی از دیپلوی روی Vercel، Netlify و Docker
