Added a table to the Blogpost list.

app/components/Admin/Blogpost.jsx

 import React from 'react'
-import { Button, Row, Col } from 'react-bootstrap'
+import { Button } from 'react-bootstrap'
 import { LinkContainer } from 'react-router-bootstrap'
 
 import TextInput from './TextInput'
@@ -46,7 +46,7 @@ export default class Blogpost extends React.Component {
   }
 
   render () {
-    const { blogpost } = this.props
+    const { blogpost, number } = this.props
     var input
     if (this.state.isEditing) {
       input =
@@ -57,29 +57,37 @@ export default class Blogpost extends React.Component {
         />
     }
     return (
-      <div className='blogpost'>
-        <Row key={blogpost._id}>
-          <Col xs={12} md={8}>
-            <label onDoubleClick={this._onDoubleClick}>
-              {blogpost.title} ({blogpost.status})
-            </label>
-            {input}
-          </Col>
-          <Col xs={12} md={4}>
-            <LinkContainer to={`/admin/editor/${blogpost._id}`}>
-              <Button bsStyle='primary'>Edit this</Button>
-            </LinkContainer>&nbsp;
-            <Button bsStyle='success' onClick={this._onPublish}>Publish</Button>&nbsp;
-            <Button bsStyle='warning' onClick={this._onUnpublish}>Unpublish</Button>&nbsp;
-            <Button bsStyle='danger' onClick={this._onDestroyClick}>Delete</Button>
-          </Col>
-        </Row>
-      </div>
+      <tr className='blogpost' key={blogpost.key}>
+        <td>
+          {number}
+        </td>
+        <td>
+          <label onDoubleClick={this._onDoubleClick}>
+            {blogpost.title}
+          </label>
+          {input}
+        </td>
+        <td>
+          {blogpost.author}
+        </td>
+        <td>
+          {blogpost.published_at} ({blogpost.status})
+        </td>
+        <td>
+          <LinkContainer to={`/admin/editor/${blogpost._id}`}>
+            <Button bsStyle='primary'>Edit this</Button>
+          </LinkContainer>&nbsp;
+          <Button bsStyle='success' onClick={this._onPublish}>Publish</Button>&nbsp;
+          <Button bsStyle='warning' onClick={this._onUnpublish}>Unpublish</Button>&nbsp;
+          <Button bsStyle='danger' onClick={this._onDestroyClick}>Delete</Button>
+        </td>
+      </tr>
     )
   }
 }
 
 Blogpost.propTypes = {
+  number: React.PropTypes.number,
   blogpost: React.PropTypes.object,
   delete: React.PropTypes.func,
   update: React.PropTypes.func

app/components/Admin/BlogpostList.jsx

@@ -7,6 +7,7 @@ export default class BlogpostList extends React.Component {
   render () {
     const blogposts = this.props.blogposts.map((blogpost, key) => {
       return (<Blogpost
+        number={key + 1}
         key={blogpost._id}
         blogpost={blogpost}
         delete={this.props.delete}
@@ -16,7 +17,20 @@ export default class BlogpostList extends React.Component {
     return (
       <div className={styles['list']}>
         <h3 className={styles['header']}>Blog posts</h3>
-        {blogposts}
+        <table className='table table-hover'>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Title</th>
+              <th>Author</th>
+              <th>Status</th>
+              <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {blogposts}
+            </tbody>
+        </table>
       </div>
     )
   }