langleyfoxall/react-dynamic-data-table-laravel-api

Provides a Laravel API endpoint responder for the `react-dynamic-data-table` component.

v5.4.0 2024-07-01 08:24 UTC

Requires

• php: ^7.2||^8.0
• langleyfoxall/helpers-laravel: ^2.0 || ^3.0
• laravel/framework: ^5.1||^6.0||^7.0||^8.0||^9.0||^10.0||^11.0

LGPL-3.0-only

README

This package provides a Laravel API endpoint responder for the React Dynamic Data Table component.

Installation

composer require langleyfoxall/react-dynamic-data-table-laravel-api

Usage

First, create a new route in your API routes file for the data table response, and point it to a controller.

In this controller method, create a new DataTableResponder passing it the model you wish to return data about, and the provided instance of the Request object. You can optionally specify changes to the query (such as sorting, or filtering) using the query method. If you want to alter the data before it gets returned in some way, such as changing attribute values or appending custom attributes, you can take advantage of collectionManipulator. You can also change number of records shown per page with the setPerPage method.

See the example usage below.

use App\User;
use Illuminate\Http\Request;
use LangleyFoxall\ReactDynamicDataTableLaravelApi\DataTableResponder;

class UsersController extends Controller
{
    public function dataTable(Request $request)
    {
        return (new DataTableResponder(User::class, $request))
            ->query(function($query) {                                   // Optional, default: none
                $query->where('name', 'like', 'B%');
            })
            ->collectionManipulator(function (Collection $collection) {  // Optional, default: none
                $collection->map(function($user) {
                    $user->name = title_case($user->name);
                });
            })
            ->setPerPage(10)                                             // Optional, default: 15
            ->respond();
    }
}

In your frontend code, you can now use the React Dynamic Data Table package's AjaxDynamicDataTable component to display a table of this data. The API route previously defined should be passed to this component as the apiUrl prop.

An example usage is shown below.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import AjaxDynamicDataTable from "@langleyfoxall/react-dynamic-data-table/dist/AjaxDynamicDataTable";

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <AjaxDynamicDataTable apiUrl={'/api/users/data-table'}/>
            </div>
        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

Without a model

Sometimes you need to create a table of data for which there is no model (and the data is some kind of aggregation, so a model would not be appropriate).

use App\User;
use Illuminate\Http\Request;
use LangleyFoxall\ReactDynamicDataTableLaravelApi\DataTableResponder;

class UsersController extends Controller
{
    public function dataTable(Request $request)
    {
        return (new DataTableResponder(DB::table('users')->select(['id', 'name']), $request))
            ->query(function($query) {                                   // Optional, default: none
                $query->where('name', 'like', 'B%');
            })
            ->collectionManipulator(function (Collection $collection) {  // Optional, default: none
                $collection->map(function($user) {
                    $user->name = title_case($user->name);
                });
            })
            ->setPerPage(10)                                             // Optional, default: 15
            ->respond();
    }
}