Feature rich & Fast Grid

Enterprise-ready Grid

Feature-complete Grid

Powered by jQWidgets


Feature rich & Fast Grid component for Desktop, Mobile, Web & BI Apps. Smart UI Grid is a professional datagrid component available for Angular, React, Vue, Javascript, Blazor. Smart.Grid is extremely fast and generates very little output. Thanks to its innovative architecture, it eliminates the typical trade-off associated with grid components — rich functionality at the expense of performance. It supports loading of large amounts of data, scrolling, paging, load-on-demand, tree list rendering, spreadsheet rendering, keyboard navigation, CRUD, sort by one or many columns, filtering with filter menu, filter row or filter toolbar, data grouping with summaries with several rendering modes, editing by cell, row, dialog, command columns. Batch Editing, built-in Validation for fields. Built-in security with customizable HTML Tags Escape. You can choose whether to escape all html tags or a black list of tags like: 'script', 'object', etc. The grid comes with many available styling options, Material UI & Bootstrap themes which allow you to quickly build eye-catching, high-performance web apps.
It is the most feature-complete Grid component available on the market - see here

Professional Grid

See online demo

The Smart UI Grid component offers top performance and responsive, fluid design. It offers easy to use and well documented APIs. The Smart UI framework ships with over ready to use 1000 examples. Like all widgets in the Smart UI framework the Grid component works across a range of devices and offers responsive, device-optimized look and behavior on PCs, tablets and mobile phones. The Grid for is trusted by thousands of companies and big user community. We offer excellent techinical support and customization services. The Smart UI framework releases frquent updates with continuous improvements.

Data Binding in Grid

The data grid component has built-in data binding capabilities and supports Client and server-side model. It can be bound to Local Data, JSON, XML, CSV, TSV, Remote Data (JSONP) and Virtual Data where data is loaded on demand. In order to bind the Grid to a data source you need to set its source property to point to an instance of Smart.DataAdapter and configure the adapter as demonstrated in our docs & examples.

Grid Custom Rendering

Sorting in Grid

Sorting is a common grid operation. The data in the grid can be sorted in several different ways: Click on a Column header, Sort menu button, Sort Header Panel or programmatically via the APIs of the grid. The default behavior of the sorting function is to apply ascending or descending sort depending values in each column. The grid's API also allow developers to extend and customize the sorting with custom sort and compare functions. The data in the grid can be sorted by one or multiple columns.

Sorting with a Sort Panel

Grid Sorting Panel

Sorting with a Menu

Grid Sort Menu

Sorting with a Column Header Click

Sorting Grid

The below image shows a sort animation appearance option built-in the Grid.

Grid Sorting

Server-side sorting where data in the Grid is loaded on demand depending on the applied sorting is supported, too.
See online demo

Filtering in Grid

The filtering in the data grid component is extremely flexible. The grid offers standard filters with context menus and selection of filtering operators and conditions. The developer may also choose to use a filter row which will appear at the top of the grid's rows. Users may enter data in each column and the filtration will be done by matching the corresponding records in the grid. The filter menus are fully customizable. The grid also provides Excel-style filters with checkbox selection of the items in each grid column. Filtering can be achieved through API as well.

Grid Filtering

With the Smart UI grid you can enable filter row in its header by setting the grid's filtering->filterRow->visible property to true. Thus based on the data type of the underlying columns data the grid will render textboxes for string values, numeric inputs or date pickers for filtering in the column headers. The following image illustrates the Filter Row functionality of our Data Grid

Grid Filter Row

You can enable filtering via checkbox list like in Excel in the Smart UI grid filter menu by specifying filtering->filterMenu->mode to "excel" setting.

Grid Filter With Checkboxes

Server-side filtering where data in the Grid is loaded on demand depending on the applied filter is supported, too.
See online demo

Grouping in Grid

The data in the Data Grid can be grouped and also you can turn on Group Aggregates. You can group by using the Grid Column's Menu or through its API. You can configure whether the groups are expanded or collapsed by default and can choose from several rendering modes.

Grouping with a Panel

Grid Grouping

Grouping with a Column Menu

Grid Grouping Menu Server-side grouping where data in the Groups is loaded on demand is supported, too.
See online demo

Editing in Grid

Our component supports multiple edit modes. Users can edit by cell, by row or through a popup. Edit validation is built-in as well. Some of the editors which can be used are TextBox, DateTimePicker, NumberInput, ComboBox, DropDownList, CheckBox. Custom Editors can be easily applied, too. One of the advanced editing capabilities is the 'Batch Editing' mode. In that mode the edit changes of the Grid are applied after a 'Save' button is clicked or API method is called. Command columns are available and customizable, too.

Grid Cell Edit

Grid Popup Edit Editing can be validated by using custom validation functions. Developers may also add custom editors and customize the editing process through the API.

Nested Grids

Smart.Grid supports nested Grids. Each row may have a sub-grid associated to it. When a toggle button is clicked, the sub-grid can be displayed either in a row detail or in a popup window.

Grid Nested Grids

Paging in Grid

Paging allows you to display data sets in different pages. The paging feature is used for easier navigation and faster loading. Our Grid supports two built in paging layouts, but users may customize the rendereing through API, too.

 Grid Paging

