react-zeanium-ui-ui/src/table/Table.js

Zeanium UI Framework for React.js

var React = require('react');
var TableHeader = require('./TableHeader');
var TableBody = require('./TableBody');
var TableColgroup = require('./TableColgroup');
var Paging = require('../ui/Paging');

module.exports = React.createClass({
	displayName:'Table',
	getDefaultProps: function (){
		return {
			items: []
		};
	},
	getInitialState: function(){
		return {

		}
	},
	componentDidMount:function(){
		this._isInit = false;
	},
	__onHeaderCheckBoxChange: function (value){
		this.refs.body.setAllChecked(value);
	},
	__onBodyCheckBoxChange: function (value, row, checkbox){
		this.props.onBodyCheckBoxChange && this.props.onBodyCheckBoxChange(value, row, checkbox, this);
	},
	__onFilterSearch: function (data, filter){
		console.log(data);
	},
	getCheckedItems: function (filter){
		return this.refs.body.getCheckedItems(filter);
	},
	setData: function (data, argv){
		this.refs.body.setData(data, argv);
	},
	insertRow: function (data, argv){
		this.refs.body.insertRow(data);
	},
	refresh: function (){
		this.refs.body.refresh();
	},
	render:function(){
		var _items = this.props.items.slice(0);
		if(this.props.checkbox&&_items.length&&_items[0].type!='checkbox'){
			_items.unshift({
				type: 'checkbox',
				textAlign: 'center',
				width: this.props.checkbox
			});
		}
		this._columnSize = _items.length;
		return (
			<table style={this.props.style} className={"c-table " + this.props.className} cellPadding="0" cellSpacing="0">
				<TableColgroup {...this.props} />
				{this.props.showHeader && <TableHeader
					ref="header"
					{...this.props}
					items={_items}
					columnSize={this._columnSize}
					onCheckBoxChange={this.__onHeaderCheckBoxChange}
					onFilterSearch={this.__onFilterSearch}/>}
				<TableBody
					ref="body"
					{...this.props}
					items={_items}
					columnSize={this._columnSize}
					onCheckBoxChange={this.__onBodyCheckBoxChange}/>
			</table>
		);
	}
});