Skip to main content Inicio Creadores syncfusion vue-ui-components-skills syncfusion-vue-grid
syncfusion-vue-grid 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.
Ir a la instalación Skills Marketplace Descubre y explora habilidades de IA creadas por la comunidad.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Mostrar detalles del prompt Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/syncfusion/vue-ui-components-skills --skill syncfusion-vue-gridEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Descargar Zip Descargando... Explorador de archivos
38 archivos 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":"34.1.29","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 DataManagerColumn Management : Type definitions, templates, reordering, resizing, freezingData Operations : Sorting, filtering (multiple modes), grouping, aggregatesSelection : Row, cell, column, and checkbox selection modesEditing : Inline, dialog, batch editing with validationExport : Excel, PDF, CSV export with templatesTemplates : Custom row, cell, and header templatesPerformance : Virtual scrolling, infinite scroll, immutable modeUI Features : Context menu, toolbar, state management, clipboardInternationalization : Localization, RTL support, multiple formatsAccessibility : WCAG compliance, keyboard navigation
Documentation Map
Getting Started
Installation and setup (Vue 2 & Vue 3)
Package configuration
Quasar Framework setup
CSS theme imports
First component creation
Enable core features
Data Binding
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
URL adaptor
ODataV4 adaptor
Web API adaptor
GraphQL adaptor
Web method adaptor
RemoteSave adaptor
Custom adaptor configuration
Grid Feature Modules
What are modules
Complete module list
Default injected modules
Module injection examples
Feature dependencies
Vue 2 Configuration
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
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
Freeze columns
Freeze direction (left, right, both)
Programmatic freeze/unfreeze
Split view configurations
Cells
Cell styling
Cell content
Cell wrapping and clipping
Cell tooltips
Grid lines
Cell events
Cell formatting
Clipboard
Copy to clipboard functionality
Copy with headers
Copy via external buttons
AutoFill by dragging
Paste operations
Keyboard shortcuts (Ctrl+C, Ctrl+Shift+H)
Rows
Row data types
Row styling
Row height
Row templates
Detail templates
Row drag-drop
Row spanning
Row pinning
Row selection
Filtering
Basic filtering
Filter bar
Filter menu
Excel-like filters
Checkbox filters
Filter configuration
Diacritics filter
Filtering events
Common filtering patterns
Sorting
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
Paging configuration
Page size options
Pager customization
Pager position
Page navigation
Custom pager template
Scrolling
Basic scrolling
Virtual scrolling
Infinite scrolling
Column virtualization
Sticky headers
Scrollbar customization
Performance tuning
Advanced scrolling
Performance Best Practices
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
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
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
Basic command column
Custom command column
CRUD action buttons (Edit, Delete, Save, Cancel)
Custom command handlers
Customize button appearance and icons
Grouping
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
Basic aggregates
Aggregate types (Sum, Average, Count, Max, Min)
Footer aggregates
Group aggregates
Custom aggregates
Reactive aggregates
Multiple aggregates
Selection
Row selection
Cell selection
Column selection
Checkbox selection
Multi-select
Keyboard shortcuts
Selection events
Hierarchical Binding
Master-detail grid
Child grid configuration
Detail templates
Expand-collapse
Hierarchy events
State Management
Grid state
Save state
Restore state
Local storage persistence
Immutable mode
Toolbar
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
Enable context menu
Left click context menu
Enable/disable menu items
Show/hide menu items
Custom menu items
Menu events
Practical examples
Printing
Enable printing
Print toolbar configuration
Print modes (All, Current Page, Selected)
Print customization
Print events
Excel Export
Basic excel export
Export options (selected, current page, all data)
Customize export
Styling and formatting
Advanced features
CSV export limitations
PDF Export
Basic PDF export
Export options (selected, current page, all data)
Customize export
Header and footer configuration
Advanced features
Searching
Enable search functionality
Search bar configuration
Programmatic search
Search events
Advanced search
Globalization
Locale settings (50+ languages)
Loading translations
Number formatting
Date formatting
Internationalization
RTL support (Arabic, Hebrew, Persian, Urdu)
Custom translations
Practical examples
Accessibility
WAI-ARIA attributes
Keyboard navigation
Custom keyboard shortcuts
Preventing default key behavior
Screen reader support
WCAG compliance
Style and Appearance
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
Enable adaptive UI
Adaptive rendering modes (Details, Grid, Both)
Adaptive UI with virtualization
Mobile device handling
Responsive columns
Adaptive detail templates
Grid Properties
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
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
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
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
dataSource - Data source (array, DataManager, or URL)allowPaging - Enable paging (boolean)pageSettings - Pager configurationallowSorting - Enable sorting (boolean)allowFiltering - Enable filtering (boolean)allowGrouping - Enable grouping (boolean)allowSelection - Enable row selection (boolean)selectionSettings - Selection configurationeditSettings - CRUD configurationtoolbar - Toolbar itemsheight - Grid height (pixel or percentage)enableVirtualization - Virtual scrolling
field - Data field bindingheaderText - Column header textwidth - Column width (pixel or percentage)type - Column data type (string, number, date, boolean, checkbox)isPrimaryKey - Primary key column identifierallowSorting - Allow sorting on columnallowFiltering - Allow filtering on columntemplate - Custom cell templateeditTemplate - Custom edit template
Top Use Cases
E-Commerce Product Management : Display products with sorting, filtering, editing, and Excel exportFinancial Reporting : Group data by category, show aggregates (Sum, Average), export to PDFCRM Dashboard : Multi-column filtering, row selection for bulk actions, virtual scrollingPerformance Monitoring : Real-time grid updates, virtual scrolling for 10K+ rowsAdmin Panels : Inline editing with validation, hierarchical data, state persistenceData Analytics : Complex grouping, aggregates, templates for custom visualizationsInventory Systems : Batch editing, search, export, database connectivitySurvey/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
])
Comprehensive guide for implementing Syncfusion Vue 3 button components including Button, ButtonGroup, DropDownButton, Floating Action Button, ProgressButton, SplitButton, Speed Dial, Switch, RadioButton, and Chips. Use this when adding styled buttons, toggle behavior, icon support, grouped selections, dropdown action menus, programmatic control floating primary actions, expandable speed dial menus, compact interactive elements with avatars and drag-and-drop, or single/multiple selection capabilities to a Vue application.
Comprehensive guide for implementing Syncfusion Vue Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and reactive data patterns in Vue 3 applications using Composition API.
syncfusion-vue-data-manager Implements Syncfusion Vue DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Ocupaciones relacionadas SOC
Basado en la clasificación ocupacional SOC
