Download the PHP package developerawam/livewire-datatable without Composer

Laravel Livewire DataTable

A powerful and flexible DataTable component for Laravel Livewire that transforms your data into beautiful, interactive tables with zero configuration required.

🎯 Quick Overview

• Zero Configuration: Works out of the box with just your Eloquent model
• Server-Side Rendering: Handles thousands of records efficiently
• Feature-Rich: Search, sort, filter, paginate, and export with ease
• Fully Customizable: Configure every aspect via config or per-component
• Production Ready: Built for real-world applications with proper error handling

📚 Table of Contents

• Features
• Requirements
• Installation
• Quick Start
• Basic Usage
  • Columns
  • Searching
  • Sorting
  • Value Formatting
• Advanced Features
  • Relationships
  • Custom Query Scopes
  • Custom Cell Templates
  • Default Sort Configuration
  • Advanced Dynamic Filtering
• Exporting Data
• Customization
  • Template System
  • Theme Configuration
  • Dynamic CSS Classes
  • Dark Mode Support
  • Pagination Options
• API Integration
• Troubleshooting
• Support

✨ Features

📋 Requirements

• PHP: ^8.2
• Laravel: ^12.0 || ^13.0
• Livewire: ^4.0
• CSS Framework: Tailwind CSS ^3.0+ OR Bootstrap 5+

Browser Support

All modern browsers (Chrome, Firefox, Safari, Edge)

📦 Installation

1. Install Package

2. Configure Your CSS Framework

For Tailwind CSS

For Tailwind CSS v3:

Add the package's views to your Tailwind configuration:

For Tailwind CSS v4+:

Use the @source directive in your resources/css/app.css:

This allows Tailwind CSS v4+ to automatically scan and generate styles for the datatable components.

For Bootstrap 5+

No additional configuration needed! Bootstrap is automatically detected and used.

3. (Optional) Publish Configuration

This allows you to customize default settings in config/livewire-datatable.php

4. (Optional) Set Template System

Choose your CSS framework template in .env:

🚀 Quick Start

Create a fully functional DataTable in under 2 minutes.

1. Create Livewire Component

