cloud-b2b 1.1.50 → 1.1.51

package/src/SuperTable2/SuperTable2.js

@@ -0,0 +1,600 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
+import Control, {getTitle} from '../Control';
+import {Table, Checkbox, Button, Icon, Switch} from 'antd';
+import SuperTableCell from './SuperTableCell';
+import fixed from '../SuperTable/fixed';
+import SuperToolbar from '../SuperToolbar';
+import variables from '../variables';
+import helper, {getObjectExclude} from '../helper';
+import DragSortRow from "../SuperTable/DragSortRow";
+
+const TypeEnum = [
+  'readonly',
+  'index',
+  'checkbox',
+  'text',
+  'number',
+  'select',     //存储value
+  'selectText', //存储title
+  'search',
+  'searchText',
+  'selectSearch', //多选下拉搜索
+  'date',
+  'button',
+  'custom',
+  'switch',
+  'textArea',
+  'link',
+  'toolbar',  //按钮组
+  'img',       //图片标题组 value为{src,title}时显示图片标题   为字符串时   只显示图片
+  'uploadImg',
+  'double'
+];
+
+/**
+ * key：标识所在列，在一个表格中必须唯一
+ * title：列的标题，type为checkbox时，title为空字符串时，表头才会显示为复选框
+ * type：嵌入的表单元素类型
+ * link: 是否为超链接，type未设置时，该属性才生效。为true表示内容来至items，为字符串表示超链接内容就是该字符串
+ * options: 对象(包含value和title)数组
+ * props：传递参数给被嵌入的组件
+ * width: 嵌入的组件的宽度，默认值为100
+ * align：对齐方式，index默认center，其他类型默认为left
+ * showAdd: 表头是否显示+号，默认为false，加号会触发onAdd事件
+ * hide: 为true时隐藏该列
+ */
+const ColType = {
+  key: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(TypeEnum),
+  link: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  align: PropTypes.oneOf(['left', 'center', 'right']),
+  width: PropTypes.number,
+  options: PropTypes.array,
+  showAdd: PropTypes.any,
+  hide: PropTypes.bool,
+  props: PropTypes.any
+};
+
+/**
+ * onCheck：点击复选框时触发，原型func(rowIndex, keyName, checked)
+ * onContentChange: 输入框内容改变时触发，原型为function(rowIndex, keyName, value)
+ * onBlur: 输入框失去焦点时触发，原型为function(rowIndex, keyName, value)
+ * onSearch：search组件输入内容时触发，原型为function(rowIndex, keyName, value, col)
+ * onLink: 点击超链接时触发，原型为function(keyName, rowIndex, item)
+ * onAdd：点击+号时触发，原型为function(keyName)
+ * onRenderCustom：(废弃)用于渲染type为custom类型的单元格，原型为function(rowIndex, keyName, value，props)
+ * onToolbar:点击表格列按钮组时触发，原型为function(按钮组列的key,rowIndex,该行数据的值,按钮key);
+ * onDoubleClick: 双击单元格触发（只针对于type类型为空的情况下）
+ */
+const CallbackType = {
+  onExitValid: PropTypes.func,
+  onCheck: PropTypes.func,
+  onContentChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onSearch: PropTypes.func,
+  onLink: PropTypes.func,
+  onAdd: PropTypes.func,
+  onRenderCustom: PropTypes.func,
+  onToolbar:PropTypes.func,
+  onDoubleClick:PropTypes.func,
+  onTableFileChange:PropTypes.func,
+  buildSuperUploadProps: PropTypes.func, //构建type===uploadImg时，SuperUpload组件需要的公共属性函数，已在项目公共文件state.js中提供，可直接引用
+  onImgTileClick:PropTypes.func, //点击img类型标题触发事件
+  onMoveRow: PropTypes.func
+};
+
+/**
+ * base[可选]：序号的开始数字，所有回调函数中的序号值都会加上这个值，默认值为0
+ * isEmphasized: [可选]，是否强调，行字体加粗显示， 除了isEmphasized设置为true之外，加粗行数据里要设置__isEmphasized为true
+ */
+class SuperTable2 extends React.Component {
+  static propTypes = {
+    cols: PropTypes.arrayOf(PropTypes.shape(ColType)).isRequired,
+    items: PropTypes.array.isRequired,
+    base: PropTypes.number,
+    options: PropTypes.object,
+    valid: PropTypes.bool,
+    readonly: PropTypes.bool,
+    style: PropTypes.object,
+    maxHeight: PropTypes.string,
+    emptyText: PropTypes.string,
+    footer: PropTypes.func,
+    callback: PropTypes.shape(CallbackType),
+    isEmphasized: PropTypes.bool,
+    dragSort: PropTypes.bool,
+  };
+
+  onSwitch = (key, rowIndex) => (value) => {
+    const {onContentChange} = this.props.callback || {};
+    onContentChange && onContentChange(this.getIndex(rowIndex), key, value);
+  };
+
+  onCheck = (key, rowIndex) => (e) => {
+    const {onCheck} = this.props.callback || {};
+    onCheck && onCheck(this.getIndex(rowIndex), key, e.target.checked);
+  };
+
+  onChange = (key, rowIndex) => (value) => {
+    const {onContentChange} = this.props.callback || {};
+    this.closeValid();
+    onContentChange && onContentChange(this.getIndex(rowIndex), key, value);
+  };
+  onDoubleChange1 = (key, rowIndex) => (doublekey,value) => {
+    const {onContentChange} = this.props.callback || {};
+    this.closeValid();
+    onContentChange && onContentChange(this.getIndex(rowIndex), doublekey, value);
+  };
+
+  onSearch = (key, rowIndex, config) => (value) => {
+    const {onSearch} = this.props.callback || {};
+    onSearch && onSearch(this.getIndex(rowIndex), key, value, config);
+  };
+
+  onAdd = (key) => () => {
+    const {onAdd} = this.props.callback || {};
+    onAdd && onAdd(key);
+  };
+
+  onRowAdd = (key, index) => () => {
+    const {onLink} = this.props.callback || {};
+    onLink && onLink(key, index, this.props.items[index]);
+  };
+
+  onBlur = (key, rowIndex) => (value) => {
+    const {onBlur} = this.props.callback || {};
+    this.closeValid();
+    onBlur && onBlur(this.getIndex(rowIndex), key, value);
+  };
+
+  onDoubleClick = (key, value) => () => {
+    const {onDoubleClick} = this.props.callback || {};
+    onDoubleClick && onDoubleClick(key, value);
+  };
+
+  onImgTileClick = (col, value, rowIndex) => () => {
+    const {onImgTileClick} = this.props.callback || {};
+    onImgTileClick && onImgTileClick(col, value, rowIndex);
+  };
+
+  onMoveRow = (dragIndex, targetIndex) => {
+    const {onMoveRow} = this.props.callback || {};
+    onMoveRow && onMoveRow(dragIndex, targetIndex);
+  };
+
+  closeValid = () => {
+    const {valid, callback={}} = this.props;
+    valid && callback.onExitValid();
+  };
+
+  getOptions = (key, colOptions, index) => {
+    const {options} = this.props.items[index];
+    const {options: options2} = this.props;
+    if (options && Array.isArray(options[key])) {
+      return options[key];
+    } else if (options2 && Array.isArray(options2[key])) {
+      return options2[key];
+    } else {
+      return colOptions;
+    }
+  };
+
+  validField = (required, value) => {
+    if (!this.props.valid || this.error || !required || value) {
+      return false;
+    } else if (typeof value === 'number') {
+      return false;
+    } else {
+      this.error = true;
+      return true;
+    }
+  };
+
+  renderEditableCell = (config, value, index) => {
+    const {key, type, options, props, required, width, showRowAdd} = config;
+    const {readonly, isReadonly=[], isRequired=[],_extraProps={}} = this.props.items[index];
+    const cellProps = {
+      value, width,
+      items:this.props.items[index],
+      type: readonly || (Array.isArray(isReadonly) && isReadonly.includes(key)) || this.props.readonly  ? 'readonly' : type,
+      props: readonly ? {} : props,
+      error: this.validField(required, value),
+      options: this.getOptions(key, options, index),
+      onChange: this.onChange(key, index),
+      onSearch: this.onSearch(key, index, config),
+      onBlur: this.onBlur(key, index)
+    };
+    if(showRowAdd && Array.isArray(isRequired) && isRequired.includes(key)){
+      cellProps.error = this.validField(true, value);
+      cellProps.props = {...cellProps.props, ..._extraProps};
+      return (<div>
+        <span style={{color: 'red', display: 'inline-block'}}>*</span>
+        <span style={{marginLeft: '5px', display: 'inline-block', width: 'calc(100% - 12px)'}}>
+          <SuperTableCell {...cellProps} />
+        </span>
+        <span style={{color: '#2196f3', verticalAlign: 'super'}}>
+          <Icon type='plus-circle-o' role='add' onClick={this.onRowAdd(key, index)}/>
+        </span>
+      </div>);
+    }
+    if(Array.isArray(isRequired) && isRequired.includes(key)){
+      cellProps.error = this.validField(true, value);
+      cellProps.props = {...cellProps.props, ..._extraProps};
+      return (<div>
+        <span style={{color: 'red', display: 'inline-block'}}>*</span>
+        <span style={{marginLeft: '5px', display: 'inline-block', width: 'calc(100% - 12px)'}}>
+          <SuperTableCell {...cellProps} />
+        </span>
+      </div>);
+    }
+    if(showRowAdd){
+      return (<div style={{clear: 'both'}}>
+        <span style={{marginRight: '5px', float: 'left'}}><SuperTableCell {...cellProps} /></span>
+        <span style={{color: '#2196f3', verticalAlign: 'middle'}}>
+          <Icon type='plus-circle-o' role='add' onClick={this.onRowAdd(key, index)}/>
+        </span>
+      </div>);
+    }
+    return <SuperTableCell {...cellProps} />;
+  };
+  renderDoubleEditableCell = (config, value, index) => {
+    const {key, type, options, props, required, width, showRowAdd} = config;
+    const {readonly, isReadonly=[], isRequired=[],_extraProps={}} = this.props.items[index];
+    const cellProps = {
+      value, width,
+      items:this.props.items[index],
+      type: readonly || (Array.isArray(isReadonly) && isReadonly.includes(key)) || this.props.readonly  ? 'readonly' : type,
+      props: readonly ? {} : props,
+      error: this.validField(required, value),
+      options: this.getOptions(key, options, index),
+      onChange: this.onDoubleChange1(key, index),
+      onSearch: this.onSearch(key, index, config),
+      onBlur: this.onBlur(key, index)
+    };
+    return <SuperTableCell {...cellProps} />;
+  };
+  renderLinkCell = (col, value, record, index) => {
+    if (col.link === 'list') {
+      const list = value && Array.isArray(value) ? value : [];
+      return (
+          <div style={{ whiteSpace: 'pre-wrap' }}>
+            {list.map((item2, index2) => {
+              const split = index2 === list.length-1 ? '' : ',';
+              const onClick = () => {
+                const {onLink} = this.props.callback || {};
+                onLink && onLink(col.key, index, item2);
+              };
+              return <a key={index2} onClick={onClick}>{`${item2[col.linkTitleKey]}${split}`}</a>;
+            })}
+          </div>
+      )
+    } else {
+      const title = typeof col.link === 'string' ? col.link : value;
+      const onClick = () => {
+        const {onLink} = this.props.callback || {};
+        onLink && onLink(col.key, index, record);
+      };
+      return <a style={{whiteSpace:'normal',wordBreak:"break-all"}} onClick={onClick}>{title}</a>;
+    }
+  };
+
+  getIndex = (index) => {
+    return (this.props.base || 0) + index;
+  };
+
+  getCellRender = (col) => (value, record, index) => {
+    const realType = record._isEdit === true && this.canReadonly(col.type) ? col.editType : col.type;
+    if (!realType) {
+      return (<div onDoubleClick={this.onDoubleClick(col.key, record.key)}
+                   style={{minHeight:'20px',minWidth:'100px',maxWidth:`${col.width - 16}px`,
+                     color: col.isNeedShow ? '#1890ff' :  '',
+                     overflow:'hidden',textOverflow:'ellipsis', display:'-webkit-box', WebkitLineClamp: 2,
+                     WebkitBoxOrient:"vertical",whiteSpace:'break-spaces'}}
+                   title={value}>{value}</div>)
+    }
+    switch (realType) {
+      case 'checkbox':
+        return <Checkbox onChange={this.onCheck(col.key, record.key)} checked={value || false}/>;
+      case 'index':
+        return this.getIndex(index) + 1;
+      case 'link':
+        return this.renderLinkCell(col, value, record, record.key);
+      case 'button':
+        const onClick = this.props.callback.onLink ? this.props.callback.onLink.bind(null, col.key, record.key, record) : undefined;
+        if (col.icon === 'add') {
+          return <Button onClick={onClick} type="primary" shape="circle" size='small' ghost icon='plus'/>;
+        } else {
+          return <Button onClick={onClick} size='small' ghost type={col.bsStyle}>{record[col.key] || col.typeRelated}</Button>;
+        }
+      case 'switch':
+        return typeof value === 'string' ? <div>{value}</div> :
+          <Switch checkedChildren={col.props.checkedChildren || ''} unCheckedChildren={col.props.unCheckedChildren || ''}
+                  onChange={this.onSwitch(col.key, record.key)} size='default' checked={typeof(value) === 'number' ? Boolean(value) : value || false} disabled={!(record._isEdit === true)}/>;
+      case 'custom':
+        return this.props.callback.onRenderCustom(record.key, col.key, value, col.props, col);
+      case 'toolbar': //showByKey为true时，每条数据中与按钮key相同的属性值决定按钮是否显示，建议key用下划线开始命名，避免与后台数据冲突
+        const props = {
+          onClick:this.props.callback.onToolbar ? this.props.callback.onToolbar.bind(null, col.key, record.key, record) : undefined,
+          buttons: col.props.showByKey ? col.props.buttons.filter(item =>record[item.key] === true) : col.props.buttons.filter(item => {return item.defaultShow === !record._isEdit})
+          };
+        return <SuperToolbar {...props} />;
+      case 'img':
+        return value ? ( typeof(value) === 'string' ?
+          <img src={value.includes('http') ? value : `${window.location.origin}/api/proxy/file-center-service/${value}`} style={{width:'80px', height: '80px'}}/> :
+            ( <div role={'imgBox'} style={{maxWidth:`${col.width}px`}}>
+              <img src={ value.img === '' ?'/productDefault.png' : value.img.includes('http') ? value.img : `${window.location.origin}/api/proxy/file-center-service/${value.img}`}
+                     onError={(e) => e.target.src = '/productDefault.png'}
+                     style={{width:'80px', height: '80px'}}/>
+                <div style={{display:'inline-block'}}>
+                  <span style={{display:'block',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis', width:'100px'}} onClick={this.onImgTileClick(col,record,index)}>{value.title}</span>
+                  {helper.isEmpty2(value.remark) ? null : <span style={{display:'block',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis', width:'100px',color:'#333'}}>{value.remark}</span> }
+                </div>
+              </div>
+            )
+        ) : (<div></div>)
+      case 'uploadImg':
+        const commonProps = this.props.callback.buildSuperUploadProps ? this.props.callback.buildSuperUploadProps() : {};
+        const uploadProps = {
+          onFileChange:this.props.callback.onTableFileChange ? this.props.callback.onTableFileChange.bind(null, col.key, index) : undefined,
+          type:col.type,...col.props,
+          ...this.props,
+          ...commonProps,
+          value:this.props.items[index][col.key]
+        };
+        return <Control {...uploadProps} />
+      case 'double':
+        return this.renderDoubleEditableCell({...col,type:realType}, value, record.key);
+      default:
+        return this.renderEditableCell({...col,type:realType}, value, record.key);
+    }
+  };
+
+  getCheckedStatus = (key) => {
+    let has = false, not = false;
+    const {items} = this.props;
+    for (const item of items) {
+      item[key] ? (has = true) : (not = true);
+    }
+    return {checked: has && !not, indeterminate: has && not};
+  };
+
+  toAdd = (key, showAdd) => {
+    if (showAdd) {
+      const onClick = this.onAdd(key);
+      return <Icon type='plus-circle-o' role='add' onClick={onClick} />;
+    } else {
+      return null;
+    }
+  };
+
+  getColumnTitle = ({required, title, type, key, showAdd}) => {
+    if (type === 'checkbox') {
+      const status = this.getCheckedStatus(key);
+      return <Checkbox onChange={this.onCheck(key, -1)} {...status} />;
+    } else {
+      const className = required ? 'ant-form-item-required' : '';
+      return (
+        <span className={className}>
+          {title}
+          {this.toAdd(key, showAdd)}
+        </span>
+      );
+    }
+  };
+
+  getColumnClassName = ({type, align}) => {
+    if (type === 'index' || type === 'checkbox') {
+      return 'ant-table-selection-column';
+    } else {
+      return align ? variables('SuperTable2')[align] : '';
+    }
+  };
+
+  canReadonly = (type) => {
+    return !['index', 'checkbox', 'link', 'button', 'switch', 'custom', 'img','toolbar','uploadImg','double'].includes(type);
+  };
+
+  getColumns = (cols) => {
+    const readonly = this.props.readonly;
+    return cols.filter(col => !col.hide).map(({...col},index) => {
+      col.className = this.getColumnClassName(col);
+      col.title = this.getColumnTitle(col);
+      col.dataIndex = col.key;
+      col.width = col.width ? col.width : (['index','checked'].includes(col.key) ? 70 : (col.type === 'img' ? 200 : 120));
+      // const {props = {}} =
+      // const {edit = false} = props
+      // if (!(readonly || col.type === 'readonly') || !this.canReadonly(col.type)) {
+        // if ( !edit && ['text', 'number', 'select', 'date', 'search', 'readonly', 'textArea', 'selectSearch'].includes(col.type)){
+        //   return col
+        // }
+      // }
+        col.readonly = readonly;
+        col.render = this.getCellRender(col);
+      if (col.link) {
+        col.type = 'link';
+        col.render = this.getCellRender(col);
+      }else if (col.showPrice || col.decimalPlaces){
+        col.render = (text, record, index) => {
+          if (col.showPrice && text) {
+            text=helper.toThousands(text,col.decimalPlaces?col.decimalPlaces:2,)
+            return `￥${text}`
+          }else{
+            return text?`￥${text.toFixed(2)}`:text
+          }
+        }
+      }
+      return col;
+    });
+  };
+
+  getDataSource = (items, cols) => {
+    return items.map((item, index) => {
+      return cols.reduce((result, {key, type, options}) => {
+        if ((!this.props.readonly && type && type !== 'readonly' &&
+          (!item.isReadonly || (Array.isArray(item.isReadonly) && !item.isReadonly.includes(key)))) || ['img', 'switch', 'custom', 'img','toolbar','uploadImg'].includes(type)) {
+          result[key] = item[key];
+        } else {
+          result[key] = getTitle(item[key], options);
+        }
+        return result;
+      }, {...item, key: index, disabled: item.isCanConfigHide});
+    });
+  };
+
+  getPropsByCheckbox = () => {
+    const {items, isEmphasized=false} = this.props;
+    const rowClassName = (record) => {
+      if (isEmphasized && items[record.key].__isEmphasized) {
+        return items[record.key].checked ? variables('SuperTable2').emphasizedSelectRow : variables('SuperTable2').emphasizedUnselectRow;
+      }
+      return items[record.key].checked ? variables('SuperTable2').select : '';
+    };
+    return {rowClassName};
+  };
+
+  getSelectedRowKeys = (items) => {
+    return items.reduce((result, item, index) => {
+      item.checked && result.push(index);
+      return result;
+    }, []);
+  };
+
+  getPropsByCheckbox2 = (items) => {
+    const {checkbox=true, radio=false, isolation, checkedRows=[],isEmphasized=false, isWeaken=true} = this.props;
+    const rowClassName1 = (record) => {
+      if (items[record.key].__total) return variables('SuperTable').totalRow;
+      if(items[record.key].__warningRow) return variables('SuperTable').warningRow;
+      return checkedRows.includes(record.key) ? variables('SuperTable').select : '';
+    };
+    const rowClassName2 = (record) => {
+      if (items[record.key].__total) return variables('SuperTable').totalRow;
+      if(items[record.key].__warningRow) return variables('SuperTable').warningRow;
+      if (isEmphasized && items[record.key].__isEmphasized) {
+        return items[record.key].checked ? variables('SuperTable').emphasizedSelectRow : variables('SuperTable').emphasizedUnselectRow;
+      }
+      if (isWeaken && items[record.key].__isWeaken) {
+        return items[record.key].checked ? variables('SuperTable').weakenedSelectRow : variables('SuperTable').weakenedUnselectRow;
+      }
+      return items[record.key].checked ? variables('SuperTable').select : '';
+    };
+    if (checkbox) {
+      if (radio) {
+        return {
+          rowClassName: rowClassName1,
+          onRowClick: this.onRadioRowClick,
+          rowSelection: {
+            type: 'radio',
+            selectedRowKeys: checkedRows,
+            onChange: this.onRadioChange
+          }
+        }
+      } else if (isolation) {
+        return {
+          rowClassName: rowClassName1,
+          onRowClick: this.onRowClick,
+          rowSelection: {
+            selectedRowKeys: checkedRows,
+            onChange: this.onCheckChange,
+            getCheckboxProps: (record) => {
+              const checked = checkedRows.includes(record.key);
+              return {
+                checked,
+                disabled: items[record.key].__isWeaken,
+                style: items[record.key].__total ? {display: 'none'} : {}
+              }
+            },
+          }
+        }
+      } else {
+        return {
+          rowClassName: rowClassName2,
+          onRowClick: this.onRowClick,
+          rowSelection: {
+            selectedRowKeys: this.getSelectedRowKeys(items),
+            onChange: this.onChange,
+            getCheckboxProps: (record) => {
+              const checked = isWeaken && items[record.key].__isWeaken ? false : !!record.checked;
+              return {
+                checked,
+                disabled: items[record.key].__isWeaken,
+                style: items[record.key].__total ? {display: 'none'} : {}
+              }
+            },
+          }
+        }
+      }
+    } else {
+      return {
+        rowClassName: rowClassName2,
+      };
+    }
+  };
+
+  getRowPropsForDrag = () => {
+    return (record, index) => {
+      return {
+        index,
+        onMoveRow: this.onMoveRow
+      };
+    }
+  };
+
+  getRowProps = (onRowClick) => {
+    return (record) => {
+      return {
+        onClick: () => onRowClick && onRowClick(record),
+        onDoubleClick: () => this.onDoubleClick(record)
+      };
+    };
+  };
+
+  getProps = () => {
+    const {cols, items, style={},footer=null, pagination = false,dragSort, isEmphasized=false, maxHeight,expandedRowRender=undefined,onExpand=undefined} = this.props;
+    const widthX = cols.filter(col => !col.hide).reduce((width,item) => {
+      return width += item.width ? item.width : ['index','checked'].includes(item.key) ? 70 : item.type === 'img' ? 200 : 120;
+    },0);
+    const scrollProps = !helper.isEmpty2(expandedRowRender) ? {expandedRowRender} : {scroll: {x: cols.some(item => !(helper.isEmpty2(item.fixed))) ? widthX : true, y: maxHeight}}
+    const {onRowClick, ...extraProps} = this.getPropsByCheckbox2(items);
+    return {
+      className: !isEmphasized ? variables('SuperTable2') : variables('SuperTable2').noTransition,
+      columns: this.getColumns(cols),
+      dataSource: this.getDataSource(items, cols),
+      style: Object.assign({}, {whiteSpace: 'nowrap'}, style),
+      size: 'small',
+      pagination,
+      footer,
+      onRow: dragSort ? this.getRowPropsForDrag(): this.getRowProps(onRowClick),
+      components: dragSort ? {body: {row: DragSortRow}} : {},
+      locale: this.props.emptyText ? {emptyText: this.props.emptyText} : null,
+      ...this.getPropsByCheckbox(),
+      onExpand,
+      ...scrollProps
+    };
+  };
+
+  setScroll = () => {
+    if (this.props.maxHeight && this.props.items.length) {
+      const root = ReactDOM.findDOMNode(this);
+      const container = root.getElementsByClassName('ant-table-body')[0];
+      const header = root.getElementsByClassName('ant-table-thead')[0];
+      fixed(container, header, this.props.maxHeight);
+    }
+  };
+
+  componentDidMount() {
+    this.setScroll();
+  }
+
+  componentDidUpdate() {
+    this.setScroll();
+  }
+
+  render() {
+    this.error = false;
+    return <Table {...this.getProps()} key={this.props.items.length} />;
+  }
+}
+
+export default SuperTable2;