Laravel DataTable Solution with Tailwind & Bootstrap Support

If you're building a Laravel app and want a simple, fast, and modern DataTable, check out vanillajs-datatable. It’s built with pure JavaScript — no jQuery, no extra frameworks — and works great with Blade templates. Whether you're using Tailwind CSS, Bootstrap, or plain HTML, this lightweight plugin helps you add searchable, sortable, and exportable tables in just minutes. No complex setup. No frontend headaches.

Why Use vanillajs-datatable in Laravel?\

Laravel developers often struggle with:

• Performance-heavy DataTable packages
• Complicated integration with frontend frameworks
• Limited control over UI/UX

The vanillajs-datatable package solves all of this with:

• ✅ Zero dependencies – No jQuery
• ✅ Supports server-side data, inline editing, export built-in support, and many more
• ✅ Full styling support with Tailwind CSS ,Bootrsap and DaisyUI

Installation

First, install the package via npm:

npm install vanillajs-datatable

Import in your JavaScript resources/css/app.js.

import DataTable from "vanillajs-datatable";
window.DataTable = DataTable;

vanillajs-datatable’s HTML is generated dynamically via JavaScript, Tailwind won’t see those class names during build, and they get purged. Add the import in your resources/css/app.css:

@source '../../node_modules/vanillajs-datatable/dist/index.esm.js';

If you are using Tailwind CDN then it will work you dont need to add the import in your resources/css/app.css.

Blade Template Setup

Add the following code to your resources/views/users.blade.php template:

<div class="overflow-x-auto">
    <table id="userDatatable" class="min-w-full divide-y divide-gray-200">
		
        <!-- Table will be rendered by JavaScript -->
				
    </table>
</div>

Controller Implementation

Create an API endpoint with proper validation and filtering:

use Illuminate\Http\Request;
use Illuminate\Support\Str;
 
public function index(Request $request)
{
    $request->validate([
        'search' => 'nullable|string|max:500',
        'sortBy' => 'nullable|string|in:id,name,email,created_at',
        'order' => 'nullable|string|in:asc,desc',
        'perPage' => 'nullable|integer|min:5|max:100',
    ]);
 
    $query = User::query();
 
    // Search functionality
    if ($searchTerm = $request->input('search')) {
        $query->where(function ($q) use ($searchTerm) {
            $q->where('name', 'like', "%{$searchTerm}%")
                ->orWhere('email', 'like', "%{$searchTerm}%");
        });
    }
 
    // Sorting
    $sortBy = $request->input('sortBy', 'id');
    $order = $request->input('order', 'desc');
    $query->orderBy($sortBy, $order);
 
    $perPage = $request->input('perPage', 10);
    $paginated = $query->paginate($perPage);
 
    return response()->json([
        'users' => $paginated->items(),
        'total' => $paginated->total(),
        'current_page' => $paginated->currentPage(),
        'last_page' => $paginated->lastPage(),
    ]);
}

JavaScript Initialization

Initialize the datatable with proper configuration:

document.addEventListener("DOMContentLoaded", () => {
  const table = new DataTable({
    tableId: "userdatatable",
    url: "/api/users",
    dataSrc: "users",
    columns: [
      { name: "id", label: "ID" },
      { name: "name", label: "Name", highlightable: true },
      { name: "email", label: "Email" },
      {
        name: "created_at",
        label: "Created",
        render: (val) => new Date(val).toLocaleDateString(),
      },
    ],
  });
});

Key Features of vanillajs-datatable

• ✅ No dependencies – works without jQuery or any heavy libraries
• ✅ Modern UI – supports Tailwind CSS, DaisyUI, and Bootstrap out of the box
• ✅ Smart search – global and column-wise filtering with match highlighting
• ✅ Sortable columns – sort any column on the client side
• ✅ Column grouping – group related fields under a single header (e.g., "Personal")
• ✅ Custom renderers – render rich HTML or logic-driven content in cells using JavaScript
• ✅ Responsive pagination – includes per-page selector and responsive behavior
• ✅ Export options – export to CSV, Excel, PDF, or Print
• ✅ Custom export settings – control title, filename, chunk size, orientation, watermark, etc.
• ✅ Infinite scroll – optional feature to load more records as you scroll
• ✅ Range filtering – filter by min/max for numbers or dates (e.g., age, created_at)
• ✅ Selection support – single or multiple row selection with class toggling
• ✅ Loading state control – use custom loading spinners or delays
• ✅ Keyboard navigation – navigate between rows with arrow keys
• ✅ Toggle column visibility – easily hide/show columns via config
• ✅ Custom themes – override any class via the theme config
• ✅ Save state (optional) – persist filters, search, and pagination in memory
• ✅ Tiny footprint – only ~18 kB Gzipped, fast to load and CDN-friendly
• ✅ Inline editing – edit any cell client-side, no page reload needed

📘 Visit full documentation: Docs

Output