گروه‌بندی ردیف‌ها، تجمیع، دادهٔ درختی، جزئیات زیر ردیف (master/detail) و خروجی Excel در AG Grid جزو Enterprise هستند: استفاده در محیط عملیاتی به لایسنس تجاری نیاز دارد، و بدون کلید، جدول واترمارک نشان می‌دهد و خطایی در کنسول ثبت می‌کند. جدول دادهٔ Needless UI گروه‌بندی با جمع کل، دادهٔ درختی، جزئیات ردیف و خروجی .xlsx را با مجوز MIT دارد. این راهنما یک اپ Angular را از یکی به دیگری منتقل می‌کند: چه چیزهایی منتقل می‌شوند، چه چیزهایی نه، و کد چگونه تغییر می‌کند.
این راهنما از نام‌های AG Grid 36 استفاده می‌کند. AG Grid 36 از Angular 20 تا 22 پشتیبانی می‌کند؛ Needless UI به Angular 22 نیاز دارد.
چه به دست می‌آورید
| قابلیت | AG Grid | Needless UI |
|---|---|---|
| گروه‌بندی ردیف‌ها، با مقادیر تجمیعی و ردیف جمع کل | Enterprise | بله: در چند سطح، با جمع، میانگین، کمینه، بیشینه، تعداد یا یک تابع |
| دادهٔ درختی | Enterprise | بله، از ردیف‌های تودرتو |
| جزئیات زیر ردیف (master/detail) | Enterprise | بله: هر قالبی زیر ردیف، حتی یک جدول دیگر |
| خروجی Excel | Enterprise: استایل‌ها، چند کاربرگ، تصویر و فرمول | بله: یک کاربرگ با سلول‌های دارای نوع داده، قالب‌بندی اعداد و ردیف سرستون ثابت با فیلتر |
| منوی ستون با انتخابگر ستون‌ها | Enterprise | بله: مرتب‌سازی، فیلتر، سنجاق، جابه‌جایی، هم‌عرض کردن با محتوا و پنهان کردن هر ستون، و نمایش یا پنهان کردن همهٔ ستون‌ها |
| مرتب‌سازی بر اساس چند ستون، جستجوی سریع، صفحه‌بندی، انتخاب ردیف | Community | بله |
| فیلتر ستون | Community: تا دو شرط که با AND یا OR ترکیب می‌شوند | یک شرط برای هر ستون |
| فیلترهای مجموعه‌ای، چندگانه و پیشرفته | Enterprise | تا حدی: چک‌لیستی از گزینه‌های ستون، نه از مقدارهای موجود در داده‌ها |
| تغییر اندازه، جابه‌جایی، سنجاق و پنهان کردن ستون‌ها، و ذخیرهٔ وضعیتشان | Community | بله |
| اسکرول مجازی | Community: ردیف‌ها و ستون‌ها | ردیف‌ها |
| ویرایش سلول | Community؛ برخی ویرایشگرها با Enterprise | بله، بر اساس نوع ستون، با اعتبارسنجی؛ بدون ویرایشگر سفارشی و بدون واگرد |
| جدول‌های محوری (pivot)، نمودارهای یکپارچه | Enterprise | خیر |
| کلیپ‌بورد، انتخاب محدودهٔ سلول‌ها، منوی زمینه، نوار وضعیت، نوار کناری | Enterprise | خیر |
| داده از سرور | مدل ردیف سمت سرور: Enterprise؛ بارگذاری بلوکی: Community | صفحه‌هایی از سرور شما، با مرتب‌سازی، فیلترها و جستجوی خود سرور؛ بدون گروه‌بندی روی سرور |
| گروه‌های ستون، کشیدن ردیف‌ها، ردیف‌های سنجاق‌شده | Community | خیر |
| فریم‌ورک‌ها | React، Angular 20 تا 22، Vue و JavaScript ساده | Angular 22 و React 19 |
چه چیزی معادل چیست
| AG Grid | جدول دادهٔ Needless UI |
|---|---|
<ag-grid-angular>، ثبت ماژول‌ها، LicenseManager.setLicenseKey() | <nui-grid>؛ بدون ثبت ماژول و بدون کلید |
rowData, columnDefs | [(rows)], [columns] |
field, headerName | id, header |
valueGetter, valueFormatter, cellDataType | value، format (گزینه‌های Intl یا یک تابع)، type |
cellRenderer | یک قالب nuiGridCell |
pinned: 'left', hide | pinned: 'start', hidden |
rowGroup در ستون، groupDefaultExpanded | [(groupBy)]، فهرستی از id ستون‌ها. گروه‌ها در ابتدا بازند؛ [(collapsed)] آن‌ها را می‌بندد. |
aggFunc, grandTotalRow | aggregate, totals |
treeData با treeDataChildrenField | children: (row) => row.children |
masterDetail, detailCellRenderer | یک قالب nuiGridDetail، و [(details)] |
quickFilterText | [(search)] |
rowSelection, getSelectedRows() | selection، و [(selected)]: کلیدهای ردیف‌های انتخاب‌شده |
pagination, paginationPageSize | [(pageSize)], [(page)], pageSizes |
getColumnState(), applyColumnState() | [(columnState)] |
exportDataAsExcel(), exportDataAsCsv() | exportXlsx() یک Blob برمی‌گرداند و exportCsv() متن |
cellValueChanged, rowDoubleClicked | (cellEdit), (rowActivate) |
rowModelType: 'serverSide' | mode="server", total, (queryChange) |
localeText, enableRtl | labels؛ جهت راست‌به‌چپ از dir صفحه پیروی می‌کند |
سفارش‌های گروه‌بندی‌شده بر اساس کشور، به هر دو روش
کار از این قرار است: سفارش‌ها بر اساس کشور گروه‌بندی شوند، با جمع هر کشور و یک جمع کل برای همه، خروجی Excel، جستجوی سریع و انتخاب چندتایی. با AG Grid 36، که در آن گروه‌بندی، جمع‌ها و خروجی Excel به Enterprise نیاز دارند:
با جدول دادهٔ Needless UI:
چند چیز متفاوت کار می‌کند. انتخاب، کلیدها یعنی id ردیف‌ها را نگه می‌دارد، پس با رسیدن دادهٔ تازه از بین نمی‌رود؛ هر وقت به خود ردیف‌ها نیاز داشتید، آن‌ها را از روی کلیدها پیدا کنید. گروه‌ها در ابتدا بازند. برچسب هر گروه در اولین ستون نمایان می‌نشیند و جستجو فقط ستون‌های نمایان را می‌خواند؛ پس اگر می‌خواهید جستجو در ستون گروه‌بندی‌شده هم انجام شود، آن را نمایان نگه دارید. و exportXlsx() به‌جای دانلود فایل، خود فایل را برمی‌گرداند: یک کاربرگ از ردیف‌های فیلترشده و مرتب‌شده، بدون ردیف‌های گروه.
اگر به آنچه نیست نیاز دارید
اگر اپ شما به جدول‌های محوری، نمودارها، کلیپ‌بورد و انتخاب محدوده، گروه‌بندی روی سرور یا گروه‌های ستون وابسته است، جدول دادهٔ Needless UI هنوز نمی‌تواند جای AG Grid را بگیرد. برای آنچه لازم دارید یک issue باز کنید. برای بقیهٔ موارد، صفحهٔ جدول داده همهٔ ورودی‌ها، خروجی‌ها و مثال‌ها را دارد.