jQuery Data Grid (Table)

The Kendo UI for jQuery Data Grid component gives you a responsive, high performance, and full-featured data table view ready to roll right out of the box. Enjoy over 100 features from filtering and sorting data, to advanced features like pagination and hierarchical data grouping.

It's the most advanced jQuery data grid on the market. But don't just take our word for it, check out the demo.

See the jQuery Data Grid demo

The Kendo UI for jQuery Data Grid supports a global columns menu providing the possibility to display a customizable button on the toolbar to show, hide, or resize specific grid columns, as well as to clear all filters. 

See the jQuery Grid Toolbar Column Menu 
 

Reduce the Data Grid size to achieve better visibility on smaller devices or render as much data as possible with the Grid sizing capability. The size setting affects the inner components, including the Toolbar, Pager and editors, such as the TextBox and NumericTextBox.

See the jQuery Data Grid Sizing demo

The Kendo UI for jQuery enables you to display a context menu within the component, providing a convenient way to apply data processing operations to specific rows. The context menu empowers users to easily add, edit, and delete records, select and reorder rows, and export the data grid to a PDF or Excel file.  

See the jQuery Grid Context Menu demo 

Optimize the jQuery Data Grid for mobile viewing by settling a simple property. The view will be configured for small screens, the column menus will convert to slides, and more.

See the jQuery Data Grid Adaptive Rendering demo

Enjoy full control over the way your jQuery Data Grid looks to the end user. Using the template feature of the Grid component, you can easily customize the display and layout of toolbar, columns and rows.

See the jQuery Data Grid Templates demos

The Kendo UI for jQuery Data Grid enables users to get a quick snapshot of some of the most important aggregates based on the selected data. You can use the built-in approach and display the metrics in the status bar at the bottom of the grid or create your own elements displaying the data. 

See the jQuery Grid Selection Aggregates Demo

The jQuery Data Grid gives you many options concerning column interactivity. For flexible layout and performance, you can allow users to re-size and reorder the columns you have provided on the client without any requests to the server. For a great UX, a context menu will allow users to perform actions such as sort, filter, and toggle visibility.  Additionally, the context menu can be enabled or disabled on a per-column basis.

See the jQuery Data Grid Column Menu demo

Quickly create an N-level hierarchical Grid in jQuery to represent your data. This hierarchy can be set up using both server driven and client-driven approaches, ensuring that you can implement the hierarchical Kendo UI for jQuery Grid component in any application.

See the jQuery Data Grid Hierarchy demo

Useful when going through large amounts of data, the Frozen Columns feature of our jQuery Grid lets you lock chosen columns by simply specifying locked in the column properties. Furthermore, the Grid also automatically provides a column menu to allow the user to unlock and lock columns.

See the jQuery Data Grid Frozen Columns demo

The Kendo UI for jQuery Data Grid enables you to to span a cell between multiple rows, as well as span multiple columns.  

See the jQuery Data Grid Row and Column Spanning demo 

Page, sort, filter and even group your data using the intuitive interface of the Grid component. Using a few easy-to-implement properties, any Grid can have this rich user experience.

See the jQuery Data Grid demos

You can enable automatic data editing for the jQuery Data Grid when it’s bound to a DataSource control like SqlDataSource, LinqDataSource, EntityDataSource, etc., or use the extensive API to handle the CRUD operations in a custom manner. Display the edit form inline, as a regular form or in a popup. Enable batch editing to allow users to edit multiple items and save them all by hitting the Save button just once.

See the jQuery Data Grid Editing demos

Use any declarative data source control (AccessDataSource, SqlDataSource, LinqDataSource, EntityDataSource, ObjectDataSource, XmlDataSource, OpenAccessDataSource), or bind the grid to your custom objects on the fly. Take advantage of the server events, which are executed only when the grid needs to get fresh data from the server. Declarative and programmatic client-side binding to ASP.NET Web Services, WCF, ADO.NET, OData services and Page Methods is also supported. Whether you want to use local data, or to serve your data via calls back to the server, you are covered. Out-of-the-box, the jQuery Grid can bind to these various sources allowing you to pick the most optimal solution for your implementation.

See the jQuery Data Grid Data Binding demos

The jQuery Grid component enables you to easily resize the grid rows to meet your specific needs. For even more convenience, you can select multiple rows and resize them simultaneously.  

See the jQuery Grid Row Resizing demo 

In cases where you need to work with large amounts of data, the jQuery Data Grid supports virtualization of columns and rows and endless scrolling scenarios. With this feature, an initial data set is loaded and when the user scrolls to then end, the next set is retrieved.

See the jQuery Data Grid Virtualization demos

Export the data from your grid to Excel or PDF using client-side, server agnostic export functionality. You can provide buttons that export the contents in their entirety or export the current selection. You can even provide a button to copy to Excel.

See the jQuery Data Grid Export demos

The Kendo UI for jQuery Data Grid enables users to paste content from an Excel sheet to the grid table cells.  

See the jQuery Grid Paste from Excel demo
 

Effortlessly guide users to any data point with the Kendo UI for jQuery Grid “scroll to item” method. Whether it needs to initially display a specific row or to auto-navigate based on certain triggers or user actions, the scrollToItem() method makes it easy to deliver intuitive user experiences.

In a scrollable Grid case, the ID of the data item is passed to the scrollToItem() method, while in a virtual scrolling scenario, when the row is not yet loaded, the ID of the data item is passed and a callback function to the scrollToItem() is triggered.

See the jQuery Grid Scroll to Item demo 

The jQuery Data Grid component supports any globalization or localization scenarios. You can also enable RTL mode to display the control’s text and UI elements from left to right.

See the jQuery Data Grid Localization demo

Improve accessibility and productivity with keyboard-only navigation. This component supports keyboard navigation to help navigate and interact with items.  

See the jQuery Data Grid Keyboard Navigation demo

The jQuery Data Grid component is compliant with Section 508 standards, is AA rated with WCAG 2.0 and follows WAI-ARIA standards.

Read the jQuery Data Grid Accessibility documentation