# jqwidgets-scripts

**jQWidgets** - JavaScript UI components for jQuery, React, Vue and TypeScript: an
enterprise data grid, scheduler, Gantt chart, pivot grid, tree grid, 30+ chart types,
editors, date and number inputs, drop-downs, menus, tabs, docking and layout - 82 widgets
in one library, with 40 themes. This package is the library itself; `jqwidgets-framework`
adds the demos and images, and `jqwidgets-ng` is the Angular library.

[Demos](https://www.jqwidgets.com/jquery-widgets-demo/) ·
[React demos](https://www.jqwidgets.com/react/) ·
[Documentation](https://www.jqwidgets.com/jquery-widgets-documentation/) ·
[License & pricing](https://jqwidgets.com/license/)

jQWidgets is commercial software. See [Licensing](#licensing).

## Installation

```sh
npm install jqwidgets-scripts
```

## 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 40 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 `jqxcore.js`, its own script, and `jqx.base.css` plus one theme.
Some widgets depend on others - the grid on `jqxdata.js`, `jqxbuttons.js`,
`jqxscrollbar.js`, `jqxmenu.js` and `jqxgrid.selection.js`, for example, with more
for sorting, filtering, paging and editing. The documentation page of each widget lists
its dependencies, or load the widget's module bundle, which carries all of them.

### Plain JavaScript or jQuery

```html
<link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" href="node_modules/jqwidgets-scripts/jqwidgets/styles/jqx.material.css" />

<script src="node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js"></script>
<script src="node_modules/jqwidgets-scripts/jqwidgets/jqxdata.js"></script>
<script src="node_modules/jqwidgets-scripts/jqwidgets/jqxbuttons.js"></script>
<script src="node_modules/jqwidgets-scripts/jqwidgets/jqxscrollbar.js"></script>
<script src="node_modules/jqwidgets-scripts/jqwidgets/jqxmenu.js"></script>
<script src="node_modules/jqwidgets-scripts/jqwidgets/jqxgrid.js"></script>
<script src="node_modules/jqwidgets-scripts/jqwidgets/jqxgrid.selection.js"></script>

<div id="grid"></div>
<script>
    var 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: 'material',
        source: new $.jqx.dataAdapter(source),
        columns: [{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }]
    });
</script>
```

jQuery is optional. If jQuery is on the page before `jqxcore.js`, 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.

### One bundle per widget

`jqwidgets/modules/<widget>.js` carries the widget with every script it depends on, so
the dependency list above becomes one tag - or one import, in a bundled application:

```html
<script src="node_modules/jqwidgets-scripts/jqwidgets/modules/jqxgrid.js"></script>
```

```js
import 'jqwidgets-scripts/jqwidgets/modules/jqxgrid';
```

`jqwidgets/jqx-all.js` is the whole library in one file, for pages that use many widgets.
Load either a module bundle or the individual scripts, not both for the same widget.

### React

The components pull in their own runtime; you add the stylesheets.

```tsx
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material.css';
import JqxGrid, { jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';

const source = new jqx.dataAdapter({
    datatype: 'array',
    localdata: [{ name: 'Nancy', title: 'Sales Representative' }],
    datafields: [{ name: 'name', type: 'string' }, { name: 'title', type: 'string' }]
});

export default function App() {
    return <JqxGrid theme="material" width={500} source={source}
        columns={[{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }]} />;
}
```

React 16.8 through 19 are supported. Each component folder has an ES module, a UMD
build and a `.d.ts`.

### Vue 3

```vue
<template>
    <JqxGrid theme="material" :width="500" :source="source" :columns="columns" />
</template>

<script setup>
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.material.css';
import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue3/vue_jqxgrid.vue';
</script>
```

### TypeScript

```ts
/// <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.

## 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](https://www.jqwidgets.com/jquery-widgets-documentation/).

<!-- components:start -->
| Widget | What it does | jQuery / JavaScript | React | Vue 3 | Angular |
|---|---|---|---|---|---|
| [jqxBarcode](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbarcode/index.htm) | Barcodes encodes value in a specific pattern. | `jqxbarcode.js` · `modules/jqxbarcode.js` | `JqxBarcode` from `jqwidgets-react-tsx/jqxbarcode` | `vue_jqxbarcode.vue` | `jqwidgets-ng/jqxbarcode` |
| [jqxBarGauge](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbargauge/index.htm) | Displays multiple values in a circular graph. | `jqxbargauge.js` · `modules/jqxbargauge.js` | `JqxBarGauge` from `jqwidgets-react-tsx/jqxbargauge` | `vue_jqxbargauge.vue` | `jqwidgets-ng/jqxbargauge` |
| [jqxBulletChart](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbulletchart/index.htm) | Features two measures - a primary one (the pointer) and a comparative one (the target) and displays them in the context of a number of... | `jqxbulletchart.js` · `modules/jqxbulletchart.js` | `JqxBulletChart` from `jqwidgets-react-tsx/jqxbulletchart` | `vue_jqxbulletchart.vue` | `jqwidgets-ng/jqxbulletchart` |
| [jqxButtonGroup](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | 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](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | Displays a simple button. | `jqxbuttons.js` · `modules/jqxbuttons.js` | `JqxButton` from `jqwidgets-react-tsx/jqxbuttons` | `vue_jqxbuttons.vue` | `jqwidgets-ng/jqxbuttons` |
| [jqxCalendar](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcalendar/index.htm) | Enables the user to select a date using a visual monthly calendar display. | `jqxcalendar.js` · `modules/jqxcalendar.js` | `JqxCalendar` from `jqwidgets-react-tsx/jqxcalendar` | `vue_jqxcalendar.vue` | `jqwidgets-ng/jqxcalendar` |
| [jqxChart](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm) | Displays Lightweight and powerful chart widget written 100% in javascript. | `jqxchart.js` · `modules/jqxchart.js` | `JqxChart` from `jqwidgets-react-tsx/jqxchart` | `vue_jqxchart.vue` | `jqwidgets-ng/jqxchart` |
| [jqxChat](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchat/index.htm) | Embeds an AI assistant chat into a web application. | `jqxchat.js` · `modules/jqxchat.js` | `JqxChat` from `jqwidgets-react-tsx/jqxchat` | `vue_jqxchat.vue` | `jqwidgets-ng/jqxchat` |
| [jqxCheckBox](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | 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](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | 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](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcolorpicker/index.htm) | Enables the user to easily pick a color. | `jqxcolorpicker.js` · `modules/jqxcolorpicker.js` | `JqxColorPicker` from `jqwidgets-react-tsx/jqxcolorpicker` | `vue_jqxcolorpicker.vue` | `jqwidgets-ng/jqxcolorpicker` |
| [jqxComboBox](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm) | Enables the user to easily pick an item from a list of selectable items displayed in a drop-down. | `jqxcombobox.js` · `modules/jqxcombobox.js` | `JqxComboBox` from `jqwidgets-react-tsx/jqxcombobox` | `vue_jqxcombobox.vue` | `jqwidgets-ng/jqxcombobox` |
| [jqxComplexInput](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcomplexinput/index.htm) | Enables the user to edit complex and scientific numbers. | `jqxcomplexinput.js` · `modules/jqxcomplexinput.js` | `JqxComplexInput` from `jqwidgets-react-tsx/jqxcomplexinput` | `vue_jqxcomplexinput.vue` | `jqwidgets-ng/jqxcomplexinput` |
| [jqxDataTable](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/index.htm) | Displays a table of data and allows the user to sort, filter or edit it. | `jqxdatatable.js` · `modules/jqxdatatable.js` | `JqxDataTable` from `jqwidgets-react-tsx/jqxdatatable` | `vue_jqxdatatable.vue` | `jqwidgets-ng/jqxdatatable` |
| [jqxDateTimeInput](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatetimeinput/index.htm) | Enables the user to easily pick a date or time from an input or calendar displays in a drop-down. | `jqxdatetimeinput.js` · `modules/jqxdatetimeinput.js` | `JqxDateTimeInput` from `jqwidgets-react-tsx/jqxdatetimeinput` | `vue_jqxdatetimeinput.vue` | `jqwidgets-ng/jqxdatetimeinput` |
| [jqxDocking](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdocking/index.htm) | Enables the user to add windows and change their layout. | `jqxdocking.js` · `modules/jqxdocking.js` | `JqxDocking` from `jqwidgets-react-tsx/jqxdocking` | `vue_jqxdocking.vue` | `jqwidgets-ng/jqxdocking` |
| [jqxDockingLayout](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdockinglayout/index.htm) | Enables the creation of complex layouts with panels that can be floated, docked, nested, resized, pinned, unpinned and closed. | `jqxdockinglayout.js` · `modules/jqxdockinglayout.js` | `JqxDockingLayout` from `jqwidgets-react-tsx/jqxdockinglayout` | `vue_jqxdockinglayout.vue` | `jqwidgets-ng/jqxdockinglayout` |
| [jqxDockPanel](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdockpanel/index.htm) | Allows the creation of dock layouts. | `jqxdockpanel.js` · `modules/jqxdockpanel.js` | `JqxDockPanel` from `jqwidgets-react-tsx/jqxdockpanel` | `vue_jqxdockpanel.vue` | `jqwidgets-ng/jqxdockpanel` |
| [jqxDragDrop](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdragdrop/index.htm) | Enables the user to easily drag and drop items. | `jqxdragdrop.js` · `modules/jqxdragdrop.js` | `JqxDragDrop` from `jqwidgets-react-tsx/jqxdragdrop` | `vue_jqxdragdrop.vue` | `jqwidgets-ng/jqxdragdrop` |
| [jqxDraw](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdraw/index.htm) | Drawing SVG, HTML5 and VML programming interface. | `jqxdraw.js` · `modules/jqxdraw.js` | `JqxDraw` from `jqwidgets-react-tsx/jqxdraw` | `vue_jqxdraw.vue` | `jqwidgets-ng/jqxdraw` |
| [jqxDropDownButton](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | 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](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm) | Contains a list of selectable items displayed in a drop-down. | `jqxdropdownlist.js` · `modules/jqxdropdownlist.js` | `JqxDropDownList` from `jqwidgets-react-tsx/jqxdropdownlist` | `vue_jqxdropdownlist.vue` | `jqwidgets-ng/jqxdropdownlist` |
| [jqxEditor](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxeditor/index.htm) | Represents a ready-for-use HTML text editor which can simplify web content creation or be a replacement of your HTML Text Areas. | `jqxeditor.js` · `modules/jqxeditor.js` | `JqxEditor` from `jqwidgets-react-tsx/jqxeditor` | `vue_jqxeditor.vue` | `jqwidgets-ng/jqxeditor` |
| [jqxExpander](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxexpander/index.htm) | Displays header and content sections(like tabs). | `jqxexpander.js` · `modules/jqxexpander.js` | `JqxExpander` from `jqwidgets-react-tsx/jqxexpander` | `vue_jqxexpander.vue` | `jqwidgets-ng/jqxexpander` |
| [jqxFileUpload](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxfileupload/index.htm) | Enables users to select files and upload them to a server. | `jqxfileupload.js` · `modules/jqxfileupload.js` | `JqxFileUpload` from `jqwidgets-react-tsx/jqxfileupload` | `vue_jqxfileupload.vue` | `jqwidgets-ng/jqxfileupload` |
| [jqxForm](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxform/index.htm) | Form component displaying one or more input elements. | `jqxform.js` · `modules/jqxform.js` | `JqxForm` from `jqwidgets-react-tsx/jqxform` | `vue_jqxform.vue` | `jqwidgets-ng/jqxform` |
| [jqxFormattedInput](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxformattedinput/index.htm) | Enables users to format numbers in various numeric formats. | `jqxformattedinput.js` · `modules/jqxformattedinput.js` | `JqxFormattedInput` from `jqwidgets-react-tsx/jqxformattedinput` | `vue_jqxformattedinput.vue` | `jqwidgets-ng/jqxformattedinput` |
| [jqxGantt](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgantt/index.htm) | Enables users to create easily Gantt charts | `jqxgantt.js` · `modules/jqxgantt.js` | `JqxGantt` from `jqwidgets-react-tsx/jqxgantt` | `vue_jqxgantt.vue` | `jqwidgets-ng/jqxgantt` |
| [jqxGauge](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgauge/index.htm) | Displays an indicator within a range of values. | `jqxgauge.js` · `modules/jqxgauge.js` | `JqxGauge` from `jqwidgets-react-tsx/jqxgauge` | `vue_jqxgauge.vue` | `jqwidgets-ng/jqxgauge` |
| [jqxGrid](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm) | Enables users to display tabular data. | `jqxgrid.js` · `modules/jqxgrid.js` | `JqxGrid` from `jqwidgets-react-tsx/jqxgrid` | `vue_jqxgrid.vue` | `jqwidgets-ng/jqxgrid` |
| [jqxHeatMap](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxheatmap/index.htm) | Displays a heatmap. | `jqxheatmap.js` · `modules/jqxheatmap.js` | `JqxHeatMap` from `jqwidgets-react-tsx/jqxheatmap` | `vue_jqxheatmap.vue` | `jqwidgets-ng/jqxheatmap` |
| [jqxInput](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/index.htm) | Represents an Input with auto-complete capabilities. | `jqxinput.js` · `modules/jqxinput.js` | `JqxInput` from `jqwidgets-react-tsx/jqxinput` | `vue_jqxinput.vue` | `jqwidgets-ng/jqxinput` |
| [jqxKanban](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxkanban/index.htm) | Can be used to implement the kanban method for a project. | `jqxkanban.js` · `modules/jqxkanban.js` | `JqxKanban` from `jqwidgets-react-tsx/jqxkanban` | `vue_jqxkanban.vue` | `jqwidgets-ng/jqxkanban` |
| [jqxKnob](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxknob/index.htm) | Displays a graph with round shape which displays a draggable indicator within a range of values. | `jqxknob.js` · `modules/jqxknob.js` | `JqxKnob` from `jqwidgets-react-tsx/jqxknob` | `vue_jqxknob.vue` | `jqwidgets-ng/jqxknob` |
| [jqxLayout](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlayout/index.htm) | Allows the creation of complex layouts with panels that can be nested, resized, pinned, unpinned and closed. | `jqxlayout.js` · `modules/jqxlayout.js` | `JqxLayout` from `jqwidgets-react-tsx/jqxlayout` | `vue_jqxlayout.vue` | `jqwidgets-ng/jqxlayout` |
| [jqxLinearGauge](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgauge/index.htm) | Displays a linear gauge. | `jqxgauge.js` · `modules/jqxlineargauge.js` | `JqxLinearGauge` from `jqwidgets-react-tsx/jqxlineargauge` | `vue_jqxlineargauge.vue` | `jqwidgets-ng/jqxlineargauge` |
| [jqxLinkButton](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | Displays a button with anchor tag. | `jqxbuttons.js` · `modules/jqxlinkbutton.js` | `JqxLinkButton` from `jqwidgets-react-tsx/jqxlinkbutton` | `vue_jqxlinkbutton.vue` | `jqwidgets-ng/jqxlinkbutton` |
| [jqxListBox](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistbox/index.htm) | Displays a list of selectable items. | `jqxlistbox.js` · `modules/jqxlistbox.js` | `JqxListBox` from `jqwidgets-react-tsx/jqxlistbox` | `vue_jqxlistbox.vue` | `jqwidgets-ng/jqxlistbox` |
| [jqxListMenu](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxlistmenu/index.htm) | Displays a collection of Unordered and Ordered Lists. | `jqxlistmenu.js` · `modules/jqxlistmenu.js` | `JqxListMenu` from `jqwidgets-react-tsx/jqxlistmenu` | `vue_jqxlistmenu.vue` | `jqwidgets-ng/jqxlistmenu` |
| [jqxLoader](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxloader/index.htm) | Displays a built-in loading element. | `jqxloader.js` · `modules/jqxloader.js` | `JqxLoader` from `jqwidgets-react-tsx/jqxloader` | `vue_jqxloader.vue` | `jqwidgets-ng/jqxloader` |
| [jqxMaskedInput](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmaskedinput/index.htm) | Uses a mask to distinguish between proper and improper user input. | `jqxmaskedinput.js` · `modules/jqxmaskedinput.js` | `JqxMaskedInput` from `jqwidgets-react-tsx/jqxmaskedinput` | `vue_jqxmaskedinput.vue` | `jqwidgets-ng/jqxmaskedinput` |
| [jqxMenu](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxmenu/index.htm) | Enables you to add menus to your website or web application. | `jqxmenu.js` · `modules/jqxmenu.js` | `JqxMenu` from `jqwidgets-react-tsx/jqxmenu` | `vue_jqxmenu.vue` | `jqwidgets-ng/jqxmenu` |
| [jqxNavBar](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnavbar/index.htm) | Is Built from UL and LI tags and can be used for creating responsive horizontal/vertical layouts or simple navigation menus. | `jqxnavbar.js` · `modules/jqxnavbar.js` | `JqxNavBar` from `jqwidgets-react-tsx/jqxnavbar` | `vue_jqxnavbar.vue` | `jqwidgets-ng/jqxnavbar` |
| [jqxNavigationBar](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnavigationbar/index.htm) | Is Similar to Tabs, NavigationBar has header and content sections. | `jqxnavigationbar.js` · `modules/jqxnavigationbar.js` | `JqxNavigationBar` from `jqwidgets-react-tsx/jqxnavigationbar` | `vue_jqxnavigationbar.vue` | `jqwidgets-ng/jqxnavigationbar` |
| [jqxNotification](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnotification/index.htm) | Displays an unobtrusive notification to the user. | `jqxnotification.js` · `modules/jqxnotification.js` | `JqxNotification` from `jqwidgets-react-tsx/jqxnotification` | `vue_jqxnotification.vue` | `jqwidgets-ng/jqxnotification` |
| [jqxNumberInput](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxnumberinput/index.htm) | Enables users to input numbers. | `jqxnumberinput.js` · `modules/jqxnumberinput.js` | `JqxNumberInput` from `jqwidgets-react-tsx/jqxnumberinput` | `vue_jqxnumberinput.vue` | `jqwidgets-ng/jqxnumberinput` |
| [jqxPanel](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpanel/index.htm) | Enables users to display content in a scrollable panel. | `jqxpanel.js` · `modules/jqxpanel.js` | `JqxPanel` from `jqwidgets-react-tsx/jqxpanel` | `vue_jqxpanel.vue` | `jqwidgets-ng/jqxpanel` |
| [jqxPasswordInput](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpasswordinput/index.htm) | Enables users to input passwords. | `jqxpasswordinput.js` · `modules/jqxpasswordinput.js` | `JqxPasswordInput` from `jqwidgets-react-tsx/jqxpasswordinput` | `vue_jqxpasswordinput.vue` | `jqwidgets-ng/jqxpasswordinput` |
| [jqxPickList](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpicklist/index.htm) | A dual-list picker for moving items between an available list and a selected list. | `jqxpicklist.js` · `modules/jqxpicklist.js` | `JqxPickList` from `jqwidgets-react-tsx/jqxpicklist` | `vue_jqxpicklist.vue` | `jqwidgets-ng/jqxpicklist` |
| [jqxPivotDesigner](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpivotgrid/index.htm) | Lets users design a PivotGrid interactively. | `jqxpivotdesigner.js` · `modules/jqxpivotdesigner.js` | `JqxPivotDesigner` from `jqwidgets-react-tsx/jqxpivotdesigner` | `vue_jqxpivotdesigner.vue` | `jqwidgets-ng/jqxpivotdesigner` |
| [jqxPivotGrid](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpivotgrid/index.htm) | Displays summarized data in a multi-dimensional, cross-tabulated view. | `jqxpivotgrid.js` · `modules/jqxpivotgrid.js` | `JqxPivotGrid` from `jqwidgets-react-tsx/jqxpivotgrid` | `vue_jqxpivotgrid.vue` | `jqwidgets-ng/jqxpivotgrid` |
| [jqxPopover](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxpopover/index.htm) | Displays a Small overlay of content that is used to display secondary information of any element when it is clicked by a user. | `jqxpopover.js` · `modules/jqxpopover.js` | `JqxPopover` from `jqwidgets-react-tsx/jqxpopover` | `vue_jqxpopover.vue` | `jqwidgets-ng/jqxpopover` |
| [jqxProgressBar](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxprogressbar/index.htm) | Visually indicates the progress of a lengthy operation. | `jqxprogressbar.js` · `modules/jqxprogressbar.js` | `JqxProgressBar` from `jqwidgets-react-tsx/jqxprogressbar` | `vue_jqxprogressbar.vue` | `jqwidgets-ng/jqxprogressbar` |
| [jqxQRcode](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxqrcode/index.htm) | QR Codes encode text values in a two-dimensional pattern. | `jqxqrcode.js` · `modules/jqxqrcode.js` | `JqxQRcode` from `jqwidgets-react-tsx/jqxqrcode` | `vue_jqxqrcode.vue` | `jqwidgets-ng/jqxqrcode` |
| [jqxRadioButton](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | 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](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | 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](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxrangeselector/index.htm) | Can easily be used to select a numeric or date range. | `jqxrangeselector.js` · `modules/jqxrangeselector.js` | `JqxRangeSelector` from `jqwidgets-react-tsx/jqxrangeselector` | `vue_jqxrangeselector.vue` | `jqwidgets-ng/jqxrangeselector` |
| [jqxRating](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxrating/index.htm) | Allows you to choose a rating. | `jqxrating.js` · `modules/jqxrating.js` | `JqxRating` from `jqwidgets-react-tsx/jqxrating` | `vue_jqxrating.vue` | `jqwidgets-ng/jqxrating` |
| [jqxRepeatButton](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | 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](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxresponsivepanel/index.htm) | Displays responsive panel with collapse point on resize. | `jqxresponsivepanel.js` · `modules/jqxresponsivepanel.js` | `JqxResponsivePanel` from `jqwidgets-react-tsx/jqxresponsivepanel` | `vue_jqxresponsivepanel.vue` | `jqwidgets-ng/jqxresponsivepanel` |
| [jqxRibbon](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxribbon/index.htm) | Can be used as a tabbed toolbar or a mega menu. | `jqxribbon.js` · `modules/jqxribbon.js` | `JqxRibbon` from `jqwidgets-react-tsx/jqxribbon` | `vue_jqxribbon.vue` | `jqwidgets-ng/jqxribbon` |
| [jqxScheduler](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscheduler/index.htm) | Displays a set of Appointments in Day, Week, Month, Timeline Day, Timeline Week and Timeline Month and Agenda views. | `jqxscheduler.js` · `modules/jqxscheduler.js` | `JqxScheduler` from `jqwidgets-react-tsx/jqxscheduler` | `vue_jqxscheduler.vue` | `jqwidgets-ng/jqxscheduler` |
| [jqxScrollBar](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscrollbar/index.htm) | Provides a scroll bar that has a sliding thumb whose position corresponds to a value. | `jqxscrollbar.js` · `modules/jqxscrollbar.js` | `JqxScrollBar` from `jqwidgets-react-tsx/jqxscrollbar` | `vue_jqxscrollbar.vue` | `jqwidgets-ng/jqxscrollbar` |
| [jqxScrollView](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxscrollview/index.htm) | Can be used for viewing content which is wider than the visible area outlined by the device's screen. | `jqxscrollview.js` · `modules/jqxscrollview.js` | `JqxScrollView` from `jqwidgets-react-tsx/jqxscrollview` | `vue_jqxscrollview.vue` | `jqwidgets-ng/jqxscrollview` |
| [jqxSlider](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxslider/index.htm) | Represents a flexible Slider that lets the user select from a range of values by moving a thumb along a track. | `jqxslider.js` · `modules/jqxslider.js` | `JqxSlider` from `jqwidgets-react-tsx/jqxslider` | `vue_jqxslider.vue` | `jqwidgets-ng/jqxslider` |
| [jqxSortable](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsortable/index.htm) | Enables users to change the position of elements through drag and drop. | `jqxsortable.js` · `modules/jqxsortable.js` | `JqxSortable` from `jqwidgets-react-tsx/jqxsortable` | `vue_jqxsortable.vue` | `jqwidgets-ng/jqxsortable` |
| [jqxSplitLayout](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitlayout/index.htm) | Enables users to create complex Layouts and to re-arrange them dynamically | `jqxsplitlayout.js` · `modules/jqxsplitlayout.js` | `JqxSplitLayout` from `jqwidgets-react-tsx/jqxsplitlayout` | `vue_jqxsplitlayout.vue` | `jqwidgets-ng/jqxsplitlayout` |
| [jqxSplitter](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm) | Displays a Splitter. It divides two panels with a split bar and the size of each panel can be adjusted through the split bar. | `jqxsplitter.js` · `modules/jqxsplitter.js` | `JqxSplitter` from `jqwidgets-react-tsx/jqxsplitter` | `vue_jqxsplitter.vue` | `jqwidgets-ng/jqxsplitter` |
| [jqxSwitchButton](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | Displays a switch button. | `jqxswitchbutton.js` · `modules/jqxswitchbutton.js` | `JqxSwitchButton` from `jqwidgets-react-tsx/jqxswitchbutton` | `vue_jqxswitchbutton.vue` | `jqwidgets-ng/jqxswitchbutton` |
| [jqxTabs](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/index.htm) | Displays Tabs that break the content into multiple sections. | `jqxtabs.js` · `modules/jqxtabs.js` | `JqxTabs` from `jqwidgets-react-tsx/jqxtabs` | `vue_jqxtabs.vue` | `jqwidgets-ng/jqxtabs` |
| [jqxTagCloud](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtagcloud/index.htm) | Displays a collection of user-generated tags accompanying the articles, posts, or videos on your website. | `jqxtagcloud.js` · `modules/jqxtagcloud.js` | `JqxTagCloud` from `jqwidgets-react-tsx/jqxtagcloud` | `vue_jqxtagcloud.vue` | `jqwidgets-ng/jqxtagcloud` |
| [jqxTextArea](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtextarea/index.htm) | Displays a Text area on a web page. | `jqxtextarea.js` · `modules/jqxtextarea.js` | `JqxTextArea` from `jqwidgets-react-tsx/jqxtextarea` | `vue_jqxtextarea.vue` | `jqwidgets-ng/jqxtextarea` |
| [jqxTimeline](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtimeline/index.htm) | Displays a timeline of items. | `jqxtimeline.js` · `modules/jqxtimeline.js` | `JqxTimeline` from `jqwidgets-react-tsx/jqxtimeline` | `vue_jqxtimeline.vue` | `jqwidgets-ng/jqxtimeline` |
| [jqxTimePicker](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtimepicker/index.htm) | Represents hours and minutes as an o'clock in a circular graph. | `jqxtimepicker.js` · `modules/jqxtimepicker.js` | `JqxTimePicker` from `jqwidgets-react-tsx/jqxtimepicker` | `vue_jqxtimepicker.vue` | `jqwidgets-ng/jqxtimepicker` |
| [jqxToggleButton](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxbutton/index.htm) | 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](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtoolbar/index.htm) | Displays a bar with tools such as buttons, drop-downs and others. | `jqxtoolbar.js` · `modules/jqxtoolbar.js` | `JqxToolBar` from `jqwidgets-react-tsx/jqxtoolbar` | `vue_jqxtoolbar.vue` | `jqwidgets-ng/jqxtoolbar` |
| [jqxTooltip](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtooltip/index.htm) | Enables users to display a popup message. | `jqxtooltip.js` · `modules/jqxtooltip.js` | `JqxTooltip` from `jqwidgets-react-tsx/jqxtooltip` | `vue_jqxtooltip.vue` | `jqwidgets-ng/jqxtooltip` |
| [jqxTree](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/index.htm) | Represents a Tree that displays a hierarchical collection of items. | `jqxtree.js` · `modules/jqxtree.js` | `JqxTree` from `jqwidgets-react-tsx/jqxtree` | `vue_jqxtree.vue` | `jqwidgets-ng/jqxtree` |
| [jqxTreeGrid](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm) | Represents data in a tree-like structure. | `jqxtreegrid.js` · `modules/jqxtreegrid.js` | `JqxTreeGrid` from `jqwidgets-react-tsx/jqxtreegrid` | `vue_jqxtreegrid.vue` | `jqwidgets-ng/jqxtreegrid` |
| [jqxTreeMap](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreemap/index.htm) | Displays hierarchical data as a set of nested rectangles. | `jqxtreemap.js` · `modules/jqxtreemap.js` | `JqxTreeMap` from `jqwidgets-react-tsx/jqxtreemap` | `vue_jqxtreemap.vue` | `jqwidgets-ng/jqxtreemap` |
| [jqxValidator](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxvalidator/index.htm) | Enables you to validate users input. | `jqxvalidator.js` · `modules/jqxvalidator.js` | `JqxValidator` from `jqwidgets-react-tsx/jqxvalidator` | `vue_jqxvalidator.vue` | `jqwidgets-ng/jqxvalidator` |
| [jqxWindow](https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm) | Enables you to direct a user�s attention to a particular activity in your web application, such as entering data or viewing information. | `jqxwindow.js` · `modules/jqxwindow.js` | `JqxWindow` from `jqwidgets-react-tsx/jqxwindow` | `vue_jqxwindow.vue` | `jqwidgets-ng/jqxwindow` |
<!-- components:end -->

## 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:

```js
$.jqx.theme = 'material';
```

Themes in the package: `material`, `material-green`, `material-purple`, `fluent`,
`tailwind`, `tailwind-dark`, `bootstrap`, `light`, `dark`, `highcontrast`, `metro`,
`metrodark`, `office`, `web`, `flat`, `fresh`, `arctic`, `glacier`, `energyblue`,
`darkblue`, `orange`, `summer`, `black`, `shinyblack`, `classic`, `android`,
`blackberry`, `mobile`, `windowsphone`, `blue`, `dark-ie`, `light-ie`, and the eight
`ui-*` jQuery UI colour schemes. Custom themes can be built with the online
[Theme Builder](https://www.jqwidgets.com/themebuilder/).

## Globalization

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

```html
<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>
```

```js
$('#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.

## 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 `jqxcore.js` first, then the widget's script - or its module bundle |
| `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` |
| `document is not defined` under Next.js or Nuxt | The component was rendered on the server | Load it on the client only (`ssr: false`) |
| "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](#licensing) |

## Working with an AI assistant

`npx jqwidgets-mcp-server` gives Claude Code, Cursor, Copilot and any other
[MCP](https://modelcontextprotocol.io) 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](https://www.npmjs.com/package/jqwidgets-mcp-server).

## Licensing

jQWidgets is commercial software distributed under the
[jQWidgets license](https://jqwidgets.com/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/
- Demos: https://www.jqwidgets.com/jquery-widgets-demo/
- React demos: https://www.jqwidgets.com/react/
- 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.