Registry / web-framework / laravel-datatables-vite

laravel-datatables-vite

library0.6.2jsnpmunverified

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.

web-framework

npm install laravel-datatables-vite

github ↗package ↗

INSTALL

IMPORT

SIG · LARAVEL-DATATABLES

laravel-datatables-vite

web-frameworkjavascriptv0.6.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default export

✓ import 'laravel-datatables-vite';

✗ import laravelDatatablesVite from 'laravel-datatables-vite';

The package is a side-effect import; no named exports. It automatically sets up DataTables, Buttons, Select, Editor globals on jQuery.

$().DataTable()

✓ $('#table').DataTable();

✗ $('#table').dataTable();

Since v0.6.2, use DataTable (capital D) as documented in DataTables 2. The old lowercase .dataTable() is deprecated.

DataTable

✓ import DataTable from 'datatables.net-bs5';

✗ import * as DataTable from 'datatables.net-bs5';

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.

Shows minimal setup: import the package in JS, add required CSS imports in SCSS, and initialize a server-side DataTable with Laravel route.

// resources/js/app.js import 'laravel-datatables-vite'; // resources/sass/app.scss @import "bootstrap-icons/font/bootstrap-icons.min.css"; @import "datatables.net-bs5/css/dataTables.bootstrap5.min.css"; @import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css"; @import "datatables.net-select-bs5/css/select.bootstrap5.min.css"; // Blade template <table id="users-table" class="table table-striped"> <thead> <tr><th>Name</th><th>Email</th></tr> </thead> </table> <script> $(function() { $('#users-table').DataTable({ processing: true, serverSide: true, ajax: '{{ route('users.index') }}', columns: [ { data: 'name' }, { data: 'email' } ] }); }); </script>

Debug

Known issues

breakingUpgrade to DataTables 2 in v0.6.0: Breaking changes include removed methods and changed API signatures.

fix

Refer to DataTables 2 migration guide: https://datatables.net/upgrade/2

affects: >=0.6.0

gotchaMust use DataTable() not dataTable() since v0.6.2. Using lowercase may fail silently or throw error.

fix

Use $('#table').DataTable() instead of $('#table').dataTable().

affects: >=0.6.2

deprecatedThe old require('laravel-datatables-vite') CommonJS pattern no longer works with Vite's ESM bundling.

fix

Use ES module syntax: import 'laravel-datatables-vite';

affects: >=0.5.0

gotchaEditor extension is optional but automatically initialized if installed. Missing editor packages cause runtime errors when using Editor features.

fix

Install 'datatables.net-editor-bs5' and import 'datatables.net-editor-bs5/js/editor.bootstrap5.min.js' if using Editor.

affects: >=0.4.0

breakingBootstrap 5 only; Bootstrap 4 is not supported. Using with Bootstrap 4 will break styling.

fix

Use Bootstrap 5 (bootstrap@5.x) and ensure correct CSS imports.

affects: >=0.4.0

gotchajQuery global ($) must be available before importing laravel-datatables-vite. Vite does not automatically expose jQuery as global.

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 = $;

affects: >=0.5.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'Modal')

Bootstrap's Modal component not imported or globalized before Editor initializes.

fix

Ensure Bootstrap JS is loaded globally before DataTables Editor: import 'bootstrap' earlier in app.js.

Editor is not defined

Editor npm package (datatables.net-editor-bs5) missing or not imported.

fix

npm install datatables.net-editor-bs5 --save-dev and add import 'datatables.net-editor-bs5/js/editor.bootstrap5.min.js' in app.js.

DataTable is not a function

Using older lowercase .dataTable() instead of .DataTable() after DataTables 2 upgrade.

fix

Change to $('#table').DataTable() (capital D) and ensure you have v0.6.2+.

Upgrade

Version history

0.6.2latest on npm

Audit

Dependencies

datatables.net-bs5requiredDataTables core with Bootstrap 5 styling

datatables.net-buttons-bs5requiredDataTables Buttons extension with Bootstrap 5 styling

datatables.net-select-bs5requiredDataTables Select extension with Bootstrap 5 styling

datatables.net-editor-bs5optionalDataTables Editor extension for inline editing

bootstrap-iconsrequiredIcon font used in DataTables buttons

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/yajra/laravel-datatables-vite ↗

packagehttps://www.npmjs.com/package/laravel-datatables-vite ↗