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

| | | |---|---| | Frameworks | Plain JavaScript (no jQuery needed), jQuery 3.7 and 4.0, React 16.8 to 19, Vue 3, TypeScript; Angular through jqwidgets-ng | | Build tools | Vite, webpack, Rollup, esbuild, or a <script> tag from a CDN | | TypeScript | Definitions for every widget, and typed React components that build in a new Vite react-ts project with strict on | | Themes | 46, including Tailwind, Tailwind Blue, Material, Fluent and Bootstrap, each with a dark variant; or your own from the Theme Builder | | Accessibility | WAI-ARIA roles and states, full keyboard navigation, high-contrast theme - see the accessibility guide | | Security | Runs under a strict Content-Security-Policy (no 'unsafe-inline'); SBOM, security policy and advisories | | Localization | Globalize cultures for dates and numbers, right-to-left layout, every built-in string replaceable | | AI assistants | An MCP server, llms.txt and a Markdown copy of every documentation page |

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

| Path | Contents | |---|---| | jqwidgets/ | The widgets, one script per widget, plus jqxcore.js (required by every widget) and jqx-all.js (everything in one file) | | jqwidgets/modules/ | One self-contained bundle per widget - the widget and everything it depends on | | jqwidgets/styles/ | jqx.base.css (required) and the 46 theme stylesheets | | jqwidgets/globalization/ | Globalize and 13 culture files for date and number formatting | | jqwidgets-react-tsx/ | React components, one folder per widget, with TypeScript definitions | | jqwidgets-vue3/ | Vue 3 single-file components | | jqwidgets-vue/ | Vue 2 single-file components (Vue 2 reached end of life in December 2023) | | jqwidgets-ts/ | jqwidgets.d.ts, TypeScript definitions for the whole library | | ReleaseNotes.txt, EULA.pdf | What changed in this version, and the license terms |

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.

