innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

feat(Table.js): 新增# bee-table 

## API
This commit is contained in:
huyueb 2017-12-24 22:54:32 +08:00
parent 554229724d
commit 8117b1c6b5
16 changed files with 347 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -60,6 +60,7 @@ class Demo extends Component {
| 参数 | 说明 | 类型 | 默认值 |
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
| data | 传入的表格数据 | array | [] |
| bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 列的配置表，具体配置见下表 | array | - |
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
| expandedRowKeys | 展开的行，控制属性 | array | - |

51
build/Table.css
View File

@ -14,22 +14,32 @@
.u-table th {
background: #f7f7f7;
font-weight: bold;
transition: background .3s ease; }
transition: background 0.3s ease; }
.u-table th[colspan] {
text-align: center; }
.u-table td {
border-bottom: 1px solid #e9e9e9; }
.u-table tr {
transition: all .3s ease; }
transition: all 0.3s ease; }
.u-table tr:hover {
background: rgb(227,242,253); }
.u-table tr.tr-row-hover {
background: rgb(227,242,253); }
.u-table th, .u-table td {
.u-table th,
.u-table td {
padding: 16px 8px;
word-break: break-all; }
.u-table-row-hover {
background: #e3f2fd; }
.u-table-scroll {
overflow: auto; }
.u-table-bordered table {
border: 1px solid #e9e9e9; }
.u-table-bordered th {
border-bottom: 1px solid #e9e9e9; }
.u-table-bordered th,
.u-table-bordered td {
border-right: 1px solid #e9e9e9; }
.u-table-header {
overflow: hidden;
background: #f7f7f7; }
@ -38,7 +48,7 @@
position: relative; }
.u-table-fixed-header .u-table-body-inner {
height: 100%;
overflow: scroll; }
overflow-y: hidden; }
.u-table-fixed-header .u-table-scroll .u-table-header {
overflow-x: scroll;
padding-bottom: 20px;
@ -77,11 +87,11 @@
.u-table-row-spaced, .u-table-expanded-row-spaced {
visibility: hidden; }
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
content: '.'; }
content: "."; }
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
content: '-'; }
content: "-"; }
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
content: '+'; }
content: "+"; }
.u-table tr.u-table-expanded-row {
background: #f7f7f7; }
.u-table tr.u-table-expanded-row:hover {
@ -102,11 +112,11 @@
.u-table-prev-columns-page {
margin-right: 8px; }
.u-table-prev-columns-page:before {
content: '<'; }
content: "<"; }
.u-table-next-columns-page {
float: right; }
.u-table-next-columns-page:before {
content: '>'; }
content: ">"; }
.u-table-fixed-left, .u-table-fixed-right {
position: absolute;
top: 0;
@ -137,10 +147,12 @@
.u-table.bordered table {
border-collapse: collapse; }
.u-table.bordered th, .u-table.bordered td {
.u-table.bordered th,
.u-table.bordered td {
border: 1px solid #e9e9e9; }
.move-enter, .move-appear {
.move-enter,
.move-appear {
opacity: 0;
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-duration: 2.5s;
@ -149,11 +161,12 @@
.move-leave {
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-duration: .5s;
animation-duration: 0.5s;
animation-fill-mode: both;
animation-play-state: paused; }
.move-enter.move-enter-active, .move-appear.move-enter-active {
.move-enter.move-enter-active,
.move-appear.move-enter-active {
animation-name: moveLeftIn;
animation-play-state: running; }
@ -198,7 +211,7 @@
/* margin-top: 5px; */
/* margin-bottom: 5px; */
background: transparent;
color: #F22C1D;
color: #f22c1d;
/* padding-left: 12px; */
/* padding-right: 12px; */
margin: 0;
@ -285,12 +298,14 @@
.bee-table-column-sorter-up.on .uf-triangle-up {
color: #108ee9; }
.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
-webkit-filter: none;
filter: none;
font-size: 12px; }
.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
display: inline-block;
padding: 0;
font-size: 12px;
@ -303,5 +318,5 @@
line-height: 4px;
height: 4px;
color: #999;
-webkit-transition: all .3s;
transition: all .3s; }
-webkit-transition: all 0.3s;
transition: all 0.3s; }

3
build/Table.js
View File

@ -802,6 +802,9 @@ var Table = function (_Component) {
if (props.useFixedHeader || props.scroll && props.scroll.y) {
className += ' ' + clsPrefix + '-fixed-header';
}
if (props.bordered) {
className += ' ' + clsPrefix + '-bordered';
}
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;

1
demo/demolist/Demo14.js
View File

@ -299,7 +299,6 @@ class Demo14 extends React.Component {
获取数据
</Button>
<Table
bordered
data={dataSource}
columns={columns}
getBodyWrapper={this.getBodyWrapper}

1
demo/demolist/Demo2.js
View File

@ -190,7 +190,6 @@ class Demo2 extends React.Component {
添加
</Button>
<Table
bordered
data={dataSource}
columns={columns}
getBodyWrapper={this.getBodyWrapper}

155
demo/demolist/Demo3.js
View File

@ -1,60 +1,113 @@
/**
*
* @title 更灵活的表格
* @description 手写表格的头组件来达到更灵活的配置表格
*
*/
*
* @title 表头分组
* @description columns[n] 可以内嵌 children，以渲染分组表头。
*
*/
import Button from 'bee-button';
import React, { Component } from 'react';
import Table from '../../src';
import Button from "bee-button";
import React, { Component } from "react";
import Table from "../../src";
const { ColumnGroup, Column } = Table;
const data3 = [
{ a: '北京', b: '北京', c: '250', d: 2, key: '1' },
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: 100,
fixed: "left"
},
{
title: "Other",
children: [
{
title: "Age",
dataIndex: "age",
key: "age",
width: 200
},
{
title: "Address",
children: [
{
title: "Street",
dataIndex: "street",
key: "street",
width: 200
},
{
title: "Block",
children: [
{
title: "Building",
dataIndex: "building",
key: "building",
width: 100
},
{
title: "Door No.",
dataIndex: "number",
key: "number",
width: 100
}
]
}
]
}
]
},
{
title: "Company",
children: [
{
title: "Company Address",
dataIndex: "companyAddress",
key: "companyAddress"
},
{
title: "Company Name",
dataIndex: "companyName",
key: "companyName"
}
]
},
{
title: "Gender",
dataIndex: "gender",
key: "gender",
width: 60,
fixed: "right"
}
];
class Demo3 extends Component {
render () {
return (
<Table data={data3}>
<ColumnGroup title="地址">
<Column
title="省"
dataIndex="a"
key="a"
width={100}
/>
<Column
id="123"
title="市"
dataIndex="b"
key="b"
width={100}
/>
</ColumnGroup>
<Column
title="数量"
dataIndex="c"
key="c"
width={200}
/>
<Column
title="操作"
dataIndex=""
key="d"
render={(text, record, index) => {
return (
<Button size="sm" colors="info" style={{ minWidth: 50 }}>增加</Button>
);
}}
/>
</Table>
)
}
const data = [];
for (let i = 0; i < 20; i++) {
data.push({
key: i,
name: "John Brown",
age: i + 1,
street: "Lake Park",
building: "C",
number: 2035,
companyAddress: "Lake Street 42",
companyName: "SoftLake Co",
gender: "M"
});
}
export default Demo3;
class Demo3 extends Component {
render() {
return (
<Table
columns={columns}
data={data}
bordered
scroll={{ x: "130%", y: 240 }}
/>
);
}
}
export default Demo3;

2
demo/demolist/Demo5.js
View File

@ -60,7 +60,7 @@ const data5 = [
class Demo5 extends Component {
render() {
return <Table columns={columns5} data={data5}/>;
return <Table columns={columns5} data={data5}scroll={{ x: "130%", y: 140 }}/>;
}
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

53
dist/demo.css vendored
View File

@ -7594,20 +7594,32 @@ ul {
.u-table th {
background: #f7f7f7;
font-weight: bold;
transition: background .3s ease; }
transition: background 0.3s ease; }
.u-table th[colspan] {
text-align: center; }
.u-table td {
border-bottom: 1px solid #e9e9e9; }
.u-table tr {
transition: all .3s ease; }
transition: all 0.3s ease; }
.u-table tr:hover {
background: rgb(227,242,253); }
.u-table tr.tr-row-hover {
background: rgb(227,242,253); }
.u-table th, .u-table td {
.u-table th,
.u-table td {
padding: 16px 8px;
word-break: break-all; }
.u-table-row-hover {
background: #e3f2fd; }
.u-table-scroll {
overflow: auto; }
.u-table-bordered table {
border: 1px solid #e9e9e9; }
.u-table-bordered th {
border-bottom: 1px solid #e9e9e9; }
.u-table-bordered th,
.u-table-bordered td {
border-right: 1px solid #e9e9e9; }
.u-table-header {
overflow: hidden;
background: #f7f7f7; }
@ -7616,12 +7628,12 @@ ul {
position: relative; }
.u-table-fixed-header .u-table-body-inner {
height: 100%;
overflow: scroll; }
overflow-y: hidden; }
.u-table-fixed-header .u-table-scroll .u-table-header {
overflow-x: scroll;
padding-bottom: 20px;
margin-bottom: -20px;
overflow-y: scroll;
overflow-y: auto;
box-sizing: border-box; }
.u-table-title {
padding: 16px 8px;
@ -7658,11 +7670,11 @@ ul {
.u-table-row-spaced, .u-table-expanded-row-spaced {
visibility: hidden; }
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
content: '.'; }
content: "."; }
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
content: '-'; }
content: "-"; }
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
content: '+'; }
content: "+"; }
.u-table tr.u-table-expanded-row {
background: #f7f7f7; }
.u-table tr.u-table-expanded-row:hover {
@ -7683,11 +7695,11 @@ ul {
.u-table-prev-columns-page {
margin-right: 8px; }
.u-table-prev-columns-page:before {
content: '<'; }
content: "<"; }
.u-table-next-columns-page {
float: right; }
.u-table-next-columns-page:before {
content: '>'; }
content: ">"; }
.u-table-fixed-left, .u-table-fixed-right {
position: absolute;
top: 0;
@ -7718,10 +7730,12 @@ ul {
.u-table.bordered table {
border-collapse: collapse; }
.u-table.bordered th, .u-table.bordered td {
.u-table.bordered th,
.u-table.bordered td {
border: 1px solid #e9e9e9; }
.move-enter, .move-appear {
.move-enter,
.move-appear {
opacity: 0;
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-duration: 2.5s;
@ -7730,11 +7744,12 @@ ul {
.move-leave {
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-duration: .5s;
animation-duration: 0.5s;
animation-fill-mode: both;
animation-play-state: paused; }
.move-enter.move-enter-active, .move-appear.move-enter-active {
.move-enter.move-enter-active,
.move-appear.move-enter-active {
animation-name: moveLeftIn;
animation-play-state: running; }
@ -7779,7 +7794,7 @@ ul {
/* margin-top: 5px; */
/* margin-bottom: 5px; */
background: transparent;
color: #F22C1D;
color: #f22c1d;
/* padding-left: 12px; */
/* padding-right: 12px; */
margin: 0;
@ -7866,11 +7881,13 @@ ul {
.bee-table-column-sorter-up.on .uf-triangle-up {
color: #108ee9; }
.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
filter: none;
font-size: 12px; }
.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
display: inline-block;
padding: 0;
font-size: 12px;
@ -7881,7 +7898,7 @@ ul {
line-height: 4px;
height: 4px;
color: #999;
transition: all .3s; }
transition: all 0.3s; }
/* FormGroup */
/* Navlayout */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

165
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
docs/api.md
View File

@ -18,6 +18,7 @@ import 'bee-table/build/Table.css';
| 参数 | 说明 | 类型 | 默认值 |
| :--------------------- | :--------------------------------------- | :------------------------------------- | :-------------- |
| data | 传入的表格数据 | array | [] |
| bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 列的配置表，具体配置见下表 | array | - |
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
| expandedRowKeys | 展开的行，控制属性 | array | - |

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "1.0.7",
"version": "1.0.8",
"description": "Table ui component for react",
"keywords": [
"react",

3
src/Table.js
View File

@ -701,6 +701,9 @@ class Table extends Component{
if (props.useFixedHeader || (props.scroll && props.scroll.y)) {
className += ` ${clsPrefix}-fixed-header`;
}
if(props.bordered){
className += ` ${clsPrefix}-bordered`;
}
className += ` ${clsPrefix}-scroll-position-${this.state.scrollPosition}`;
const isTableScroll = this.columnManager.isAnyColumnsFixed() ||

119
src/Table.scss
View File

@ -1,9 +1,8 @@
@import "../node_modules/tinper-bee-core/scss/minxin-variables";
@import "../node_modules/tinper-bee-core/scss/minxin-mixins";
$text-color : #666;
$font-size-base : 12px;
$text-color: #666;
$font-size-base: 12px;
$line-height: 1.5;
$table-border-color: $border-color-base;
$table-head-background-color: #f7f7f7;
@ -14,8 +13,6 @@ $table-border-color: #e9e9e9;
$table-hover-color: unquote("rgb(#{$palette-blue-50})") !default;
$table-move-in-color: $bg-color-base;
.u-table {
font-size: $font-size-base;
color: $text-color;
@ -33,7 +30,10 @@ $table-move-in-color: $bg-color-base;
th {
background: $table-head-background-color;
font-weight: bold;
transition: background .3s ease;
transition: background 0.3s ease;
&[colspan] {
text-align: center;
}
}
td {
@ -41,29 +41,40 @@ $table-move-in-color: $bg-color-base;
}
tr {
transition: all .3s ease;
transition: all 0.3s ease;
&:hover {
background: $table-hover-color;
}
}
tr.tr-row-hover {
background: $table-hover-color;
}
th, td {
th,
td {
padding: $vertical-padding $horizontal-padding;
word-break: break-all;
}
&-row-hover {
background: rgb(227,242,253);
background: rgb(227, 242, 253);
}
&-scroll {
overflow: auto;
}
&-bordered {
table {
border: 1px solid #e9e9e9;
}
th {
border-bottom: 1px solid #e9e9e9;
}
th,
td {
border-right: 1px solid #e9e9e9;
}
}
&-header {
overflow: hidden;
background: $table-head-background-color;
@ -76,7 +87,7 @@ $table-move-in-color: $bg-color-base;
&-fixed-header &-body-inner {
height: 100%;
overflow: scroll;
overflow-y: hidden;
}
&-fixed-header &-scroll &-header {
@ -100,7 +111,7 @@ $table-move-in-color: $bg-color-base;
padding: $vertical-padding $horizontal-padding;
border-bottom: 1px solid $table-border-color;
}
&-footer &{
&-footer & {
margin: (-$vertical-padding) (-$horizontal-padding);
}
@ -115,7 +126,8 @@ $table-move-in-color: $bg-color-base;
&-expand-icon-col {
width: 10px;
}
&-row, &-expanded-row {
&-row,
&-expanded-row {
&-expand-icon {
cursor: pointer;
display: inline-block;
@ -132,15 +144,15 @@ $table-move-in-color: $bg-color-base;
visibility: hidden;
}
&-spaced:after {
content: '.'
content: ".";
}
&-expanded:after {
content: '-'
content: "-";
}
&-collapsed:after {
content: '+'
content: "+";
}
}
tr.u-table-expanded-row {
@ -148,7 +160,7 @@ $table-move-in-color: $bg-color-base;
&:hover {
background: #f7f7f7;
}
.u-table{
.u-table {
// padding: 0 40px 0 20px;
}
}
@ -174,13 +186,13 @@ $table-move-in-color: $bg-color-base;
&-prev-columns-page {
margin-right: 8px;
&:before {
content: '<';
content: "<";
}
}
&-next-columns-page {
float: right;
&:before {
content: '>';
content: ">";
}
}
@ -229,20 +241,18 @@ $table-move-in-color: $bg-color-base;
}
}
.u-table.bordered {
table {
border-collapse: collapse;
}
th, td {
th,
td {
border: 1px solid $table-border-color;
}
}
.move-enter, .move-appear {
.move-enter,
.move-appear {
opacity: 0;
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-duration: 2.5s;
@ -252,12 +262,13 @@ $table-move-in-color: $bg-color-base;
.move-leave {
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-duration: .5s;
animation-duration: 0.5s;
animation-fill-mode: both;
animation-play-state: paused;
}
.move-enter.move-enter-active, .move-appear.move-enter-active {
.move-enter.move-enter-active,
.move-appear.move-enter-active {
animation-name: moveLeftIn;
animation-play-state: running;
}
@ -279,10 +290,10 @@ $table-move-in-color: $bg-color-base;
transform: translateX(0);
opacity: 1;
}
80%{
80% {
background: $table-move-in-color;
}
100%{
100% {
background: transparent;
opacity: 1;
}
@ -301,20 +312,18 @@ $table-move-in-color: $bg-color-base;
}
}
.formItem-style{
.formItem-style {
height: unset;
min-height: unset;
padding: 0;
}
.errMessage-style{
.errMessage-style {
display: none;
border: none;
/* margin-top: 5px; */
/* margin-bottom: 5px; */
background: transparent;
color: #F22C1D;
color: #f22c1d;
/* padding-left: 12px; */
/* padding-right: 12px; */
margin: 0;
@ -417,24 +426,26 @@ $table-move-in-color: $bg-color-base;
.bee-table-column-sorter-up.on .uf-triangle-up {
color: #108ee9;
}
.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
-webkit-filter: none;
filter: none;
font-size: 12px;
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
-webkit-filter: none;
filter: none;
font-size: 12px;
}
.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
display: inline-block;
padding: 0;
font-size: 12px;
font-size: 8px\9;
-webkit-transform: scale(.66666667) rotate(0deg);
-ms-transform: scale(.66666667) rotate(0deg);
transform: scale(.66666667) rotate(0deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
line-height: 4px;
height: 4px;
color: #999;
-webkit-transition: all .3s;
transition: all .3s;
.bee-table-column-sorter .uf-triangle-down,
.bee-table-column-sorter .uf-triangle-up {
display: inline-block;
padding: 0;
font-size: 12px;
font-size: 8px\9;
-webkit-transform: scale(0.66666667) rotate(0deg);
-ms-transform: scale(0.66666667) rotate(0deg);
transform: scale(0.66666667) rotate(0deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
line-height: 4px;
height: 4px;
color: #999;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}