Table header does not render correctly in animated components, like dialog boxes

Bug report

• Package version(s): @blueprintjs/table 1.10.0
• Browser and OS versions: Chrome 57.0.2987.98 (64-bit) on macOS 10.12.4

Steps to reproduce

Using the following code inside a component that is inserted in to a Blueprint dialog, the table header is misaligned:

	render() {
		return (
			<Table numRows={this.state.data.length}>
				<Column name="Date" renderCell={this.renderDates} />
				<Column name="Project ID" renderCell={this.renderProjects} />
				<Column name="Task ID" renderCell={this.renderTasks} />
				<Column name="Hours" renderCell={this.renderHours} />
				<Column name="Notes" renderCell={this.renderNotes} />
			</Table>
		);
	}

Actual behavior

The misaligned header:

Expected behavior

The aligned header:

Source of issue

It appears that the source of the issue is in syncMenuWidth() in table.tsx. It occurs because the dialog box is going through a CSS animated transition, the rowHeaderElement gets resized temporarily and during said resize, the menuElement grabs the width from the rowHeaderElement.

(Somewhat) workaround

It is possible to add a transitionend event handler on document in the componentDidMount() handler that calls this.setState() to force a redraw, but that doesn't completely fix the issue as the header is still slightly misaligned afterward. It also causes a shift of the header after it is visible. It would be much better to have the header be set correctly once at the beginning.