Javascript/jQuery Grid

Introduction

jqxGrid is an advanced jQuery Grid widget built entirely with JavaScript and open web standards. It provides rich functionality, easy to use APIs and works across devices and browsers. The jquery grid component delivers advanced data visualization features and built-in support for client and server-side paging, editing, sorting and filtering. You can use the Grid with frameworks like Angular and ReactJS. Try jqxGrid in our jsEditor - cloud solution for JavaScript, HTML and CSS editing, hosting and sharing your web development ideas! jQuery Grid

Highlights

  • Works across devices and browsers
  • Web Standards Compliant
  • Feature complete jQuery Datagrid for Enterprise
  • Rich and easy to use JavaScript API
  • Optimized for Performance
  • Easy customization and built-in themes
  • Localization

Features

  • Data Binding
  • Outlook-Style Grouping
  • Sorting and Multi-Column Sorting
  • Filtering
  • Paging
  • Editing and Validation
  • Nested Grids
  • Row Details
  • Localization
  • Adaptive Layout
  • Column Types
  • Columns Resizing
  • Columns Reorder
  • Columns Hierarchy
  • Pinned Columns
  • Foreign Columns
  • Cells Formatting
  • Custom Grid Filters
  • Custom Cells Rendering
  • Custom Cell Editors
  • Column and Cells Styling
  • Rows and Cells Selection
  • Aggregates
  • Export to Excel, XML, HTML, CSV, TSV, PDF and JSON
  • Printing
  • Responsive Size with Fluid dimensions
  • Accessibility
  • Keyboard Navigation
  • State Maitenance

Great Performance

jqxGrid offers an intuitive and easy-to-use user interface for common data interaction features such as grouping, sorting, filtering, paging, and scrolling. The rows and columns support full UI virtualization which minimizes the number of DOM elements that need to be rendered and ensures unbeatable performance in scenarios with thousands of rows and columns.

Data Binding

Our Grid includes a built-in data binding logic designed to support various data sources and operate with large datasets. The grid supports several data binding modes optimized for common scenarios:

  • Local Data - load the javascript data grid from a local array of objects.
  • Xml Data - load the javascript data grid from XML data source using AJAX.
  • JSON Data - load the javascript data grid from JSON data source using AJAX.
  • CSV Data - load the javascript data grid from CSV.
  • Tab Data - load the javascript data grid from Tab-Delimited (TSV).
  • Remote Data - load the javascript 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.
  • Virtual Data - jqxGrid can be populated with data on demand when the user scrolls or changes the current page.

Outlook-Style Data Grouping

Our Data Grid widget enables users to group data with simple drag and drop. Users can also rearrange the grouping hierarchy by dragging and dropping the grouping headers in the group panel.
jquery grid grouping
Aggregates can be displayed for each Group.

Data Sorting

jqxGrid provides built-in powerful sorting capabilities like one-click automatic sorting, selection of sort option from a context menu and sorting through API calls. The data grid automatically chooses the most appropriate comparison. Users can also implement and use a custom sort comparer functions. The sorting works well with all possible configurations including rows grouping and paging.

Data Paging

The integrated paging functionality lets the users display large data sets in multiple pages for faster loading and easy navigation. Users also have an option to select how many records to display in a page.
jquery grid paging

Nested Data Grids

jqxGrid has a very flexible layout that enables easy nesting of any content, UI elements and widgets including nested data grids.
nested jQuery Grids

Row Details

Row details are built-in feature of the jQuery data grid. You can change the height of the row details area and use custom data templates. You can also use JavaScript APIs to expand and collapse the grid row details area.

Column Types

The infrastructure of the jQuery Grid is designed to support multiple column types. In the current version the data grid provides built-in 'Text', 'Number', 'DropDownList', 'DateTime' and 'CheckBox' columns. Our jQuery grid also supports custom data rendering. Developers can easily replace the default rendering logic and use custom columns and cells rendering.
jquery grid checkbox column

Pinned Columns

jqxGrid supports Excel-like pinned (frozen) columns. This feature also allows you to pin columns to the left the gridview's canvas. The pinned columns are very useful when working with large tables and it makes it easy to scroll and compare data from different parts of the table.

Cells Formatting

Our jQuery grid offers a cell formatting feature where you can easily specify a formatting string for grid column. You can format dates, numeric values like decimal numbers, integer and floating-point numbers, currency and percentage values.
jquery grid cells formatting

Custom Cells Rendering

The javascript data grid programming model is very flexible and extensible. Developers can create custom cell rendering functions and apply them to columns or individual grid cells. This feature technically enables rendering of any HTML content in the grid cells.

Localization

Our jQuery grid supports localization for multi-language web sites and applications. All text elements used in control buttons, menu items and elements can be localized.
jquery grid localization

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

Intuitive Cells and Row Selection

The Data Grid comes with multiple cells and row selection options. You can choose from single cell to multi-cell Excel-like selection and from single row to multi-row selection.

Data Summaries

The jQWidgets JavaScript Data Grid allows you to use built-in aggregates and custom aggregate functions.The UI component supports Summary(Aggregate) row and also can display summaries when Grouping is enabled. Built-in aggregate functions include Min, Max, Sum, Count and Average.

Data Grid Column and Layout Run-Time Customization

The Data Grid includes fixed and responsive column widths. In addition, columns can be Pinned, Resized, Reordered, CSS Styled, Hidden, Sorted, Filtered, Grouped and more.

Styling and Customization

Our jQuery Grid ships with multiple professionally designed themes. Each theme is stored in a separate CSS file and is easy to change. The themes can be switched using a single property of the grid widget. Since the latest version of the jQuery Grid, you can use JSON object to style the Grid's Cells and Columns.

New Angular Grid: Angular Grid