react-smart-data-table

A smart data table component for React.js meant to be configuration free

About

This is meant to be a zero configuration data table component for React.js in the spirit of plug and play.

Just feed it an array of equal JSON objects and it will created a template free table that can be customized easily with any framework.

It currently supports:

Humanized column names based on object keys
Sortable columns
Results filtering
Search term highlight in the results
Column visibility toggles
Automatic pagination

Installation

$ npm install react-smart-data-table

Props

Name	Default	Type	Description
data	[]	{array}	An array of plain objects (can be nested)
name	reactsmartdatatable	{string}	The name for the table
footer	false	{boolean}	Copy the header to the footer
sortable	false	{boolean}	Makes the columns of the table sortable
withToggles	false	{boolean}	Enables the column visibility toggles
withLinks	false	{boolean}	Converts e-mails and url addresses to links
withHeaders	true	{boolean}	Can be used to disable the rendering of column headers
filterValue	''	{string}	Filters all columns by its value
perPage	0	{number}	Paginates the results with the value as rows per page

Examples

Simple sortable table (with Semantic UI)

import React from 'react'
import ReactDOM from 'react-dom'
import faker from 'faker'
import SmartDataTable from 'react-smart-data-table'

var testData = []
var numResults = 100

for (var i=0; i<numResults; i++) {
  testData.push({
    _id: i,
    fullName: faker.name.findName(),
    'email.address': faker.internet.email(),
    phone_number: faker.phone.phoneNumber(),
    address: {
      city: faker.address.city(),
      state: faker.address.state(),
      country: faker.address.country()
    }
  })
}

ReactDOM.render(
  <SmartDataTable
    data={testData}
    name='test-table'
    className='ui compact selectable table'
    sortable
  />,
  document.getElementById('app')
)

Demos

You can try react-smart-data-table with different UI libraries in the demo pages below. You can experiment with different features as well.

Forking / Contributing

If you want to fork or contribute, it's easy to test your changes. Just run the test compilation command and, if all goes well, run the start command to start an HTTP server (requires Python) in the root folder where you can easily access the test subfolder from your browser.

$ npm test

$ npm start

http://localhost:3000/test/

xavxyz/react-smart-data-table