Fixed #281

src/components/datatable/DataTable.js

@@ -381,12 +381,6 @@ export class DataTable extends Component {
         }
     }
 
-    componentDidUpdate(prevProps, prevState) {
-        if(this.props.resizableColumns) {
-            this.fixColumnWidths();
-        }
-    }
-
     componentWillReceiveProps(nextProps) {
         if(nextProps.first !== null) { this.setState({first: nextProps.first}) }
         if(nextProps.rows !== null) { this.setState({rows: nextProps.rows}) }
@@ -400,13 +394,6 @@ export class DataTable extends Component {
         }
     }
 
-    fixColumnWidths() {
-        let columns = DomHandler.find(this.container, 'th.ui-resizable-column');
-        columns.forEach((col) => {
-            col.style.width = col.offsetWidth + 'px';
-        });
-    }
-
     hasFooter() {
         if(this.props.children) {
             if(this.props.footerColumnGroup) {
@@ -431,7 +418,6 @@ export class DataTable extends Component {
     }
 
     onColumnResizeStart(event) {
-        this.fixColumnWidths();
         let containerLeft = DomHandler.getOffset(this.container).left;
         this.resizeColumn = event.columnEl;
         this.columnResizing = true;

src/showcase/datatable/DataTableDemo.js

@@ -1114,9 +1114,10 @@ export class DataTableRowExpansionDemo extends Component {
 `}
 </CodeHighlight>
 
-            <h3>Column Resize</h3>
+            <h3>Column Reorder</h3>
             <p>Columns can be reordered using drag drop by setting the reorderableColumns to true. onColReorder is a callback that is invoked when a column is reordered.
-            DataTable keeps the column order state internally using keys that identifies a column using the field property. If the column has no field use columnKey instead. </p>
+            DataTable keeps the column order state internally using keys that identifies a column using the field property. If the column has no field, use columnKey instead.</p>
+
 <CodeHighlight className="html">
 {`
 <DataTable value={this.state.cars} reorderableColumns={true}>