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 · React demos · Documentation · License & pricing

jQWidgets is commercial software. See Licensing.

Installation

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

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

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

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.

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

<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

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

| Widget | What it does | jQuery / JavaScript | React | Vue 3 | Angular | |---|---|---|---|---|---| | jqxBarcode | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | Allows the creation of dock layouts. | jqxdockpanel.js · modules/jqxdockpanel.js | JqxDockPanel from jqwidgets-react-tsx/jqxdockpanel | vue_jqxdockpanel.vue | jqwidgets-ng/jqxdockpanel | | jqxDragDrop | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | Enables users to display tabular data. | jqxgrid.js · modules/jqxgrid.js | JqxGrid from jqwidgets-react-tsx/jqxgrid | vue_jqxgrid.vue | jqwidgets-ng/jqxgrid | | jqxHeatMap | Displays a heatmap. | jqxheatmap.js · modules/jqxheatmap.js | JqxHeatMap from jqwidgets-react-tsx/jqxheatmap | vue_jqxheatmap.vue | jqwidgets-ng/jqxheatmap | | jqxInput | 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 | 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 | 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 | 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 | 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 | Displays a list of selectable items. | jqxlistbox.js · modules/jqxlistbox.js | JqxListBox from jqwidgets-react-tsx/jqxlistbox | vue_jqxlistbox.vue | jqwidgets-ng/jqxlistbox | | jqxListMenu | 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 | Displays a built-in loading element. | jqxloader.js · modules/jqxloader.js | JqxLoader from jqwidgets-react-tsx/jqxloader | vue_jqxloader.vue | jqwidgets-ng/jqxloader | | jqxMaskedInput | 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 | 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 | 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 | 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 | 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 | Enables users to input numbers. | jqxnumberinput.js · modules/jqxnumberinput.js | JqxNumberInput from jqwidgets-react-tsx/jqxnumberinput | vue_jqxnumberinput.vue | jqwidgets-ng/jqxnumberinput | | jqxPanel | 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 | Enables users to input passwords. | jqxpasswordinput.js · modules/jqxpasswordinput.js | JqxPasswordInput from jqwidgets-react-tsx/jqxpasswordinput | vue_jqxpasswordinput.vue | jqwidgets-ng/jqxpasswordinput | | jqxPickList | 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 | Lets users design a PivotGrid interactively. | jqxpivotdesigner.js · modules/jqxpivotdesigner.js | JqxPivotDesigner from jqwidgets-react-tsx/jqxpivotdesigner | vue_jqxpivotdesigner.vue | jqwidgets-ng/jqxpivotdesigner | | jqxPivotGrid | 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 | 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 | 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 | 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 | 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 | 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 | Allows you to choose a rating. | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | Displays a switch button. | jqxswitchbutton.js · modules/jqxswitchbutton.js | JqxSwitchButton from jqwidgets-react-tsx/jqxswitchbutton | vue_jqxswitchbutton.vue | jqwidgets-ng/jqxswitchbutton | | jqxTabs | 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 | 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 | 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 | Displays a timeline of items. | jqxtimeline.js · modules/jqxtimeline.js | JqxTimeline from jqwidgets-react-tsx/jqxtimeline | vue_jqxtimeline.vue | jqwidgets-ng/jqxtimeline | | jqxTimePicker | 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 | 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 | 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 | 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 | 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 | 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 | 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 | Enables you to validate users input. | jqxvalidator.js · modules/jqxvalidator.js | JqxValidator from jqwidgets-react-tsx/jqxvalidator | vue_jqxvalidator.vue | jqwidgets-ng/jqxvalidator | | jqxWindow | 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 |

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 = '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.

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.

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 |

Working with an AI assistant

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.

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/
• 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 [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.