react-datatable
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
Installation
With npm installed, run
npm i react-datatable-ext
Usage
;;; { superprops; thiscolumns = 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 { return <Fragment> <button className="btn btn-primary btn-sm" onClick= this style=marginRight: '5px'> <i className="fa fa-edit"></i> </button> <button className="btn btn-danger btn-sm" onClick= this> <i className="fa fa-trash"></i> </button> </Fragment> ; } ; thisconfig = page_size: 10 length_menu: 10 20 50 button: excel: true print: true thisstate = 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": 55 "type_of_food": "Thai" "id": "55f14312c7447c3da7051b28" "address": "30 Greyhound Road Hammersmith" "name": "@ Thai Restaurant" "postcode": "8NX" "rating": 45 "type_of_food": "Thai" "id": "55f14312c7447c3da7051b29" "address": "30 Greyhound Road Hammersmith" "name": "@ Thai Restaurant" "postcode": "8NX" "rating": 45 "type_of_food": "Thai" } { console; } { console; } { return <div> <ReactDatatable config=thisconfig records=thisstaterecords columns=thiscolumns /> </div> } ;
API
;orvar ReactDatatable =
Props
Name | Type | Description |
---|---|---|
className | String | Datatable additional class, use to appy additional styling on 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 | Funtion(Object) | This method will call on table actions(page change, sorting, filtering, page length change) |
onRowClicked | Funtion(Object) | This method will call when user click on a row, return row object. |
Options
Name | Type | default | Description |
---|---|---|---|
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 |
Columns
Name | Type | default | Description |
---|---|---|---|
align | String | left | Specify the content alignment |
className | String | Table column additional class fo styling | |
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 | Spcify 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 |