Data Tables Components

Livewire Datatable with Filter and Sort Options

Filter and Sort table results using laravel livewire

Tech Stack: Bootstrap 5, Livewire

Datatables with Search and Filters

You can filter the data by searching for name/price/description, also use sorting and pagination.
Title Description Price
Amazon Basics In-Ear 10.99
Apple Airpods 79.99
Apple Airpods Pro 249
Beats Earbuds 35.63
Beats Solo3 170.49
Bose SoundSport 99
Cowin E7 59.99
Cowin E7 59.99
Cowin E7 59.99
Noot Kids K11 14.99

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Overview

This guide will walk you through the steps to implement a dynamic datatable component in Laravel using Livewire. This datatable component features server-side sorting, searching, and pagination. It is built to interact with a dummy product model, but can be easily adapted to suit your needs.

Implementation

Firstly, you need to place files in their correct directories according to the default Laravel/Livewire directory structure:

  • Copy the component file to your app/Livewire directory. Rename the file to DataTableComponent.php.
  • Copy the blade view to your resources/views/livewire directory. Rename the file to datatable-component.blade.php.

Integration

Once the files are placed in their respective directories, you can use the datatable component in your Laravel project. Simply include the Livewire component in any of your Blade views using the @livewire('datatable-component') directive.

Usage

Here is a basic usage example:


// In any blade view
@livewire('datatable-component')

The datatable component will be rendered in the place of the directive. It includes a search field for each column and pagination links at the bottom. The user can click the column headers to sort the data.

Configuration & Customization

The datatable component can be customized to fit your needs. Here are some of the configuration options:

  • $orderByColumn and $order: Define the default column to sort by and the sorting order.
  • $paginate: Set the number of items to display per page.
  • $searchColumns: Define the columns that are searchable.

You can also customize the Blade view to change the appearance of the datatable or add more features, like filters or buttons.

Livewire ToDo List with in-place edit and delete

Add, edit, delete tasks feature along with ability to mark task complete.

Tech Stack: Bootstrap 5, Livewire

Awesome ToDo List
  • Dolor suscipit est sunt qui.
  • Nesciunt dolorem autem laboriosam velit id totam consequatur praesentium.
  • Sapiente qui incidunt explicabo in ut.
  • Cumque unde similique aut voluptatem.
  • Adipisci porro ullam doloremque aperiam est totam quibusdam.

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Overview

This component enables a ToDo list functionality in your Laravel application. It allows users to add, edit, and delete tasks. Each task can be marked as complete or incomplete. The tasks are displayed in the order they were created, with the most recent tasks displayed first.

Implementation

Follow these steps to implement the ToDo list component in your Laravel project:

1. Copy the ToDoList.php file to your app/Livewire directory.

2. Copy the to-do-list.blade.php file to your resources/views/livewire directory.

Integration

To integrate the ToDo list component into your Laravel project, you need to reference it in your blade file where you want to display the component.

@livewire('to-do-list')

Usage

Once the component is integrated into your Laravel application, users can interact with it by adding new tasks, marking tasks as complete or incomplete, editing existing tasks, and deleting tasks.

Configuration and Customization

For customization, you can modify the ToDoList.php file and the to-do-list.blade.php file. You can alter the way tasks are displayed, the order in which they appear, and the fields that are required for a task. Be aware that any modifications could affect the functionality of the component, so proceed with caution and test thoroughly after making changes.

Sortable Table Component using Laravel Livewire

Sortable Table Component using Laravel Livewire

Tech Stack: Tailwind CSS, Livewire

Drag Task Created Current Order
Dolor suscipit est sunt qui.
Mar 21, 2025
0
Nesciunt dolorem autem laboriosam velit id totam consequatur praesentium.
Mar 21, 2025
0
Sapiente qui incidunt explicabo in ut.
Mar 21, 2025
0
Cumque unde similique aut voluptatem.
Mar 21, 2025
0
Adipisci porro ullam doloremque aperiam est totam quibusdam.
Mar 21, 2025
0

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted

Overview

The SortableTaskTable component is a Laravel Livewire implementation that enables drag-and-drop reordering of table rows. It uses SortableJS for smooth drag-and-drop functionality and maintains the order state in the database. The component provides real-time visual feedback of the current sort order.

Implementation Instructions

1. First, add the SortableJS script to your layout file:
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
Copy the component files to their respective directories:
app/Livewire/SortableTaskTable.php
resources/views/livewire/sortable-task-table.blade.php
Run the migration to add the sort_order column:
php artisan migrate

Integration

To use the SortableTaskTable component in your blade views, add the following directive:

@livewire('sortable-task-table')

Features

  • Drag-and-drop reordering of table rows
  • Real-time order updates
  • Visual feedback during dragging
  • Automatic order persistence in database
  • Display of current sort order

Event Handling

The component listens for the following events:

// Triggered when items are reordered
Livewire.dispatch('tasks-sorted', { orderedIds: items })

Customization

The component can be customized in several ways:

Modify the drag handle appearance:
// In sortable-task-table.blade.php
<div class="handle tw-cursor-move tw-text-gray-400 hover:tw-text-gray-600">
// Your custom handle icon
</div>
Customize the SortableJS options:
new Sortable(this.$el, {
animation: 150,
handle: '.handle',
ghostClass: 'tw-opacity-50',
dragClass: 'tw-bg-gray-50',
// Add your custom options here
})
Modify the sort order display:
<span class="tw-inline-flex tw-items-center tw-justify-center tw-h-8 tw-w-8 tw-rounded-full tw-bg-gray-100 tw-text-gray-800 tw-font-medium">
{{ $task['sort_order'] }}
</span>

Important Notes

  • The component requires SortableJS to be loaded before it can function
  • All Tailwind classes are prefixed with 'tw-' for compatibility
  • The component assumes the existence of a 'sort_order' column in your table
  • The component automatically handles order updates when items are dragged

Livewire export Table Data to PDF, CSV, XML

export data to pdf, xls or csv without page refresh

Tech Stack: Tailwind CSS, Livewire

Livewire Export Data Demo (Export to CSV, PDF, XLS)

Tasks List

Name Slug
Dolor suscipit est sunt qui.
Nesciunt dolorem autem laboriosam velit id totam consequatur praesentium.
Sapiente qui incidunt explicabo in ut.
Cumque unde similique aut voluptatem.
Adipisci porro ullam doloremque aperiam est totam quibusdam.

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Overview

This component provides a dynamic data table with export functionality. Its key features include fetching tasks data from a database, displaying them in a table format, and enabling the user to select multiple rows and export them to CSV, XLS, or PDF formats.

Installation

Follow these steps to implement the component:
  • Copy the component file ExportableDataTableComponent.php to your app/Livewire directory.
  • Copy the blade view file exportable-data-table-component.blade.php to your resources/views/livewire directory.

Integration

After placing the files in the correct directories, use the Livewire component in any blade file by adding the following line:

@livewire('exportable-data-table-component')

Usage

The data table will automatically load the tasks from the DummyTask model and display them in a table. You can select multiple rows and click on the corresponding button to export the selected rows to CSV, XLS, or PDF.

Configuration and Customization

You can customize the behaviour of the data table by modifying the ExportableDataTableComponent component in the app/Livewire directory. For instance, you can change the model from which the data are fetched, the columns displayed in the table, or the export formats available.

You can also modify the look and feel of the data table by editing the exportable-data-table-component.blade.php view in the resources/views/livewire directory.