| name | syncfusion-vue-grid |
| description | Implements Syncfusion Vue Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications. |
| metadata | {"author":"Syncfusion Inc","version":"33.1.44","category":"Grids"} |
Implementing Vue Grid Component
The Syncfusion Vue Grid is an enterprise-grade data table component for Vue 2 and Vue 3 that enables powerful data visualization and manipulation capabilities. It's essential for creating responsive, feature-rich data applications.
โ ๏ธ Security & Trust Boundary
- The Grid skill does not perform any remote data access.
- All external API interaction is handled by a separate DataManager skill outside this skillโs trust boundary.
Table of Contents
When to Use This Skill
Use this skill when you need to:
- Display and manage tabular data with advanced interactions
- Implement CRUD (Create, Read, Update, Delete) operations
- Build feature-rich data tables with sorting, filtering, and grouping
- Create responsive dashboards with data visualization
- Connect grids to various data sources (local, APIs, databases)
- Export data to multiple formats (Excel, PDF, CSV)
- Implement real-time grids with virtual scrolling and performance optimization
Component Overview
The Vue Grid is built on Syncfusion's Essential JS 2 framework and provides:
- Data Binding: Local and remote data sources with DataManager
- Column Management: Type definitions, templates, reordering, resizing, freezing
- Data Operations: Sorting, filtering (multiple modes), grouping, aggregates
- Selection: Row, cell, column, and checkbox selection modes
- Editing: Inline, dialog, batch editing with validation
- Export: Excel, PDF, CSV export with templates
- Templates: Custom row, cell, and header templates
- Performance: Virtual scrolling, infinite scroll, immutable mode
- UI Features: Context menu, toolbar, state management, clipboard
- Internationalization: Localization, RTL support, multiple formats
- Accessibility: WCAG compliance, keyboard navigation
Documentation Map
Getting Started
๐ Read: references/getting-started.md
- Installation and setup (Vue 2 & Vue 3)
- Package configuration
- Quasar Framework setup
- CSS theme imports
- First component creation
- Enable core features
Data Binding
๐ Read: references/data-binding.md
- Local data binding
- Remote data binding
- DataManager adaptors
- CRUD operations
- Loading indicators
- Real-time updates
- Refreshing and updating data
- Offline mode
- Immutable mode
- Timezone handling
- Export operations
Connecting to Adaptors
๐ Read: references/adaptors.md
- URL adaptor
- ODataV4 adaptor
- Web API adaptor
- GraphQL adaptor
- Web method adaptor
- RemoteSave adaptor
- Custom adaptor configuration
Grid Feature Modules
๐ Read: references/module.md
- What are modules
- Complete module list
- Default injected modules
- Module injection examples
- Feature dependencies
Vue 2 Configuration
๐ Read: references/vue2.md
- Columns
- Rows
- Cells
- Adaptive UI
- Modules
- Performance optimization
- Data binding (Vue 2)
- Editing
- Sorting
- Grouping
- Filtering
- Scrolling
- Searching
- Paging
- Selection
- Export operations
- Aggregates
- Printing
- Hierarchical binding
- State management
- Toolbar
Columns
๐ Read: references/columns.md
- Column data types
- Column width
- Column formatting
- Field mapping
- Column rendering
- Column templates
- Column headers
- Foreign key columns
- Column chooser
- Column menu
- Column reordering
- Column resizing
- Row and column spanning
Frozen Columns
๐ Read: references/frozen.md
- Freeze columns
- Freeze direction (left, right, both)
- Programmatic freeze/unfreeze
- Split view configurations
Cells
๐ Read: references/cell.md
- Cell styling
- Cell content
- Cell wrapping and clipping
- Cell tooltips
- Grid lines
- Cell events
- Cell formatting
Clipboard
๐ Read: references/clipboard.md
- Copy to clipboard functionality
- Copy with headers
- Copy via external buttons
- AutoFill by dragging
- Paste operations
- Keyboard shortcuts (Ctrl+C, Ctrl+Shift+H)
Rows
๐ Read: references/rows.md
- Row data types
- Row styling
- Row height
- Row templates
- Detail templates
- Row drag-drop
- Row spanning
- Row pinning
- Row selection
Filtering
๐ Read: references/filtering.md
- Basic filtering
- Filter bar
- Filter menu
- Excel-like filters
- Checkbox filters
- Filter configuration
- Diacritics filter
- Filtering events
- Common filtering patterns
Sorting
๐ Read: references/sorting.md
- Basic sorting
- Sort direction
- Multi-column sorting
- Foreign key sorting
- Custom sort comparers
- Culture-based sorting
- Programmatic sorting
- Sort events
- Touch and gesture sorting
- Sort icon customization
Paging
๐ Read: references/paging.md
- Paging configuration
- Page size options
- Pager customization
- Pager position
- Page navigation
- Custom pager template
Scrolling
๐ Read: references/scrolling.md
- Basic scrolling
- Virtual scrolling
- Infinite scrolling
- Column virtualization
- Sticky headers
- Scrollbar customization
- Performance tuning
- Advanced scrolling
Performance Best Practices
๐ Read: references/performance.md
- Improving loading performance with large datasets
- Paging for large datasets
- Row virtualization
- Infinite scrolling
- Column virtualization
- Optimizing rendering with templates
- CRG optimization
- Server-side data operations
- Handling large JSON payloads
- Excel export limitations
Editing
๐ Read: references/editing.md
- Enabling editing
- Edit modes (Normal, Dialog, Batch, Template)
- Edit types (text, numeric, dropdown, date)
- Inline editing
- Dialog editing
- Batch editing
- Template editing
- Server persistence
- Advanced editing
Column Validation
๐ Read: references/validation.md
- Required field validation
- Numeric validation
- Email validation
- Min length validation
- Custom validation rules
- Custom validation based on dropdown change
- Dynamically add or remove validation rules
- Prevent duplicate rows
Command Column Editing
๐ Read: references/command-column.md
- Basic command column
- Custom command column
- CRUD action buttons (Edit, Delete, Save, Cancel)
- Custom command handlers
- Customize button appearance and icons
Grouping
๐ Read: references/grouping.md
- Basic grouping
- Prevent grouping for specific columns
- Multi-level grouping
- Reorder grouped columns
- Group with paging
- Group caption templates
- Group by format
- Collapse/expand groups
- Programmatic grouping
- Sort grouped columns
- Lazy load grouping
- Grouping events
Aggregates
๐ Read: references/aggregates.md
- Basic aggregates
- Aggregate types (Sum, Average, Count, Max, Min)
- Footer aggregates
- Group aggregates
- Custom aggregates
- Reactive aggregates
- Multiple aggregates
Selection
๐ Read: references/selection.md
- Row selection
- Cell selection
- Column selection
- Checkbox selection
- Multi-select
- Keyboard shortcuts
- Selection events
Hierarchical Binding
๐ Read: references/hierarchical-binding.md
- Master-detail grid
- Child grid configuration
- Detail templates
- Expand-collapse
- Hierarchy events
State Management
๐ Read: references/state-management.md
- Grid state
- Save state
- Restore state
- Local storage persistence
- Immutable mode
Toolbar
๐ Read: references/toolbar.md
- Toolbar configuration
- Built-in toolbar items (Export, Edit, Delete, Search)
- Custom toolbar items
- Toolbar positioning
- Enable or disable toolbar items
- Customize toolbar with CSS
Context Menu
๐ Read: references/context-menu.md
- Enable context menu
- Left click context menu
- Enable/disable menu items
- Show/hide menu items
- Custom menu items
- Menu events
- Practical examples
Printing
๐ Read: references/printing.md
- Enable printing
- Print toolbar configuration
- Print modes (All, Current Page, Selected)
- Print customization
- Print events
Excel Export
๐ Read: references/excel-export.md
- Basic excel export
- Export options (selected, current page, all data)
- Customize export
- Styling and formatting
- Advanced features
- CSV export limitations
PDF Export
๐ Read: references/pdf-export.md
- Basic PDF export
- Export options (selected, current page, all data)
- Customize export
- Header and footer configuration
- Advanced features
Searching
๐ Read: references/searching.md
- Enable search functionality
- Search bar configuration
- Programmatic search
- Search events
- Advanced search
Globalization
๐ Read: references/globalization.md
- Locale settings (50+ languages)
- Loading translations
- Number formatting
- Date formatting
- Internationalization
- RTL support (Arabic, Hebrew, Persian, Urdu)
- Custom translations
- Practical examples
Accessibility
๐ Read: references/accessibility.md
- WAI-ARIA attributes
- Keyboard navigation
- Custom keyboard shortcuts
- Preventing default key behavior
- Screen reader support
- WCAG compliance
Style and Appearance
๐ Read: references/style-and-appearance.md
- Theme selection (Material, Bootstrap, Fluent, Tailwind)
- CSS styling
- Cell styling
- Row styling
- Header styling
- Paging styling
- Sorting styling
- Filtering styling
- Grouping styling
- Toolbar styling
- Editing styling
- Aggregate styling
- Selection styling
- Responsive design
- Dark mode
Adaptive UI
๐ Read: references/adaptive.md
- Enable adaptive UI
- Adaptive rendering modes (Details, Grid, Both)
- Adaptive UI with virtualization
- Mobile device handling
- Responsive columns
- Adaptive detail templates
Grid Properties
๐ Read: references/grid-properties.md
- Overview of all properties
- Data management properties
- Display properties
- Feature flags and toggles
- Configuration properties
- Advanced feature properties
- Status properties
- Behavioral properties
- Module references
Grid Events
๐ Read: references/grid-events.md
- Data binding events
- Action events
- Editing events
- Selection events
- Column events
- Sorting and filtering events
- Grouping events
- Row events
- Cell events
- Export and print events
- Menu events
- Template events
- Batch mode events
- Lifecycle events
Grid Methods
๐ Read: references/grid-methods.md
- Record management methods
- Cell and row methods
- Selection methods
- Column methods
- Sorting and filtering methods
- Grouping methods
- Paging methods
- Export and print methods
- Data binding methods
- Search methods
- Editing methods
- Template and lifecycle methods
- UI control methods
- Utility methods
Testing the Vue Grid with Jest
๐ Read: references/test-case.md
- Setup Jest environment
- Adding Grid component
- Creating test cases
- Snapshot testing
- DOM testing
- Running tests
Quick Start Example
<template>
<div id="app">
<ejs-grid :dataSource="data" :allowPaging="true" :allowSorting="true" :allowFiltering="true">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="right" width="100"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="100"></e-column>
<e-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="130"></e-column>
<e-column field="Freight" headerText="Freight" type="number" format="C2" width="100"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page, Sort, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { provide } from 'vue';
provide('grid', [Page, Sort, Filter]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material3.css";
</style>
Common Patterns
Pattern 1: Grid with CRUD Operations
- Enable
editSettings (allowEditing, allowAdding, allowDeleting)
- Configure
toolbar with Edit, Add, Delete, Update, Cancel items
- Set primary key with
isPrimaryKey: true
- Handle
actionComplete event for server updates
- Use
allowPaging for large datasets
Pattern 2: Data-Driven Grid with Filtering & Sorting
- Bind
dataSource to DataManager with remote data
- Enable
allowSorting and allowFiltering
- Configure column
type for proper filter UI
- Use
filterSettings for default filters
- Enable search with
toolbar: ['Search']
Pattern 3: Grouped Data with Aggregates
- Enable
allowGrouping and inject Group module
- Set
groupSettings with column names
- Add
e-aggregates with aggregate columns
- Define
footerTemplate for summary display
- Use
groupCaptionTemplate for group headers
Key Props Reference
Essential Grid Props:
dataSource - Data source (array, DataManager, or URL)
allowPaging - Enable paging (boolean)
pageSettings - Pager configuration
allowSorting - Enable sorting (boolean)
allowFiltering - Enable filtering (boolean)
allowGrouping - Enable grouping (boolean)
allowSelection - Enable row selection (boolean)
selectionSettings - Selection configuration
editSettings - CRUD configuration
toolbar - Toolbar items
height - Grid height (pixel or percentage)
enableVirtualization - Virtual scrolling
Column Props:
field - Data field binding
headerText - Column header text
width - Column width (pixel or percentage)
type - Column data type (string, number, date, boolean, checkbox)
isPrimaryKey - Primary key column identifier
allowSorting - Allow sorting on column
allowFiltering - Allow filtering on column
template - Custom cell template
editTemplate - Custom edit template
Top Use Cases
- E-Commerce Product Management: Display products with sorting, filtering, editing, and Excel export
- Financial Reporting: Group data by category, show aggregates (Sum, Average), export to PDF
- CRM Dashboard: Multi-column filtering, row selection for bulk actions, virtual scrolling
- Performance Monitoring: Real-time grid updates, virtual scrolling for 10K+ rows
- Admin Panels: Inline editing with validation, hierarchical data, state persistence
- Data Analytics: Complex grouping, aggregates, templates for custom visualizations
- Inventory Systems: Batch editing, search, export, database connectivity
- Survey/Form Collection: Dialog editing, custom validators, PDF export
Module Injection
Most advanced features require module injection in the provide section:
provide('grid', [
Page,
Sort,
Filter,
Search,
Group,
Aggregate,
Edit,
ExcelExport,
PdfExport,
Resize,
Reorder,
ColumnMenu,
Selection,
Toolbar,
CommandColumn
])