react-laravel-datatable

A simple but flexible react datatable library built to support Laravel's pagination out of the box.

Usage no npm install needed!

<script type="module">
  import reactLaravelDatatable from 'https://cdn.skypack.dev/react-laravel-datatable';
</script>

README

react-laravel-datatable

A simple yet flexible react datatable library built to support laravel's pagination out of the box.

Heads Up: This library is still fragile and infant so do yourself a favor an handle it with care 🤓🤗. Do not forget to log your issues so I can follow up on them 👨🏿‍🏫.

Installation

npm i react-laravel-datatable

Usage

Link for a video tutorial

  1. First import package.
import Datatable  from  'react-laravel-datatable'; 
  1. Define expected column details. Details must be an array of objects with key(id,label);
    const columns =[
        {
            id: "user_id", //This is the key from your data source. (Required)
            label : "ID", //Label for column title. (Required)
        },
        {
            id: "user_name", 
            label : "Name", 
        },
        {
            id: "user_email", 
            label : "Email", 
        }
    ]

  • Define your data source. Please note that your data source endpoint should be an http GET method which returns laravel pagination object as a response.
    const dataSource = "htts://test.com/users" ;

    /*
    A typical laravel pagination object will return the following.;
     {
         "data":{
             "current_page":1,
             "data":[
                 {
                     "id":33,
                     "name":"Andrew Chamamme",
                     "email":"andrew@mail.com",
                     "created_at":"2019-05-29 10:42:24"
                 }
                 ],
            "first_page_url":"http://localhost:8000/api?page=1",
            "from":1,
            "last_page":2,
            "last_page_url":"http://localhost:8000/api?page=2",
            "next_page_url":"http://localhost:8000/api?page=2",
            "path":"http://localhost:8000/api","per_page":15,
            "prev_page_url":null,
            "to":15,
            "total":28
            }
         } 
      
     */

Though the package is tailored to laravel's pagination, you can still use with other frameworks or vanilla code provided your data source endpoint returns a response just as it is above 🌚.

  1. Finally intialize the Datatable component.
    <Datatable url={dataSource} columns={columns} />

Advanced Options

This package gives you the flexibility to define your own callback functions on each cell as well as define you own action components or buttons.

Filter & Sort

The component already sends a couple of parameters in the query string when making request to the api endpoint. You can leverage on them to filter and sort results from the server side. A typical query string from this component will be ?term=&page=1&column=&order=asc&per_page=5 .

Param Description Example
term The search term entered in the search field hello world
page Current page number 1
column Column for sorting user_name
order Sorting order asc / desc
per_page Number of records per page 5

Action Buttons/Components

Action buttons or UI components can be added by indicating an ` actions ` prop in the `Datatable`. This prop  takes a function and your functnion can contain any valid react code but in this case its preferred to use it for button actions 👨🏿‍🏫 . At the point of when this function is being called, the current row object in injected into it.

    const  actions = (rowItem)=>{
            //Below is just an example. You can decide to do whatever you want here.🤓
           return ( <a  href={`/user/${rowItem.id}`}> Views </a>)
    }

    <Datatable ... actions={actions} />

Onclick Event on cells

Maybe you want to add an onClick event to records in a specific column (cell). You can easily do that by indicating an onClick property in the columns defination.

    const columns =[
        {
            id: "user_id",
            label : "ID", 
            onClick: (rowItem) => { 
                    //This is just an example. You can decide to do whatever you want here.🤓
                    console.log(`User ${rowItem.id} has been clicked `); 
                    }
        }
        ...
    ];

CONTRIBUTIONS

All contributions and pull requests are welcome. Incase of any issue or suggestions please dont hesitate to log it on github or send a mail to mastys100@gmail.com .

TODOS

  • Add styling ✅
  • Search field ✅
  • Bulk action
  • Editable cell