@syncfusion/ej2-react-grids

ej2-react-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-react-grids

Resources

• Getting Started
• View Online Demos
• Product Page

Supported Frameworks

Grid component is also offered in following list of frameworks.

1. Angular
2. VueJS
3. JavaScript (ES5)
4. ASP.NET Core
5. ASP.NET MVC

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.

• Creating incident in Syncfusion Direct-trac support system or Community forum.
• New GitHub issue.
• Ask your query in Stack Overflow with tag syncfusion, ej2.

License

Check the license detail here.

Changelog

Check the changelog here

© Copyright 2018 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.