https://github.com/ashvin27/react-datatable
React-datatable is a component which provide ability to create multifunctional table using single component like jQuery Datatable. It's fully customizable and easy to integrate in any react component. Bootstrap compatible.
https://github.com/ashvin27/react-datatable
data datatables datatables-plugin react react-data-table react-datagrid react-datatable react-table table
Last synced: 12 days ago
JSON representation
React-datatable is a component which provide ability to create multifunctional table using single component like jQuery Datatable. It's fully customizable and easy to integrate in any react component. Bootstrap compatible.
- Host: GitHub
- URL: https://github.com/ashvin27/react-datatable
- Owner: ashvin27
- License: mit
- Created: 2018-12-14T10:11:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-23T07:17:18.000Z (about 1 month ago)
- Last Synced: 2025-04-23T08:25:28.645Z (about 1 month ago)
- Topics: data, datatables, datatables-plugin, react, react-data-table, react-datagrid, react-datatable, react-table, table
- Language: JavaScript
- Homepage:
- Size: 7.47 MB
- Stars: 80
- Watchers: 5
- Forks: 46
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-datatable
[](https://www.npmjs.com/package/@ashvin27/react-datatable)
[](https://snyk.io/test/github/ashvin27/react-datatable?targetFile=package.json)
ReactDatatable is a component which provide ability to create multifunctional table using single component like jQuery Datatable. It's fully customizable and easy to integrate in any react component. Bootstrap compatible.
## Features
* Lightweight
* Fully customizable (JSX, templates, state, styles, callbacks)
* Client-side & Server Side Pagination
* Multi-sort
* Filters
* Minimal design
* Fully controllable via optional props and callbacks
## Example
[http://react-datatable.in/](http://react-datatable.in/)
## Installation
With [npm](https://npmjs.org/) installed, run
```
npm i @ashvin27/react-datatable
```
## Usage
```js
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 (
this.editRecord(record)}
style={{marginRight: '5px'}}>
this.deleteRecord(record)}>
);
}
}
];
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:[
],
onClick:(event)=>{
console.log(event);
},
},
{
className:"btn btn-primary buttons-pdf",
title:"Export TEst",
children:[
],
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 (
)
}
}
render(, document.getElementById("app"));
```
# API
```js
import ReactDatatable from '@ashvin27/react-datatable';
or
var ReactDatatable = require('@ashvin27/react-datatable')
```
## Props
| Name | Type | Description
| ------------- | ------------- | ------------- |
| className | String | Datatable additional class, use to appy additional styling on table
| tHeadClassName | String | Additional class to be put on the "thead" of the table
| columns | Object[] | This props will used to specify datatable column configuration
| config | Object[] | This props will used to specify datatable configuration
| dynamic | boolean | This props will used to specify the table data will be server side or static
| id | String | Identifier of datatable
| records | Object[] | This props will used to table records
| total_record | Number | This props will used to specify the total records in case of table data is server side.
| onChange | Function(Object) | This method will call on table actions(page change, sorting, filtering, page length change)
| onRowClicked | Function(Object) | This method will call when user click on a row, return row object.
| extraButtons | Object[] | This props will add custom extra buttons to the table tools in the top right of the table header next to the built in export buttons
| onSort | function(String, Object[], String) | This props will allow you to sort your data/records using any custom sort function. Or according to you if you don't want to use default sort function provided by the Library.
| loading | Boolean(default false) | This props will allow you to display a loading in table while data is fetching from the server.
## Options
| Name | Type | default | Description
| ------------- | ------------- | ------------- | ------------- |
| key_column | string | id | Use to specify the key column name for each record
| button | Object[] | { excel: false, print: false, csv: false } | Use to enable/disable export buttons(Excel, CSV, Print). By default buttons are disabled.
| filename | String | "table" | Specify the export filename
| length_menu | Array[] | [10, 25, 50, 75, 100] | Specify the options in the page length `select` list.
| page_size | Number | 10 | Specify the page length (number of rows per page)
| sort | Object[] | { column: "", order: "asc" } | Initial sorting order to apply to the datatable
| show_filter | boolean | true | Use to specify either show or hide filter option
| show_first | boolean | true | Use to specify either show or hide pagination first button
| show_info | boolean | true | Use to specify either show or hide pagination info
| show_last | boolean | true | Use to specify either show or hide pagination last button
| show_length_menu | boolean | true | Use to specify either show or hide page length menu
| show_pagination | boolean | true | Use to specify either show or hide pagination
| pagination | string | basic | Use to specify the type of pagination. Available types: basic/advance
## Columns
| Name | Type | default | Description
| ------------- | ------------- | ------------- | ------------- |
| align | String | left | Specify the content alignment
| className | String | | Table column additional class fo styling (only for data columns use TrOnlyClassName for headers)
| TrOnlyClassName | String | | Header column additional class ( only for headers ) WILL NOT automatically take className value if not set
| key | String | | Specify the key of record which value will display in table cell
| sortable | Boolean | false | Specify the column is sortable of not
| text | String | | Specify the table column text
| width | Number | | Specify the column width
| cell | Function(record, index):string | | You can use any react component or JSX to display content in cells