react-xtable

A React.js datatable component

Install

npm install --save react-xtable

Usage

---

import React, { Component } from 'react'

import Rtable from 'react-xtable'
import 'react-xtable/styles.css'

const columns = [
  {
    label: 'Name',
    key: 'name',
    Render: element => <span>{element.name}</span>
  },
  { label: 'Age', key: 'age' },
  {
    label: 'Actions',
    key: 'actions',
    Render: element => <span onClick={() => console.log(element)}>View</span>
  }
]

const data = [{ name: 'Daniela Merlo', age: 22 }]

class Example extends Component {
  render() {
    return (
      <RTable
        data={data}
        columns={columns}
        Loading={() => 'Loading'}
        pagination={10}
        searchPlaceholder="Search"
        emptyText={() => 'No data found :('}
      />
    )
  }
}

Props

Prop	Type	Default	Description
data	Array	[]	Data to display
columns	Array	[]	Table columns
Loading	Function		Loading indicator
Pagination	Number	50	Number of elements per page
EmptyText	Function		Text to show when no data
search	Boolean	true	Show/Hide search input
searchPlaceholder	Text	search	Search input placeholder
title	Boolean	true	Show/Hide datatable title

Column Options

Property	Type	Description
label	String	Column title
key	String	Object key
Render	Function	Component to render instead of key value. Returns component with the selected element

License

MIT © bernagl