jqwidgets-scripts

jqwidgets-scripts - JavaScript, React and Vue UI components (data grid, scheduler, Gantt, charts)

jQWidgets is a library of 82 UI components for plain JavaScript, jQuery, React, Vue and TypeScript: an enterprise data grid, scheduler, Gantt chart, pivot grid, tree grid, kanban, 30+ chart types, an HTML editor, date, number and masked inputs, drop-downs, menus, tabs, docking layouts and dialogs, with 46 themes. This package is the library itself; jqwidgets-ng is the Angular library and jqwidgets-framework adds the demos.

Demos · React demos · Vue demos · Documentation · React docs · Vue docs · License & pricing

jQWidgets is commercial software. See Licensing.

At a glance

Installation

npm install jqwidgets-scripts

Or load it from a CDN, with no build step (jQuery is not needed):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@27/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@27/jqwidgets/styles/jqx.tailwind-blue.css" />
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@27/jqwidgets/modules/jqxgrid.js"></script>

What is in the package

Quick start

Every widget needs jqx.base.css plus one theme stylesheet, and its script. The simplest way to load the script is the widget's module bundle, jqwidgets/modules/<widget>.js, which carries the widget and everything it depends on.

Plain JavaScript or jQuery

<link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.tailwind-blue.css" />
<script src="node_modules/jqwidgets-scripts/jqwidgets/modules/jqxgrid.js"></script>

<div id="grid"></div>
<script>
    const source = {
        datatype: 'array',
        localdata: [{ name: 'Nancy', title: 'Sales Representative' }, { name: 'Andrew', title: 'Vice President' }],
        datafields: [{ name: 'name', type: 'string' }, { name: 'title', type: 'string' }]
    };
    $('#grid').jqxGrid({
        theme: 'tailwind-blue',
        source: new $.jqx.dataAdapter(source),
        sortable: true,
        columns: [{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }]
    });
    $('#grid').on('rowselect', (event) => console.log(event.args.rowindex));
</script>

jQuery is optional. If jQuery is on the page before the jQWidgets scripts, the widgets attach to it; otherwise they use the built-in JQXLite, which is also exposed as $. Either way the API above is the same.

To load scripts one by one instead of a bundle: jqxcore.js first, then the widget's script and the scripts it depends on (the grid needs jqxdata.js, jqxbuttons.js, jqxscrollbar.js, jqxmenu.js and jqxgrid.selection.js, with more for sorting, filtering, paging and editing; each widget's documentation page lists them). jqwidgets/jqx-all.js is the whole library in one file. Load either a bundle or the individual scripts for a widget, not both.

React

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install jqwidgets-scripts