| Widget | What it does | jQuery / JavaScript | React | Vue 3 | Angular | |---|---|---|---|---|---| | jqxBarcode | Barcode generator for common 1D symbologies, rendered as SVG or Canvas. | jqxbarcode.js · modules/jqxbarcode.js | JqxBarcode from jqwidgets-react-tsx/jqxbarcode | vue_jqxbarcode.vue | jqwidgets-ng/jqxbarcode | | jqxBarGauge | Circular bar gauge that compares several values at once. | jqxbargauge.js · modules/jqxbargauge.js | JqxBarGauge from jqwidgets-react-tsx/jqxbargauge | vue_jqxbargauge.vue | jqwidgets-ng/jqxbargauge | | jqxBulletChart | Compact bullet chart that shows a measure against a target and qualitative ranges. | jqxbulletchart.js · modules/jqxbulletchart.js | JqxBulletChart from jqwidgets-react-tsx/jqxbulletchart | vue_jqxbulletchart.vue | jqwidgets-ng/jqxbulletchart | | jqxButtonGroup | Enables the creation of groups of buttons. | jqxbuttongroup.js · modules/jqxbuttongroup.js | JqxButtonGroup from jqwidgets-react-tsx/jqxbuttongroup | vue_jqxbuttongroup.vue | jqwidgets-ng/jqxbuttongroup | | jqxButton | Displays a simple button. | jqxbuttons.js · modules/jqxbuttons.js | JqxButton from jqwidgets-react-tsx/jqxbuttons | vue_jqxbuttons.vue | jqwidgets-ng/jqxbuttons | | jqxCalendar | Month calendar with single, multiple and range date selection. | jqxcalendar.js · modules/jqxcalendar.js | JqxCalendar from jqwidgets-react-tsx/jqxcalendar | vue_jqxcalendar.vue | jqwidgets-ng/jqxcalendar | | jqxChart | Over 30 chart types (line, area, bar, pie, donut, range, financial, polar and spider) rendered as SVG or HTML5 Canvas. | jqxchart.js · modules/jqxchart.js | JqxChart from jqwidgets-react-tsx/jqxchart | vue_jqxchart.vue | jqwidgets-ng/jqxchart | | jqxChat | Chat UI with message list, typing indicator, attachments and AI assistant integration. | jqxchat.js · modules/jqxchat.js | JqxChat from jqwidgets-react-tsx/jqxchat | vue_jqxchat.vue | jqwidgets-ng/jqxchat | | jqxCheckBox | Displays a check box that allows the end-user to select a true, false or indeterminate condition. | jqxcheckbox.js · modules/jqxcheckbox.js | JqxCheckBox from jqwidgets-react-tsx/jqxcheckbox | vue_jqxcheckbox.vue | jqwidgets-ng/jqxcheckbox | | jqxCheckBoxGroup | Displays a check box group of items. | jqxcheckboxgroup.js · modules/jqxcheckboxgroup.js | JqxCheckBoxGroup from jqwidgets-react-tsx/jqxcheckboxgroup | vue_jqxcheckboxgroup.vue | jqwidgets-ng/jqxcheckboxgroup | | jqxColorPicker | Colour picker with saturation/hue palettes and hex and RGB entry. | jqxcolorpicker.js · modules/jqxcolorpicker.js | JqxColorPicker from jqwidgets-react-tsx/jqxcolorpicker | vue_jqxcolorpicker.vue | jqwidgets-ng/jqxcolorpicker | | jqxComboBox | Editable drop-down with auto-complete, multi-select tokens and remote search. | jqxcombobox.js · modules/jqxcombobox.js | JqxComboBox from jqwidgets-react-tsx/jqxcombobox | vue_jqxcombobox.vue | jqwidgets-ng/jqxcombobox | | jqxComplexInput | Input for complex numbers in algebraic form. | jqxcomplexinput.js · modules/jqxcomplexinput.js | JqxComplexInput from jqwidgets-react-tsx/jqxcomplexinput | vue_jqxcomplexinput.vue | jqwidgets-ng/jqxcomplexinput | | jqxDataTable | Lightweight table built on native table markup, with paging, sorting, filtering, grouping and editing. | jqxdatatable.js · modules/jqxdatatable.js | JqxDataTable from jqwidgets-react-tsx/jqxdatatable | vue_jqxdatatable.vue | jqwidgets-ng/jqxdatatable | | jqxDateTimeInput | Masked date and time input with a drop-down calendar and range selection. | jqxdatetimeinput.js · modules/jqxdatetimeinput.js | JqxDateTimeInput from jqwidgets-react-tsx/jqxdatetimeinput | vue_jqxdatetimeinput.vue | jqwidgets-ng/jqxdatetimeinput | | jqxDocking | Dashboard of windows that can be dragged between columns, collapsed and closed. | jqxdocking.js · modules/jqxdocking.js | JqxDocking from jqwidgets-react-tsx/jqxdocking | vue_jqxdocking.vue | jqwidgets-ng/jqxdocking | | jqxDockingLayout | Layout whose panels can be docked, floated and rearranged by drag-and-drop. | jqxdockinglayout.js · modules/jqxdockinglayout.js | JqxDockingLayout from jqwidgets-react-tsx/jqxdockinglayout | vue_jqxdockinglayout.vue | jqwidgets-ng/jqxdockinglayout | | jqxDockPanel | Container that docks children to its top, left, right or bottom. | jqxdockpanel.js · modules/jqxdockpanel.js | JqxDockPanel from jqwidgets-react-tsx/jqxdockpanel | vue_jqxdockpanel.vue | jqwidgets-ng/jqxdockpanel | | jqxDragDrop | Drag-and-drop plugin with drop targets, feedback and revert. | jqxdragdrop.js · modules/jqxdragdrop.js | JqxDragDrop from jqwidgets-react-tsx/jqxdragdrop | vue_jqxdragdrop.vue | jqwidgets-ng/jqxdragdrop | | jqxDraw | Low-level drawing API for SVG and Canvas shapes, text and paths. | jqxdraw.js · modules/jqxdraw.js | JqxDraw from jqwidgets-react-tsx/jqxdraw | vue_jqxdraw.vue | jqwidgets-ng/jqxdraw | | jqxDropDownButton | Contains a custom content displayed in a drop-down. | jqxdropdownbutton.js · modules/jqxdropdownbutton.js | JqxDropDownButton from jqwidgets-react-tsx/jqxdropdownbutton | vue_jqxdropdownbutton.vue | jqwidgets-ng/jqxdropdownbutton | | jqxDropDownList | Drop-down list with check boxes, grouping, templates and filtering. | jqxdropdownlist.js · modules/jqxdropdownlist.js | JqxDropDownList from jqwidgets-react-tsx/jqxdropdownlist | vue_jqxdropdownlist.vue | jqwidgets-ng/jqxdropdownlist | | jqxEditor | WYSIWYG HTML editor with a configurable toolbar, source view and paste cleanup. | jqxeditor.js · modules/jqxeditor.js | JqxEditor from jqwidgets-react-tsx/jqxeditor | vue_jqxeditor.vue | jqwidgets-ng/jqxeditor | | jqxExpander | Collapsible panel with a header and content. | jqxexpander.js · modules/jqxexpander.js | JqxExpander from jqwidgets-react-tsx/jqxexpander | vue_jqxexpander.vue | jqwidgets-ng/jqxexpander | | jqxFileUpload | File upload with multiple files, progress, validation and localisation. | jqxfileupload.js · modules/jqxfileupload.js | JqxFileUpload from jqwidgets-react-tsx/jqxfileupload | vue_jqxfileupload.vue | jqwidgets-ng/jqxfileupload | | jqxForm | Form built from a JSON template of fields, groups and buttons, with layout and validation. | jqxform.js · modules/jqxform.js | JqxForm from jqwidgets-react-tsx/jqxform | vue_jqxform.vue | jqwidgets-ng/jqxform | | jqxFormattedInput | Numeric input for binary, octal, decimal and hexadecimal values. | jqxformattedinput.js · modules/jqxformattedinput.js | JqxFormattedInput from jqwidgets-react-tsx/jqxformattedinput | vue_jqxformattedinput.vue | jqwidgets-ng/jqxformattedinput | | jqxGantt | Gantt chart with tasks, dependencies, milestones, resources and a task tree. | jqxgantt.js · modules/jqxgantt.js | JqxGantt from jqwidgets-react-tsx/jqxgantt | vue_jqxgantt.vue | jqwidgets-ng/jqxgantt | | jqxGauge | Radial and linear gauges with ranges, ticks, labels and animated pointers. | jqxgauge.js · modules/jqxgauge.js | JqxGauge from jqwidgets-react-tsx/jqxgauge | vue_jqxgauge.vue | jqwidgets-ng/jqxgauge | | jqxGrid | Data grid with sorting, filtering, grouping, paging, editing, aggregates, export and virtual scrolling for large datasets. | jqxgrid.js · modules/jqxgrid.js | JqxGrid from jqwidgets-react-tsx/jqxgrid | vue_jqxgrid.vue | jqwidgets-ng/jqxgrid | | jqxHeatMap | Heat map that colours a matrix of values on a configurable colour scale. | jqxheatmap.js · modules/jqxheatmap.js | JqxHeatMap from jqwidgets-react-tsx/jqxheatmap | vue_jqxheatmap.vue | jqwidgets-ng/jqxheatmap | | jqxInput | Text input with auto-complete from a local or remote data source. | jqxinput.js · modules/jqxinput.js | JqxInput from jqwidgets-react-tsx/jqxinput | vue_jqxinput.vue | jqwidgets-ng/jqxinput | | jqxKanban | Kanban board with columns, swimlanes, drag-and-drop cards and templates. | jqxkanban.js · modules/jqxkanban.js | JqxKanban from jqwidgets-react-tsx/jqxkanban | vue_jqxkanban.vue | jqwidgets-ng/jqxkanban | | jqxKnob | Rotary knob control with custom dials, markers and pointers. | jqxknob.js · modules/jqxknob.js | JqxKnob from jqwidgets-react-tsx/jqxknob | vue_jqxknob.vue | jqwidgets-ng/jqxknob | | jqxLayout | IDE-style layout with tabbed groups, auto-hide and floating panels. | jqxlayout.js · modules/jqxlayout.js | JqxLayout from jqwidgets-react-tsx/jqxlayout | vue_jqxlayout.vue | jqwidgets-ng/jqxlayout | | jqxLinearGauge | Displays a linear gauge. | jqxgauge.js · modules/jqxlineargauge.js | JqxLinearGauge from jqwidgets-react-tsx/jqxlineargauge | vue_jqxlineargauge.vue | jqwidgets-ng/jqxlineargauge | | jqxLinkButton | Displays a button with anchor tag. | jqxbuttons.js · modules/jqxlinkbutton.js | JqxLinkButton from jqwidgets-react-tsx/jqxlinkbutton | vue_jqxlinkbutton.vue | jqwidgets-ng/jqxlinkbutton | | jqxListBox | List with single or multiple selection, check boxes, grouping, filtering and drag-and-drop. | jqxlistbox.js · modules/jqxlistbox.js | JqxListBox from jqwidgets-react-tsx/jqxlistbox | vue_jqxlistbox.vue | jqwidgets-ng/jqxlistbox | | jqxListMenu | Mobile-style drill-down list menu with filtering. | jqxlistmenu.js · modules/jqxlistmenu.js | JqxListMenu from jqwidgets-react-tsx/jqxlistmenu | vue_jqxlistmenu.vue | jqwidgets-ng/jqxlistmenu | | jqxLoader | Loading indicator overlay with text and images. | jqxloader.js · modules/jqxloader.js | JqxLoader from jqwidgets-react-tsx/jqxloader | vue_jqxloader.vue | jqwidgets-ng/jqxloader | | jqxMaskedInput | Input that restricts typing to a mask such as phone numbers, zip codes or IDs. | jqxmaskedinput.js · modules/jqxmaskedinput.js | JqxMaskedInput from jqwidgets-react-tsx/jqxmaskedinput | vue_jqxmaskedinput.vue | jqwidgets-ng/jqxmaskedinput | | jqxMenu | Horizontal, vertical and context menus with nested submenus and keyboard support. | jqxmenu.js · modules/jqxmenu.js | JqxMenu from jqwidgets-react-tsx/jqxmenu | vue_jqxmenu.vue | jqwidgets-ng/jqxmenu | | jqxNavBar | Responsive horizontal or vertical navigation bar. | jqxnavbar.js · modules/jqxnavbar.js | JqxNavBar from jqwidgets-react-tsx/jqxnavbar | vue_jqxnavbar.vue | jqwidgets-ng/jqxnavbar | | jqxNavigationBar | Accordion of expandable sections. | jqxnavigationbar.js · modules/jqxnavigationbar.js | JqxNavigationBar from jqwidgets-react-tsx/jqxnavigationbar | vue_jqxnavigationbar.vue | jqwidgets-ng/jqxnavigationbar | | jqxNotification | Toast notifications with templates, stacking and auto-close. | jqxnotification.js · modules/jqxnotification.js | JqxNotification from jqwidgets-react-tsx/jqxnotification | vue_jqxnotification.vue | jqwidgets-ng/jqxnotification | | jqxNumberInput | Numeric input with spin buttons, currency and percentage modes and min/max limits. | jqxnumberinput.js · modules/jqxnumberinput.js | JqxNumberInput from jqwidgets-react-tsx/jqxnumberinput | vue_jqxnumberinput.vue | jqwidgets-ng/jqxnumberinput | | jqxPanel | Scrollable container with styled scrollbars and sizing modes. | jqxpanel.js · modules/jqxpanel.js | JqxPanel from jqwidgets-react-tsx/jqxpanel | vue_jqxpanel.vue | jqwidgets-ng/jqxpanel | | jqxPasswordInput | Password input with a show-password toggle and a strength indicator. | jqxpasswordinput.js · modules/jqxpasswordinput.js | JqxPasswordInput from jqwidgets-react-tsx/jqxpasswordinput | vue_jqxpasswordinput.vue | jqwidgets-ng/jqxpasswordinput | | jqxPickList | Dual list for moving items between an available and a selected list. | jqxpicklist.js · modules/jqxpicklist.js | JqxPickList from jqwidgets-react-tsx/jqxpicklist | vue_jqxpicklist.vue | jqwidgets-ng/jqxpicklist | | jqxPivotDesigner | Lets users design a PivotGrid interactively. | jqxpivotdesigner.js · modules/jqxpivotdesigner.js | JqxPivotDesigner from jqwidgets-react-tsx/jqxpivotdesigner | vue_jqxpivotdesigner.vue | jqwidgets-ng/jqxpivotdesigner | | jqxPivotGrid | Pivot table for summarising data by rows, columns and aggregate functions, with a drag-and-drop designer. | jqxpivotgrid.js · modules/jqxpivotgrid.js | JqxPivotGrid from jqwidgets-react-tsx/jqxpivotgrid | vue_jqxpivotgrid.vue | jqwidgets-ng/jqxpivotgrid | | jqxPopover | Popover anchored to an element, with a title, arrow and any content. | jqxpopover.js · modules/jqxpopover.js | JqxPopover from jqwidgets-react-tsx/jqxpopover | vue_jqxpopover.vue | jqwidgets-ng/jqxpopover | | jqxProgressBar | Horizontal or vertical progress bar with custom ranges and labels. | jqxprogressbar.js · modules/jqxprogressbar.js | JqxProgressBar from jqwidgets-react-tsx/jqxprogressbar | vue_jqxprogressbar.vue | jqwidgets-ng/jqxprogressbar | | jqxQRcode | QR code generator with error-correction levels, colours and an embedded logo. | jqxqrcode.js · modules/jqxqrcode.js | JqxQRcode from jqwidgets-react-tsx/jqxqrcode | vue_jqxqrcode.vue | jqwidgets-ng/jqxqrcode | | jqxRadioButton | Enables users make a choice among a set of mutually exclusive, related options. | jqxradiobutton.js · modules/jqxradiobutton.js | JqxRadioButton from jqwidgets-react-tsx/jqxradiobutton | vue_jqxradiobutton.vue | jqwidgets-ng/jqxradiobutton | | jqxRadioButtonGroup | Displays a check box group of items. | jqxradiobuttongroup.js · modules/jqxradiobuttongroup.js | JqxRadioButtonGroup from jqwidgets-react-tsx/jqxradiobuttongroup | vue_jqxradiobuttongroup.vue | jqwidgets-ng/jqxradiobuttongroup | | jqxRangeSelector | Range slider over a numeric or date scale, often used to filter a chart or grid. | jqxrangeselector.js · modules/jqxrangeselector.js | JqxRangeSelector from jqwidgets-react-tsx/jqxrangeselector | vue_jqxrangeselector.vue | jqwidgets-ng/jqxrangeselector | | jqxRating | Star rating control with precision and custom images. | jqxrating.js · modules/jqxrating.js | JqxRating from jqwidgets-react-tsx/jqxrating | vue_jqxrating.vue | jqwidgets-ng/jqxrating | | jqxRepeatButton | Represents a button, which fires repeating click events, when the button is clicked. | jqxbuttons.js · modules/jqxrepeatbutton.js | JqxRepeatButton from jqwidgets-react-tsx/jqxrepeatbutton | vue_jqxrepeatbutton.vue | jqwidgets-ng/jqxrepeatbutton | | jqxResponsivePanel | Side panel that collapses into a toggle button on small screens. | jqxresponsivepanel.js · modules/jqxresponsivepanel.js | JqxResponsivePanel from jqwidgets-react-tsx/jqxresponsivepanel | vue_jqxresponsivepanel.vue | jqwidgets-ng/jqxresponsivepanel | | jqxRibbon | Office-style ribbon with tabbed command groups. | jqxribbon.js · modules/jqxribbon.js | JqxRibbon from jqwidgets-react-tsx/jqxribbon | vue_jqxribbon.vue | jqwidgets-ng/jqxribbon | | jqxScheduler | Calendar scheduler with day, week, month, timeline and agenda views, recurring appointments and resources. | jqxscheduler.js · modules/jqxscheduler.js | JqxScheduler from jqwidgets-react-tsx/jqxscheduler | vue_jqxscheduler.vue | jqwidgets-ng/jqxscheduler | | jqxScrollBar | Styled horizontal and vertical scrollbars. | jqxscrollbar.js · modules/jqxscrollbar.js | JqxScrollBar from jqwidgets-react-tsx/jqxscrollbar | vue_jqxscrollbar.vue | jqwidgets-ng/jqxscrollbar | | jqxScrollView | Swipeable carousel of pages or images. | jqxscrollview.js · modules/jqxscrollview.js | JqxScrollView from jqwidgets-react-tsx/jqxscrollview | vue_jqxscrollview.vue | jqwidgets-ng/jqxscrollview | | jqxSlider | Horizontal or vertical slider with a single value or a range, ticks and tooltips. | jqxslider.js · modules/jqxslider.js | JqxSlider from jqwidgets-react-tsx/jqxslider | vue_jqxslider.vue | jqwidgets-ng/jqxslider | | jqxSortable | Reorder list items or elements by dragging. | jqxsortable.js · modules/jqxsortable.js | JqxSortable from jqwidgets-react-tsx/jqxsortable | vue_jqxsortable.vue | jqwidgets-ng/jqxsortable | | jqxSplitLayout | Nested split layout defined from a JSON structure. | jqxsplitlayout.js · modules/jqxsplitlayout.js | JqxSplitLayout from jqwidgets-react-tsx/jqxsplitlayout | vue_jqxsplitlayout.vue | jqwidgets-ng/jqxsplitlayout | | jqxSplitter | Resizable, collapsible panels split horizontally or vertically. | jqxsplitter.js · modules/jqxsplitter.js | JqxSplitter from jqwidgets-react-tsx/jqxsplitter | vue_jqxsplitter.vue | jqwidgets-ng/jqxsplitter | | jqxSwitchButton | Displays a switch button. | jqxswitchbutton.js · modules/jqxswitchbutton.js | JqxSwitchButton from jqwidgets-react-tsx/jqxswitchbutton | vue_jqxswitchbutton.vue | jqwidgets-ng/jqxswitchbutton | | jqxTabs | Tabs with scrolling, closable and reorderable tabs, and lazy content loading. | jqxtabs.js · modules/jqxtabs.js | JqxTabs from jqwidgets-react-tsx/jqxtabs | vue_jqxtabs.vue | jqwidgets-ng/jqxtabs | | jqxTagCloud | Tag cloud that sizes and colours tags by weight. | jqxtagcloud.js · modules/jqxtagcloud.js | JqxTagCloud from jqwidgets-react-tsx/jqxtagcloud | vue_jqxtagcloud.vue | jqwidgets-ng/jqxtagcloud | | jqxTextArea | Multi-line text input with auto-complete and a styled scrollbar. | jqxtextarea.js · modules/jqxtextarea.js | JqxTextArea from jqwidgets-react-tsx/jqxtextarea | vue_jqxtextarea.vue | jqwidgets-ng/jqxtextarea | | jqxTimeline | Vertical or horizontal timeline of dated events. | jqxtimeline.js · modules/jqxtimeline.js | JqxTimeline from jqwidgets-react-tsx/jqxtimeline | vue_jqxtimeline.vue | jqwidgets-ng/jqxtimeline | | jqxTimePicker | Analog clock-face time picker for hours and minutes. | jqxtimepicker.js · modules/jqxtimepicker.js | JqxTimePicker from jqwidgets-react-tsx/jqxtimepicker | vue_jqxtimepicker.vue | jqwidgets-ng/jqxtimepicker | | jqxToggleButton | Displays a Button which can be toggled and have two states - checked and unchecked. | jqxbuttons.js · modules/jqxtogglebutton.js | JqxToggleButton from jqwidgets-react-tsx/jqxtogglebutton | vue_jqxtogglebutton.vue | jqwidgets-ng/jqxtogglebutton | | jqxToolBar | Toolbar that holds buttons, inputs and drop-downs and collapses overflowing items into a menu. | jqxtoolbar.js · modules/jqxtoolbar.js | JqxToolBar from jqwidgets-react-tsx/jqxtoolbar | vue_jqxtoolbar.vue | jqwidgets-ng/jqxtoolbar | | jqxTooltip | Tooltip with positions, triggers, delays and HTML content. | jqxtooltip.js · modules/jqxtooltip.js | JqxTooltip from jqwidgets-react-tsx/jqxtooltip | vue_jqxtooltip.vue | jqwidgets-ng/jqxtooltip | | jqxTree | Tree view with check boxes, drag-and-drop, load-on-demand and keyboard navigation. | jqxtree.js · modules/jqxtree.js | JqxTree from jqwidgets-react-tsx/jqxtree | vue_jqxtree.vue | jqwidgets-ng/jqxtree | | jqxTreeGrid | Hierarchical grid that shows tree data in columns, with load-on-demand, editing, aggregates and export. | jqxtreegrid.js · modules/jqxtreegrid.js | JqxTreeGrid from jqwidgets-react-tsx/jqxtreegrid | vue_jqxtreegrid.vue | jqwidgets-ng/jqxtreegrid | | jqxTreeMap | Treemap that shows hierarchical data as nested rectangles sized and coloured by value. | jqxtreemap.js · modules/jqxtreemap.js | JqxTreeMap from jqwidgets-react-tsx/jqxtreemap | vue_jqxtreemap.vue | jqwidgets-ng/jqxtreemap | | jqxValidator | Form validation rules with inline hints and custom rules. | jqxvalidator.js · modules/jqxvalidator.js | JqxValidator from jqwidgets-react-tsx/jqxvalidator | vue_jqxvalidator.vue | jqwidgets-ng/jqxvalidator | | jqxWindow | Dialog window that can be modal, dragged, resized, collapsed and animated. | jqxwindow.js · modules/jqxwindow.js | JqxWindow from jqwidgets-react-tsx/jqxwindow | vue_jqxwindow.vue | jqwidgets-ng/jqxwindow |

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.

