react-laravel-datatable
v0.1.10
Published
A simple but flexible react datatable library built to support Laravel's pagination out of the box.
Downloads
42
Maintainers
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
- First import package.
import Datatable from 'react-laravel-datatable';
- 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 🌚.
- 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 or send a mail to [email protected] .
TODOS
- Add styling ✅
- Search field ✅
- Bulk action
- Editable cell