jQWidgets Framework

25.1.0 · active · verified Wed Apr 22

jQWidgets is a comprehensive JavaScript-based UI framework offering over 60 customizable user interface widgets and 30+ chart types for building web applications across various platforms, including PC, touch, and mobile devices. It provides integrations and directives for modern frameworks like Angular (up to v21), Vue (v3), React, Blazor, and Web Components, while being fundamentally built upon jQuery, HTML5, and CSS3. The current stable version is 25.1.0, released in early 2026. The project maintains a fairly regular release cadence, with major versions often aligning with new Angular releases and focusing on modern framework compatibility, security, and usability. Key differentiators include its extensive suite of widgets, broad framework support, and explicit support for enterprise-grade security features like Content Security Policy (CSP) compliance since v17.0.0. It operates under a dual licensing model, offering a free non-commercial license and various commercial options with dedicated support.

Common errors

Warnings

Install

Imports

Quickstart

Demonstrates how to initialize a `jqxGrid` and a `jqxButton` with basic data using ES Modules, explicitly exposing jQuery globally for compatibility with the plugin architecture, including theme imports.

import $ from 'jquery';
import 'jqwidgets-framework/jqwidgets/jqxcore';
import 'jqwidgets-framework/jqwidgets/jqxbuttons';
import 'jqwidgets-framework/jqwidgets/jqxgrid';
import 'jqwidgets-framework/jqwidgets/jqxgrid.selection';
import 'jqwidgets-framework/jqwidgets/styles/jqx.base.css'; // Base theme
import 'jqwidgets-framework/jqwidgets/styles/jqx.light.css'; // Specific theme (e.g., Light theme)

// jQWidgets plugins often expect jQuery to be available globally.
// This is a common workaround for modern module systems when using older plugins.
window.jQuery = $;
window.$ = $;

document.addEventListener('DOMContentLoaded', () => {
  // Data for the jqxGrid
  const data = [
    { name: "Andrew Fuller", age: 30, city: "Tacoma" },
    { name: "Nancy Davolio", age: 25, city: "Seattle" },
    { name: "Janet Leverling", age: 32, city: "London" }
  ];

  const source = {
    localdata: data,
    datafields: [
      { name: 'name', type: 'string' },
      { name: 'age', type: 'number' },
      { name: 'city', type: 'string' }
    ],
    datatype: "array"
  };

  // Create a dataAdapter
  const dataAdapter = new ($.jqx.dataAdapter as any)(source);

  // Initialize jqxGrid
  const gridElement = document.getElementById('jqxgrid');
  if (gridElement) {
    $(gridElement).jqxGrid(
      {
        width: 600,
        source: dataAdapter,
        autoheight: true,
        columns: [
          { text: 'Name', datafield: 'name', width: 200 },
          { text: 'Age', datafield: 'age', width: 100 },
          { text: 'City', datafield: 'city', width: 200 }
        ],
        selectionmode: 'singlerow'
      }
    );
  }

  // Initialize jqxButton
  const buttonElement = document.getElementById('myButton');
  if (buttonElement) {
    $(buttonElement).jqxButton({ width: 100, height: 30 });
    $(buttonElement).on('click', () => {
      alert('Button clicked!');
    });
  }
});

/*
  Corresponding HTML file (e.g., index.html) structure:
  <!DOCTYPE html>
  <html>
  <head>
      <title>jQWidgets Quickstart</title>
  </head>
  <body>
      <div id="jqxgrid"></div>
      <button id="myButton">Click Me</button>
      <script type="module" src="./app.js"></script>
  </body>
  </html>
*/

view raw JSON →