srd

storejars-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.

Showing:

Popularity

Downloads/wk

43

GitHub Stars

60

Maintenance

Last Commit

22d ago

Contributors

9

Package

Dependencies

3

Size (min+gzip)

0.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Contribution

The owner is no longer able to support this repository, if anyone wants can contribute to add new feature and resolve the issues. So please use it carefully.

react-datatable

npm version Known Vulnerabilities

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 @ashvin27/react-datatable

Usage

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"));

API

import ReactDatatable from '@ashvin27/react-datatable';
or
var ReactDatatable = require('@ashvin27/react-datatable')

Props

NameTypeDescription
classNameStringDatatable additional class, use to appy additional styling on table
tHeadClassNameStringAdditional class to be put on the "thead" of the table
columnsObject[]This props will used to specify datatable column configuration
configObject[]This props will used to specify datatable configuration
dynamicbooleanThis props will used to specify the table data will be server side or static
idStringIdentifier of datatable
recordsObject[]This props will used to table records
total_recordNumberThis props will used to specify the total records in case of table data is server side.
onChangeFunction(Object)This method will call on table actions(page change, sorting, filtering, page length change)
onRowClickedFunction(Object)This method will call when user click on a row, return row object.
extraButtonsObject[]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
onSortfunction(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.
loadingBoolean(default false)This props will allow you to display a loading in table while data is fetching from the server.

Options

NameTypedefaultDescription
key_columnstringidUse to specify the key column name for each record
buttonObject[]{ excel: false, print: false, csv: false }Use to enable/disable export buttons(Excel, CSV, Print). By default buttons are disabled.
filenameString"table"Specify the export filename
length_menuArray[][10, 25, 50, 75, 100]Specify the options in the page length select list.
page_sizeNumber10Specify the page length (number of rows per page)
sortObject[]{ column: "", order: "asc" }Initial sorting order to apply to the datatable
show_filterbooleantrueUse to specify either show or hide filter option
show_firstbooleantrueUse to specify either show or hide pagination first button
show_infobooleantrueUse to specify either show or hide pagination info
show_lastbooleantrueUse to specify either show or hide pagination last button
show_length_menubooleantrueUse to specify either show or hide page length menu
show_paginationbooleantrueUse to specify either show or hide pagination
paginationstringbasicUse to specify the type of pagination. Available types: basic/advance

Columns

NameTypedefaultDescription
alignStringleftSpecify the content alignment
classNameStringTable column additional class fo styling (only for data columns use TrOnlyClassName for headers)
TrOnlyClassNameStringHeader column additional class ( only for headers ) WILL NOT automatically take className value if not set
keyStringSpecify the key of record which value will display in table cell
sortableBooleanfalseSpecify the column is sortable of not
textStringSpecify the table column text
widthNumberSpecify the column width
cellFunction(record, index):stringYou can use any react component or JSX to display content in cells

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100