Ideas That Inspire. Discover What's New in Our Release Section.
Excel-like keyboard support, data aggregation, cell merging, star sizing, and cell freezing create a familiar experience.
Cell Templates provide limitless templates with support for declarative markup and binding expressions for Angular, React, Vue and PureJS.
Our FlexGrid module clocks at 113kb, it'll help keep your applications lean and fast with minimal load time.
Written in TypeScript
With TypeScript, you'll get an object-oriented C# feel, design-time error checking, and complete IntelliSense in Visual Studio.
FlexGrid allows you to heavily customize the look, feel, and functionality of every cell within the grid to match your style requirements. You can add Wijmo and custom components to cells, conditionally style cells and their internal data, and dynamically update cells within the datagrid.
FlexGrid allows you to virtualize your data when loading it into the grid. As you scroll through FlexGrid, it will load the data into the grid as needed, allowing for increased performance and infinite scrolling.
Like Excel, FlexGrid, allows you to select a range of cells over multipl rows and columns. FlexGrid also allows you to modify the marquee of the selection, as well as set the selection through other components.
Wijmo's FlexGrid, comes with an extensive list of features that support accessibility. ARIA technology helps users interact with and modify the FlexGrid and the Excel-like keyboard shortcuts enable users to easily traverse its contents.
FlexGrid, has built-in support for Excel-like, in-cell editing. Customize the data stored inside of the FlexGrid, such as data validation, pop-up editors, and custom editors.
Flexgrid supports multiple filter options, from standard text and highlighting to Excel-like filtering. Use server-side filtering when loading data from an OData source.
Aggregate data to display summarized information for rows and columns in the entire datagrid or individual sections. You're able to set where the aggregated data is displayed, create custom aggregations, utilize built-in functions, and format options.
FlexGrid allows you to view hierarchical data through both a master-detail model and through the use of RowDetail. Use the master-detail model to select an item inside of a FlexGrid and view its details, or use RowDetail to allow nesting data within FlexGrid's rows.
Import Export Excel
If your business relies on Excel for data management, you can use FlexGrid to both import XLSX files, as well as export your FlexGrid data into an XLSX file to view in Excel. FlexGrid also supports both synchronous and asynchronous data exportation and has the ability to retain formatting and styles set by FlexGrid and Excel.
FlexGrid supports using printers as export options, allowing you to convert the grid into a format that supports printing. With FlexGrid's PrintDocument class, you can convert a datagrid into a table element, which can then be rendered onto a page and printed out.
Globalization and Localization
Some languages render content from the right-hand side to the left-hand side of a page. HTML accommodates this by using the dir attribute. Place FlexGrid within an element set to display content from right to left; FlexGrid will display its content in the same way.
Freezing & Pinning
FlexGrid offers Excel-like row and column freezing and pinning. This allows you to keep rows and columns in view as users navigate the content of the datagrid.
FlexGrid supports the implementation of sticky headers. Sticky headers remain visible when users scroll through the datagrid while maintaining all of the functionality of a static header row.
Add New Rows
FlexGrid allows you to implement a new row feature without writing code for additional rows. Adding a blank row to the grid allows users to add even more rows of data. You can automatically include the blank row at either the top or bottom of the grid when you set it's allowAddNew property.
FlexGrid allows users to modify columns by dragging and dropping their headers and disable reordering in the entire datagrid or in individual columns. Enable reordering by setting the allowReordering property as true and dragging and dropping the column header from one index to another within the datagrid.
FlexGrid allows you to specify column sizing in code, as well as allow users to resize columns after rendering the grid. Like Excel, users may drag the column header's right edge to expand or decrease sizing, or double-click the edge to auto-size the column to fit its content.
Featured Blogs, Videos, and Other Resources
Wijmo's Customer Feedback & Awards
"Good value for money and high quality components"
"Great tools, not cheap, but worth the money for us."
"I've been using Wijmo controls for about a year and a half. Fantastic product. Fantastic support!"
"We rely on functionality of Wijmo Core's FlexGrid in our massive next-generation platform products. Wijmo's modern, full-featured FlexGrid with sophisticated grid manipulations is what you will find at the heart of our workflow."
AARON MENDEZ, MANAGER OF THE USER EXPERIENCE, THOMSON REUTERS
"I don’t give kudos lightly, and without merit, but the Wijmo team has been awesome to work with. Just amazingly responsive! I am so glad I recommended Wijmo to my partners."
GABOR FARI, PARTNER TECHNOLOGY STRATEGIST - MICROSOFT CORP
"With Wijmo's extensibility model, the Microsoft Dynamics team was able to quickly customize and incorporate Wijmo 5 components into our new release."
PARAM KAHLON, GENERAL MANAGER, MICROSOFT DYNAMICS CRM ENGINEERING