insanrizky / react-datatable

React Datatable

React Datatable

This is an ONLY SERVER SIDE datatable for React based on Bootstrap CSS style.

We do not need the client side version as it makes data load longer!

Preview

You can see demo here.

Key Features

This easiest awesome package has some features below:

• Searchable
• Pagination
• Custom Columns
• Custom Labels
• Auto Increments
• Loading Event

Requirements

All you need is only attach Bootstrap CSS into your project.

Installation

You can use npm or yarn as you like.

npm install --save-dev react-datatable

or

yarn add --dev react-datatable

Example Usage

Basic Table

import React from 'react';
import ReactDatatable from 'react-datatable';

class Page extends React.Components {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { name: 'First Name', key: 'first_name' },
        { name: 'Last Name', key: 'last_name' },
        { name: 'Username', key: 'username' },
        { name: 'Email', key: 'email' },
      ],
      data: [
        {
          id: 1,
          first_name: 'John',
          last_name: 'Doe',
          username: 'john.doe',
          email: '[e-mail]',
        },
        {
          id: 2,
          first_name: 'Jane',
          last_name: 'Doe',
          username: 'jane.doe',
          email: '[e-mail]',
        },
        {
          id: 3,
          first_name: 'Joe',
          last_name: 'Doe',
          username: 'joe.doe',
          email: '[e-mail]',
        },
      ],
      meta: {
        page: '1',
        limit: '10',
        search: '',
        total_data: 3,
        total_page: 1
      }
    }
  }

  fetchData = async () => {
    // HTTP Request to get your data here
    // Based on your meta as updated in updateMeta()
  }

  updateMeta = (meta = this.state.meta) => {
    this.setState({ meta }, () => this.fetchData());
  }

  render() {
    return (
      <ReactDatatable
        columns={this.state.columns}
        rows={this.state.rows}
        meta={this.state.meta}
        updateMeta={this.updateMeta}
        />
    )
  }
}

Documentation

Property	Type	Required	Default	Description
columns	array	yes		Columns definition to be shown. [{ name: 'First Name', key: 'first_name' }]
rows	array	yes		Data definition to be shown. [{id: 1,first_name: 'John,last_name: 'Doe',username: 'john.doe',email: '[e-mail]'}]
meta	object	yes	{page: 1, limit: 10, search: '', total_data: 0, total_page: 1 }	Meta data
updateMeta	function	no		Function to update meta data props. It will be called when you change page/search/total per page.
autoIncrement	bool	no	false	Numbering at the first column
autoIncrementLabel	string	no	No	Numbering column title
customs	array	no	[]	Custom column definition with its data pattern. [{ columnName: 'Action', element: item => <button>Click Me!</button> }]
loading	bool	no	false	Event loading
loadingLabel	string	no	'Loading...'	Text will be shown while loading
noDataLabel	string	no	No data available	Text will be shown while no data

Contribute

If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.

Thanks!

Feel free to create issue report and let me fix it for better features we need.

Copyright © 2019 Built with ❤️ by Insan Rizky