High-Performance JavaScript Data Grid for Large Data Volumes

List of Services

    Upgrade your web applications with FlexGrid, which includes various features such as data binding, editing, filtering, and sorting.

    • Includes various features such as data binding, editing, filtering, and sorting.
    • Present your data in a new style with sparklines, buttons, hyperlinks, star ratings, and image options.
    • Full support for popular Angular, React, and Vue.js
    • A friendly, mobile-first interface
    Download

    Unlimited CellTemplates

    Cell templates are now available in Angular, React, Vue, and PureJS. This new feature provides unlimited templates with support for declarative markup and binding expressions.

    Familiar Features Similar to Excel

    Excel-like keyboard support, data aggregation, cell merging, star resizing, and cell freezing features provide end users with an Excel-like working experience.

    JavaScript DataGrid Written in TypeScript

    TypeScript lets you develop with the feel of object-oriented languages like C#/Java, with design-time error checking and full IntelliSense capabilities.

    Improved Performance in a Small Footprint

    FlexGrid keeps your web applications small by minimizing load times without impacting performance.

    Best Framework Support

    Built to be framework agnostic, Wijmo includes full support for Angular, AngularJS, ReactJS, Vue.js, Vue3 Beta, and Knockout.

    Security Level

    Wijmo is Content Security Policy (CSP) compliant, works seamlessly with JavaScript applications without compromising security features.

    Ask Anything!

    Share your vague concerns and questions about Spread.NET with MESCIUS's expert team. We empathize with your concerns and are here to help.

    Online Consultation

    JavaScript Data Grid Demo

    FlexGrid

    JavaScript Data Grid Key Features

    Custom Cells

    With Wijmo’s JavaScript DataGrid, FlexGrid, you can extensively customize the appearance, behavior, and functionality of every cell to match your styling requirements. You can add both Wijmo and custom components to cells, apply conditional styling to cells and their underlying data, and dynamically update cells within the DataGrid.


    TreeGrid

    You can create a TreeGrid by binding sub-items to the DataGrid to display hierarchical data. The TreeGrid supports both bound and unbound modes, deferred loading for improved performance, and importing XML data for display.


    Search

    You can perform full-text searches, allowing you to filter data and display all matching instances within the DataGrid. All items that match the scanned text can be highlighted.



    Demo

    Grouping

    With Wijmo’s JavaScript DataGrid, FlexGrid, you can group data using CollectionView. You can set up multiple groups in a single DataGrid and implement an Outlook-style GroupPanel, allowing users to create groups by dragging and dropping columns.


    FlexGrid

    Full Features of the JavaScript Data Grid

    Data & Performance

    • Data Binding

      FlexGrid supports both client-side and server-side data binding. You can bind it to a simple JavaScript array, an observable CollectionView, a remote OData server, or a real-time WebSocket server.


      • Arrays and CollectionViews - Demo | Doc
      • Remote Data Binding - Doc
      • OData Data Binding - Demo | Doc
      • Unbound Mode - Demo

    • Virtual Scrolling

      With FlexGrid, you can virtualize data when loading it. As you scroll the grid, data is loaded on demand, improving performance and enabling infinite scrolling.


      • Virtual Scrolling - Demo

    • Real-Time Updates

      The FlexGrid control automatically updates all cells whenever the data source changes.


      • Real-Time Updates - Demo

    Data Sorting & Organization

    • Selection

      With FlexGrid, you can select cell ranges across multiple rows and columns, just like in Excel. You can modify the selection and also set selected ranges through other components.


    • Sorting

      Wijmo’s JavaScript DataGrid, FlexGrid, supports sorting through CollectionView and can be customized to allow features such as on-demand sorting and multi-column sorting.


      • Sorting - Demo
      • On-Demand Sorting - Demo
      • Multi-Column Sorting - Demo

    • Paging

      FlexGrid can use the CollectionView component to create a DataGrid that displays a manageable amount of data per page. You can bind the CollectionView directly to the data source and also enable server-side paging.


    • Column & Pin Freezing

      It provides Excel-like row and column freezing, allowing users to keep rows and columns visible while navigating the DataGrid’s content.


    • Column Resizing

      You can set column widths in code, and users can also resize columns after the DataGrid is rendered. Just like in Excel, users can drag the right edge of a column header to expand or shrink it, or double-click the edge to auto-fit the column to its content.


    • Column Reordering

      You can modify columns by dragging and dropping headers, and you can disable reordering for the entire DataGrid or for individual columns. Set the allowReordering property to true and drag a column header from one index to another within the DataGrid to enable reordering.



    Custom Cell

    • Cell Templates

      You can declaratively define custom content in FlexGrid cells. Templates can include arbitrary components and HTML elements along with property and event bindings. All types of grid cells—data cells, header cells, editors, and more—can be defined using templates.


      • Cell Templates - Demo

    • Cell Merging

      FlexGrid supports content-based cell merging.


      You can merge data cells based on matching content using the allowMerging property. You can also merge header cells, create custom cell merging rules, and set restrictions on how FlexGrid merges cells.


    • Conditional Formatting

      You can use the formatItem event to customize the content or style displayed in each cell.


      • Conditional Formatting - Demo

    • Sparklines

      You can use the formatItem event to customize the content or style displayed in each cell, and define star ratings and sparklines.


    Data Entry & Editing

    • DataMaps

      FlexGrid provides a simple way to offer automatic lookup features in the grid, such as displaying customer names instead of IDs, through its DataMap functionality. When editing a cell, FlexGrid uses a DataMap with valid items to add a dropdown to the column. DataMaps also support dynamic DataMaps and a DataMap editor.


      • DataMaps - Demo
      • Dynamic DataMaps - Demo
      • DataMap Editors - Demo

    • Editing

      FlexGrid natively supports Excel-like in-cell editing. You can customize the data stored within FlexGrid using features such as data validation, popup editors, and custom editors.

      • Quick Editing - Demo
      • Read Only - Demo
      • Validation

            Event-Based | CollectionView-Based

      • Inline Editing - Demo
      • Pop-Up Editing - Demo
      • Custom Editing - Demo
      • Input Method Editor - Demo

    • Add New Row

      You can implement the new row feature without writing code for additional rows. By adding a blank row to the DataGrid, users can add more data rows. When setting the allowAddNew property of the grid, a blank row can be automatically included at the top or bottom of the DataGrid.


    Accessibility & Localization

    • Accessibility

      FlexGrid comes with a wide range of accessibility features. ARIA technologies help users interact with and modify FlexGrid, and keyboard shortcuts allow content to be easily navigated, similar to Excel.


      • WAI-ARIA Support - Demo | Doc
      • Keyboard Navigation - Doc
      • Click-Event Handling - Doc

    • Globalization

      FlexGrid includes globalization classes that allow you to format the display of its content. You can choose the language FlexGrid uses to display data, as well as specify how dates and numbers are presented.


    • Text Direction

      Some languages render content from right to left. HTML uses the dir attribute to accommodate this. Place FlexGrid inside an element set to display content from right to left, and FlexGrid will render its content in the same way.


      • Right-to-Left (RTL) - Demo

    Data Search

    • Filtering

      FlexGrid supports various filtering options, ranging from standard text and highlighting filters to Excel-like filtering. When loading data from an OData source, server-side filtering is used.


    • Search

      You can perform full-text searches, allowing you to filter data and display all matching instances in the DataGrid. All items that match the scanned text can be highlighted.


    Data Analysis

    • Grouping

      With Wijmo’s JavaScript DataGrid, FlexGrid, you can group data using CollectionView. You can set up multiple groups in a single DataGrid and implement an Outlook-style GroupPanel, allowing users to create groups by dragging and dropping columns.


    • Aggregation

      You can aggregate data to display summary information for rows and columns in the entire DataGrid or in individual sections. You can set where the aggregated data appears, create custom aggregates, and leverage built-in functions and formatting options.


      • Aggregation - Demo | Doc
      • Aggregation Location

            Data Above | Data Below

    Hierarchical Grid

    • TreeGrid

      You can create a TreeGrid by binding sub-items to the DataGrid to display hierarchical data. The TreeGrid supports both bound and unbound modes, deferred data loading for improved performance, and importing XML data for display.


    • Master-Detail

      With FlexGrid, you can view hierarchical data using a master-detail model and RowDetail. The master-detail model allows you to select an item within FlexGrid and view its details, while RowDetail enables nested data within rows of the FlexGrid.


      • Master-Detail - Doc
      • Separate Grid - Demo
      • Nested Grid(RowDetail) - Demo | Doc

    Import / Export / Print

    • Excel Import/Export

      If your business uses Excel for data management, you can use FlexGrid to import XLSX files and export FlexGrid data to XLSX files for viewing in Excel. FlexGrid also supports both synchronous and asynchronous data export and preserves the formatting and styles set in both FlexGrid and Excel.


      • Import/Export - Doc
      • Asynchronous Export - Demo

    • PDF Export

      FlexGrid supports content export and PDF formatting. This allows you not only to view data in the browser but also to include FlexGrid in newly created PDFs. You can modify PDFs and reports to incorporate FlexGrid.


      • Export to File - Demo
      • Export to PdfDocument - Demo
      • Expense Report - Demo
      • Customization - Demo

    • Clipboard

      With FlexGrid, you can copy selected row or cell data to the clipboard using built-in support. The clipboard also provides the ability to customize clipboard operations using various FlexGrid events.


    • Print

      FlexGrid supports printing through its export options, allowing you to convert the DataGrid into a printable format. Using FlexGrid’s PrintDocument class, you can transform the DataGrid into table elements, render them on pages, and print.


    Tips for Using JavaScript Data Grids

    How to Use FlexGrid - Basic Functions

    Learn about the basic features of FlexGrid, our most popular control with fast, flexible features!

    How to Use FlexGrid - Style

    Learn how to customize the appearance of FlexGrid.

    How to Use FlexGrid - Utilization

    Discover handy features that enhance FlexGrid's usability, including filters, grouping, and paging!

    Ask Anything!

    Share your vague concerns and questions about Spread.NET with MESCIUS's expert team. We empathize with your concerns and are here to help.

    Online Consultation

    Wijmo Tutorial

    You can check out the demo and learn how to implement it in practice through the tutorial.


    Provides code for Angular, React, and Vue frameworks.

    Online Tutorial

    Referencing the Wijmo Library

    Easily Customize Wijmo Controls!

    Easily create design themes using the Wijmo CSS Theme Designer and apply the created CSS to your Wijmo controls!

    Try It Now

    Easily customize the settings of Wijmo controls using the Wijmo Control Properties Editor. You can modify and check the settings for over 20 different controls. Download these settings and quickly and easily apply them to your web without any additional coding.

    Try It Now

    Our Customers

    YEOGISTUDY

    Smart Online Education Bachelor's Management Solution

    #Education #Report #Dashboard

    SW Development Company

    Online Commerce AI Big Data Analysis Solution

    #Distribution #Excel #Dashboard

    GROWTH

    Infrastructure Solutions

    #SW development #Manufacturing

    Introduction Case

    Explore more MESCIUS product adoption examples.

    Wijmo Pricing and Licenses

    If you want to create JavaScript-based web solutions using Wijmo's UI controls, you will need to purchase both a developer license and a deployment license.

    * All amounts are exclusive of VAT.

    Developer License

    This is the license required to use the official Wijmo JavaScript library.

    $1,070

    * You must purchase 1 copy per developer.

    Distribution License

    This is a license required to deploy Wijmo's controls on a server, and must be purchased for each domain address or IP address that will ultimately be served.

    $710

    * Once registered, domains and IPs cannot be modified.

    * Please make sure to do a final check before requesting.

    Application for Distribution Key Issuance

    To deploy Wijmo controls on a server, you must purchase a deployment license and receive a deployment key.

    Please apply for a distribution key through the distribution key issuance portal.

    Introduction Inquiry

    If you need more detailed product and purchase advice regarding Wijmo, please contact us using a method that is convenient for you.

    Purchase Procedure

    Click on each button to see detailed information about each step of the purchasing process.

    • 1. Price confirmation and quote request

      Please request a quotation using any of the methods below that are convenient for you.


    • 2. Order Request

      Please send the following three items to Email (sales-kor@mescius.com)


      1. Signed quotation (authorized signatory or company seal)
      2. Copy of business registration certificate (for companies)
      3. End-User information:

                1) Company Name (in English):

                2) Contact Person (in English):

                3)E-mail:


      Once your order request is received, we will issue the invoice via email.

    • 3. Payment

      Bank Transfer


      Please make the payment to the account number indicated on the invoice you received.


    • 4. License issuance & Tax invoice issuance

      After payment is confirmed, we will send you an email with license issuance details.


      *To deploy the Wijmo control on a server, you must purchase a deployment license and obtain a deployment key. Please request your deployment key through the Deployment Key Portal.


    Controls for Web Developers

    • SpreadJS

      Pure JavaScript-based Web-Excel Component
      • Supports Excel import/export
      • Supports 450 Excel functions
      • Supports Angular, React, and VueJS
      Learn More

    • ActiveReportsJS

      JavaScript-based Business Reporting Component
      • Supports Angular, React, and Vue
      • Provides a cross-platform designer program
      • Provides a JavaScript report viewer
      Learn More

    • Forguncy

      Build Business Web Apps with Excel — No Coding Needed
      • Turn Excel features into fast, powerful web apps
      • Start web development — no HTML or CSS required
      • Unify and collect your business data with ease
      Learn More

    • DsExcel

      High-Performance Excel Spreadsheet API for Java, Kotlin, and .NET
      • Create, load, edit, and save spreadsheets
      • Parse, convert, and share spreadsheets
      • Calculate formulas and format cells
      DsExcel Java
      DsExcel .NET