`

2. Setup Component

3. Create View

4. Use in Blade

Done! You now have a fully functional DataTable with search, sorting, and pagination.

📖 Basic Usage

Columns

Define what data to display and how to label it:

Searching

Make columns searchable:

Sorting

Control which columns can be sorted:

Value Formatting

Format column values automatically using formatters.

Simple Formatters

Use simple string formatters for common formats:

Advanced Formatters

For complex formatting, use array syntax:

Available Formatters

� Advanced Features

Relationships

Display and sort data from related models using dot notation.

1. Setup Model with Relationships

2. Use Dot Notation in Columns

DataTable automatically handles relationships and makes them sortable!

Custom Query Scopes

Apply filters and constraints using Eloquent query scopes.

1. Define Scope on Model

2. Apply Scope to DataTable

3. Apply Scope with Parameters

Custom Cell Templates

Create rich, interactive cell content with custom Blade templates.

1. Define Custom Columns

2. Create Custom Templates

Status Badge (resources/views/components/table/status-badge.blade.php):

Action Buttons (resources/views/components/table/user-actions.blade.php):

3. Handle Events in Component

Available Variables in Custom Templates:

• $item - Current model instance
• $value - Current column value

Refresh Table After Actions:

Default Sort Configuration

Customize the default sort field and direction.

Works with relationships using dot notation:

Advanced Dynamic Filtering

Filter data across multiple columns with an intuitive interface.

Enable/Disable Filtering

How It Works

Users can:

• Click "Filter.." to add filter conditions
• Select columns to filter by
• Enter filter values
• Add multiple conditions (AND logic)
• Reset all filters at once

Customization

All filter elements have configurable CSS classes:

Row Numbering ("no" Column)

The "no" column provides sequential row numbering that works intelligently with sorting and pagination.

Behavior

• Sequential numbering: Always displays 1, 2, 3... regardless of sort order
• Pagination-aware: Continues numbering across pages (page 2 shows 11, 12, 13...)
• Sort-independent: Doesn't reverse or change based on sort direction
• Consistent: Maintains the same numbering regardless of active filters or searches

Example

Even when sorting by different columns, the "no" column always displays sequential numbering.

🌐 API Integration

The DataTable supports both Eloquent models and API endpoints for flexibility.

Setup API DataTable

API View

Required Response Format

Your API must return:

API Query Parameters

DataTable sends these parameters:

Custom API Configuration

📤 Exporting Data

Export your DataTable data to Excel and PDF formats.

Export Features

• Export to Excel (.xlsx) and PDF
• Exports all records (respects pagination)
• Respects active search filters
• Maintains data formatting (dates, currency, etc.)
• Automatically excludes action columns
• Responsive UI with dark mode support

Configuration

How to Use

1. Click the "Export" dropdown in the controls
2. Select "Export Excel" or "Export PDF"
3. File downloads automatically

Example with Custom Options

🎨 Customization

Template System

The DataTable supports multiple CSS frameworks. Switch between them easily:

Available Templates

• tailwind - Tailwind CSS (default)
• bootstrap - Bootstrap 5+

Switch Template

Set in config/livewire-datatable.php:

Or in .env:

Bootstrap Pagination

If you're using Bootstrap CSS framework instead of Tailwind CSS, you can configure Livewire to use Bootstrap pagination styles. See the Livewire Bootstrap Pagination Documentation for detailed setup instructions.

Bootstrap Configuration

Theme Configuration

Customize the default appearance via config/livewire-datatable.php.

Quick Example

Per-Column Styling

Style specific columns using column keys:

Dynamic CSS Classes

Every element in the DataTable is fully configurable via CSS classes. All elements have data-class attributes for easy debugging.

Component-Level Overrides

Override theme for specific tables:

Use in view:

Dark Mode Support

Automatic dark mode support with Tailwind CSS. Simply add the dark class to your HTML element:

Or use dynamic switching:

Debugging Style Issues

Each element has a data-class attribute showing which config key controls it. Inspect in browser to find the right configuration option.

Pagination Options

Customize pagination behavior and options.

Per-Page Options

Configure available per-page choices:

The 'all' option allows users to display all records at once.

Default Per Page

Or let users choose with the per-page selector in the UI.

📝 Complete Example

Here's a comprehensive example with multiple features: 'export_dropdown_arrow' => '-mr-1 ml-2 h-5 w-5', 'export_button' => 'px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800',

    // Table structure
    'table_wrapper' => 'overflow-x-auto border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow',
    'table' => 'min-w-full divide-y divide-gray-200 dark:divide-gray-700',

    // Table headers
    'thead' => '',
    'thead_row' => '',
    'th' => 'px-6 py-3 bg-gray-50 dark:bg-gray-700/50 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider',
    'th_sort_button' => 'group inline-flex items-center gap-x-2 hover:text-gray-700 dark:hover:text-gray-200',
    'th_sort_icon_wrapper' => 'inline-flex rounded p-1 transition',
    'th_sort_icon_active' => 'size-4 text-blue-500',
    'th_sort_icon_inactive' => 'size-4 text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200',
    'th_text' => 'text-gray-700 dark:text-gray-200 capitalize',

    // Table body
    'tbody' => 'divide-y divide-gray-200 dark:divide-gray-700',
    'tr' => 'hover:bg-gray-50 dark:hover:bg-gray-700/25 transition',
    'td' => 'px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-200',

    // Empty state
    'empty_wrapper' => 'px-6 py-8 text-center',
    'empty_content' => 'flex flex-col items-center justify-center',
    'empty_icon' => 'size-16 text-gray-400 dark:text-gray-500 mb-2',
    'empty_text' => 'text-gray-500 dark:text-gray-400 text-sm font-medium',

    // Pagination
    'pagination_wrapper' => 'p-4',

    // Column-specific styling (optional)
    // 'td_id' => 'font-mono text-gray-500 text-xs',
    // 'td_email' => 'font-medium text-blue-600',
    // 'td_status' => 'text-center font-semibold',
    // 'td_actions' => 'text-right space-x-2',
]

];

## 📝 Complete Example

Here's a comprehensive example with multiple features:

`

## ✅ API Reference

Quick reference of all available parameters:

| Parameter              | Type   | Description              |
| ---------------------- | ------ | ------------------------ |
| `model`                | string | Eloquent model class     |
| `columns`              | array  | Field names and labels   |
| `searchable`           | array  | Searchable field names   |
| `unsortable`           | array  | Non-sortable field names |
| `customColumns`        | array  | Custom template paths    |
| `formatters`           | array  | Value formatters         |
| `scope`                | string | Query scope name         |
| `scopeParams`          | array  | Query scope parameters   |
| `defaultSortField`     | string | Initial sort field       |
| `defaultSortDirection` | string | 'asc' or 'desc'          |
| `theme`                | array  | CSS class overrides      |
| `apiConfig`            | array  | API configuration        |

## ❓ Troubleshooting

### Common Issues

**Search not working on relationships**

Ensure the relationship is eager loaded in your model using `$with`:

**Custom columns not displaying**

- Verify the view file exists at the specified path
- Check that the view receives `$item` and `$value` variables

**Styles not applying**

- Verify Tailwind CSS is properly configured
- Check that package views are in `tailwind.config.js` content array

**Export not working**

- Verify export is enabled in config
- Check that required packages are installed

### Getting Help

1. Check [GitHub issues](https://github.com/developerawam/livewire-datatable/issues)
2. Review the examples in this documentation
3. Inspect browser console for errors

## 💝 Support

If this package has helped your project, consider supporting its continued development:

[![Donate on Saweria](https://img.shields.io/badge/Donate-Saweria-orange)](https://saweria.co/developerawam)

## 🔒 Security

Please report security vulnerabilities to [email protected] instead of using the public issue tracker.

## 👥 Credits

- [Developer Awam](https://github.com/developerawam) - Package Author
- [Restu](https://github.com/restu-lomboe) - Lead Developer

## 📄 License

Licensed under the MIT License - see [LICENSE.md](LICENSE.md) for details.

---

**Ready to build amazing DataTables?** [Get started now](#-quick-start) and transform your Laravel applications with beautiful, interactive tables!