{"id":21513,"library":"laravel-datatables-vite","title":"Laravel DataTables Vite","description":"A frontend asset package for integrating Yajra's Laravel DataTables with Vite, jQuery, and Bootstrap 5. Current stable version 0.6.2, released June 2024. Automatically registers DataTables 2, Buttons, Select, and Editor plugins. Replaces the older laravel-datatables-vite version that relied on Mix/Webpack. Key differentiator: seamless Vite asset bundling for Laravel DataTables, removing manual CDN script management. Release cadence is irregular, with breaking changes in v0.6.0 requiring DataTables 2 upgrade.","status":"active","version":"0.6.2","language":"javascript","source_language":"en","source_url":"https://github.com/yajra/laravel-datatables-vite","tags":["javascript","yajra","laravel","dataTables","vitejs","bootstrap","jquery"],"install":[{"cmd":"npm install laravel-datatables-vite","lang":"bash","label":"npm"},{"cmd":"yarn add laravel-datatables-vite","lang":"bash","label":"yarn"},{"cmd":"pnpm add laravel-datatables-vite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"DataTables core with Bootstrap 5 styling","package":"datatables.net-bs5","optional":false},{"reason":"DataTables Buttons extension with Bootstrap 5 styling","package":"datatables.net-buttons-bs5","optional":false},{"reason":"DataTables Select extension with Bootstrap 5 styling","package":"datatables.net-select-bs5","optional":false},{"reason":"DataTables Editor extension for inline editing","package":"datatables.net-editor-bs5","optional":true},{"reason":"Icon font used in DataTables buttons","package":"bootstrap-icons","optional":false}],"imports":[{"note":"The package is a side-effect import; no named exports. It automatically sets up DataTables, Buttons, Select, Editor globals on jQuery.","wrong":"import laravelDatatablesVite from 'laravel-datatables-vite';","symbol":"default export","correct":"import 'laravel-datatables-vite';"},{"note":"Since v0.6.2, use DataTable (capital D) as documented in DataTables 2. The old lowercase .dataTable() is deprecated.","wrong":"$('#table').dataTable();","symbol":"$().DataTable()","correct":"$('#table').DataTable();"},{"note":"For direct access to the DataTable constructor (e.g., DataTable.defaults), import from 'datatables.net-bs5' directly. The laravel-datatables-vite imports set global defaults but do not export the constructor.","wrong":"import * as DataTable from 'datatables.net-bs5';","symbol":"DataTable","correct":"import DataTable from 'datatables.net-bs5';"}],"quickstart":{"code":"// resources/js/app.js\nimport 'laravel-datatables-vite';\n\n// resources/sass/app.scss\n@import \"bootstrap-icons/font/bootstrap-icons.min.css\";\n@import \"datatables.net-bs5/css/dataTables.bootstrap5.min.css\";\n@import \"datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css\";\n@import \"datatables.net-select-bs5/css/select.bootstrap5.min.css\";\n\n// Blade template\n<table id=\"users-table\" class=\"table table-striped\">\n    <thead>\n        <tr><th>Name</th><th>Email</th></tr>\n    </thead>\n</table>\n\n<script>\n$(function() {\n    $('#users-table').DataTable({\n        processing: true,\n        serverSide: true,\n        ajax: '{{ route('users.index') }}',\n        columns: [\n            { data: 'name' },\n            { data: 'email' }\n        ]\n    });\n});\n</script>","lang":"javascript","description":"Shows minimal setup: import the package in JS, add required CSS imports in SCSS, and initialize a server-side DataTable with Laravel route."},"warnings":[{"fix":"Refer to DataTables 2 migration guide: https://datatables.net/upgrade/2","message":"Upgrade to DataTables 2 in v0.6.0: Breaking changes include removed methods and changed API signatures.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"Use $('#table').DataTable() instead of $('#table').dataTable().","message":"Must use DataTable() not dataTable() since v0.6.2. Using lowercase may fail silently or throw error.","severity":"gotcha","affected_versions":">=0.6.2"},{"fix":"Use ES module syntax: import 'laravel-datatables-vite';","message":"The old require('laravel-datatables-vite') CommonJS pattern no longer works with Vite's ESM bundling.","severity":"deprecated","affected_versions":">=0.5.0"},{"fix":"Install 'datatables.net-editor-bs5' and import 'datatables.net-editor-bs5/js/editor.bootstrap5.min.js' if using Editor.","message":"Editor extension is optional but automatically initialized if installed. Missing editor packages cause runtime errors when using Editor features.","severity":"gotcha","affected_versions":">=0.4.0"},{"fix":"Use Bootstrap 5 (bootstrap@5.x) and ensure correct CSS imports.","message":"Bootstrap 5 only; Bootstrap 4 is not supported. Using with Bootstrap 4 will break styling.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Ensure jQuery is loaded globally (e.g., via CDN script or Vite config). Alternatively, import jQuery and attach to window: import $ from 'jquery'; window.$ = window.jQuery = $;","message":"jQuery global ($) must be available before importing laravel-datatables-vite. Vite does not automatically expose jQuery as global.","severity":"gotcha","affected_versions":">=0.5.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Ensure Bootstrap JS is loaded globally before DataTables Editor: import 'bootstrap' earlier in app.js.","cause":"Bootstrap's Modal component not imported or globalized before Editor initializes.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'Modal')"},{"fix":"npm install datatables.net-editor-bs5 --save-dev and add import 'datatables.net-editor-bs5/js/editor.bootstrap5.min.js' in app.js.","cause":"Editor npm package (datatables.net-editor-bs5) missing or not imported.","error":"Editor is not defined"},{"fix":"Change to $('#table').DataTable() (capital D) and ensure you have v0.6.2+.","cause":"Using older lowercase .dataTable() instead of .DataTable() after DataTables 2 upgrade.","error":"DataTable is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}