Complete JavaScript Datagrid | Grid Functions Angular, React, Vue

Limitless CellTemplates

Cell Templates are now available for Angular, React, Vue and even PureJS. The new feature provide limitless templates with support for declarative markup and binding expressions.
Small Footprint Improves Performance

FlexGrid helps keep your web applications small without impacting performance and keeping load time minimal.

Familiar, Excel-Like Functionality

Excel-like keyboard support, data aggregation, cell merging, star sizing and cell freezing all create an Excel-like experience.
First-Class Framework Support

Built to be framework-agnostic, Wijmo includes full support for Angular, AngularJS, ReactJS, VueJS, and Knockout, with the same grid across frameworks.

Written in TypeScript

With TypeScript, you'll get an object-oriented C# feel, design-time error checking, and complete IntelliSense in Visual Studio.
Security Compliant

Wijmo is Content Security Policy (CSP) compliant, working seamlessly in JavaScript applications without compromising security.

The Best Angular Grid

A good Angular datagrid starts with a fundamentally sound grid. FlexGrid includes only the essential vital features and offers everything else through an extensibility model. Basic Excel-like features like sorting, grouping, and editing are built-in, while the bells and whistles are optional.

The result is a small, fast, familiar, flexible grid that includes all the benefits of Angular, including:

Declarative markup
Cell templates
Data binding
TypeScript source and samples
More resources for this Angular datagrid
- Read more about FlexGrid and Angular
- Read about Wijmo’s Angular Support

Basic JavaScript DataGrid Features

Change View:

Features

Sorting

Click on any column header will sort the column that was clicked. Sort out-of-the-box with CollectionView

TRY DEMO

Filtering

Filter any column in a JavaScript datagrid

More features

Grouping

Add drag-and-drop grouping, including data aggregation in group headers, expand and collapse groups, and nested groups

TRY DEMO

Selection

FlexGrid allows you to select a range of cells with the mouse or keyboard, just like Excel. Improve accessibility by focusing on a selected cell

More features

Custom cell formatting in JavaScript datagrid

Custom Cells

Customize cell style and format for a JavaScript datagrid

More Features

Editing

Customize editing behavior with Wijmo components. FlexGrid has built-in support for Excel-like, efficient, and in-cell editing

More Features

Virtual Scrolling

Virtualized DOM provides infinite scrolling

More features

Sorting

Click on any column header will sort the column that was clicked. Sort out-of-the-box with CollectionView

Filtering

Filter any column in a JavaScript datagrid

Grouping

Add drag-and-drop grouping, including data aggregation in group headers, expand and collapse groups, and nested groups

Selection

FlexGrid allows you to select a range of cells with the mouse or keyboard, just like Excel. Improve accessibility by focusing on a selected cell

Custom Cells

Customize cell style and format for a JavaScript datagrid

Editing

Customize editing behavior with Wijmo components. FlexGrid has built-in support for Excel-like, efficient, and in-cell editing

Virtual Scrolling

Virtualized DOM provides infinite scrolling

Selection and Formatting

Change View:

Conditional Styling

Format data based on value

Dynamic Updates

Show changes to the data source immediately

Sparklines

Include sparklines in your datagrid

Focus Selection

Improve accessibility by focusing on a selected cell

Editing

Change View:

Clipboard Support

Copy data and headers to clipboard

Read-Only & Required Columns

Prevent users from editing or leaving blank spaces

Data Validation

Ensure users save only valid data with a JavaScript datagrid

Custom Editing

Customize editing behavior with Wijmo components

Inline Editing

Turn on editing for a whole row

Popup Editor

Provide a full form in a popup

IME Support

Support characters and symbols as input

Merging

Change View:

Custom Cell Merging

Merge cells across rows and columns, as in a TV guide

Merge Headers

Merge cells in headers

Restricted Merging

Set rules on merging, such as merging only if values are the same

Row Features within a JavaScript datagrid

Change View:

Freeze Cells

Freeze columns and rows for easier scrolling

Add/Remove Rows

Allow users to add or delete rows

Aggregates

Add aggregates above or below the data

Scrolling

Change View:

Scrolling and ViewRange

Hide or show scrollbars

Fast Scroller

Provide iPhone-like scrolling

Sticky Headers

Fix headers to the top as the user scrolls

JavaScript Datagrid Events

Change View:

Mouse Events

Use hit tests to implement mouse events

Selection Events

Trigger events on cell range selection

Editing Events

Trigger events on edit

Drag rows from grid in a JavaScript datagrid

Drag Rows from a Datagrid

Drag and drop row data outside of the datagrid

Import/Export in a JavaScript Datagrid

Change View:

Features

Excel

Export Javascript datagrids to Excel

TRY DEMO

PDF

Export JavaScript datagrids to PDF

TRY DEMO

Print

Full print support. Allows users to print data either by using the print option from the toolbar or programmatically. Print all the rows of a JavaScript datagrid regardless of the number of pages it has

TRY DEMO