{"id":17199,"library":"datatables.net-jqui","title":"DataTables jQuery UI Integration","description":"The `datatables.net-jqui` package provides an integration layer to style DataTables instances using the jQuery UI theming framework. It extends the core DataTables library, allowing developers to leverage existing jQuery UI themes for a consistent look and feel across their applications. The current stable version is 2.3.7, though a 3.0.0-beta.1 release indicates upcoming major changes. This package focuses solely on presentation and requires both the core `datatables.net` library and `jquery-ui` to function correctly. Its release cadence is generally tied to major DataTables and relevant jQuery UI updates. It differentiates itself by offering a specific, highly customizable theming option for DataTables users who are already invested in the jQuery UI ecosystem, ensuring visual harmony with other jQuery UI widgets.","status":"active","version":"2.3.7","language":"javascript","source_language":"en","source_url":"https://github.com/DataTables/Dist-DataTables-jQueryUI","tags":["javascript","jQuery UI","jQueryUI","Datatables","jQuery","table","filter","sort","typescript"],"install":[{"cmd":"npm install datatables.net-jqui","lang":"bash","label":"npm"},{"cmd":"yarn add datatables.net-jqui","lang":"bash","label":"yarn"},{"cmd":"pnpm add datatables.net-jqui","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required runtime dependency for both DataTables core and jQuery UI, which this package integrates. DataTables v2.x requires jQuery 1.8+, including 3.x and 4.x.","package":"jquery","optional":false},{"reason":"The core DataTables library that this package extends by providing jQuery UI specific styling.","package":"datatables.net","optional":false},{"reason":"The underlying styling framework and its JavaScript widgets are necessary for the integration to function and apply themes. Requires `jquery-ui` JavaScript and a chosen jQuery UI theme's CSS.","package":"jquery-ui","optional":false}],"imports":[{"note":"While CommonJS `require` works, ESM `import` is preferred for modern projects. Ensures jQuery is available for DataTables to attach to.","wrong":"const $ = require('jquery');","symbol":"$","correct":"import $ from 'jquery';"},{"note":"This package is a jQuery plugin that extends `$.fn.DataTable`. It does not export named symbols for its primary functionality. Importing it triggers the side effect of attaching its logic to jQuery.","wrong":"import { DataTable } from 'datatables.net-jqui';","symbol":"DataTables jQuery UI Plugin","correct":"import 'datatables.net-jqui';"},{"note":"Even though `datatables.net-jqui`'s README shows `import DataTable from 'datatables.net-jqui'; new DataTable(...)`, this is generally for DataTables v1.11+ which supports non-jQuery initialization. For jQuery UI integration, the plugin extends the jQuery object, making the `$(...).DataTable()` pattern the most common and robust for JQUI styling. Ensure core `datatables.net` is also imported.","wrong":"import DataTable from 'datatables.net-jqui'; new DataTable('#myTable');","symbol":"DataTable Initialization","correct":"import $ from 'jquery';\nimport 'datatables.net';\nimport 'datatables.net-jqui';\n\n$(document).ready(() => {\n $('#myTable').DataTable({\n // DataTables options specific to jQuery UI\n renderer: 'jqueryui'\n });\n});"}],"quickstart":{"code":"\n\n\n\n\n
\n \n
\n
Name
\n
Position
\n
Office
\n
Age
\n
Start date
\n
Salary
\n
\n \n \n
\n
Tiger Nixon
\n
System Architect
\n
Edinburgh
\n
61
\n
2011/04/25
\n
$320,800
\n
\n
\n
Garrett Winters
\n
Accountant
\n
Tokyo
\n
63
\n
2011/07/25
\n
$170,750
\n
\n \n
\n\n","lang":"javascript","description":"This quickstart demonstrates how to initialize a DataTables instance with jQuery UI styling, including necessary CSS and JavaScript imports via CDN, and a basic HTML table structure."},"warnings":[{"fix":"Refer to the DataTables 3 upgrade notes and `datatables.net-jqui` v3 documentation for specific changes, import paths, and initialization patterns. Be prepared for potential refactoring if migrating from DataTables v2.x.","message":"DataTables v3.0.0-beta.1 has been released, signifying a major overhaul to the core DataTables library. This new version removes jQuery as a direct dependency and shifts to a TypeScript-based, dependency-free architecture. While DataTables v3 can still operate with jQuery, extensions like `datatables.net-jqui` may have their own major version bumps and specific compatibility requirements with DataTables v3 and jQuery UI.","severity":"breaking","affected_versions":">=3.0.0-beta.1 (for core DataTables); check `datatables.net-jqui` v3 for specific changes."},{"fix":"Ensure both a jQuery UI theme stylesheet and the `dataTables.jqueryui.min.css` are linked in your HTML, preferably before your main application scripts. Example: ` `","message":"Proper styling requires the correct CSS files to be included: a jQuery UI theme CSS (e.g., `jquery-ui.min.css`), and the DataTables jQuery UI integration CSS (`dataTables.jqueryui.min.css`). Without these, the table will appear unstyled or with default DataTables styling.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always load scripts in this sequence: jQuery, jQuery UI (if needed), `datatables.net`, `datatables.net-jqui`. For example: ` `","message":"The load order of scripts is critical for jQuery plugins. jQuery must be loaded first, followed by jQuery UI's JavaScript (if using specific widgets or core components), then DataTables core, and finally `datatables.net-jqui`. Incorrect order can lead to `$(...).DataTable is not a function` or styling issues.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `jquery`, `datatables.net`, and `jquery-ui` are explicitly installed and match compatible versions. Check DataTables and jQuery UI documentation for their respective compatibility matrices. For npm: `npm install jquery datatables.net jquery-ui`.","message":"This package has peer dependencies (`jquery`, `datatables.net`, `jquery-ui`) that must be installed and properly configured alongside it. Failing to install them, or installing incompatible versions, will cause runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Verify that jQuery, `datatables.net`, and `datatables.net-jqui` scripts are included in the correct order in your HTML or module imports. Ensure jQuery is available globally or correctly imported as `$`.","cause":"jQuery, DataTables core, or `datatables.net-jqui` is not loaded, or loaded in the wrong order, preventing the `DataTable` method from being attached to the jQuery object.","error":"$(...).DataTable is not a function"},{"fix":"Ensure both `jquery-ui.min.css` (or your chosen theme CSS) and `dataTables.jqueryui.min.css` are linked in your HTML `` section, before your JavaScript.","cause":"Missing or incorrectly linked CSS files for either the jQuery UI theme or the `datatables.net-jqui` specific styling.","error":"Table appears unstyled or default DataTables styling is present."},{"fix":"Include the necessary individual jQuery UI widget scripts if you are using specific jQuery UI features beyond basic theming, e.g., `import 'jquery-ui/ui/widgets/button';`.","cause":"A specific jQuery UI widget's JavaScript file (e.g., `button`, `datepicker`) is required but has not been loaded. `datatables.net-jqui` styles DataTables using jQuery UI, but does not bundle all jQuery UI widgets.","error":"Uncaught TypeError: $(...).button is not a function"},{"fix":"Ensure `jquery` is loaded before any other scripts that depend on it. In a module environment, `import $ from 'jquery';` should be at the top of your relevant script file.","cause":"The jQuery library has not been loaded or is not accessible in the scope where DataTables is being initialized.","error":"Uncaught ReferenceError: jQuery is not defined"}],"ecosystem":"npm","meta_description":null}