Kendo UI for jQuery

jQuery Data Grid (Table)

  • Best-in-class jQuery Data Grid component that makes it very easy to implement full-featured, modern, and high-performance data table views.
  • Part of the Kendo UI for jQuery library along with 100+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Grid header
  • Overview

    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

  • Toolbar Columns Menu

    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 

    Grid Column Menu
  • Grid Sizing

    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

    Compact Grid
  • Context Menu

    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 

    Grid ContextMenu
  • Adaptive Rendering

    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

  • Templates

    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

  • Selection Aggregates

    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

    Grid Selection Aggregates
  • Column Interactions

    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

  • Hierarchical Data

    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

  • Frozen Columns

    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

  • Row and Column Spanning

    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 

    Grid Row and column spanning
  • Page, Sort, Filter and Group Data

    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

  • Editing: Batch, Inline, Popup and Custom Editor

    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

  • Data Binding

    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

  • Row Resizing

    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 

    Grid Row Resizing
  • Virtualization and Endless Scrolling

    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 to Excel or PDF

    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

  • Paste from Excel

    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

  • Globalization

    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

    Keyboard Navigation
  • Keyboard Navigation

    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

    Keyboard Navigation
  • Accessibility

    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

    jQuery accessibility

All Kendo UI for jQuery Components

Next Steps

Next Steps