react-laravel-datatable
Version:
A simple but flexible react datatable library built to support Laravel's pagination out of the box.
151 lines (113 loc) • 4.98 kB
Markdown
# 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.
```js
import Datatable from 'react-laravel-datatable';
```
2. Define expected column details. Details must be an array of objects with key(id,label);
```js
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.
```js
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 🌚.
3. Finally intialize the Datatable component.
```jsx
<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.
```js
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.
```js
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.
```js
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](https://github.com/mastys100/react-laravel-datatable/issues) or send a mail to mastys100@gmail.com .
## TODOS
- Add styling ✅
- Search field ✅
- Bulk action
- Editable cell