feat: 增加表格内容是否显示在一行

build/Table.css

@@ -47,7 +47,7 @@
     background: rgb(235, 236, 240); }
   .u-table th,
   .u-table td {
-    padding: 12px 16px;
+    padding: 12px 8px;
     word-break: break-all; }
     .u-table th.text-center,
     .u-table td.text-center {
@@ -88,7 +88,7 @@
     background: rgb(241, 242, 245);
     color: rgb(33, 33, 33); }
   .u-table.fixed-height td {
-    padding: 0px 16px; }
+    padding: 0px 8px; }
   .u-table-fixed-header .u-table-body {
     background: #fff;
     position: relative; }
@@ -106,17 +106,17 @@
     overflow-y: scroll;
     box-sizing: border-box; }
   .u-table-title {
-    padding: 12px 16px;
+    padding: 12px 8px;
     border-top: 1px solid rgb(193, 199, 208); }
   .u-table-content {
     position: relative; }
   .u-table-footer {
-    padding: 12px 16px;
+    padding: 12px 8px;
     border-bottom: 1px solid rgb(193, 199, 208); }
     .u-table-footer .u-table-scroll {
       overflow-x: hidden; }
   .u-table-footer .u-table {
-    margin: -12px -16px; }
+    margin: -12px -8px; }
   .u-table-placeholder {
     padding: 12px 8px;
     background: #fff;
@@ -585,3 +585,21 @@
 
 ::-webkit-scrollbar-track-piece {
   display: none; }
+
+.header-dispaly-in-row.u-table table {
+  table-layout: fixed; }
+
+.header-dispaly-in-row th {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  overflow: hidden; }
+
+.body-dispaly-in-row.u-table table {
+  table-layout: fixed; }
+
+.body-dispaly-in-row td {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  overflow: hidden; }

build/Table.js

@@ -156,6 +156,15 @@ var Table = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
+    _this.resize = function () {
+      (0, _utils.debounce)(_this.syncFixedTableRowHeight, 150);
+      _this.computeTableWidth();
+      var renderFlag = _this.state.renderFlag;
+      _this.setState({
+        renderFlag: !renderFlag
+      });
+    };
+
     _this.renderDragHideTable = function () {
       var _this$props = _this.props,
           columns = _this$props.columns,
@@ -270,7 +279,7 @@ var Table = function (_Component) {
     }
     if (this.columnManager.isAnyColumnsFixed()) {
       this.syncFixedTableRowHeight();
-      this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', (0, _utils.debounce)(this.syncFixedTableRowHeight, 150));
+      this.resizeEvent = (0, _addEventListener2["default"])(window, 'resize', this.resize);
     }
   };
 
@@ -785,7 +794,8 @@ var Table = function (_Component) {
         treeType: childrenColumn || this.treeType ? true : false,
         fixedIndex: fixedIndex + lazyCurrentIndex,
         rootIndex: rootIndex,
-        syncHover: props.syncHover
+        syncHover: props.syncHover,
+        bodyDisplayInRow: props.bodyDisplayInRow
       })));
       this.treeRowIndex++;
       var subVisible = visible && isRowExpanded;
