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}>

Todo

• Pagination
• Dynamic loading of data
• Better docs
• Add tests
• Add more examples