We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion has new privacy terms and cookie policies in effect May 24, 2018. Learn more

Overview

The grid for JavaScript is a feature-rich control for displaying data in a tabular format. Its wide range of functionalities include data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregating rows, and exporting to Excel, CSV, and PDF formats. It is designed and optimized for high performance. A high volume of data can be loaded without performance degradation by using row and column virtualization.


Data binding

The grid can be bound to data from a variety of data sources in the form of JavaScript object array collections. It uses the Essential JS 2 data manager to handle data and supports customizing data requests and processing.

Local data

JavaScript array collection

The array of JavaScript objects can be bound to the grid, allowing it to work smoothly in single-page applications.

Remote Data

Remote data binding

Binding the grid with RESTful services allows data from services to be consumed using the Essential JS 2 data manager. It supports various data adaptors such as JSON, OData, ODataV4, URL, and Web API for working with a particular data service.

Extensible Data

Extensible data handling

Data handling is extensible in the grid. The appropriate events are raised with the grid state when data needs to be processed. Preferred data processing logic can be provided.

Hierarchical binding

Hierarchical binding

The grid can be configured to show one-to-many relationship data using hierarchical binding. An n-level hierarchy grid can be built with minimal configuration that helps users to visualize data in parent and child relationships.


Optimized for mobile

The grid is highly optimized to work on mobile devices.

Touch support

Touch support

All grid features will work on touch devices with zero configuration. This enables features such as sorting, grouping, and selection to be used without any customization.

Responsiveness

Responsiveness

Responsive features allow the grid layout to be viewed on various devices. It is also possible to hide specific columns for particular screen sizes using column-based media query support.

Adaptable pager

Adaptable pager UI

The pager UI is adaptable in mobile views. When the grid is rendered in a smaller screen, the pager UI will be rendered without a page number list, making it suitable for smaller devices.


Editing

The grid provides full support for create, read, update, and delete operations. Editing can be enabled and customized with simple property settings.

Edit

Edit modes

The grid supports various edit modes such as inline, dialog, and batch edit. These provide an interactive UI to add and edit records. In addition, editing can be performed programmatically.

Bulk changes

Bulk changes

Bulk changes allow saving added, edited, and deleted records in a single request. This feature can be used in a grid through batch editing mode, which provides an Excel-like editing experience and saves the changes in bulk.

Custom edit UI

Customizable edit UI

An editor for a grid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns.


Aggregation

Aggregates for column values can be easily visualized using the aggregate feature. Aggregates can be customized to display their value in individual summary rows, individual group summary rows, or in group caption rows.

Aggregate

Built-in aggregate types

The grid relies on the Essential JS 2 data manager to aggregate column values. Default aggregate types such as sum, max, min, average, and count can be used. Aggregate values can be formatted before being displayed in the cell.

User Aggregate

User-defined aggregate types

Custom aggregate logic can be provided for a column. This requires a custom aggregate function that holds custom logic to calculate the aggregate value.


Paging

Through paging, a segment of data can be viewed from the assigned data source.

On-demand

On-demand

The pager UI of the grid can be used to request on-demand data based on page details. Using simple properties, the pager can be customized.

Page size dropdown

Page size drop-down

The page size can be changed on the fly using the page size drop-down in the pager. The page size values in the drop-down can be customized.

Customizable pager ui

Customizable pager UI

The pager UI can be customized using a pager template.


Filtering

Filtering allows data compaction. The grid supports various filter types such as filter bar, menu, check box, and Excel-like filter. The appropriate filter type can be chosen based on the application. Options to customize filter operators, case sensitivity, and diacritics are also available.

Excel filter

Powerful Excel-like filter

The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a check box list. Additionally, the advanced filter can be used to build complex filter criteria.

Custom  filter ui

Extensible filter UI

Filter UI and logic for a column will be applied based on the column type. It is possible to use a preferred filter UI and filtering logic for a column.

Search

Grid rows can be searched either by using the built-in search box available in the toolbar or programmatically. The search options can be customized.


Sorting

