Take your development further with our React Datagrid & UI components.
- A familiar, Excel-like experience for your React grid.
- Customizable cells with cell templates and themes.
- An Extensive API documentation with hundreds of demos.
- First-class support to help you create the datagrid that your application needs.
Trusted by Leading Companies
Why Choose FlexGrid for React ?
Familiar, Excel-like Functionality
Keyboard support, data aggregation, cell merging, star sizing and cell freezing all create an Excel-Like experience in FlexGrid. We also support Excel importing/exporting and copy/paste.
FlexGrid is built for speed. Our rendering is tuned for performance with virtualization on by default and our datagrid module is only about 150KB in size.
React components are fully declarative. We put extra efforts into making sure that FlexGrid can be completely configured and databound in markup.
Written in TypeScript
FlexGrid is written in TypeScript and we include definitions for our entire API. With TypeScript, you'll get an object-oriented C# feel, design-time error checking, and complete IntelliSense in VSCode.
FlexGrid includes only the key features in the datagrid module, which makes it small. We provide extension modules for special features that you can pick and choose from to keep your app small and fast.
Limitless Cell Templates
FlexGrid features Cell Templates that allow you to fully customize any cell. Cell Templates can contain HTML, React Components, Binding Expressions and more.
Wijmo's React datagrid, FlexGrid, allows you to heavily customize the look, feel, and functionality of every cell within the datagrid to match your style requirements. You're able to add both Wijmo and custom components to cells, conditionally style cells and their internal data, and dynamically update cells within the datagrid.
Wijmo's React datagrid, FlexGrid, offers the DataMap feature as a simple way to provide the grid with automatic lookup capabilities, such as displaying a customer name instead of their ID. FlexGrid will add drop-downs to columns using DataMaps with valid items to use when editing cells. DataMaps also supports dynamic DataMaps and DataMap editors.
Wijmo's React datagrid, FlexGrid, uses the CollectionView component allowing you to implement client-side paging by default and generating datagrids that display a reasonable amount of data per page. You can also connect the CollectionView directly to your data source and allow for server-side paging.
Wijmo's React datagrid, FlexGrid, allows you to virtualize your data when loading it into the datagrid. As you scroll through FlexGrid, it will load the data into the grid as needed, allowing for increased performance and infinite scrolling.
Like Excel, Wijmo's React datagrid, FlexGrid, allows you to select a range of cells over multiple 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 React 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.
Wijmo's React datagrid, FlexGrid, allows one to copy selected rows or cell data into the clipboard with built-in support. The clipboard gives you the ability to customize the clipboard actions using several of FlexGrid's clipboard events.
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.
Wijmo's React datagrid, FlexGrid, supports data sorting through its CollectionView and can be customized to allow for features such as on-demand sorting and multi-column sorting.
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.
Wijmo's React datagrid, FlexGrid, allows you to group data via CollectionView. Set multiple groups in a single datagrid and implement an Outlook-style GroupPanel to allow users to drag-and-drop columns to create groups.
Wijmo's React datagrid, FlexGrid, allows you to aggregate data to display summarized information for rows and columns in either the entire datagrid or individual sections. You're able to set where the aggregated data is displayed, as well as create custom aggregations and format options. Built-in aggregate functions include Sum, Count, CountAll, First, Last, Average, Min, Max, None, Rng, Std, StdPop, Var, and VarPop.
Wijmo's React datagrid, FlexGrid, allows you to bind child items to the datagrid, creating a TreeGrid to display your data. TreeGrid supports both bound and an unbound mode, lazy loading of data to increase performance, and importing XML data to display.
Wijmo's React datagrid, 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.
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.
Wijmo's React datagrid, FlexGrid, supports content exporting and formatting to PDFs. This allows you to not only view data in a browser, but also add FlexGrid to newly-created PDFs. Modify PDFs and reports to include FlexGrid.
Wijmo's React datagrid, FlexGrid, supports using printers as export options, allowing you to convert the datagrid 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
Wijmo's React datagrid, FlexGrid, has a Globalization class that allows you to format the display of FlexGrid's content. You'll not only be able to select the language that FlexGrid uses to display its data, but also format how it displays dates and numbers.
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 so, when setting dir to rtl on an element, that element's content will flow from the right to the left. If you place Wijmo's React datagrid, FlexGrid, within an element that is set to display content from the right to the left, FlexGrid will display its content in the same way.
Freezing & Pinning
Wijmo's React datagrid, 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.
Wijmo's React 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.
Wijmo's React datagrid, FlexGrid, allows you to perform full-text searches–filtering your data to show all matching instances found in the datagrid. You can then highlight all matching occurrences of the scanned text.
Add New Rows
Wijmo's React datagrid, FlexGrid, allows you to implement a new row feature without writing code for additional rows. Adding a blank row to the datagrid allows users to add even more rows of data. You can automatically include the blank row at either the top or bottom of the datagrid when you set the grid's allowAddNew property.
Wijmo's React datagrid, FlexGrid, allows users to modify columns by dragging and dropping their headers. FlexGrid also allows you to 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.
Wijmo's React datagrid, FlexGrid, allows you to specify column sizing in code, as well as allow users to resize columns after rendering the datagrid. 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.