react-simple-table

For when you just want a table and not sorting, filtering, pagination, infinite scroll, ajax loading, etc. etc. etc.

Install

npm install react-simple-table

Usage

react-simple-table takes two props data and columns.

var SimpleTable = require('react-simple-table');
var React = require('react');
 
var fruitColors = [{
  apple: 'Green',
  peach: 'Yellow',
  cherry: 'Red'
}];
 
React.renderComponent({
  render: function() {
    return (
      <SimpleTable columns={['apple', 'peach', 'cherry']}, data={fruitColors} />
    )
  }
});
 
// For deeper data structures, you can specify the "path" to your values
// using dot-notation strings.
 
var deeperFruitColors = [{
  apple: {
    color: 'Green'
  },
  peach: {
    color: 'Yellow'
  },
  cherry: {
    'Red'
  }
}];
 
React.renderComponent({
  render: function() {
    return (
      <SimpleTable columns={[
        {columnHeader: 'apple', path: 'apple.color'},
        {columnHeader: 'peach' path: 'peach.color'},
        {columnHeader: 'cherry', path: 'cherry.color'}
      ]}, data={deeperFruitColors} />
    )
  }
});
 
// You can also pass in a function and do whatever you'd like.
React.renderComponent({
  render: function() {
    return (
      <SimpleTable columns={[
        {columnHeader: 'apple', path: 'apple.color'},
        {columnHeader: 'peach', format: function(row) {
           return (
            <span style={{color: "peach"}}>
              {row.peach.color}
            </span>
          )
        }}
        {columnHeader: 'cherry', format: function(row) {
           return row.cherry.color + " yeah!"
          }
        }
      ]}, data={deeperFruitColors} />
    )
  }
});

Styling

Tables by default have a react-simple-table class added. You can pass in custom class names as a string using the className prop.

Demo

http://kyleamathews.github.io/react-simple-table/