@@ -1325,6 +1335,12 @@ var Table = function (_Component) {
     if (props.height) {
       className += ' fixed-height';
     }
+    if (props.bodyDisplayInRow) {
+      className += ' body-dispaly-in-row';
+    }
+    if (props.headerDisplayInRow) {
+      className += ' header-dispaly-in-row';
+    }
     var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
     var loading = props.loading;
     if (typeof loading === 'boolean') {

build/TableCell.js

@@ -73,7 +73,8 @@ var TableCell = function (_Component) {
         expandIcon = _props2.expandIcon,
         column = _props2.column,
         fixed = _props2.fixed,
-        showSum = _props2.showSum;
+        showSum = _props2.showSum,
+        bodyDisplayInRow = _props2.bodyDisplayInRow;
     var dataIndex = column.dataIndex,
         render = column.render;
     var _column$className = column.className,
@@ -83,7 +84,8 @@ var TableCell = function (_Component) {
     var text = _objectPath2["default"].get(record, dataIndex);
     var tdProps = void 0;
     var colSpan = void 0;
-    var rowSpan = void 0;
+    var rowSpan = void 0,
+        title = void 0;
 
     if (render && !showSum) {
       text = render(text, record, index);
@@ -114,13 +116,17 @@ var TableCell = function (_Component) {
     if (column.textAlign) {
       className = className + (' text-' + column.textAlign);
     }
+    if (typeof text == 'string' && bodyDisplayInRow) {
+      title = text;
+    }
     return _react2["default"].createElement(
       'td',
       {
         colSpan: colSpan,
         rowSpan: rowSpan,
         className: className,
-        onClick: this.handleClick
+        onClick: this.handleClick,
+        title: title
       },
       indentText,
       expandIcon,

build/TableRow.js

@@ -241,7 +241,8 @@ var TableRow = function (_Component) {
         indent = _props9.indent,
         indentSize = _props9.indentSize,
         isHiddenExpandIcon = _props9.isHiddenExpandIcon,
-        fixed = _props9.fixed;
+        fixed = _props9.fixed,
+        bodyDisplayInRow = _props9.bodyDisplayInRow;
 
     var showSum = false;
     var className = this.props.className;
@@ -288,7 +289,8 @@ var TableRow = function (_Component) {
         key: index + "_" + (columns[i].key || columns[i].dataIndex || i),
         fixed: fixed,
         showSum: showSum,
-        expandIcon: isColumnHaveExpandIcon ? expandIcon : null
+        expandIcon: isColumnHaveExpandIcon ? expandIcon : null,
+        bodyDisplayInRow: bodyDisplayInRow
       }));
     }
     var style = { height: height };

build/lib/multiSelect.js

@@ -97,7 +97,7 @@ function multiSelect(Table, Checkbox) {
       var count = 0;
       var disabledCount = 0;
       data.forEach(function (da) {
-        if (da._checked) {
+        if (da._checked && !da._disabled) {
           count++;
         }
         if (da._disabled) {
@@ -223,7 +223,7 @@ function multiSelect(Table, Checkbox) {
         key: "checkbox",
         dataIndex: "checkbox",
         fixed: "left",
-        width: 50,
+        width: 60,
         render: function render(text, record, index) {
           var attr = {};
           record._disabled ? attr.disabled = record._disabled : "";

dist/demo.css

@@ -8305,7 +8305,7 @@ ul {
     background: rgb(235, 236, 240); }
   .u-table th,
   .u-table td {
-    padding: 12px 16px;
+    padding: 12px 8px;
     word-break: break-all; }
     .u-table th.text-center,
     .u-table td.text-center {
@@ -8346,7 +8346,7 @@ ul {
     background: rgb(241, 242, 245);
     color: rgb(33, 33, 33); }
   .u-table.fixed-height td {
-    padding: 0px 16px; }
+    padding: 0px 8px; }
   .u-table-fixed-header .u-table-body {
     background: #fff;
     position: relative; }
@@ -8364,17 +8364,17 @@ ul {
     overflow-y: scroll;
     box-sizing: border-box; }
   .u-table-title {
-    padding: 12px 16px;
+    padding: 12px 8px;
     border-top: 1px solid rgb(193, 199, 208); }
   .u-table-content {
     position: relative; }
   .u-table-footer {
-    padding: 12px 16px;
+    padding: 12px 8px;
     border-bottom: 1px solid rgb(193, 199, 208); }
     .u-table-footer .u-table-scroll {
       overflow-x: hidden; }
   .u-table-footer .u-table {
-    margin: -12px -16px; }
+    margin: -12px -8px; }
   .u-table-placeholder {
     padding: 12px 8px;
     background: #fff;
@@ -8848,6 +8848,24 @@ ul {
 ::-webkit-scrollbar-track-piece {
   display: none; }
 
+.header-dispaly-in-row.u-table table {
+  table-layout: fixed; }
+
+.header-dispaly-in-row th {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  overflow: hidden; }
+
+.body-dispaly-in-row.u-table table {
+  table-layout: fixed; }
+
+.body-dispaly-in-row td {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  overflow: hidden; }
+
 .selected {
   background: #FFF7E7; }
 

docs/api.md

@@ -101,7 +101,8 @@ import 'bee-table/build/Table.css';
 | filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
 | filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 | textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
-
+| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
+| bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 
 
 ## 快捷键API
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "2.0.12",
+ "version": "2.0.13-beta.2",
  "description": "Table ui component for react",
  "keywords": [
   "react",

src/Table.js

@@ -231,9 +231,13 @@ class Table extends Component {
     }
   }
 
-  resize(){
+  resize = ()=>{
     debounce(this.syncFixedTableRowHeight, 150);
     this.computeTableWidth();
+    let renderFlag = this.state.renderFlag;
+    this.setState({
+      renderFlag: !renderFlag
+    });
   }
   computeTableWidth() {
     
@@ -652,6 +656,7 @@ class Table extends Component {
           fixedIndex={fixedIndex+lazyCurrentIndex}
           rootIndex = {rootIndex}
           syncHover = {props.syncHover}
+          bodyDisplayInRow = {props.bodyDisplayInRow}
         />
       );
       this.treeRowIndex++;
@@ -1193,6 +1198,12 @@ class Table extends Component {
     if(props.height){
       className += ' fixed-height';
     }
+    if(props.bodyDisplayInRow){
+      className += ' body-dispaly-in-row'
+    }
+    if(props.headerDisplayInRow){
+      className += ' header-dispaly-in-row'
+    }
     const isTableScroll = this.columnManager.isAnyColumnsFixed() ||
       props.scroll.x ||
       props.scroll.y;

src/Table.scss

@@ -10,7 +10,7 @@ $table-border-color: unquote("rgb(#{$table-border-color-base})");
 // $table-head-background-color: #f7f7f7;
 // $table-head-text-color: #666;
 $vertical-padding: 12px;
-$horizontal-padding: 16px;
+$horizontal-padding: 8px;
 // $table-border-color: #e9e9e9;
 
 $table-hover-color: #E7F2FC;
@@ -893,3 +893,32 @@ $icon-color:#505F79;
 ::-webkit-scrollbar-track-piece {
   display: none;
 }
+
+// 表格显示里面的内容显示在一行
+.header-dispaly-in-row{
+  &.u-table{
+    table{
+      table-layout: fixed;
+    }
+  }
+  th{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    overflow: hidden;
+  }
+}
+.body-dispaly-in-row{
+  &.u-table{
+    table{
+      table-layout: fixed;
+    }
+    
+  }
+  td{
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+    overflow: hidden;
+  }
+}

src/TableCell.js

@@ -30,14 +30,14 @@ class TableCell extends Component{
   }
   render() {
     const { record, indentSize, clsPrefix, indent,
-            index, expandIcon, column ,fixed,showSum} = this.props;
+            index, expandIcon, column ,fixed,showSum, bodyDisplayInRow} = this.props;
     const { dataIndex, render } = column;
     let {className = ''} = column;
 
     let text = objectPath.get(record, dataIndex);
     let tdProps;
     let colSpan;
-    let rowSpan;
+    let rowSpan,title;
     
     if (render && !showSum) {
       text = render(text, record, index);
@@ -71,12 +71,16 @@ class TableCell extends Component{
     if(column.textAlign){
       className =  className+` text-${column.textAlign}`;
     }
+    if(typeof text == 'string' && bodyDisplayInRow){
+      title = text
+    }
     return (
       <td
         colSpan={colSpan}
         rowSpan={rowSpan}
         className={className}
         onClick={this.handleClick}
+        title = {title}
       >
         {indentText}
         {expandIcon}

src/TableRow.js

@@ -164,7 +164,7 @@ class TableRow extends Component{
     const {
       clsPrefix, columns, record, height, visible, index,
       expandIconColumnIndex, expandIconAsCell, expanded, expandRowByClick,
-      expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed
+      expandable, onExpand, needIndentSpaced, indent, indentSize,isHiddenExpandIcon,fixed,bodyDisplayInRow
     } = this.props;
     let showSum = false;
     let { className } = this.props;
@@ -215,6 +215,7 @@ class TableRow extends Component{
           fixed= {fixed}
           showSum={showSum}
           expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
+          bodyDisplayInRow =  {bodyDisplayInRow}
         />
       );
     }