@mkikets/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.

Usage no npm install needed!

<script type="module">
  import mkiketsReactDatatable from 'https://cdn.skypack.dev/@mkikets/react-datatable';
</script>

README

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

Example

http://react-datatable.in/

Installation

With npm installed, run

npm i @mkikets/react-datatable

Usage

import React, { Component, Fragment } from 'react';
import { render } from 'react-dom';
import ReactDatatable from '@mkikets/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"));

API

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
fa5_support Boolean false Enables support of Font Awesome 5 for icons
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 or not
export Boolean true Specify the column can be exported to documents or 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