Server-side paging where data in the pages is loaded on demand is supported, too.

Grid Conditional Formatting

The Grid offers many options for columns and cells formatting. You can align the text in the cells left, right or center and have different bacckround colors. The columns can be shown or hidden and can be auto-sized. You can also have checkboxes, images and other widgets in the columns. In addition Smart UI Grid for enables complex features like column tooltips, foreign key, computed and pinned columns. You can also do reordering and resizing of the columns. Conditional Formatting can be easily applied through a built-in UI Dialog or through the Grid API

Grid Conditional Formatting
See online demo


The Smart UI grid can be used in unbound mode as a spreadsheet. Users can merge cells, edit data, resize rows & columns, use keyboard navigation to navigate, cut, copy or paste data and select cells just like in Google Spreadsheet or Excel. Spreadsheet

Tree Grid

Smart UI Grid data can be displayed in a hierarchical-mode. The Tree Grid(popular also as Tree List) display mode is suitable display mode, when your data is hierarchical.  Tree Grid

Columns & Rows Freeze

Freeze/Pin Columns to 'left' and/or 'right' is supported. You can also freeze rows to 'top' and/or 'bottom'.

Grid Column Freeze

Columns & Rows Resize

Resizing of Columns & Rows is supported and not only that, but we have several different resize modes. In the 'split' resize mode, the new column/row size will increase or decrease the next column/row size, while in the default mode, it affects the overall grid size.

Grid Column Resize

Grid Columns Resize

Columns & Rows Drag & Drop

You can reorder rows & columns or drag them to different locations and handling the 'dragEnd' event.

Grid Column Reorder

Columns with Templates

The content of each column can be customized with HTMLTemplateElement, custom format function which replaces the built-in rendering or a custom String.

Grid Column Templates

Custom Templates can be applied to the Grid cells and because of the built-in UI Virtualization, the rendering will still be fast.

Columns Formatting

The cell values in each grid column can be formatted with a format string. Our Grid component has built-in support for Numeric, Dates and Scientific formats. By using custom format function, custom formats can be applied programmatically, too.

Grid Column Formatting

Grid Command Column

Command columns allow you to easily apply built-in actions in a grid component. For example, we have built-in commands for removing a row or editing a row. In your web application scenario, you may need something custom and that is why our grid supports custom command columns, too. They allow you to add a custom column with a callback function and display icons or labels in that column.

Grid Command Column

See online demo

Grid Localization

Each string used in the grid can be localized. That happens by using two properties - 'locale' and 'messages'. 'messages' is a JSON property in the following format: 'en': { key: value }, where 'en' is the locale. By setting the 'messages' value, you will be able to switch to different locales by setting only the 'locale' property dynamically.

grid localization

See online demo

Grid Context Menu

Context Menus can be displayed by handling the row & cell click events from the Grid API. The context menu can have any number of menu items handling custom actions.

grid context menu

See online demo

Grid Column Chooser

The column chooser popup allows you to quickly show/hide and reorder your grid columns.

grid context menu

See online demo

Material Design

The UI Themes used in the Grid component follows the Google's Material Design best practises. You can choose from 7 built-in themes available in both Light & Dark modes. The rich styling API allows you to apply styles by setting CSS variables. For more advanced styling, the Grid has SCSS files, but also an online theme builder tool. That allows you to quickly build eye-catching, high-performance, responsive web applications with our UI component.

Material Grid Component


Bootstrap is one of the most popular UI Frameworks used in many web applications. Our Grid component can be easily integrated in such applications, because of the professional looking Bootsrap Theme. All you need to do is to refer to our Smart Bootstrap theme file in your web applications in order to use the Grid with Bootstrap style.

Bootstrap Grid Component

Server-side model

The Smart UI grid supports Server-side model. That means that data can be loaded on demand, filtered, sorted & grouped. This is really important when you have an application scenario with millions of data records, which cannot be loaded through the client-side. Advanced Grid

Selection & Keyboard Navigation

Users can choose from selection by Row(s), Cell(s) and Excel-like selection. Column & Row headers selection as well as checkboxes in row headers are optional, too.

Grid Selection

The Smart UI Grid comes with keyboard navigation. You can navigate to any cell by using the keyboard arrows. Clipboard operations with Ctrl+C, Ctrl+V, Ctrl+X are enabled, too.

The following image illustrates how grid cells selection is applied with dragging.
Grid Selection Excel
See online demo

Row Details

Each row in the Grid can have details associated to it. The details can be displayed below the row or within a new popup dialog displayed when you click on the row toggle button.

Grid Row Details

See online demo

Advanced Features in Grid

For the applications requiring complex features, our DataGrid offers drag and drop (including dragging multiple rows), row details, custom keyboard navigation, deferred scrolling on large data sets, nested grids, master-details grids, toolbars on the grid, status bar, right to left support and more. User Interface Virtualization is supported and enabled by default. That feature in general allows you to bind the Grid to a large data set, the component creates UI elements only for the view and reuses these UI elements while scrolling the data horizontally or vertically. Charting Grid Data
See online demo

Export and printing in Grid

The Data Grid UI component offers export to Excel, PDF, XML, HTML, CSV, TSV and JSON. Printing is supported, too. The Grid has API to export the Grid data to an image in ".png" format.
See online demo