Description:

By using ReactDatatable React component, you will be able to create a data table that will be multi-functional just like jQuery Data-table plugin and you can customize it as per your requirement, the best this is,this is Bootstrap compatible.

Basic Features:

It’s lightweight
It’s fully customizable (JSX, templates, state, styles, callbacks)
Supports client-side & Server Side Pagination
Multi-sort options available
Filters are available
Need Minimal design
Fully controllable via optional props and callbacks

How can I use it?

You can install ReactDatatable React component with npm.

npm i @ashvin27/react-datatable

Import required components and make data table.

import React, { Component, Fragment } from ‘react’;
import { render} from ‘react-dom’;
import ReactDatatable from ‘@ashvin27/react-datatable’;

class App extends Component {
constructor(props) {
super(props);
this.columns = [
{
key: “name”,
text: “Name”,
className: “name”,
align: “left”,
sortable: true,
},
{
key: “address”,
text: “Address”,
className: “address”,
align: “left”,
sortable: true
},
{
key: “postcode”,
text: “Postcode”,
className: “postcode”,
sortable: true
},
{
key: “rating”,
text: “Rating”,
className: “rating”,
align: “left”,
sortable: true
},
{
key: “type_of_food”,
text: “Type of Food”,
className: “type_of_food”,
sortable: true,
align: “left”
},
{
key: “action”,
text: “Action”,
className: “action”,
width: 100,
align: “left”,
sortable: false,
cell: record => {
return (
<Fragment>
<button
className=”btn btn-primary btn-sm”
onClick={() => this.editRecord(record)}
style={{marginRight: ‘5px’}}>
<i className=”fa fa-edit”></i>
</button>
<button
className=”btn btn-danger btn-sm”
onClick={() => this.deleteRecord(record)}>
<i className=”fa fa-trash”></i>
</button>
</Fragment>
);
}
}
];
this.config = {
page_size: 10,
length_menu: [ 10, 20, 50 ],
button: {
excel: true,
print: true,
extra: true,
}
}

this.state = {
records: [
{
“id”: “55f14312c7447c3da7051b26”,
“address”: “228 City Road”,
“name”: “.CN Chinese”,
“postcode”: “3JH”,
“rating”: 5,
“type_of_food”: “Chinese”
},
{
“id”: “55f14312c7447c3da7051b27”,
“address”: “376 Rayleigh Road”,
“name”: “@ Thai”,
“postcode”: “5PT”,
“rating”: 5.5,
“type_of_food”: “Thai”
},
{
“id”: “55f14312c7447c3da7051b28”,
“address”: “30 Greyhound Road Hammersmith”,
“name”: “@ Thai Restaurant”,
“postcode”: “8NX”,
“rating”: 4.5,
“type_of_food”: “Thai”
},
{
“id”: “55f14312c7447c3da7051b29”,
“address”: “30 Greyhound Road Hammersmith”,
“name”: “@ Thai Restaurant”,
“postcode”: “8NX”,
“rating”: 4.5,
“type_of_food”: “Thai”
}
]
}
this.extraButtons =[
{
className:”btn btn-primary buttons-pdf”,
title:”Export TEst”,
children:[
<span>
<i className=”glyphicon glyphicon-print fa fa-print” aria-hidden=”true”></i>
</span>
],
onClick:(event)=>{
console.log(event);
},
},
{
className:”btn btn-primary buttons-pdf”,
title:”Export TEst”,
children:[
<span>
<i className=”glyphicon glyphicon-print fa fa-print” aria-hidden=”true”></i>
</span>
],
onClick:(event)=>{
console.log(event);
},
onDoubleClick:(event)=>{
console.log(“doubleClick”)
}
},
]
}

editRecord(record) {
console.log(“Edit Record”, record);
}

deleteRecord(record) {
console.log(“Delete Record”, record);
}

render() {
return (
<div>
<ReactDatatable
config={this.config}
records={this.state.records}
columns={this.columns}
extraButtons={this.extraButtons}
/>
</div>
)
}
}

render(<App />, document.getElementById(“app”));

And, you are done.

The post Fully Customizable Data Table For React With Great Features appeared first on Lipku.com.