refactor(react-grid): get rid of explicit column resizing enabling

packages/dx-react-demos/src/bootstrap3/column-resizing/controlled.jsx

@@ -44,7 +44,7 @@ export default class Demo extends React.PureComponent {
           columnWidths={columnWidths}
           onColumnWidthsChange={this.changeColumnWidths}
         />
-        <TableHeaderRow allowResizing />
+        <TableHeaderRow />
       </Grid>
     );
   }

packages/dx-react-demos/src/bootstrap3/column-resizing/uncontrolled.jsx

@@ -37,7 +37,7 @@ export default class Demo extends React.PureComponent {
       >
         <Table />
         <TableColumnResizing defaultColumnWidths={defaultColumnWidths} />
-        <TableHeaderRow allowResizing />
+        <TableHeaderRow />
       </Grid>
     );
   }

packages/dx-react-demos/src/bootstrap3/featured-redux-integration/demo.jsx

@@ -142,7 +142,7 @@ const GridContainer = ({
       onColumnWidthsChange={onColumnWidthsChange}
     />
 
-    <TableHeaderRow allowSorting allowResizing />
+    <TableHeaderRow allowSorting />
     <TableFilterRow />
     <TableSelection showSelectAll />
     <TableRowDetail

packages/dx-react-demos/src/material-ui/column-resizing/controlled.jsx

@@ -45,7 +45,7 @@ export default class Demo extends React.PureComponent {
             columnWidths={columnWidths}
             onColumnWidthsChange={this.changeColumnWidths}
           />
-          <TableHeaderRow allowResizing />
+          <TableHeaderRow />
         </Grid>
       </Paper>
     );

packages/dx-react-demos/src/material-ui/column-resizing/uncontrolled.jsx

@@ -38,7 +38,7 @@ export default class Demo extends React.PureComponent {
         >
           <Table />
           <TableColumnResizing defaultColumnWidths={defaultColumnWidths} />
-          <TableHeaderRow allowResizing />
+          <TableHeaderRow />
         </Grid>
       </Paper>
     );

packages/dx-react-demos/src/material-ui/featured-redux-integration/demo.jsx

@@ -155,7 +155,7 @@ const GridContainer = ({
         onColumnWidthsChange={onColumnWidthsChange}
       />
 
-      <TableHeaderRow allowSorting allowResizing />
+      <TableHeaderRow allowSorting />
       <TableFilterRow />
       <TableSelection showSelectAll />
       <TableRowDetail

packages/dx-react-grid/docs/guides/column-resizing.md

@@ -16,10 +16,6 @@ The [plugin's order](./plugin-overview.md#plugin-order) is important.
 
 Import the plugins listed above to set up a simple Grid with column resizing enabled.
 
-Enable end-user interactions:
-
-- set the `TableHeaderRow` plugin's `allowResizing` property to `true`.
-
 ## Uncontrolled Mode
 
 In the [uncontrolled mode](controlled-and-uncontrolled-modes.md), use the `TableColumnResizing` plugin's `defaultColumnWidths` property to specify the initial column widths. This property should define the width of every column; otherwise, it throws an error.

packages/dx-react-grid/docs/reference/table-column-resizing.md

@@ -24,11 +24,11 @@ Name | Plugin | Type | Description
 -----|--------|------|------------
 tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table columns whose width the plugin manages.
 
-
 ### Exports
 
 Name | Plugin | Type | Description
 -----|--------|------|------------
 tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table columns with new width values applied.
+allowTableColumnResizing | Getter | boolean | Specifies whether table column resizing is enabled.
 changeTableColumnWidths | Action | ({ shifts: { [columnName: string]: number } }) => void | Changes the specified columns' width. Each column width is increased by the corresponding shift value, or decreased if the value is negative.
 changeDraftTableColumnWidths | Action | ({ shifts: { [columnName: string]: number } }) => void | Changes the specified columns' width used for preview. Each column width is increased by the corresponding shift value, or decreased if the value is negative. Setting a shift to `null` clears the corresponding column's draft width.

packages/dx-react-grid/docs/reference/table-header-row.md

@@ -22,7 +22,6 @@ cellComponent | ElementType<[TableHeaderCellProps](#tableheadercellprops)>
 rowComponent | ElementType<[TableRowProps](table.md#tablerowprops)> | | A component that renders a header row.
 allowSorting | boolean | false | Specifies whether a user can change the column's sorting state. Requires the [SortingState](sorting-state.md) dependency.
 showGroupingControls | boolean | false | Specifies whether to render controls that toggle the column's grouping state. Requires the [GroupingState](grouping-state.md) dependency.
-allowResizing | boolean | false | Specifies whether a user can resize columns. Requires the [TableColumnResizing](table-column-resizing.md) dependency.
 messages | object | | An object that specifies [localization messages](#localization-messages).
 
 ## Interfaces
@@ -41,6 +40,7 @@ sortingDirection? | 'asc' | 'desc' | Specifies the associated column's sort
 onSort | ({ keepOther: boolean, cancel: boolean }) | An event that changes the associated column's sorting state. The `keepOther` and `cancel` arguments specify whether to keep existing sorting and cancel sorting by the associated column.
 showGroupingControls | boolean | Specifies whether to render a control that toggles the associated column's grouping state.
 onGroup | () => void | An event that invokes grouping by the associated column.
+allowResizing | boolean | false | Specifies whether table column resizing is enabled.
 onWidthChange | ({ shift: number }) => void | An event that initiates the column width changing. The initial column width increases by the `shift` value or decreases if `shift` is negative
 onDraftWidthChange | ({ shift: number }) => void | An event that changes the column width used for preview. The initial column width increases by the `shift` value or decreases if `shift` is negative. Setting `shift` to `null` clears the column's draft width.
 getMessage | ([messageKey](#localization-messages): string) => string | Returns the text displayed in a sorting control within the header cell.
@@ -73,6 +73,7 @@ tableColumns | Getter | Array<[TableColumn](table.md#tablecolumn)> | Table
 sorting | Getter | Array<[Sorting](sorting-state.md#sorting)> | Columns' sorting state.
 setColumnSorting | Action | ({ columnName: string, direction: 'asc' | 'desc', keepOther: boolean | Array<String>, cancel: boolean }) => void | A function used to set column's sorting state. `keepOther` accepts `true` (keeps existing sorting), a column name array (keeps sorting by specified columns) and `false` (resets sorting). Set `cancel` to `true` to cancel sorting by the current column.
 groupByColumn | Action | ({ columnName: string, groupIndex?: number }) => void | Groups a table by the specified column or cancels grouping. If `groupIndex` is omitted, the group is added to the end of the group list.
+allowTableColumnResizing | Getter | boolean | Specifies whether table column resizing is enabled.
 changeTableColumnWidths | Action | ({ shifts: { [columnName: string]: number } }) => void | Changes column widths. The initial column width increases by the `shift` value or decreases if `shift` is negative.
 changeDraftTableColumnWidths | Action | ({ shifts: { [columnName: string]: number } }) => void | Changes column widths used for preview. The initial column width increases by the `shift` value or decreases if `shift` is negative. Setting `shift` to `null` clears the column's draft width.
 tableCell | Template | [TableCellProps](table.md#tablecellprops) | A template that renders a table cell.

packages/dx-react-grid/src/plugins/table-column-resizing.jsx

@@ -53,6 +53,7 @@ export class TableColumnResizing extends React.PureComponent {
         pluginName="TableColumnResizing"
         dependencies={pluginDependencies}
       >
+        <Getter name="allowTableColumnResizing" value />
         <Getter name="tableColumns" computed={tableColumnsComputed} />
         <Action name="changeTableColumnWidths" action={this.changeTableColumnWidthsAction} />
         <Action

packages/dx-react-grid/src/plugins/table-header-row.jsx

@@ -19,7 +19,6 @@ export class TableHeaderRow extends React.PureComponent {
     const {
       allowSorting,
       showGroupingControls,
-      allowResizing,
       cellComponent: HeaderCell,
       rowComponent: HeaderRow,
       messages,
@@ -34,7 +33,7 @@ export class TableHeaderRow extends React.PureComponent {
           { pluginName: 'SortingState', optional: !allowSorting },
           { pluginName: 'GroupingState', optional: !showGroupingControls },
           { pluginName: 'DragDropContext', optional: true },
-          { pluginName: 'TableColumnResizing', optional: !allowResizing },
+          { pluginName: 'TableColumnResizing', optional: true },
         ]}
       >
         <Getter name="tableHeaderRows" computed={tableHeaderRowsComputed} />
@@ -46,7 +45,7 @@ export class TableHeaderRow extends React.PureComponent {
           {params => (
             <TemplateConnector>
               {({
-                sorting, tableColumns, allowDragging,
+                sorting, tableColumns, allowDragging, allowTableColumnResizing,
               }, {
                 setColumnSorting, groupByColumn,
                 changeTableColumnWidths, changeDraftTableColumnWidths,
@@ -63,7 +62,7 @@ export class TableHeaderRow extends React.PureComponent {
                     allowSorting={allowSorting && sorting !== undefined}
                     showGroupingControls={showGroupingControls && atLeastOneDataColumn}
                     allowDragging={allowDragging && atLeastOneDataColumn}
-                    allowResizing={allowResizing}
+                    allowResizing={allowTableColumnResizing}
                     sortingDirection={allowSorting && sorting !== undefined
                       ? getColumnSortingDirection(sorting, columnName) : undefined}
                     onSort={({ keepOther, cancel }) =>
@@ -94,7 +93,6 @@ export class TableHeaderRow extends React.PureComponent {
 TableHeaderRow.propTypes = {
   allowSorting: PropTypes.bool,
   showGroupingControls: PropTypes.bool,
-  allowResizing: PropTypes.bool,
   cellComponent: PropTypes.func.isRequired,
   rowComponent: PropTypes.func.isRequired,
   messages: PropTypes.object,
@@ -103,6 +101,5 @@ TableHeaderRow.propTypes = {
 TableHeaderRow.defaultProps = {
   allowSorting: false,
   showGroupingControls: false,
-  allowResizing: false,
   messages: null,
 };

packages/dx-react-grid/src/plugins/table-header-row.test.jsx

@@ -146,33 +146,20 @@ describe('TableHeaderRow', () => {
   });
 
   describe('resizing', () => {
-    it('should require TableColumnResizing plugin', () => {
-      expect(() => {
-        mount((
-          <PluginHost>
-            {pluginDepsToComponents(defaultDeps)}
-            <TableHeaderRow
-              {...defaultProps}
-              allowResizing
-            />
-          </PluginHost>
-        ));
-      })
-        .toThrow();
-    });
-
     it('should pass correct props to cellComponent', () => {
       isHeadingTableCell.mockImplementation(() => true);
 
       const deps = {
+        getter: {
+          allowTableColumnResizing: true,
+        },
         plugins: ['TableColumnResizing'],
       };
       const tree = mount((
         <PluginHost>
           {pluginDepsToComponents(defaultDeps, deps)}
           <TableHeaderRow
             {...defaultProps}
-            allowResizing
           />
         </PluginHost>
       ));
@@ -190,6 +177,9 @@ describe('TableHeaderRow', () => {
 
       const deps = {
         plugins: ['TableColumnResizing'],
+        getter: {
+          allowTableColumnResizing: true,
+        },
         action: {
           changeTableColumnWidths: jest.fn(),
         },
@@ -199,7 +189,6 @@ describe('TableHeaderRow', () => {
           {pluginDepsToComponents(defaultDeps, deps)}
           <TableHeaderRow
             {...defaultProps}
-            allowResizing
           />
         </PluginHost>
       ));
@@ -218,13 +207,15 @@ describe('TableHeaderRow', () => {
         action: {
           changeDraftTableColumnWidths: jest.fn(),
         },
+        getter: {
+          allowTableColumnResizing: true,
+        },
       };
       const tree = mount((
         <PluginHost>
           {pluginDepsToComponents(defaultDeps, deps)}
           <TableHeaderRow
             {...defaultProps}
-            allowResizing
           />
         </PluginHost>
       ));