| Kind | Themes | |---|---| | Design systems, light and dark | tailwind / tailwind-dark, tailwind-blue / tailwind-blue-dark, material / material-dark, material-green / material-green-dark, material-purple / material-purple-dark, fluent / fluent-dark, bootstrap | | Light and dark pairs | light / dark, metro / metrodark, light-ie / dark-ie, ui-lightness / ui-darkness | | High contrast | highcontrast | | Classic | office, web, flat, fresh, arctic, glacier, energyblue, darkblue, orange, summer, black, shinyblack, classic, android, blackberry, mobile, windowsphone, blue, ui-le-frog, ui-overcast, ui-redmond, ui-smoothness, ui-start, ui-sunny |

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

| What you see | Why | What to do | |---|---|---| | $(...).jqxGrid is not a function | The widget's script is not loaded, or was loaded before jqxcore.js | Load the widget's module bundle - or jqxcore.js first, then the widget's script | | Please include jqxinput.js (or another script name) | The widget depends on a script that is not on the page | Load the named script, or the widget's module bundle, which carries every dependency | | $.jqx is undefined | $ is a different library - typically a second jQuery loaded after jqxcore.js | Load jQuery once, before jqxcore.js | | JQXLite is not defined in a bundled application | The runtime was tree-shaken away | Import the widget's module bundle for its side effects: import 'jqwidgets-scripts/jqwidgets/modules/jqxgrid' | | The widget renders unstyled | jqx.base.css or the theme stylesheet is not loaded, or theme names one that is not | Load both; the theme value must match a loaded jqx.<theme>.css | | jqxGauge: Missing reference to jqxmath.js (or jqxLinearGauge, jqxSlider) | int64 mode needs the 64-bit math library, which the widget's bundle leaves out | Load jqwidgets/jqxmath.js too, or import 'jqwidgets-scripts/jqwidgets/jqxmath' (27.1.0 and later) | | document is not defined under Next.js or Nuxt | The component was rendered on the server | Load it on the client only (ssr: false) | | vite build stops with Unexpected token Semicolon in jqx.light-ie.css | Vite's CSS minifier rejects the Internet Explorer hacks (*zoom: 1) in that theme | Add css: { lightningcss: { errorRecovery: true } } to vite.config.ts | | Vue dev server: Cannot set properties of undefined (setting 'Globalize') (27.0.1 and earlier) | globalize.js took this as the window, which is undefined in the ES module the dev server serves | Update to 27.1.0 | | A grid in a Vue or React app goes back to page 1, or its sort and filters reset, when unrelated state changes | A new source object reached the component and bound the grid again | Create the adapter and columns once (Vue: constants of <script setup>; React: outside the component or useMemo) | | React: Invalid Selector - #JqxButton... for a component rendered inside a grid row template, a tab or a layout (27.0.1 and earlier) | The component looked its element up by id before it was on the page | Update to 27.1.0 | | theme has no effect on a Bar Gauge, Bullet Chart, Gauge, Knob, Rating or another of 17 widgets in React or Vue (27.0.1 and earlier) | Their React and Vue components did not pass theme on | Update to 27.1.0 | | loadServerData is never called (27.0.1 and earlier) | The function was async; the library took it for something else | Pass a plain function that calls your async code: (params, settings, callback) => { load(params).then(callback); } | | A filter that matches nothing leaves the previous total in the pager (27.0.1 and earlier) | A total of 0 from loadServerData was ignored | Set adapter.totalrecords = 0 before calling the callback | | "jQWidgets License Key Not Found" in the console, a www.jqwidgets.com label on the widget | The evaluation build is running without a license key | Apply the license key from your license email; see Licensing |

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: [email protected]

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 [email protected] 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.