Webix Grid Features – High-Performance, Customizable JavaScript Grid
Explore everything Webix Grid can do. Here we will guide you through all its features and demonstrate how it works with live demos.
They are available only in the Webix Grid Pro version.
You will find a detailed comparison of the GPL and Pro versions of Webix Grid on this page.
Data loading
Webix Grid supports loading data from all needed formats including JSON, XML, CSV, JS Arrays, HTML Tables. You can use familiar formats from static files or remote sources to populate the grid. It supports flexible loading from both static and dynamic sources (APIs, databases).
Column configuration
Webix Grid offers fully customizable columns. To match your data structure, display logic, and UX needs you can configure your columns, add headers and footers, enable filtering, sorting and editing.
Sorting
Webix Grid is designed for flexible and efficient data presentation, regardless of the data source or volume. It supports built-in sorting for columns, for complex data structures you can define and implement custom sorting logic.
Filtering
Webix Grid filtering can work on both the client and server sides. You can add filters to any column using built-in types like text, select, date, or number, combine them or use custom ones.
Advanced filtering PRO
To follow advanced search scenarios, rich- or multi-select filters, datepicker or date range filters, as well as Excel filters can be defined.
Auto Sizing & adjustments
Adjust a data grid size with multiple features including hidden columns ensuring your data grid remains responsible and readable.
Pagination & lazy loading
To handle large datasets efficiently Webix Grid provides several options such as pagination, lazy rendering and dynamic loading. These methods ensure smooth performance, even with thousands or millions of rows.
Frozen columns and rows PRO
Keep key data always in view by freezing specific rows or columns. This feature improves navigation and readability, especially in large datasets with horizontal or vertical scrolling.
Scrolling
Webix Grid supports both vertical and horizontal scrolling, with options for virtual scrolling to load data dynamically as the user scrolls. This ensures high performance and a seamless user experience free from delays or freezes.
Grid grouping PRO
Define column groups, expand or collapse in a click or customize their behavior. Our grid supports grouping columns with a collapsible header.
Subrows and subviews PRO
Expand your grid with flexible ways to display additional data within tables: subrows allow collapsible, inline detail rows beneath a main row, offering extra context without navigation. Subviews enable embedding nested tables directly inside a row.
Rowspans and colspans PRO
To create grouped or hierarchical layouts within the grid you can merge cells vertically (rowspan) or horizontally (colspan) to keep the data presentations clear and organized.
Sparklines
When displaying time-series trends such as sales, KPIs or comparing metrics side-by-side across rows, sparklines can be a highly efficient and lightweight solution that ensures keeping the UI clean even for large datasets.
Header menu PRO
Give users control over column visibility and order with the built-in header menu. It allows showing, hiding, and rearranging columns, improving the grid flexibility and user experience.
Styling & formatting
Webix Grid allows full control over the look and feel of your data. You can apply custom styles to rows, columns, or individual cells based on their content or state. Built-in formatting options include number, date, currency, and custom templates.
Use Webix Skin Builder to customize fonts, paddings, margins, heights, borders, and colors. Export production-ready CSS to maintain brand consistency.
Try Skin Builder
Selection
Webix Grid offers rich interaction patterns to improve user experience and productivity. Single and multiple cells, rows, columns and block selection modes are available in the datagrid.
Area and custom area selection PRO
Webix Grid Pro users can enable an Excel-like area selection feature. It also grants you the ability to specify custom selection behavior in the datagrid.
Drag-and-drop
Easily rearrange and reorder rows or columns using intuitive drag-and-drop functionality. Webix Grid supports both built-in and customizable DnD behavior, including drag-and-drop between grids.
Clipboard operations
Use standard keyboard shortcuts like Ctrl+C and Ctrl+V to copy and paste data from the grid to external applications or move it within one or multiple Webix data grids.
Editing
Edit data in a datagrid using 12 predefined editors in different edit modes (cell, row or define a custom logic) with the possibility to create custom ones.
Math operations
Perform real-time calculations directly in the grid using built-in mathematical expressions or by defining formulas for individual cells or columns.