Laravel DataTables Vite

0.6.2 verified Mon Apr 27 auth: no javascript

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.

Common errors

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

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

error Editor is not defined ↓

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

error DataTable is not a function ↓

cause 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+.

Warnings

breaking Upgrade 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

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

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

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

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

gotcha Editor 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.

breaking Bootstrap 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.

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

Install

npm install laravel-datatables-vite

yarn add laravel-datatables-vite

pnpm add laravel-datatables-vite

Imports

default export
wrong
```
import laravelDatatablesVite from 'laravel-datatables-vite';
```
correct
```
import '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()
wrong
```
$('#table').dataTable();
```
correct
```
$('#table').DataTable();
```
Since v0.6.2, use DataTable (capital D) as documented in DataTables 2. The old lowercase .dataTable() is deprecated.
DataTable
wrong
```
import * as DataTable from 'datatables.net-bs5';
```
correct
```
import 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.

Quickstart

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>