jqxGrid – modern HTML5 data grid built with jQuery

See Online Grid Demos
See Online Documentation

Great Performance

jqxGrid offers fast data updates on all end-user features such as grouping, sorting, paging, and scrolling. The jQuery Grid also comes with row and column virtualization, which minimizes the amount of items that need to be rendered, and ensures unbeatable performance in spread-like scenarios with thousands of rows and columns.

Unique Flexibility

jqxGrid is developed on top of the jQWidgets UI Framework and delivers a combination of unique features which can be easily enabled, disabled or customized. jQuery Grid provides the ultimate flexibility over your data and its presentations including paging, grouping and sorting.

Data Binding

The built-in data binding logic is designed to support various data sources and to handle large data sets. The Grid supports several modes of data binding allowing you to choose the most appropriate for your web application scenario.

• Local Data – can be implemented with minimal configuration. jQuery Grid is loaded from local array data.
• Xml Data – jQuery Grid can be loaded from XML data using Ajax request.
• JSON Data – jQuery Grid can be loaded from JSON data using Ajax request.
• Virtual Data – jQuery Grid can be populated with data on demand when the end-users scroll or change the current page.
• CSV Data – load the data grid from CSV.
• Tab Data – load data grid from Tab-Delimited (TSV).
• Remote Data – load the data grid using JSONP. JSONP (JSON with Padding) represents JSON data wrapped in a function call. JSONP is an effective cross-domain communication technique frequently used to bypass the same-origin policy limitations.

Outlook-Style Grouping

With the jQWidgets’s jQuery Grid, users can easily group data with dragging a column header to a group panel which defines the grouping order and hierarchy. Users can also rearrange the grouping hierarchy by dragging and dropping the grouping headers in the group panel.

Sorting

The jQuery Grid supports built-in powerful sorting capabilities like one-click automatic sorting, selection of sort option from a context menu, and sorting through APIs. The data grid automatically chooses the most appropriate comparison. Users can also implement and use a custom sort comparer. The sorting works well with all possible configurations including rows grouping and paging. jQuery Grid also has an option to display an additional background in the sorted column.

Paging

The Grid has integrated paging functionality that lets the users to view large data sets in multiple pages for faster loading and intuitive navigation. Users also have an option to select how many records they would like to see on a page by using a page-size dropdown. To navigate to a page, users can enter the page number in the page-input box and click the ‘enter’ key or they can click the ‘next’ and ‘previous’ navigation buttons to navigate to the next or the previous page.

Nested Grids

jQuery Grid has a very flexible layout that enables easy nesting of any content or UI component including nested data grids.

Row Details

Row details are built-in the data grid and are easy to use. Users can change the height of the row details area and use custom data templates. The Grid APIs also allow programmatic expand and collapse of the row details.

Grid Column Types

jQuery Grid offers several built-in column types. In this version it has built-in ‘Number’,'CheckBox’, ‘DropDownList’, ‘ComboBox’, ‘NumberInput’, ‘DateTimeInput’, ‘Image’ and ‘Link’ columns.

jQuery Grid supports custom columns rendering. Users can easily replace the default rendering logic and specify custom rendering of a column’s header and cells.

Pinned Columns

jQuery Grid supports Excel-like pinned (frozen) rows. This feature allows users to pin columns to the left the gridview’s canvas, which is indicated by a different background color for the pinned column. This feature is very suitable for very large tables where columns need to be visible during scrolling.

Cells Formatting

The jQuery GridView Cells Formatting feature allows users to specify a formatting string to a Grid column and easily format numeric values like decimal numbers, floating-point numbers, integer numbers, currency and percentage values. Dates formatting is supported, too.

Custom Cells Rendering

The datagrid programming model is very flexible and extensible. It allows users to create their own cells rendering functions and apply them to the datagrid columns. This feature enables the user to display any html content in the grid cells.

Localization

jQuery Grid is designed to support localization for multi language web-based applications. All strings of Grid buttons, menu items and elements can be changed.

Keyboard Navigation

If the user starts typing text, the cell’s content is replaced with the text entered
from the user.

• Left Arrow key is pressed – Selects the left cell, when the Grid is not in edit
  mode. Otherwise, the key stroke is handled by the editor.
• Right Arrow key is pressed – Selects the right cell, when the Grid is not in edit
  mode. Otherwise, the key stroke is handled by the editor.
• Up Arrow key is pressed – Selects the cell above, when the Grid is not in edit mode.
  Otherwise, the key stroke is handled by the editor.
• Down Arrow key is pressed – Selects the cell below, when the Grid is not in edit
  mode. Otherwise, the key stroke is handled by the editor.
• Page Up/Down is pressed – Navigate Up or Down with one page, when the Grid is not
  in edit mode. Otherwise, the key stroke is handled by the editor.
• Home/End is pressed – Navigate to the first or last row, when the Grid is not in
  edit mode. Otherwise, the key stroke is handled by the editor.
• Enter key is pressed – Shows the selected cell’s editor. If the cell is in edit
  mode, hides the cell’s editor and saves the new value. The editor’s value is equal
  to the cell’s value.
• Esc key is pressed – Hides the cell’s editor and cancels the changes.
• Tab key is pressed – Selects the right cell. If the Grid is in edit mode, saves
  the edit cell’s value, closes its editor, selects the right cell and opens its editor.
• Shift+Tab keys are pressed – Selects the left cell. If the Grid is in edit mode,
  saves the edit cell’s value, closes its editor, selects the left cell and opens
  its editor.
• F2 key is pressed – shows the selected cell’s editor when the Grid is in edit mode.
• Space key is pressed – Toggles the checkbox editor’s check state when the selected
  cell’s column is a checkbox column and the Grid is editable.
• Ctrl key is pressed – in ‘multiplecellsextended and multiplerowsextended’ selection
  mode, extends the selection when the user clicks on a cell or row.
• Ctrl+ARROW KEY – moves to an edge.
• SHIFT+ARROW KEY extends the selection.
• Page Down – Moves one screen down
• Page Up – Moves one screen up
• Home – Moves to the beginning
• End – Moves to the end

Works across devices and browsers

jQuery Grid takes the JavaScript & HTML UI development to a new level. It is platform independent, cross-browser compatible and works on PC and mobile devices.

Web Standards Compliant

Don’t spend time testing on different devices and browsers. Use a reliable, CSS compliant JavaScript Grid based on jQuery, HTML5 and CSS3.

Optimized for Performance

Small footprint, highly responsive, carefully optimized to deliver outstanding experience on a wide range of devices, operating systems and browsers.

Appearance and Styling

jQuery Grid ships with many professionally designed themes including Office 2013, Metro and jQuery UI compatible themes. Each theme is stored in a separate CSS file which makes it easy to export, customize and re-use. The themes can be easily switched using a single property. In addition, the visual appearance of any grid cell, row or column can be changed.

See Online Grid Demos
See Online Documentation
See License