Data Tables Components

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.

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.

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

Only the visible window is in the DOM. Scrolling near the end calls a renderless loadMore. Swap the generated customers for an Eloquent query.

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.

SortableJS moves the card, then moveCard writes the column and index. Point that method at your own models when you leave the demo data behind.