Grid rows can be sorted against a column simply by clicking the desired column header. The data can be sorted either in ascending or descending order.

Sort multiple columns

Sort multiple columns

Sort grid rows using multiple columns by clicking the desired column headers and holding Ctrl or Command.

Custom Sort

Customize sort comparer

Sorting logic for a column can be user-defined. The custom sort comparer can use the preferred sorting logic.


Grouping

The grid supports grouping to visualize data in an organized way. Data can be grouped in ascending or descending order. Rows can be grouped by dragging and dropping the desired columns in the interactive drop area.

Group

N-level column grouping

N-level grouping can be performed without any restrictions. Hiding or showing grouped columns can also be defined.

Group by format

Group by format

By default, grouping will be done based on the field value. A column can be grouped by the formatted value instead of the raw value to make viewing formatted date columns easier.


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.

Range selection

Range selection

A range of cells can be selected by dragging the pointer over cells. This helps in selecting rows or cells to be copied to the clipboard.

Checkbox

Check box selection

Check box selection allows the selection of rows using a check box column. This selection can persist even after other grid actions are performed. All the rows can also be selected by using the header Select All check box.


Templates

Templates can be used to create custom user experiences in the grid. The grid provides various template options, including templates for headers, columns, rows, detail rows, and toolbars.


Column

Column chooser

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. This helps users control the column visibility through an interactive UI.

Reorder

Reorder

In the grid, columns can be reordered either through user interaction or programmatically. Simply dragging and dropping a column header into the desired column position will reorder the columns.

Resize

Resize

Resizing allows changing column width on the fly by simply dragging the right corner of the column header. The scroll bar will appear when the grid content width exceeds the element width.

Column menu

Column menu

Various column-based actions can be performed with the help of the column menu. The menu items can also be customized to list only preferred actions.

Freeze

Freeze

Columns and rows can be frozen to allow scrolling and comparing cell values.

Cell spanning

Cell spanning

Grid cells can be spanned based on the preferred criteria.

Foreign key

Foreign data source

It is possible to show values from external or lookup data sources in a column based on foreign key/value mapping. Sorting, filtering, editing, grouping, and other operations can be performed in the foreign data column.

Value

Value accessors

The value accessors specifies how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object.

Cell styling

Cell styling

Grid cell styles can be customized either by using CSS or programmatically.


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. The context menu items can be customized according to user preference.


Clipboard

Selected rows and cells can be copied from the grid. Use the Ctrl+C and Ctrl+Shift+H keyboard combinations to copy grid data with and without headers, respectively.


Stacked headers

Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be grouped. The data columns can still be grouped, sorted, and filtered.


Row height

Row heights can be adjusted to visualize more rows in the view port. It is also possible to set row height conditionally.


Exporting

Exporting

Excel, PDF, CSV export

Export grid data to Excel, PDF, and CSV formats. The exported document can also be customized programmatically. This allows data from the grid to be used in other applications.

Print

Print

Print grid data either by using the print option from the toolbar or programmatically. All the rows in the grid will be printed regardless of paging. It is also possible to print the current view page only. The scroll bar will be removed before printing.


Accessibility

Keyboard

Keyboard navigation

The grid ensures that every cell is accessible using the keyboard. Major features like sorting, selection, and editing can be performed using keyboard commands alone, no mouse interaction required. This helps in creating highly accessible applications using the grid component.

Screen Reader

Screen reader

All grid cells are added with ARIA attributes to help them be recognized when using a screen reader.


Globalization and localization

Globalization

Globalization

The grid enables users from different locales to use it by formatting the date, currency, and numbering to suit locale preferences. The grid uses the Essential JS 2 internalization library for handling value formatting.

RTL

Right to left {RTL}

The grid supports right-to-left rendering, allowing the text direction and layout of the grid to be displayed from right to left. This improves the user experience and accessibility RTL languages.

Localization

Localization

All the grid strings in the user interface can be localized as needed. The grid uses the Essential JS 2 localization library to localize UI strings.


35+ ESSENTIAL JS 2 CONTROLS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.