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 Speed Test

    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!

    Please share your concerns and questions about Wijmo with MESCIUS's expert team. We empathize with your concerns and provide assistance.

    Online product consultation Developer Forum (Technical Support)

    JavaScript Data Grid Demo

    View

    React

    PureJS

    Angular

    FlexGrid

    JavaScript Data Grid Key Features

    Custom cells

    FlexGrid, Wijmo's JavaScript DataGrid, allows you to significantly customize the look, feel, and functionality of every cell within a DataGrid to suit your style requirements. You can add both Wijmo and custom components to cells, conditionally style cells and their underlying data, and dynamically update cells within the DataGrid.


    • Cell Templates - Demo
    • Cell Maker - Demo
    • Dynamic Updates - Demo
    • Conditional Formatting - Demo | Help
    • Sparklines - Demo

    TreeGrid

    You can create a TreeGrid to display data by binding child items to a data grid. TreeGrid supports both bound and unbound modes, lazy loading of data for improved performance, and retrieving XML data for display.


    • TreeGrid - Demo | Help
    • Unbound TreeGrid - Demo | Help
    • Asynchronous Loading - Demo | Help
    • Binding to XML - Demo | Help
    • Editable TreeGrid - Demo
    • Different Data Structures - Demo

    search

    You can perform a full-text search, which means you can filter the data to display all matching instances found in the data grid. You can also highlight all occurrences of the scanned text.

    demo

    Grouping

    Wijmo's JavaScript data grid, FlexGrid, allows you to group data using a CollectionView. It allows you to set up multiple groups in a single DataGrid and implements an Outlook-style GroupPanel, allowing users to drag and drop columns to create groups.


    • Grouping - Demo | Help
    • Drag and Drop Grouping - Demo | Help

    FlexGrid

    Full JavaScript data grid functionality

    Data & Performance

    • data binding

    • FlexGrid supports client-side and server-side data binding. You can bind to simple JavaScript arrays, observable CollectionViews, remote OData servers, or real-time WebSocket servers.
    • Arrays and CollectionViews - Demo | Help
    • Remote Data Binding - Help
    • OData Data Binding - Demo | Help
    • Unbound Mode - Demo

  • Virtual scrolling

  • FlexGrid allows you to virtualize data as it loads. When you scroll FlexGrid, data is loaded into the grid as needed, improving performance and enabling infinite scrolling.
  • Virtual Scrolling - Demo

    • Data cleaning

    • select

    • FlexGrid lets you select a range of cells across multiple rows and columns, just like Excel. FlexGrid also lets you modify the selection and set the selection via other components.
    • Selection - Demo | Help
    • Multiple Selection - Demo
    • Checkbox Selection - Demo
    • Marquee - Demo | Help

  • array

  • Wijmo's JavaScript data grid, FlexGrid, supports data sorting via 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

    • Cell customization

    • Cell Template

    • FlexGrid cells can be declaratively defined with custom content, and templates can contain arbitrary components and HTML elements, along with property and event bindings. Any type of grid cell can be defined using templates (data cells, header cells, editors, etc.).
    • Cell Templates - Demo

  • Merge cells

  • FlexGrid supports content-based cell merging. The allowMerging property allows you to merge data cells based on matching content. You can merge header cells, create custom cell merging rules, and set restrictions on how FlexGrid merges cells.
  • Cell Merging - Demo | Help
  • Header Merging - Demo
  • Custom Merging - Demo | Help
  • Restricted Merging - Demo

    • Add and edit data

    • DataMaps

    • FlexGrid provides DataMap functionality as a simple way to provide automatic lookup functionality to your grid, such as displaying customer names instead of IDs. FlexGrid adds dropdowns to columns using DataMaps, which contain valid entries for editing cells. DataMaps also supports dynamic DataMaps and DataMap editors.
    • DataMaps - Demo
    • Dynamic DataMaps - Demo
    • DataMap Editors - Demo

  • edit

  • FlexGrid natively supports in-cell editing, similar to Excel. Customize the data stored within FlexGrid with features such as data validation, pop-up 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

    • Accessibility and Localization

    • Accessibility

    • FlexGrid comes with an extensive list of accessibility features. ARIA technology helps users interact with and edit FlexGrid, and content can be easily navigated using Excel and keyboard shortcuts.
    • WAI-ARIA Support - Demo | Help
    • Keyboard Navigation - Help
    • Click-Event Handling - Help

  • Globalization

  • There are globalization classes that allow you to specify the display format of FlexGrid content. You can choose the language FlexGrid uses to display data, as well as specify how dates and numbers are displayed.
  • Globalization - Demo | Help
  • Cultures - Demo
  • Dates - Demo
  • Numbers - Demo

    • Finding data

    • Filtering

    • 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.
    • Filtering - Demo | Help
    • Excel-Like Filtering - Demo | Help
    • Server-Side Filtering - Demo

  • search

  • You can perform a full-text search, which means you can filter your data to display all matching instances found in the data grid. You can also highlight all occurrences of the scanned text.
  • Search - Demo

    • data analysis

    • Grouping

    • Wijmo's JavaScript data grid, FlexGrid, allows you to group data using a CollectionView. It sets up multiple groups in a single DataGrid and implements an Outlook-style GroupPanel, allowing users to drag and drop columns to create groups.
    • Grouping - Demo | Help
    • Drag and Drop Grouping - Demo | Help

  • Aggregation

  • Aggregate data to display summary information for rows and columns across the entire DataGrid or individual sections. You can control where aggregated data appears, create custom aggregations, and utilize built-in functions and formatting options.
  • Aggregation - Demo | Help
  • Aggregation Location (Data Over | Data Under)
  • Custom Aggregation - Demo | Help

    • Hierarchical grid

    • TreeGrid

    • You can create a TreeGrid to display data by binding its children to a data grid. TreeGrid supports both bound and unbound modes, lazy loading of data for improved performance, and retrieving XML data for display.
    • TreeGrid - Demo | Help
    • Unbound TreeGrid - Demo | Help
    • Asynchronous Loading - Demo | Help
    • Binding to XML - Demo | Help
    • Editable TreeGrid - Demo
    • Different Data Structures - Demo

  • Master-Detail

  • FlexGrid allows you to view hierarchical data using the master-detail model and RowDetail. Using the master-detail model, you can select an item within a FlexGrid and view its details, or use RowDetail to nest data within rows in a FlexGrid.
  • Master-Detail - Help
  • Separate Grid - Demo
  • Nested Grid (RowDetail) - Demo | Help

    • Import / Export / Print

    • Excel Import/Export

    • If you use Excel for data management in your business, 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 has the ability to preserve formatting and styles set in FlexGrid and Excel.
    • Import/Export - Help
    • Asynchronous Export - Demo

  • Export to PDF

  • FlexGrid supports content export and PDF formatting. This allows you to view data in a browser, as well as add FlexGrid to newly created PDFs. Modify PDFs and reports to include FlexGrid.
  • Export to File - Demo
  • Export to PDF Document - Demo
  • Expense Report - Demo
  • Customization - Demo

    • 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!

    Full Wijmo control

    data grid

    DataGrid (FlexGrid)

    OLAP PivotGrid

    Spreadsheet

    MultiRow

    TransposedGrid

    TreeGrid


    Data visualization

    Chart(FlexChart)

    Bar & Column

    Line & Area

    Scatter

    Pie & Sunburst

    Radar & Polar

    Specialized Charts

    FinancialChart

    Maps (FlexMap)

    OLAP PivotChart

    Gauges

    Barcode

    QRCode

    map

    Choropleth Map

    Scatter Map

    Bubble Map

    Navigation & Layout

    Menu

    Popup

    Ribbon

    Tabs

    TreeView


    Input & Editor

    InputsDropDowns

    DateTime

    Numeric

    Colors


    designer

    Wijmo Designer

    VSCode Designer Extension


    viewer

    PdfViewer

    ReportViewer

    Frameworks & Integrations

    Angular

    React

    View

    Web Components

    TypeScript

    ES6


    commonness

    Events

    Globalization

    Glyphs

    Themes

    Data Management

    CollectionView

    REST

    Once

    Firestore

    OAuth

    OLAP


    Printing & Documents

    Print Document

    PDF

    XLSX

    Ask anything!

    Please share your concerns and questions about Wijmo with MESCIUS's expert team. We empathize with your concerns and provide assistance.

    Online product consultation Developer Forum (Technical Support)

    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.

    Go to online tutorial

    Referencing the Wijmo library

    Local referencing

    CDN referencing

    NPM referencing

    Easily customize Wijmo controls!

    Wijmo CSS Theme Designer

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

    Using the Wijmo CSS Theme Designer

    Wijmo Control Properties Editor

    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.

    Using the Wijmo Control Properties Editor

    Our Customers

    Here Study

    Smart Online Education Bachelor's Management Solution

    #Education #Report #Dashboard

    SW development company I

    Online Commerce AI Big Data Analysis Solution

    #Distribution #Excel #Dashboard

    Gross

    Infrastructure Solutions

    #SW development #manufacturing #dashboard

    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,494,000

    * 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.

    ￦1,000,000

    * Once registered, domains and IPs cannot be modified.

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

    FAQ

    - How to run Wijmo sample files

    - How to register Wijmo distribution licensing

    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.

    Request for product and purchase consultation
    Check online quotes and request quotes

    Purchase Procedure

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

    • 1. Price confirmation and quote request

    • You can request a quote using any of the methods below:
    • Online quote confirmation and quote request
    • 1670-0583
    • sales-kor@mescius.com

    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

      A business web development solution built with Excel without coding.
      • Easy and quick web implementation with Excel features
      • Web development without HTML & CSS
      • Data collection and integration solution
      Learn more

    • DsExcel

      High-performance Java & Kotlin / .NET-based Excel spreadsheet API library
      • Create, load, edit, and save spreadsheets
      • Parse, convert, and share spreadsheets
      • Calculate formulas and format cells
      Learn DsExcel Java
      Learn about DsExcel .NET