PHPackages                             developerawam/livewire-datatable - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. developerawam/livewire-datatable

ActiveLibrary

developerawam/livewire-datatable
================================

Laravel Livewire DataTable adalah package open-source yang membantu kamu membangun tabel dinamis di Laravel tanpa ribet. Semua sudah terintegrasi dengan Livewire, sehingga kamu bisa mendapatkan fitur pencarian, filter, sorting, dan pagination out-of-the-box tanpa JavaScript tambahan.

2.0.3(3mo ago)55465↑28.6%9[1 issues](https://github.com/restu-lomboe/datatable-livewire/issues)MITBladePHP ^8.2CI failing

Since Aug 18Pushed 3mo ago2 watchersCompare

[ Source](https://github.com/restu-lomboe/datatable-livewire)[ Packagist](https://packagist.org/packages/developerawam/livewire-datatable)[ Docs](https://github.com/developerawam/livewire-datatable)[ RSS](/packages/developerawam-livewire-datatable/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (6)Dependencies (6)Versions (23)Used By (0)

Laravel Livewire DataTable
==========================

[](#laravel-livewire-datatable)

[![Latest Version on Packagist](https://camo.githubusercontent.com/36dc88d97bada5c7c2625ff1f3e31553e3aa812300f7998d366e9db2494e4581/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f646576656c6f7065726177616d2f6c697665776972652d646174617461626c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/developerawam/livewire-datatable)[![Total Downloads](https://camo.githubusercontent.com/bc38c788ff8e6f642df687a6a6495129ed6faac3ab871ee1915b3b55da536cfc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f646576656c6f7065726177616d2f6c697665776972652d646174617461626c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/developerawam/livewire-datatable)[![Donate on Saweria](https://camo.githubusercontent.com/c50bd9cc79fd0d6b6fa415a34a80b78909fecba23c24331bd06c602b0ac049b9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f6e6174652d536177657269612d6f72616e6765)](https://saweria.co/developerawam)

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

🎯 Quick Overview
----------------

[](#-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
-------------------

[](#-table-of-contents)

- [Features](#-features)
- [Requirements](#-requirements)
- [Installation](#-installation)
- [Quick Start](#-quick-start)
- [Basic Usage](#-basic-usage)
    - [Columns](#columns)
    - [Searching](#searching)
    - [Sorting](#sorting)
    - [Value Formatting](#value-formatting)
- [Advanced Features](#-advanced-features)
    - [Relationships](#relationships)
    - [Custom Query Scopes](#custom-query-scopes)
    - [Custom Cell Templates](#custom-cell-templates)
    - [Default Sort Configuration](#default-sort-configuration)
    - [Advanced Dynamic Filtering](#advanced-dynamic-filtering)
- [Exporting Data](#-exporting-data)
- [Customization](#-customization)
    - [Template System](#template-system)
    - [Theme Configuration](#theme-configuration)
    - [Dynamic CSS Classes](#dynamic-css-classes)
    - [Dark Mode Support](#dark-mode-support)
    - [Pagination Options](#pagination-options)
- [API Integration](#-api-integration)
- [Troubleshooting](#-troubleshooting)
- [Support](#-support)

✨ Features
----------

[](#-features)

FeatureDescription⚡ **Server-Side Rendering**Handle thousands of records efficiently🔍 **Smart Search**Live search with intelligent debouncing across multiple columns📊 **Column Sorting**Sort by any column, including relationship data🔤 **Advanced Filtering**Multi-column filtering with intuitive UI📄 **Pagination**Fully customizable pagination with per-page options📤 **Data Export**Export to Excel and PDF while respecting filters🎨 **Dynamic Styling**All CSS classes configurable from config file🌙 **Dark Mode**Automatic dark mode support with Tailwind📱 **Responsive Design**Mobile-friendly on all screen sizes🔗 **Relationships**Display and sort by related model data using dot notation🎯 **Custom Templates**Create custom cell content with Blade components🛠 **Event System**Built-in event handling for user interactions🔧 **Zero Config**Works out of the box with sensible defaults🎨 **Multi-Template Support**Tailwind CSS and Bootstrap 5+ templates built-in📋 **Row Numbering**Smart "no" column with consistent sequential numbering📋 Requirements
--------------

[](#-requirements)

- **PHP**: ^8.2
- **Laravel**: ^12.0
- **Livewire**: ^3.0
- **CSS Framework**: Tailwind CSS ^3.0+ OR Bootstrap 5+

### Browser Support

[](#browser-support)

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

📦 Installation
--------------

[](#-installation)

### 1. Install Package

[](#1-install-package)

```
composer require developerawam/livewire-datatable
```

### 2. Configure Your CSS Framework

[](#2-configure-your-css-framework)

#### For Tailwind CSS

[](#for-tailwind-css)

Add the package's views to your Tailwind configuration:

```
// tailwind.config.js
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./vendor/developerawam/livewire-datatable/resources/views/**/*.blade.php",
  ],
};
```

#### For Bootstrap 5+

[](#for-bootstrap-5)

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

### 3. (Optional) Publish Configuration

[](#3-optional-publish-configuration)

```
php artisan vendor:publish --tag="livewire-datatable-config"
```

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

### 4. (Optional) Set Template System

[](#4-optional-set-template-system)

Choose your CSS framework template in `.env`:

```
DATATABLE_TEMPLATE=tailwind    # Default
# or
DATATABLE_TEMPLATE=bootstrap
```.

## 🚀 Quick Start

Create a fully functional DataTable in under 2 minutes.

### 1. Create Livewire Component

```bash
php artisan make:livewire UsersTable
```

### 2. Setup Component

[](#2-setup-component)

```