ej2-grids
The Grid component is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull data from a data source, such as array of JSON objects, OData web services
, or DataManager
binding data fields to columns. Also displaying a column header to identify the field with support for grouped records.
This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).
A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
Setup
To install Grid and its dependent packages, use the following command.
npm install @syncfusion/ej2-grids
Resources
Supported Frameworks
Grid component is also offered in following list of frameworks.
- Angular
- React
- VueJS
- ASP.NET Core
- ASP.NET MVC
- JavaScript (ES5)
Showcase samples
Key Features
- Data sources - Bind the Grid component with an array of JSON objects or DataManager.
- Sorting and grouping - Supports n levels of sorting and grouping.
- Filtering - Offers filter UI such as filter bar, menu, excel and checkbox at each column to filter data.
- Paging - Provides the option to easily switch between pages using the pager bar.
- Editing - provides the options for create, read, update, and delete operations.
- Columns - The column definitions are used as the dataSource schema in the Grid. This plays a vital role in rendering column values in the required format.
- Reordering - Allows you to drag any column and drop it at any position in the Grid’s column header row, allowing columns to be repositioned.
- Column Chooser - The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly.
- Resizing - Resizing allows changing column width on the fly by simply dragging the right corner of the column header.
- Freeze - Columns and rows can be frozen to allow scrolling and comparing cell values.
- Cell Spanning - Grid cells can be spanned based on the preferred criteria.
- Foreign data source - This provides the option to show values from external or lookup data sources in a column based on foreign key/value mapping.
- Cell Styling - Grid cell styles can be customized either by using CSS or programmatically.
- Selection - Rows or cells can be selected in the grid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.
- Templates - Templates can be used to create custom user experiences in the grid.
- Aggregation - Provides the option to easily visualized the Aggregates for column values.
- Context menu -The context menu provides a list of actions to be performed in the grid. It appears when a cell, header, or the pager is right-clicked.
- Clipboard - Selected rows and cells can be copied from the grid.
- Export - Provides the options to Export the grid data to Excel, PDF, and CSV formats.
- RTL support - Provides a full-fledged right-to-left mode which aligns content in the Grid control from right to left.
- Localization - Provides inherent support to localize the UI.
Support
Product support is available for through following mediums.
License
Check the license detail here.
Changelog
Check the changelog here
© Copyright 2019 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.