// src/App.tsx
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.tailwind-blue.css';
import JqxGrid, { jqx, type IGridProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';

// Created once, outside the component (or with useMemo): see the note below.
const source = new jqx.dataAdapter({
    datatype: 'array',
    localdata: [{ name: 'Nancy', title: 'Sales Representative' }, { name: 'Andrew', title: 'Vice President' }],
    datafields: [{ name: 'name', type: 'string' }, { name: 'title', type: 'string' }]
});
const columns: IGridProps['columns'] = [{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }];

export default function App() {
    return (
        <JqxGrid theme="tailwind-blue" width={500} source={source} columns={columns}
            onRowselect={(event) => console.log(event.args.rowindex)} />
    );
}

React 16.8 through 19 are supported. Each component folder has an ES module, a UMD build and a .d.ts; the props are typed (IGridProps, IChartProps and so on), so the code above builds in Vite's react-ts template with TypeScript's strict mode. Methods are called through a ref: const grid = useRef<JqxGrid>(null); grid.current?.selectrow(0);.

• A component gives its widget again any prop whose value is a new object or array, and a new source binds the grid again. Create the adapter and the columns once: outside the component, as above, or with useMemo.
• The jqx.light-ie.css theme still contains old Internet Explorer CSS hacks (*zoom: 1), which stop vite build with Unexpected token Semicolon. To use it, add css: { lightningcss: { errorRecovery: true } } to vite.config.ts.

The React documentation has a Vite + React 19 setup guide, every widget's API with React examples, and step-by-step grid tutorials; each of the React demos shows its full source.

Vue 3

npm create vue@latest my-app        # answer Yes to TypeScript
cd my-app
npm install jqwidgets-scripts

<!-- src/App.vue -->
<script setup lang="ts">
import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue3/vue_jqxgrid.vue';

// Defined globally by the jQWidgets core, which the component imports.
declare const jqx: any;

// Constants, not refs: the grid binds once (see below).
const source = new jqx.dataAdapter({
    datatype: 'array',
    localdata: [{ name: 'Nancy', title: 'Sales Representative' }, { name: 'Andrew', title: 'Vice President' }],
    datafields: [{ name: 'name', type: 'string' }, { name: 'title', type: 'string' }]
});
const columns = [{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }];

function onRowSelect(event: any) {
    console.log(event.args.rowindex);
}
</script>

<template>
    <JqxGrid theme="tailwind-blue" :width="500" :source="source" :columns="columns" @rowselect="onRowSelect" />
</template>

Load the styles once, in src/main.ts:

import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.tailwind-blue.css';

In a TypeScript project, declare the .vue files once, in src/jqwidgets-vue3.d.ts:

declare module 'jqwidgets-scripts/jqwidgets-vue3/*.vue' {
    import type { DefineComponent } from 'vue';
    const component: DefineComponent<Record<string, any>, Record<string, any>, any>;
    export default component;
}

A Vue component gives all its props to the widget again whenever it re-renders, and a new source binds the grid again. Keep the props constants of the script, as above, so that changing other state of the component does not reset the grid's page, sort or filters. Call methods through a template ref (ref="grid", then grid.value.selectrow(0)). The Vue documentation has the Vite setup guide, every widget's API with <script setup> examples, and twelve grid tutorials.

Angular

Use jqwidgets-ng: standalone Angular components for every widget, ng add jqwidgets-ng to set up the styles, and signal viewChild() queries for methods.

TypeScript

/// <reference path="node_modules/jqwidgets-scripts/jqwidgets-ts/jqwidgets.d.ts" />

The definitions cover every widget's options, methods and events under the jqwidgets namespace, and are what the React and Vue components are typed with.

Data from a server

A data adapter loads a URL itself (url, datatype: 'json'), and in virtual mode the grid asks for one page at a time, sorted and filtered on the server. To load through a client library instead - supabase-js, the Firebase SDK, a GraphQL fetch - give the adapter a loadServerData(params, settings, callback) function: it receives the grid's page, sort and filters and hands back { records, totalrecords }. Step-by-step tutorials for Supabase, Cloud Firestore and GraphQL show the whole pattern, with editing and live updates; each docs site has them for its framework.

Components

Every widget follows one naming convention, so the table is enough to write the code: the jQuery plugin is jqxGrid, its script jqwidgets/jqxgrid.js, its bundle jqwidgets/modules/jqxgrid.js, the React component JqxGrid imported from jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid, the Vue 3 component jqwidgets-scripts/jqwidgets-vue3/vue_jqxgrid.vue, and in jqwidgets-ng the entry point jqwidgets-ng/jqxgrid. Option, event and method names are the same in every framework and are documented once, per widget, at jqwidgets.com/jquery-widgets-documentation.

Themes

jqx.base.css carries the layout and must always be loaded. A theme stylesheet on top of it supplies the colours, fonts and spacing; set it per widget with the theme option, or once for the page:

$.jqx.theme = 'tailwind-blue';

The theme value is the file name without jqx. and .css, and that file must be loaded.

New in 27.1.0: tailwind-blue, tailwind-blue-dark, material-dark, material-green-dark, material-purple-dark and fluent-dark. To follow the operating system's dark mode, load the light and dark stylesheets and switch the theme of your widgets when matchMedia('(prefers-color-scheme: dark)') changes. Custom themes can be built with the online Theme Builder.

Globalization

Load jqwidgets/globalization/globalize.js and the culture files you need, then pass the culture to date- and number-aware widgets:

<script src="node_modules/jqwidgets-scripts/jqwidgets/globalization/globalize.js"></script>
<script src="node_modules/jqwidgets-scripts/jqwidgets/globalization/globalize.culture.de-DE.js"></script>

$('#date').jqxDateTimeInput({ culture: 'de-DE' });

Cultures included: cs-CZ, de-DE, en-CA, en-US, fr-FR, he-IL, hr-HR, hu-HU, it-IT, ja-JP, lt, ru-RU and sa-IN; any other Globalize culture file works the same way. Every widget's own text is localizable through its localization option, and most widgets have an rtl option for right-to-left languages.

Accessibility

The widgets carry WAI-ARIA roles, states and properties - grid, treegrid, tablist, menu, tree, slider, dialog and the rest - work from the keyboard, announce status changes such as sorting and paging, and support right-to-left layout. Your page adds an accessible name for each widget, as for any control (aria-label on the element, or a <label>); the highcontrast theme is there for users who need it. The accessibility guide covers roles, keyboard navigation, contrast, status messages and what the page itself must provide; the VPAT conformance report is on the compliance page.

Content-Security-Policy

The library runs under a strict policy, without 'unsafe-inline' or 'unsafe-eval' in script-src or style-src: widgets set their styles through the CSSOM rather than style attributes. If your policy uses a nonce, give it to the library once, before the widgets are created, so the few <style> elements it adds carry it:

<meta name="csp-nonce" content="YOUR-NONCE">

or $.jqx.csp.nonce = 'YOUR-NONCE';. PDF export (pdfmake) needs 'unsafe-eval'.

Server-side rendering

The widgets render into the browser DOM. The scripts are inert where there is no document, so they can be part of a server-rendered bundle; create the widgets on the client - under Next.js or Nuxt, load the component with ssr: false.

If something goes wrong

For AI assistants

npx jqwidgets-mcp-server gives Claude Code, Cursor, Copilot and any other MCP client the full API of every widget - properties, methods, events and data types - and a code generator for jQuery, React, Angular and Vue, so generated code uses real names and real options. See jqwidgets-mcp-server on npm.

Each documentation and demo site publishes an llms.txt index and an llms-full.txt with the whole site in one file, and every page has a Markdown copy at its own address plus .md:

• JavaScript/jQuery: https://www.jqwidgets.com/jquery-widgets-documentation/llms.txt
• React: https://www.jqwidgets.com/react-components-documentation/llms.txt
• Vue: https://www.jqwidgets.com/vue-components-documentation/llms.txt
• Angular: https://www.jqwidgets.com/angular-components-documentation/llms.txt
• Example: https://www.jqwidgets.com/react-components-documentation/documentation/jqxgrid/reactjs-grid-api.htm.md

Facts that keep generated code correct:

• The names in the Components table are exact: JqxDataTable, not JqxDatatable; the button script is jqxbuttons.js.
• jqxGrid's options, columns and methods are all lower case (datafield, cellsrenderer, selectionmode, getrowdata); most other widgets use camelCase (selectedIndex, dropDownWidth). Check the widget's API page rather than guessing.
• Events: $('#grid').on('rowselect', e => ...) in jQuery, onRowselect in React, @rowselect in Vue, (onRowselect) in Angular. The event data is in event.args.
• A widget needs jqx.base.css and the stylesheet of the theme its theme names.
• In React and Vue, create data adapters, columns and other object props once; a new object on every render binds the widget again.

Licensing

jQWidgets is commercial software distributed under the jQWidgets license; the full terms are in the EULA.pdf shipped with the package. You are welcome to evaluate it. Builds without a license key show an evaluation notice and are not licensed for production use.

Sales and licensing: sales@jqwidgets.com

Support

• Documentation: https://www.jqwidgets.com/jquery-widgets-documentation/ (JavaScript), https://www.jqwidgets.com/react-components-documentation/ (React), https://www.jqwidgets.com/vue-components-documentation/ (Vue), https://www.jqwidgets.com/angular-components-documentation/ (Angular)
• Grid tutorials, from data binding to Supabase and GraphQL: the jqxGrid section of each documentation site
• Demos: https://www.jqwidgets.com/jquery-widgets-demo/ · React: https://www.jqwidgets.com/react/ · Vue: https://www.jqwidgets.com/vue/ · Angular: https://www.jqwidgets.com/angular/
• Security, SBOM and compliance: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/compliance/index.htm
• Forums: https://www.jqwidgets.com/community/
• Source and issues: https://github.com/jqwidgets/jQWidgets
• What changed: ReleaseNotes.txt in the package

Security reports: email support@jqwidgets.com with a subject line beginning SECURITY:. Please include the affected version and a reproduction; you will hear back from a person within three business days.