ui-data-table

Implements Syncfusion React DataGrid with server-side pagination, sorting, filtering, and export for ERP listing pages.

Updated Aug 18, 2026
One-click install
npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-data-table-aurelian1974
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-data-table
Source: https://github.com/Aurelian1974/ERPEnterprise/tree/main/.github/skills/ui-data-table
Command: npx skills add https://github.com/Aurelian1974/ERPEnterprise --skill ui-data-table-aurelian1974

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @syncfusion/ej2-react-grids, @syncfusion/ej2-react-navigations, @syncfusion/ej2-react-buttons, @syncfusion/ej2-react-dropdowns, @syncfusion/ej2-react-excel-export, @syncfusion/ej2-react-pdf-export, @syncfusion/ej2-base.

What problem does it solve? Building consistent ERP listing pages (invoices, employees, products, partners) requires repetitive wiring of server-side pagination, sorting, filtering, row selection, and Excel/PDF export. This Skill provides a reusable React DataTable wrapper around Syncfusion EJ2 Grid with Romanian localization and ERP styling conventions. ## Core Features & Use Cases - Reusable DataTable wrapper: A typed React component exposing columns, dataSource, totalCount, and an onStateChange callback that translates grid events into server query parameters (page, pageSize, sort). - Export and toolbar: Built-in Excel and PDF export via toolbar buttons, plus search, column resizing, sticky headers, and shimmer loading indicators. - Romanian locale and ERP styling: Complete ro locale strings via L10n.load, dd.MM.yyyy date formats, right-aligned numeric columns, and CSS overrides mapping Syncfusion Material theme to design tokens. - Use Case: Build an invoice listing page where column templates render status badges, currency displays, and router links, while all paging and sorting execute server-side through a useInvoices data hook. ## Quick Start Create a Syncfusion DataTable wrapper component with server-side pagination, Romanian locale, and Excel export, then use it to build an invoice listing page.

Frequently Asked Questions about ui-data-table

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement server-side pagination with Syncfusion React Grid?▼

Use the dataStateChange event on GridComponent to receive skip and take values, convert them to page and pageSize, and pass them to your data-fetching hook. Bind dataSource as an object with result and count properties so the pager reflects the server total.

How to add Excel and PDF export to Syncfusion DataGrid?▼

Inject the ExcelExport and PdfExport services, enable allowExcelExport and allowPdfExport, and add ExcelExport/PdfExport to the toolbar. Handle toolbarClick to call gridRef.current.excelExport() or pdfExport() when the matching toolbar item is clicked.

Does Syncfusion EJ2 Grid require a license key?▼

Yes, Syncfusion requires license registration even for the free Community Edition. Call registerLicense from @syncfusion/ej2-base in your app entry point with a key stored in an environment variable like VITE_SYNCFUSION_LICENSE_KEY, never hardcoded.

How do I localize Syncfusion Grid to Romanian?▼

Use L10n.load from @syncfusion/ej2-base to register a ro locale object containing grid and pager translation strings, then set locale="ro" on the GridComponent. This translates pager tooltips, filter menus, and export buttons.

Why is my Syncfusion Grid filtering all data client-side?▼

This happens when dataSource is a plain array instead of a remote result object. Bind dataSource as { result: items, count: totalCount } and handle dataStateChange to forward sort and filter state to your server API.