remove columns paging, close #78

README.md

@@ -188,18 +188,6 @@ React.render(<Table columns={columns} data={data} />, mountNode);
           <th></th>
           <td>handle rowDoubleClick action, index means the index of current row among fatherElement[childrenColumnName]</td>
       </tr>
-      <tr>
-          <td>columnsPageSize</td>
-          <td>Number</td>
-          <th>5</th>
-          <td>pageSize of columns. (Deprecated, use fixed columns)</td>
-      </tr>
-      <tr>
-          <td>columnsPageRange</td>
-          <td>Array</td>
-          <th></th>
-          <td>columns index range need paging, like [2,10]. (Deprecated, use column.fixed)</td>
-      </tr>
       <tr>
           <td>showHeader</td>
           <td>Boolean</td>

src/Table.jsx

@@ -25,8 +25,6 @@ const Table = React.createClass({
     indentSize: PropTypes.number,
     onRowClick: PropTypes.func,
     onRowDoubleClick: PropTypes.func,
-    columnsPageRange: PropTypes.array,
-    columnsPageSize: PropTypes.number,
     expandIconColumnIndex: PropTypes.number,
     showHeader: PropTypes.bool,
     title: PropTypes.func,
@@ -57,7 +55,6 @@ const Table = React.createClass({
       style: {},
       childrenColumnName: 'children',
       indentSize: 15,
-      columnsPageSize: 5,
       expandIconColumnIndex: 0,
       showHeader: true,
       scroll: {},
@@ -191,7 +188,7 @@ const Table = React.createClass({
       // columns are passed from fixed table function that already grouped.
       rows = this.getHeaderRows(columns);
     } else {
-      rows = this.getHeaderRows(this.groupColumns(this.getCurrentColumns()));
+      rows = this.getHeaderRows(this.groupColumns(this.props.columns));
     }
 
     if (expandIconAsCell && fixed !== 'right') {
@@ -310,7 +307,7 @@ const Table = React.createClass({
         height: fixedColumnsBodyRowsHeight[i],
       } : {};
 
-      const leafColumns = this.getLeafColumns(columns || this.getCurrentColumns());
+      const leafColumns = this.getLeafColumns(columns || props.columns);
 
       rst.push(
         <TableRow
@@ -378,30 +375,6 @@ const Table = React.createClass({
     return <colgroup>{cols}</colgroup>;
   },
 
-  getCurrentColumns() {
-    const { columns, columnsPageRange, columnsPageSize, prefixCls } = this.props;
-    const { currentColumnsPage } = this.state;
-    if (!columnsPageRange || columnsPageRange[0] > columnsPageRange[1]) {
-      return columns;
-    }
-    return columns.map((column, i) => {
-      let newColumn = { ...column };
-      if (i >= columnsPageRange[0] && i <= columnsPageRange[1]) {
-        const pageIndexStart = columnsPageRange[0] + currentColumnsPage * columnsPageSize;
-        let pageIndexEnd = columnsPageRange[0] + (currentColumnsPage + 1) * columnsPageSize - 1;
-        if (pageIndexEnd > columnsPageRange[1]) {
-          pageIndexEnd = columnsPageRange[1];
-        }
-        if (i < pageIndexStart || i > pageIndexEnd) {
-          newColumn.className = newColumn.className || '';
-          newColumn.className += ` ${prefixCls}-column-hidden`;
-        }
-        newColumn = this.wrapPageColumn(newColumn, (i === pageIndexStart), (i === pageIndexEnd));
-      }
-      return newColumn;
-    });
-  },
-
   getLeftFixedTable() {
     const { columns } = this.props;
     const fixedColumns = this.groupColumns(columns).filter(
@@ -564,11 +537,6 @@ const Table = React.createClass({
     ) : null;
   },
 
-  getMaxColumnsPage() {
-    const { columnsPageRange, columnsPageSize } = this.props;
-    return Math.ceil((columnsPageRange[1] - columnsPageRange[0] + 1) / columnsPageSize) - 1;
-  },
-
   getLeafColumns(columns) {
     const leafColumns = [];
     columns.forEach(column => {
@@ -585,20 +553,6 @@ const Table = React.createClass({
     return this.getLeafColumns(columns).length;
   },
 
-  goToColumnsPage(currentColumnsPage) {
-    const maxColumnsPage = this.getMaxColumnsPage();
-    let page = currentColumnsPage;
-    if (page < 0) {
-      page = 0;
-    }
-    if (page > maxColumnsPage) {
-      page = maxColumnsPage;
-    }
-    this.setState({
-      currentColumnsPage: page,
-    });
-  },
-
   // add appropriate rowspan and colspan to column
   groupColumns(columns, currentRow = 0, parentColumn = {}, rows = []) {
     // track how many rows we got
@@ -669,39 +623,6 @@ const Table = React.createClass({
     }
   },
 
-  prevColumnsPage() {
-    this.goToColumnsPage(this.state.currentColumnsPage - 1);
-  },
-
-  nextColumnsPage() {
-    this.goToColumnsPage(this.state.currentColumnsPage + 1);
-  },
-
-  wrapPageColumn(column, hasPrev, hasNext) {
-    const { prefixCls } = this.props;
-    const { currentColumnsPage } = this.state;
-    const maxColumnsPage = this.getMaxColumnsPage();
-    let prevHandlerCls = `${prefixCls}-prev-columns-page`;
-    if (currentColumnsPage === 0) {
-      prevHandlerCls += ` ${prefixCls}-prev-columns-page-disabled`;
-    }
-    const prevHandler = <span className={prevHandlerCls} onClick={this.prevColumnsPage}></span>;
-    let nextHandlerCls = `${prefixCls}-next-columns-page`;
-    if (currentColumnsPage === maxColumnsPage) {
-      nextHandlerCls += ` ${prefixCls}-next-columns-page-disabled`;
-    }
-    const nextHandler = <span className={nextHandlerCls} onClick={this.nextColumnsPage}></span>;
-    if (hasPrev) {
-      column.title = <span>{prevHandler}{column.title}</span>;
-      column.className = `${column.className || ''} ${prefixCls}-column-has-prev`;
-    }
-    if (hasNext) {
-      column.title = <span>{column.title}{nextHandler}</span>;
-      column.className = `${column.className || ''} ${prefixCls}-column-has-next`;
-    }
-    return column;
-  },
-
   findExpandedRow(record) {
     const rows = this.getExpandedRows().filter(i => i === this.getRowKey(record));
     return rows[0];
@@ -721,15 +642,15 @@ const Table = React.createClass({
     if ('isAnyColumnsFixedCache' in this) {
       return this.isAnyColumnsFixedCache;
     }
-    this.isAnyColumnsFixedCache = this.getCurrentColumns().some(column => !!column.fixed);
+    this.isAnyColumnsFixedCache = this.props.columns.some(column => !!column.fixed);
     return this.isAnyColumnsFixedCache;
   },
 
   isAnyColumnsLeftFixed() {
     if ('isAnyColumnsLeftFixedCache' in this) {
       return this.isAnyColumnsLeftFixedCache;
     }
-    this.isAnyColumnsLeftFixedCache = this.getCurrentColumns().some(
+    this.isAnyColumnsLeftFixedCache = this.props.columns.some(
       column => column.fixed === 'left' || column.fixed === true
     );
     return this.isAnyColumnsLeftFixedCache;
@@ -739,7 +660,7 @@ const Table = React.createClass({
     if ('isAnyColumnsRightFixedCache' in this) {
       return this.isAnyColumnsRightFixedCache;
     }
-    this.isAnyColumnsRightFixedCache = this.getCurrentColumns().some(
+    this.isAnyColumnsRightFixedCache = this.props.columns.some(
       column => column.fixed === 'right'
     );
     return this.isAnyColumnsRightFixedCache;
@@ -796,9 +717,6 @@ const Table = React.createClass({
     if (props.className) {
       className += ` ${props.className}`;
     }
-    if (props.columnsPageRange) {
-      className += ` ${prefixCls}-columns-paging`;
-    }
     if (props.useFixedHeader || (props.scroll && props.scroll.y)) {
       className += ` ${prefixCls}-fixed-header`;
     }

tests/index.js

@@ -1,3 +1,2 @@
 require('./index.spec.js');
-require('./PagingColumns.spec.js');
 require('./GroupingColumns.spec.js');

tests/index.spec.js

@@ -4,7 +4,6 @@ const Table = require('../');
 const React = require('react');
 const ReactDOM = require('react-dom');
 const $ = require('jquery');
-import './PagingColumns.spec';
 
 describe('table', () => {
   const div = document.createElement('div');