background

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 120+ professionally-designed components.
  • Includes support, documentation, demos, virtual classrooms, learning resources and more!
Grid header
  • Build Responsive, Enterprise-Grade Tables with Ease

    Create fast, responsive and highly customizable jQuery data grids with the Kendo UI for jQuery Data Grid. Equipped with essential and advanced features like sorting, filtering, paging, editing and exporting, the Grid component adapts to any scenario—from simple jQuery tables to complex business dashboards. 

    See the jQuery Data Grid demo

    jquery-grid-overview
  • AI Custom Column

    Add an AI assistant to a dedicated Grid column so users can ask questions about a specific record and get contextual, row-level answers. The demo integrates the InlineAIPrompt component inside the column for an interactive, per-row experience.

    See the jQuery Grid AI custom column demo.

     

  • AI Toolbar Highlight

    Showcase AI-assisted analysis by letting users stack multiple operations and visualize the effect row by row. Prompts like filter by status then group by customer are executed in sequence, with the Grid updating highlights to reflect the combined result.

    See the jQuery Grid AI toolbar highlight demo.

     

  • AI Assistant Toolbar

    Let users ask for filters, sorts and groups in plain language directly from the Grid toolbar. Each new prompt clears previous results and highlights the rows that match the latest instruction so users always see a single, clear outcome.

    See the jQuery Grid AI toolbar demo.

     

    angular smart grid custom column
  • Paging and Virtualization

    Improve performance by loading data in chunks with paging, virtualization and infinite scrolling. Ideal for working with large data sets without sacrificing speed. 

    See the jQuery Paging and Virtualization demo

    Grid Paging
  • Editing Modes

    Choose from multiple editing approaches like inline, popup or batch editing and customize the editor for each column to match your data entry workflows. 

    See the jQuery Editing demo

  • Grouping and Aggregates

    Group rows by any column and display aggregates like sum, average, count or custom calculations in group headers or footers. 

    See the jQuery Grouping and Aggregates demo 

    Kendo Grid grouping and aggregates
  • Export to PDF and Excel

    Export grid content to PDF or Excel with customizable file names, page setup and formatting. Exports honor applied filters, sorting and groupings. 

    See the jQuery Excel Export demo

    See the jQuery PDF Export demo

    Kendo Grid export to excel
  • Column Interactions

    Let users reorder, resize, show/hide, lock or freeze columns as needed. Enhance data exploration with sticky headers and column menus. 

    See the jQuery Data Grid Column Menu demo

    grid-column-menu
  • Responsive and Adaptive Rendering

    Deliver a consistent experience across devices. The Grid supports adaptive rendering for smaller screens and responsive layout adjustments. 

    See the jQuery Adaptive Rendering demo

    jQuery Data Grid Adaptive Tools demo
  • Accessibility and Keyboard Navigation

    Fully compliant with WCAG, ARIA and Section 508 standards. The Grid supports full keyboard navigation, screen readers and highcontrast themes. 

    See the jQuery Accessibility demo 

    See the jQuery Keyboard Navigation demo

    Accessibility 2024
  • Hierarchical Grid

    Nest additional grids or templates within rows to display related records or masterdetail layouts. Expand and collapse detail rows easily. 

    See the jQuery Hierarchy Grid demo 

  • Additional Features

    The Kendo UI for jQuery Data Grid contains a vast number of features able to virtually any user need:

  • Why Choose the Kendo UI for jQuery Grid?

    Trusted by thousands of developers worldwide, the Kendo UI for jQuery Grid is optimized for performance, flexibility and extensibility. Whether you’re building enterprise admin panels, line‑of‑business apps or reporting dashboards, the Grid component delivers the functionality and reliability needed to manage complex data with confidence. 

    Explore the Kendo UI Data Grid Component Documentation

    jquery grid overview
  • Flexible Data Binding

    Connect your grid to local JavaScript arrays, JSON data, OData, Web API services or custom transports. The Grid makes it easy to populate and manipulate tabular data in real time. 

    See the jQuery Data Binding demo

  • Sorting and Filtering

    Enable single or multi-column sorting and apply built-in or custom filters with intuitive UI components. Filter modes include row filtering, menu filtering and checkbox selection. 

    See the jQuery Sorting demo

    See the jQuery Filtering demo

    grid-page-sort-filter-or-group-data

Frequently Asked Questions

  • What is jQuery Data Grid?

    A jQuery Data Grid (sometimes called a jQuery grid table or jQuery UI table) is a component that presents data in rows and columns and provides rich features such as sorting, filtering, paging, editing, exporting and more.

  • Does the Data Grid support hierarchical data or master-detail views?

    Absolutely! You can embed a detail template or child grids within each row to create expandable masterdetail layouts, enabling you to display related records without leaving the current context. 

     

  • What editing options are available in the jQuery UI table?
    The Kendo UI jQuery Grid offers inline, popup and batch editing modes out of the box. You can also create custom cell editors such as dropdowns, date pickers or numeric textboxes to tailor the editing experience. 
  • Where can I find more documentation and examples for the jQuery Data Grid?

    You can explore the extensive online demos and API reference on the Kendo UI for jQuery docs site, including a comprehensive jQuery grid table example for every feature. 

     

     

  • Is the Data Grid responsive and mobile-friendly?
    Yes. The component supports responsive layout adjustments, adaptive rendering for small screens, touch interactions and mobilefriendly navigational aids to offer a seamless experience on any device.

     

  • How do I bind data to the Kendo UI for jQuery Grid?
    You can bind the Grid to local JavaScript arrays, JSON services, OData, RESTful Web API endpoints or any custom transport. Simply configure the dataSource, map fields and the grid will render your jQuery table automatically. 

All Kendo UI for jQuery Components

Next Steps

Next Steps