‏react-data-table-component نسخه‌ی ۸؛ جدول داده‌ی بدون دردسر

کتابخانه‌ی react-data-table-component به نسخه‌ی ۸.۰ رسید؛ یک جدول داده برای ری‌اکت که شعارش «از جعبه کار می‌کنه» است. مرتب‌سازی، صفحه‌بندی، انتخاب ردیف، تم، ردیف‌های بازشونده و فیلتر ستونی همه از پیش واردن، بدون boilerplate، بدون کار استایل و بدون لایسنس گران.

شروع کار واقعاً کم‌حجمه؛ بدون فایل CSS یا پیکربندی، فقط داده و تعریف ستون‌ها:

import DataTable from 'react-data-table-component';

const columns = [
  { name: 'Name', selector: row => row.name, sortable: true },
  { name: 'Role', selector: row => row.role },
  { name: 'Salary', selector: row => row.salary, right: true },
];

export default function App() {
  return <DataTable columns={columns} data={data} pagination />;
}

از قابلیت‌های شاخص می‌شه به تایپ کامل (نوع ستون‌ها از روی داده استنتاج می‌شه)، پنج تم داخلی با حالت تاریک، مرتب‌سازی و صفحه‌بندی سمت کلاینت و سرور، انتخاب چندتایی با چک‌باکس، ستون‌های قابل‌تغییر اندازه و گروه‌بندی ستون‌ها اشاره کرد. این کتابخانه بدون peer dependency است و در Next.js (App Router)، Remix و Astro بدون هشدار کار می‌کنه و خودش "use client" را اضافه می‌کنه.

در مقایسه با گزینه‌های دیگه، نویسنده تأکید می‌کنه که برخلاف TanStack Table (که headless است و نیاز به استایل و پیاده‌سازی دستی داره) این کتابخانه همه‌چیز را آماده می‌ده، و برخلاف AG Grid از ردیف‌های بازشونده پشتیبانی می‌کنه و peer dependency نداره. این پروژه از ۲۰۱۸ فعالانه نگه‌داری می‌شه، بیش از ۲۱۸ هزار دانلود هفتگی داره و رایگانه.

نکات کلیدی:

• جدول داده‌ی آماده برای ری‌اکت با مرتب‌سازی، صفحه‌بندی و انتخاب ردیف از جعبه
• بدون peer dependency، سازگار با React 18+ و SSR/Next.js
• پنج تم داخلی با حالت تاریک و امکان ساخت تم سفارشی
• رایگان، با بیش از ۲۱۸ هزار دانلود هفتگی و نگه‌داری از ۲۰۱۸