JSX column API

examples/jsx.js

@@ -0,0 +1,49 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Table = require('rc-table');
+require('rc-table/assets/index.less');
+
+const { ColumnGroup, Column } = Table;
+
+const data = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+];
+
+ReactDOM.render(
+  <div>
+    <h2>JSX table</h2>
+    <Table data={data}>
+      <ColumnGroup title="Bazinga">
+        <Column
+          title="title1"
+          dataIndex="a"
+          key="a"
+          width={100}
+        />
+        <Column
+          id="123"
+          title="title2"
+          dataIndex="b"
+          key="b"
+          width={100}
+        />
+      </ColumnGroup>
+      <Column
+        title="title3"
+        dataIndex="c"
+        key="c"
+        width={200}
+      />
+      <Column
+        title="Operations"
+        dataIndex=""
+        key="d"
+        render={() => <a href="#">Operations</a>}
+      />
+    </Table>
+  </div>,
+  document.getElementById('__react-content')
+);

src/Column.jsx

@@ -0,0 +1,21 @@
+import { Component, PropTypes } from 'react';
+
+export default class Column extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    colSpan: PropTypes.number,
+    title: PropTypes.node,
+    dataIndex: PropTypes.string,
+    width: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string,
+    ]),
+    fixed: PropTypes.oneOf([
+      true,
+      'left',
+      'right',
+    ]),
+    render: PropTypes.func,
+    onCellClick: PropTypes.func,
+  }
+}

src/ColumnGroup.jsx

@@ -0,0 +1,7 @@
+import { Component, PropTypes } from 'react';
+
+export default class ColumnGroup extends Component {
+  static propTypes = {
+    title: PropTypes.node,
+  }
+}

src/ColumnManager.js

@@ -1,8 +1,12 @@
+import React from 'react';
+import Column from './Column';
+import ColumnGroup from './ColumnGroup';
+
 export default class ColumnManager {
   _cached = {}
 
-  constructor(columns) {
-    this.columns = columns;
+  constructor(columns, elements) {
+    this.columns = columns || this.normalize(elements);
   }
 
   static includesCustomRender(columns) {
@@ -109,8 +113,29 @@ export default class ColumnManager {
     });
   }
 
-  reset(columns) {
-    this.columns = columns;
+  normalize(elements) {
+    const columns = [];
+    React.Children.forEach(elements, element => {
+      if (!this.isColumnElement(element)) return;
+      const clonedElement = React.cloneElement(element);
+      const column = { ...clonedElement.props };
+      if (clonedElement.key) {
+        column.key = clonedElement.key;
+      }
+      if (element.type === ColumnGroup) {
+        column.children = this.normalize(column.children);
+      }
+      columns.push(column);
+    });
+    return columns;
+  }
+
+  isColumnElement(element) {
+    return element && (element.type === Column || element.type === ColumnGroup);
+  }
+
+  reset(columns, elements) {
+    this.columns = columns || this.normalize(elements);
     this._cached = {};
   }
 

src/Table.jsx

@@ -36,14 +36,14 @@ const Table = React.createClass({
     scroll: PropTypes.object,
     rowRef: PropTypes.func,
     getBodyWrapper: PropTypes.func,
+    children: PropTypes.node,
   },
 
   getDefaultProps() {
     return {
       data: [],
       useFixedHeader: false,
       expandIconAsCell: false,
-      columns: [],
       defaultExpandAllRows: false,
       defaultExpandedRowKeys: [],
       rowKey: 'key',
@@ -71,8 +71,7 @@ const Table = React.createClass({
     const props = this.props;
     let expandedRowKeys = [];
     let rows = [...props.data];
-
-    this.columnManager = new ColumnManager(props.columns);
+    this.columnManager = new ColumnManager(props.columns, props.children);
     this.store = createStore({ currentHoverKey: null });
 
     if (props.defaultExpandAllRows) {
@@ -118,8 +117,10 @@ const Table = React.createClass({
         expandedRowKeys: nextProps.expandedRowKeys,
       });
     }
-    if (nextProps.columns !== this.props.columns) {
+    if (nextProps.columns && nextProps.columns !== this.props.columns) {
       this.columnManager.reset(nextProps.columns);
+    } else if (nextProps.children !== this.props.children) {
+      this.columnManager.reset(null, nextProps.children);
     }
   },
 

src/index.js

@@ -1 +1,8 @@
-module.exports = require('./Table');
+const Table = require('./Table');
+const Column = require('./Column');
+const ColumnGroup = require('./ColumnGroup');
+
+Table.Column = Column;
+Table.ColumnGroup = ColumnGroup;
+
+module.exports = Table;

tests/ColumnManager.spec.js

@@ -1,6 +1,9 @@
 /* eslint-disable no-console,func-names,react/no-multi-comp,indent */
+const React = require('react');
 const expect = require('expect.js');
 const ColumnManager = require('../src/ColumnManager');
+const Column = require('../src/Column');
+const ColumnGroup = require('../src/ColumnGroup');
 
 describe('ColumnManager', () => {
   describe('includesCustomRender', () => {
@@ -94,4 +97,53 @@ describe('ColumnManager', () => {
       ]);
     });
   });
+
+  describe('normalize', () => {
+    it('normalize React elements to columns', () => {
+      const elements = [
+        <ColumnGroup title="a">
+          <Column
+            title="b"
+            dataIndex="b"
+            key="b"
+          />
+          <Column
+            title="c"
+            dataIndex="c"
+            key="c"
+          />
+        </ColumnGroup>,
+        <Column
+          title="d"
+          dataIndex="d"
+          key="d"
+        />,
+      ];
+
+      const columnManager = new ColumnManager(null, elements);
+
+      expect(columnManager.columns).to.eql([
+        {
+          title: 'a',
+          children: [
+            {
+              title: 'b',
+              dataIndex: 'b',
+              key: 'b',
+            },
+            {
+              title: 'c',
+              dataIndex: 'c',
+              key: 'c',
+            },
+          ],
+        },
+        {
+          title: 'd',
+          dataIndex: 'd',
+          key: 'd',
+        },
+      ]);
+    });
+  });
 });