DataTable

A ReactJS component to render a datatable. The component comes with built-in styles.

Installation

Install DataTable with npm:

$ npm install --save dashboard-components

Usage

Very easy to use. Just provide props with total amount of things that you want to display on the page.

import React, { Component } from "react";
import ReactDOM from "react-dom";
import {DataTable} from "dashboard-components";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:[
      {name:'Bob', age:24, location: 'America'},
      {name:'Jack', age:32, location: 'Australia'},
      {name:'Daniel', age:45, location: 'Dubai'},
      {name:'Harry', age:37, location: 'Canada'},
      {name:'David', age:25, location: 'Africa'},
      {name:'Kim Johnson', age:34, location: 'Paris'}
      ],
      headerList: [
      {label:'Name',value: 'name', sort: true, style: {minWidth:'75px'}},
      {label:'Age',value: 'age'},
      {label:'Location',value: 'location', sort: true, style: {fontWeight:'bold'}}
      ]
    };
  }

  handleEdit(obj){
    console.log(obj)
  }
  handleDelete(obj){
    console.log(obj)
  }

  render() {
    return (
      <div>
        <DataTable  list={this.state.data}
                    showTotalValue={'Users'}
                    placeholder={'Search by Name'}
                    headerList={this.state.headerList}
                    serialNumber={true}
                    noDataMessage={"No Users Found"}
                    sort={true}
                    actionField={true}
                    actionsList={[
                        {icon:'edit',handleAction: this.handleEdit},
                        {icon:'delete',handleAction: this.handleDelete}
                    ]}/>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Demo

You can check the demo here.

Params

Name	Type	Default	Description
showTotalValue	String		Total count of items which you are going to display
list	Array		Required. List of the Item which you are going to display
actionField	Boolean	False	Adds Actions buttons field in table.
actionsList	Array		Contains total actions your want to perform with Action Field(contains icon, label (instead of icon), type (icon/link/button) and handleAction (EventHandler Function))
search	Boolean	True	Show Search Filter on Top of the Table
placeholder	String	Search here...	Placeholder of Search Input Field
pagination	Boolean	True	Show Pagination on the bottom of the Datatable
perPage	Number	10	Count of items per page
defaultActivePage	Number	1	Default Active Page
pageRangeDisplayed	Number	3	Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages)
sort	Boolean	True	Sort by any of the list item
headerList	Array		Table Header List(Contains the fields you want to show in your datatable (label:field label Required , sort: true/false,value: value Required, style: custom css))
serialNumber	Boolean	True	Shows the Sno. field in header
noDataMessage	String	No Data Found.	When Data Table is empty this message will be displayed.
handleRowClick	Function		Required. Handles click event on table row.

Using the icons

This project uses Google Material Icons. You have to link the script in your html file to display the icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Read more in the font portion of google developer guide.

Pagination

This component uses react-js-pagination.

License

MIT License Copyright (c) 2018 Amir Khan

Free Software, Hell Yeah!