diff --git a/CHANGELOG.md b/CHANGELOG.md index 66a5f9d2..f889f100 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## NEXT VERSION - chore: remove the use of `Object.values` +- feat: add `getColumnManager` and `getDOMNode` methods ## v1.6.5 (2019-07-11) diff --git a/src/BaseTable.js b/src/BaseTable.js index 3dff8eef..73a4de27 100644 --- a/src/BaseTable.js +++ b/src/BaseTable.js @@ -62,6 +62,7 @@ class BaseTable extends React.PureComponent { }; this.columnManager = new ColumnManager(columns || normalizeColumns(children), props.fixed); + this._setContainerRef = this._setContainerRef.bind(this); this._setMainTableRef = this._setMainTableRef.bind(this); this._setLeftTableRef = this._setLeftTableRef.bind(this); this._setRightTableRef = this._setRightTableRef.bind(this); @@ -102,6 +103,20 @@ class BaseTable extends React.PureComponent { this._scrollbarPresenceChanged = false; } + /** + * Get the DOM node of the table + */ + getDOMNode() { + return this.tableNode; + } + + /** + * Get the column manager + */ + getColumnManager() { + return this.columnManager; + } + /** * Get the expanded state, fallback to normal state if not expandable. */ @@ -182,23 +197,21 @@ class BaseTable extends React.PureComponent { * Scroll to the specified row. * By default, the table will scroll as little as possible to ensure the row is visible. * You can control the alignment of the row though by specifying an align property. Acceptable values are: - * + * * - `auto` (default) - Scroll as little as possible to ensure the row is visible. - * (If the row is already visible, it won't scroll at all.) - * - `smart` - If the row is already visible, don't scroll at all. If it is less than one viewport away, - * scroll as little as possible so that it becomes visible. - * If it is more than one viewport away, scroll so that it is centered within the grid. + * - `smart` - Same as `auto` if it is less than one viewport away, or it's the same as`center`. * - `center` - Center align the row within the table. - * - `end` - Align the row to the bottom, right hand side of the table. - * - `start` - Align the row to the top, left hand of the table. + * - `end` - Align the row to the bottom side of the table. + * - `start` - Align the row to the top side of the table. - * @param {number} rowIndex - * @param {string} align + * @param {number} rowIndex + * @param {string} align */ scrollToRow(rowIndex = 0, align = 'auto') { this.table && this.table.scrollToRow(rowIndex, align); this.leftTable && this.leftTable.scrollToRow(rowIndex, align); this.rightTable && this.rightTable.scrollToRow(rowIndex, align); + this.scrollToLeft(0); } /** @@ -605,7 +618,7 @@ class BaseTable extends React.PureComponent { [`${classPrefix}--disabled`]: disabled, }); return ( -
+
{this.renderFooter()} {this.renderMainTable()} {this.renderLeftTable()} @@ -660,6 +673,10 @@ class BaseTable extends React.PureComponent { return `${this.props.classPrefix}__${className}`; } + _setContainerRef(ref) { + this.tableNode = ref; + } + _setMainTableRef(ref) { this.table = ref; } diff --git a/website/src/utils/baseScope.js b/website/src/utils/baseScope.js index 0b679350..5a34633c 100644 --- a/website/src/utils/baseScope.js +++ b/website/src/utils/baseScope.js @@ -44,7 +44,9 @@ const noop = () => {} const delay = ms => new Promise(resolve => setTimeout(resolve, ms)) const action = message => args => console.log(message, args) -const Table = props => +const Table = React.forwardRef((props, ref) => ( + +)) Table.Column = Column export default {