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 more than 100 professionally designed components developers trust for all their jQuery UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms, and a 3-million-strong developer community.
Grid
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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

    jquery-grid-overview
  • 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

    mobile-support
  • Column Interactions

    Re-size and reorder the columns you have provided on the client in your jQuery Data Grid without any requests to the server. Additionally, the provided context menu allows users to easily hide or display columns.

    See the jQuery Data Grid Column Menu demo

    grid-column-menu
  • 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

    hierarchy
  • 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

    frozen-columns
  • 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

    grid-page-sort-filter-or-group-data
  • 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-editing
  • 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

    jQuery-data-binding
  • 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

    endless-scrolling
  • 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

    grid-range-selection-and-export-to-excel
  • 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

  • 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