fajarprayoga/react-laravel-datatable

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

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

1. First import package.

import Datatable  from  'react-laravel-datatable'; 

2. 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":"[email protected]",
                     "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 🌚.

3. Finally intialize the Datatable component.

    <Datatable url={dataSource} columns={columns} />

Advanced Options

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

Headers

The package accepts a headers prop. This can be used in situations where there is a need to modify request headers. Eg. setting Authorization token,Content type, etc.

const myToken = "ATOKENSTRINGHERE";

 const myHeaders =  {
      "Authorization" : `Bearer ${myToken}`,
      "Content-Type" : 'application/json',
  }


  <Datatable ... headers={myHeaders} />
  

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.

TODOS

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