React-dtable NPM

react-dtable

**Experimental**

react-dtable is a React component that lets you generate a data table easily.

Installation

npm install --save react-dtable

Example

import React from "react";
import ReactDOM from "react-dom";
import { DataTable, Column } from "react-dtable";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
  }

  componentWillMount() {
    fetch(`https://randomuser.me/api/?results=50`)
      .then(res => res.json())
      .then(json => this.setState({ data: json.results }))
      .catch(err => console.error(err));
  }

  render() {
    return (
      <DataTable data={this.state.data}>
        <Column label="Username" field="login.username" />
        <Column
          label="Full Name"
          filter={filter => {
            return (
              <input
                className="form-control"
                onChange={e => {
                  const input = e.target.value;
                  filter({
                    fullName: row => {
                      const value = `${row.name.first} ${row.name.last}`;
                      return ~value.indexOf(input.trim());
                    }
                  });
                }}
              />
            );
          }}
          cell={row => (
            <span><strong>{row.name.first}</strong> {row.name.last}</span>
          )}
        />
        <Column
          field="gender"
          label="Gender"
          filter={filter => (
            <select
              name="gender"
              className="form-control"
              onChange={e => {
                const value = e.target.value;
                filter({
                  gender: row => {
                    if (value === "") return true;
                    return row.gender === value;
                  }
                });
              }}
            >
              <option value="">All</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
            </select>
          )}
        />
        <Column label="Email" field="email" />
        <Column label={false} cell={row => <button>Action</button>} />
      </DataTable>
    );
  }
}

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

API

`<DataTable>` Props

Property	Type	Description
`data`	object	required - Array of object.
`renderColumnLabels`	boolean	default: `true`. Setting to `false` will skip rendering the labels row
	function	`() => <tr> ... </tr>` - For customizing column headings row
`renderColumnFilters`	boolean	default: `true`. Setting to `false`, will skip rendering the filters row
	function	`(filterColumn) => <tr> ... </tr>` - For customizing column filters row
`tableClassName`	string	`<table className={tableClassName}>`
`theadClassName`	string	`<thead className={theadClassName}>`
`tbodyClassName`	string	`<tbody className={tbodyClassName}>`
`tfootClassName`	string	`<tfoot className={tfootClassName}>`

`<Column>` Props

Property	Type	Description
`label`	string	Column heading to display.
`labelClassName`	string	`<th className={labelClassName}>`
`field`	string	Field name for displaying value and filter. For nested object, you can use the dot (`.`) notation. (e.g. `name.firstName`)
`filter`	function	`(filterColumn) => { ... }` - If you need to use a different element for filtering. `filterColumn` is a function that you can call to pass a key/value pair to be used for filtering(e.g. `<select name="status" onChange={e => filterColumn({ [e.target.name]: e.target.value })}><option value="1">Active</option><option value="0">Inactive</option></select>`)
`filterClassName`	string	`<th className={filterClassName}>`
`cell`	string	Text to display instead of the data
	function	`(row) => { ... }` - Allows you to customize the cell content
`cellClassName`	string	`<td className={cellClassName}>`
`className`	string	`<tr className={className}>`