table component

ShadowEditor.UI/src/index.js

@@ -41,6 +41,11 @@ export { default as PropertyGrid } from './property/PropertyGrid.jsx';
 
 // table
 export { default as DataGrid } from './table/DataGrid.jsx';
+export { default as Table } from './table/Table.jsx';
+export { default as TableBody } from './table/TableBody.jsx';
+export { default as TableCell } from './table/TableCell.jsx';
+export { default as TableHead } from './table/TableHead.jsx';
+export { default as TableRow } from './table/TableRow.jsx';
 
 // timeline
 export { default as Timeline } from './timeline/Timeline.jsx';

ShadowEditor.UI/src/table/Table.jsx

@@ -0,0 +1,34 @@
+import './css/Table.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 表格
+ * @author tengge / https://github.com/tengge1
+ */
+class Table extends React.Component {
+    render() {
+        const { className, style, children, ...others } = this.props;
+
+        return <table
+            className={classNames('Table', className)}
+            style={style}
+            {...others}>
+            {children}
+        </table>;
+    }
+}
+
+Table.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    children: PropTypes.node,
+};
+
+Table.defaultProps = {
+    className: null,
+    style: null,
+    children: null,
+};
+
+export default Table;

ShadowEditor.UI/src/table/TableBody.jsx

@@ -0,0 +1,34 @@
+import './css/TableBody.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 表格内容
+ * @author tengge / https://github.com/tengge1
+ */
+class TableBody extends React.Component {
+    render() {
+        const { className, style, children, ...others } = this.props;
+
+        return <tbody
+            className={classNames('TableBody', className)}
+            style={style}
+            {...others}>
+            {children}
+        </tbody>;
+    }
+}
+
+TableBody.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    children: PropTypes.node,
+};
+
+TableBody.defaultProps = {
+    className: null,
+    style: null,
+    children: null,
+};
+
+export default TableBody;

ShadowEditor.UI/src/table/TableCell.jsx

@@ -0,0 +1,34 @@
+import './css/TableCell.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 表格单元格
+ * @author tengge / https://github.com/tengge1
+ */
+class TableCell extends React.Component {
+    render() {
+        const { className, style, children, ...others } = this.props;
+
+        return <td
+            className={classNames('TableCell', className)}
+            style={style}
+            {...others}>
+            {children}
+        </td>;
+    }
+}
+
+TableCell.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    children: PropTypes.node,
+};
+
+TableCell.defaultProps = {
+    className: null,
+    style: null,
+    children: null,
+};
+
+export default TableCell;

ShadowEditor.UI/src/table/TableHead.jsx

@@ -0,0 +1,34 @@
+import './css/TableHead.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 表格头部
+ * @author tengge / https://github.com/tengge1
+ */
+class TableHead extends React.Component {
+    render() {
+        const { className, style, children, ...others } = this.props;
+
+        return <thead
+            className={classNames('TableHead', className)}
+            style={style}
+            {...others}>
+            {children}
+        </thead>;
+    }
+}
+
+TableHead.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    children: PropTypes.node,
+};
+
+TableHead.defaultProps = {
+    className: null,
+    style: null,
+    children: null,
+};
+
+export default TableHead;

ShadowEditor.UI/src/table/TableRow.jsx

@@ -0,0 +1,34 @@
+import './css/TableRow.css';
+import classNames from 'classnames/bind';
+import PropTypes from 'prop-types';
+
+/**
+ * 表格行
+ * @author tengge / https://github.com/tengge1
+ */
+class TableRow extends React.Component {
+    render() {
+        const { className, style, children, ...others } = this.props;
+
+        return <tr
+            className={classNames('TableRow', className)}
+            style={style}
+            {...others}>
+            {children}
+        </tr>;
+    }
+}
+
+TableRow.propTypes = {
+    className: PropTypes.string,
+    style: PropTypes.object,
+    children: PropTypes.node,
+};
+
+TableRow.defaultProps = {
+    className: null,
+    style: null,
+    children: null,
+};
+
+export default TableRow;