[NEW] add new prop fixHeaderToTop for scroll check

README.md

@@ -141,6 +141,7 @@ $ npm start
 |defaultRowGroupActiveKeys    |number/array             |optional  |undefined       |11.1.0    |行分组默认展开设置，可设置指定分组展开或者设置总展开分组数
 |onRowGroupOpenChange|function(activeKeys, key) |optional  |undefined   |11.1.0   |行分组展开状态变更回调
 |needCheckRightFixed |boolean             |optional  |false       | 11.1.0     |是否开启右固定列检查，用于解决可能产生两个右固定列的场景
+|fixHeaderToTop      |boolean             |optional  |false       | 11.2.0     |是否显示一个固定顶部的header，用于外部在处理滚动等状态下的标题贴顶功能。存在固定列时该配置无效。
 
 
 ### 折叠展开专用

demo/GridDemo.jsx

@@ -29,6 +29,8 @@ class Demo extends React.Component {
     this.state = {
       text: 1,
       showTable: true,
+      fixHeaderToTop: false,
+      fixHeaderToTop1: false,
       columns: [
         {
           dataKey: 'firstName',
@@ -111,6 +113,20 @@ class Demo extends React.Component {
     });
   }
 
+  componentDidMount() {
+    const table = this.table.getDom()
+    const table1 = this.table1.getDom()
+    document.addEventListener('scroll', (e) => {
+      const tablePos = table.getBoundingClientRect()
+      const tablePos1 = table1.getBoundingClientRect()
+      const isShow = (pos) => {return (pos.top < -56) && (-pos.top < pos.height - 56)}
+      this.setState({
+        fixHeaderToTop: isShow(tablePos),
+        fixHeaderToTop1: isShow(tablePos1)
+      })
+    })
+  }
+
   render() {
     const me = this;
     // 通过 rowSelection 对象表明需要行选择
@@ -131,6 +147,7 @@ class Demo extends React.Component {
         del: () => { },
       },
       columnResizeable: true,
+      fixHeaderToTop: this.state.fixHeaderToTop,
       toggleSubCompOnRowClick: true,
       // width: 800,
       // className: 'kuma-uxtable-split-line',
@@ -361,6 +378,230 @@ class Demo extends React.Component {
         {me.state.showTable
           ? <Table {...renderProps} ref={function saveRef(c) { me.table = c; }} />
           : null}
+        {me.state.showTable
+          ? <Table {...{
+            actionColumn: {
+              edit: () => { },
+              del: () => { },
+            },
+            columnResizeable: true,
+            fixHeaderToTop: this.state.fixHeaderToTop1,
+            toggleSubCompOnRowClick: true,
+            // width: 800,
+            // className: 'kuma-uxtable-split-line',
+            className: 'kuma-uxtable-border-line',
+            pagerSizeOptions: [5, 10, 15, 20],
+            rowSelection,
+            // locale:'en-us',
+            showColumnPicker: true,
+            showColumnPickerCheckAll: true,
+            useListActionBar: true,
+            actionBar: {
+              className: 'my-list-action-bar',
+              // 是否显示全选
+              showSelectAll: true,
+              // 按钮配置
+              buttons: [
+                {
+                  title: 'Action Button',
+                  render() {
+                    return (
+                      <Button type={'primary'}>切换子表格状态</Button>
+                    )
+                  },
+                  keepActiveInCustomView: false,
+                  callback: () => {
+                    this.forceUpdate();
+                    console.log(me.table.getData());
+                    me.table.toggleSubComp(me.table.getData().data.datas);
+                  },
+                },
+                {
+                  title: '按钮',
+                  keepActiveInCustomView: false,
+                  // size: 'large',
+                  type: 'primary',
+                  // className: 'xxxxx',
+                  callback: () => {
+                    me.table.selectAll(true);
+                  }
+                }
+              ],
+              // 文案提示
+              actionBarTip: '已经为您找到记录123条',
+              // 自定义内容
+              customBarItem: {
+                render() {
+                  return (
+                    <p style={{color: 'red'}} onClick={(e) => {console.log(e)}}>自定义内容</p>
+                  )
+                }
+              },
+              // 行排序
+              rowOrder: {
+                iconName: 'paixu-jiangxu',
+                // keepActiveInCustomView: true,
+                defaultValue: {
+                  text: '排序方式一',
+                  value: '123'
+                },
+                items: [
+                  {
+                    text: '排序方式一',
+                    value: '123'
+                  },
+                  {
+                    text: '排序方式二',
+                    value: '456'
+                  }
+                ],
+                onChange(data) {
+                  console.log(data)
+                }
+              },
+              // 列排序
+              columnsOrder: {
+                iconName: 'huxiangguanzhu',
+                // keepActiveInCustomView: true,
+                title: '列排序',
+                includeActionColumn: false,  // 优先级低于fixed和rightFixed
+                onChange(dragInfo, data) {
+                  console.log(data)
+                }
+              },
+              // 列选择
+              columnsPicker: {
+                iconName: 'zidingyilie',
+                title: '自定义列',
+                keepActiveInCustomView: false,
+                setPickerGroups(columns) {
+                  return [
+                    {
+                      title: '分组1',
+                      columns: columns.filter((item, index) => {return index >= 1})
+                    },
+                    {
+                      title: '分组2',
+                      columns: columns.filter((item, index) => {return index <= 0})
+                    }
+                  ]
+                },
+                onChange(data) {
+                  console.log(data)
+                }
+              },
+              // 自定义视图，支持返回promise和component
+              customView: {
+                render(data, currentPage) {
+                  console.log(data, currentPage);
+                  // return (
+                  //   <Test name={'自定义的View'}/>
+                  // )
+                  return new Promise(function(resolve) {
+                    setTimeout(() => {
+                      resolve(<Test name={'自定义的View'}/>)
+                    })
+                  })
+                }
+              },
+              // 是否显示翻页器
+              showMiniPager: true,
+              search: {
+                // placeholder: '请输入搜索关键字',
+                onSearch() {
+                  console.log(234234)
+                }
+              },
+              // 在自定义视图下移出翻页器
+              removePagerInCustomView: true,
+              linkBar: [
+                {
+                  title: '修改columns',
+                  callback: () => {
+                    this.setState({
+                      columns: this.state.columns.filter(item => {
+                        return item.title === 'LastName'
+                          || item.title === 'Email'
+                          || item.title === '操作1'
+                      })
+                    })
+                  },
+                },
+                {
+                  title: '操作外链二',
+                  callback: () => {
+                  },
+                },
+              ],
+            },
+            onSearch: (searchTxt) => {
+              console.log(searchTxt);
+            },
+            onOrder: (column, orderType) => {
+              console.log(column, orderType);
+            },
+            onPagerChange: (current, pageSize) => {
+              console.log(current, pageSize);
+            },
+            showSearch: false,
+            fetchUrl,
+            beforeFetch: (data, from, config) => {
+              console.log(data, from, config);
+              return data;
+            },
+            // height: 400,
+            // addRowClassName() {
+            //   return 'multiline';
+            // },
+            rowSelector: 'checkboxSelector',
+            needCheckRightFixed: true,
+            leftFixedMaxWidth: 900,
+            // size: 'small',
+            // rowSelection,
+            onColumnPick: (columns) => {
+              console.log(columns);
+            },
+          }} jsxcolumns={[
+            {
+              dataKey: 'firstName',
+              title: <span>自定义列头</span>,
+              // fixed: true,
+              width: '15%',
+              textOverflow: 'ellipse',
+              filters: [{
+                text: 'Joe',
+                value: 'Joe',
+              }, {
+                text: 'Jimmmmmmmmmmmmmmmmmmmmmmmmmmmmm',
+                value: 'Jim',
+              }, {
+                text: 'Submenu',
+                value: 'Submenu',
+                children: [{
+                  text: 'Green',
+                  value: 'Green',
+                }, {
+                  text: 'Black',
+                  value: 'Black',
+                }],
+              }],
+              message: '这是一个提示',
+              ordered: true,
+            },
+
+            {
+              dataKey: 'lastName',
+              title: '自定义猎头',
+              message: 'nihao',
+              isDisable: function() {
+                return true
+              },
+              // fixed: true,
+              // rightFixed: true
+              width: '25%',
+            }
+          ]} ref={function saveRef(c) { me.table1 = c; }} />
+          : null}
         <Button
           onClick={() => {
             me.table.fetchData();

src/Header/HeaderCell.jsx

@@ -264,7 +264,7 @@ class HeaderCell extends React.Component {
   render() {
     const me = this;
     const {
-      renderModel, prefixCls, column, index, hasGroup, last, tablePrefixCls
+      renderModel, prefixCls, column, index, hasGroup, last, tablePrefixCls, isFixedHeader
     } = me.props;
     const rowSelectorInTreeMode = (['checkboxSelector', 'radioSelector'].indexOf(column.type) !== -1)
       && (renderModel === 'tree');
@@ -341,7 +341,7 @@ class HeaderCell extends React.Component {
         {v}
         {me.renderOrderIcon(column)}
         {me.renderFilterIcon(column)}
-        <MessageIcon message={column.message} prefixCls={`${prefixCls}-msg`} />
+        <MessageIcon message={column.message} prefixCls={`${prefixCls}-msg`} isFixedHeader={isFixedHeader} />
         {
 
           needResize

src/Header/MessageIcon.jsx

@@ -33,7 +33,7 @@ const MessageIcon = (props) => {
           {getMessage(props.message)}
         </div>
       )}
-      placement="top"
+      placement={props.isFixedHeader ? 'bottom' : 'top'}
     >
       <Icon usei name="xinxitishicopy" className={`${props.prefixCls}-icon`} />
     </Tooltip>

src/Header/index.jsx

@@ -107,7 +107,8 @@ class Header extends React.Component {
       filterColumns,
       tablePrefixCls,
       columnResizeable,
-      handleColumnResize
+      handleColumnResize,
+      isFixedHeader
     } = me.props;
     const cellProps = {
       column: item,
@@ -122,6 +123,7 @@ class Header extends React.Component {
       filterSelectedKeys: filterColumns[item.dataKey],
       checkStatus,
       tablePrefixCls,
+      isFixedHeader,
       ref: (c) => { if (Header.isFixedColumn(item)) { this[`fixedCell${index}`] = c; } },
       onCheckboxChange: (e) => { this.handleCheckBoxChange(e); },
       onColumnOrder: () => { this.handleColumnOrder(item); },
@@ -254,6 +256,7 @@ Header.propTypes = {
   prefixCls: PropTypes.string,
   onColumnFilter: PropTypes.func,
   filterColumns: PropTypes.object,
+  isFixedHeader: PropTypes.bool
 };
 
 Header.defaultProps = {
@@ -262,6 +265,7 @@ Header.defaultProps = {
   prefixCls: 'kuma-uxtable-header',
   onColumnFilter: () => {},
   filterColumns: {},
+  isFixedHeader: false
 };
 
 export default Header;

src/Table.jsx

@@ -1155,7 +1155,7 @@ class Table extends React.Component {
     );
   }
 
-  renderHeader(renderHeaderProps, fixedColumn) {
+  renderHeader(renderHeaderProps, fixedColumn, isFixedHeader) {
     const { prefixCls, showHeader } = this.props;
     if (!showHeader) {
       return null;
@@ -1167,6 +1167,7 @@ class Table extends React.Component {
           fixedColumn={fixedColumn}
           ref={util.saveRef(`header${upperFirst(fixedColumn)}`, this)}
           onScroll={this.handleHeaderScroll}
+          isFixedHeader={isFixedHeader}
         />
       </div>
     );
@@ -1510,6 +1511,22 @@ class Table extends React.Component {
           style={style}
           ref={util.saveRef('root', this)}
         >
+          {
+            props.fixHeaderToTop && !util.hasFixColumn(props) ?
+              <div
+                ref={c => this.extraHeader = c}
+                style={{
+                  position: 'fixed',
+                  width: props.width && props.width !== 'auto' ? props.width : '100%',
+                  zIndex: '1000' /*n eed under tip or popup */,
+                  background: '#fff',
+                  top: 0,
+                  borderLeft: '1px solid rgba(0,0,0,0)'
+                }}
+              >
+                {this.renderHeader(renderHeaderProps, 'scroll', true) }
+              </div> : null
+          }
           {this.renderActionBar()}
           {
             !this.state.customView ? <div

src/prop.js

@@ -70,6 +70,7 @@ const defaultProps = {
   defaultRowGroupActiveKeys: undefined,
   onRowGroupOpenChange: undefined,
   needCheckRightFixed: false,
+  fixHeaderToTop: false
 };
 
 // http://facebook.github.io/react/docs/reusable-components.html
@@ -147,7 +148,8 @@ const propTypes = {
     PropTypes.number
   ]),
   onRowGroupOpenChange: PropTypes.func,
-  needCheckRightFixed: PropTypes.bool
+  needCheckRightFixed: PropTypes.bool,
+  fixHeaderToTop: PropTypes.bool
 };
 
 export {