feat(react-grid): add the ColumnChooser plugin (#607)

BREAKING CHANGE: We have integrated the column chooser into the Grid as a plugin to simplify the API. Now, use the column chooser as follows: ```js <Grid> {/* ... */} <TableColumnVisibility /* props */ /> <Toolbar /> <ColumnChooser /> </Grid> ``` For details, see [Controlling Column Visibility](https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/column-visibility/).
DevExpress · Dec 28, 2017 · 16eb588 · 16eb588
1 parent 4a2924c
commit 16eb588
Show file tree

Hide file tree

Showing 54 changed files with 1,134 additions and 458 deletions.
diff --git a/...s/src/bootstrap3/column-chooser/basic.jsx → .../bootstrap3/column-chooser/controlled.jsx b/...s/src/bootstrap3/column-chooser/basic.jsx → .../bootstrap3/column-chooser/controlled.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Row, Col } from 'react-bootstrap';
 import {
   Grid,
   Table,
   TableHeaderRow,
   ColumnChooser,
   TableColumnVisibility,
+  Toolbar,
 } from '@devexpress/dx-react-grid-bootstrap3';
 import {
   generateRows,
@@ -40,32 +40,21 @@ export default class Demo extends React.PureComponent {
     } = this.state;
 
     return (
-      <Row>
-        <Col xs={12} sm={9}>
-          <Grid
-            rows={rows}
-            columns={columns}
-          >
-            <Table
-              columnExtensions={tableColumnExtensions}
-            />
-            <TableHeaderRow />
-            <TableColumnVisibility
-              hiddenColumns={hiddenColumns}
-            />
-          </Grid>
-        </Col>
-        <Col xs={12} sm={3}>
-          <div className="panel panel-default">
-            <div className="panel-heading">Column Chooser</div>
-            <ColumnChooser
-              columns={columns}
-              hiddenColumns={hiddenColumns}
-              onHiddenColumnsChange={this.hiddenColumnsChange}
-            />
-          </div>
-        </Col>
-      </Row>
+      <Grid
+        rows={rows}
+        columns={columns}
+      >
+        <Table
+          columnExtensions={tableColumnExtensions}
+        />
+        <TableHeaderRow />
+        <TableColumnVisibility
+          hiddenColumns={hiddenColumns}
+          onHiddenColumnsChange={this.hiddenColumnsChange}
+        />
+        <Toolbar />
+        <ColumnChooser />
+      </Grid>
     );
   }
 }
diff --git a/.../bootstrap3/column-chooser/basic.test.jsx → ...strap3/column-chooser/controlled.test.jsx b/.../bootstrap3/column-chooser/basic.test.jsx → ...strap3/column-chooser/controlled.test.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Demo from './basic';
+import Demo from './controlled';
 
-describe('BS3 column chooser: basic demo', () => {
+describe('BS3 column chooser: controlled demo', () => {
   it('should work', () => {
     mount(<Demo />);
   });

diff --git a/packages/dx-react-demos/src/bootstrap3/column-chooser/uncontrolled.jsx b/packages/dx-react-demos/src/bootstrap3/column-chooser/uncontrolled.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  Grid,
+  Table,
+  TableHeaderRow,
+  ColumnChooser,
+  TableColumnVisibility,
+  Toolbar,
+} from '@devexpress/dx-react-grid-bootstrap3';
+import {
+  generateRows,
+} from '../../demo-data/generator';
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      columns: [
+        { name: 'name', title: 'Name' },
+        { name: 'sex', title: 'Sex' },
+        { name: 'city', title: 'City' },
+        { name: 'car', title: 'Car' },
+      ],
+      rows: generateRows({ length: 6 }),
+      defaultHiddenColumns: ['sex', 'car'],
+    };
+  }
+
+  render() {
+    const { columns, rows, defaultHiddenColumns } = this.state;
+    return (
+      <Grid
+        rows={rows}
+        columns={columns}
+      >
+        <Table />
+        <TableHeaderRow />
+        <TableColumnVisibility
+          defaultHiddenColumns={defaultHiddenColumns}
+        />
+        <Toolbar />
+        <ColumnChooser />
+      </Grid>
+    );
+  }
+}
diff --git a/packages/dx-react-demos/src/bootstrap3/column-chooser/uncontrolled.test.jsx b/packages/dx-react-demos/src/bootstrap3/column-chooser/uncontrolled.test.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Demo from './uncontrolled';
+
+describe('BS3 column chooser: uncontrolled demo', () => {
+  it('should work', () => {
+    mount(<Demo />);
+  });
+});
diff --git a/packages/dx-react-demos/src/bootstrap3/featured-uncontrolled-mode/demo.jsx b/packages/dx-react-demos/src/bootstrap3/featured-uncontrolled-mode/demo.jsx
@@ -8,6 +8,7 @@ import {
   Grid,
   Table, TableHeaderRow, TableFilterRow, TableSelection, TableGroupRow,
   PagingPanel, GroupingPanel, DragDropProvider, TableColumnReordering, Toolbar,
+  TableColumnVisibility, ColumnChooser,
 } from '@devexpress/dx-react-grid-bootstrap3';
 import {
   ProgressBarCell,
@@ -106,9 +107,13 @@ export default class Demo extends React.PureComponent {
           pageSizes={pageSizes}
         />
         <TableSelection showSelectAll />
+        <TableColumnVisibility
+          defaultHiddenColumns={['customer']}
+        />
         <Toolbar />
         <GroupingPanel showSortingControls />
         <TableGroupRow />
+        <ColumnChooser />
       </Grid>
     );
   }

diff --git a/packages/dx-react-demos/src/demo-registry.js b/packages/dx-react-demos/src/demo-registry.js
@@ -262,9 +262,13 @@ export const demos = {
     },
   },
   'column-chooser': {
-    basic: {
-      bootstrap3: require('./bootstrap3/column-chooser/basic').default,
-      'material-ui': require('./material-ui/column-chooser/basic').default,
+    controlled: {
+      bootstrap3: require('./bootstrap3/column-chooser/controlled').default,
+      'material-ui': require('./material-ui/column-chooser/controlled').default,
+    },
+    uncontrolled: {
+      bootstrap3: require('./bootstrap3/column-chooser/uncontrolled').default,
+      'material-ui': require('./material-ui/column-chooser/uncontrolled').default,
     },
   },
 };
diff --git a/packages/dx-react-demos/src/material-ui/column-chooser/controlled.jsx b/packages/dx-react-demos/src/material-ui/column-chooser/controlled.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import Paper from 'material-ui/Paper';
+import {
+  Grid,
+  Table,
+  TableHeaderRow,
+  ColumnChooser,
+  TableColumnVisibility,
+  Toolbar,
+} from '@devexpress/dx-react-grid-material-ui';
+import {
+  generateRows,
+} from '../../demo-data/generator';
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      columns: [
+        { name: 'name', title: 'Name' },
+        { name: 'sex', title: 'Sex' },
+        { name: 'city', title: 'City' },
+        { name: 'car', title: 'Car' },
+      ],
+      rows: generateRows({ length: 6 }),
+      hiddenColumns: ['sex', 'car'],
+    };
+
+    this.hiddenColumnsChange = (hiddenColumns) => {
+      this.setState({ hiddenColumns });
+    };
+  }
+
+  render() {
+    const { columns, rows, hiddenColumns } = this.state;
+    return (
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <Table />
+          <Toolbar />
+          <TableHeaderRow />
+          <TableColumnVisibility
+            hiddenColumns={hiddenColumns}
+            onHiddenColumnsChange={this.hiddenColumnsChange}
+          />
+          <ColumnChooser />
+        </Grid>
+      </Paper>
+    );
+  }
+}
diff --git a/...material-ui/column-chooser/basic.test.jsx → ...ial-ui/column-chooser/controlled.test.jsx b/...material-ui/column-chooser/basic.test.jsx → ...ial-ui/column-chooser/controlled.test.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Demo from './basic';
+import Demo from './controlled';
 
-describe('MUI column chooser: basic demo', () => {
+describe('MUI column chooser: controlled demo', () => {
   it('should work', () => {
     mount(<Demo />);
   });

diff --git a/packages/dx-react-demos/src/material-ui/column-chooser/uncontrolled.jsx b/packages/dx-react-demos/src/material-ui/column-chooser/uncontrolled.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Paper from 'material-ui/Paper';
+import {
+  Grid,
+  Table,
+  TableHeaderRow,
+  ColumnChooser,
+  TableColumnVisibility,
+  Toolbar,
+} from '@devexpress/dx-react-grid-material-ui';
+import {
+  generateRows,
+} from '../../demo-data/generator';
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      columns: [
+        { name: 'name', title: 'Name' },
+        { name: 'sex', title: 'Sex' },
+        { name: 'city', title: 'City' },
+        { name: 'car', title: 'Car' },
+      ],
+      rows: generateRows({ length: 6 }),
+      defaultHiddenColumns: ['sex', 'car'],
+    };
+  }
+
+  render() {
+    const { columns, rows, defaultHiddenColumns } = this.state;
+    return (
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <Table />
+          <Toolbar />
+          <TableHeaderRow />
+          <TableColumnVisibility
+            defaultHiddenColumns={defaultHiddenColumns}
+          />
+          <ColumnChooser />
+        </Grid>
+      </Paper>
+    );
+  }
+}
diff --git a/packages/dx-react-demos/src/material-ui/column-chooser/uncontrolled.test.jsx b/packages/dx-react-demos/src/material-ui/column-chooser/uncontrolled.test.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Demo from './uncontrolled';
+
+describe('MUI column chooser: uncontrolled demo', () => {
+  it('should work', () => {
+    mount(<Demo />);
+  });
+});
diff --git a/packages/dx-react-demos/src/material-ui/featured-uncontrolled-mode/demo.jsx b/packages/dx-react-demos/src/material-ui/featured-uncontrolled-mode/demo.jsx
@@ -9,6 +9,7 @@ import {
   Grid,
   Table, TableHeaderRow, TableFilterRow, TableSelection, TableGroupRow,
   PagingPanel, GroupingPanel, DragDropProvider, TableColumnReordering, Toolbar,
+  TableColumnVisibility, ColumnChooser,
 } from '@devexpress/dx-react-grid-material-ui';
 
 import {
@@ -112,8 +113,12 @@ export default class Demo extends React.PureComponent {
           />
 
           <TableGroupRow />
+          <TableColumnVisibility
+            defaultHiddenColumns={['customer']}
+          />
           <Toolbar />
           <GroupingPanel showSortingControls />
+          <ColumnChooser />
         </Grid>
       </Paper>
     );

diff --git a/packages/dx-react-grid-bootstrap3/README.md b/packages/dx-react-grid-bootstrap3/README.md
@@ -49,12 +49,12 @@ The package exposes components and plugins with injected template components.
 Components:
 
 - [Grid](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/grid/)
-- [ColumnChooser](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/column-chooser/)
 
 Plugins:
 
 - [DragDropProvider](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/drag-drop-provider/)
 - [GroupingPanel](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/grouping-panel/)
+- [ColumnChooser](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/column-chooser/)
 - [PagingPanel](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/paging-panel/)
 - [Table](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/table/)
 - [TableColumnResizing](https://devexpress.github.io/devextreme-reactive/react/grid/docs/reference/table-column-resizing/)

diff --git a/packages/dx-react-grid-bootstrap3/src/column-chooser.jsx b/packages/dx-react-grid-bootstrap3/src/column-chooser.jsx
diff --git a/packages/dx-react-grid-bootstrap3/src/index.js b/packages/dx-react-grid-bootstrap3/src/index.js
@@ -1,5 +1,5 @@
 export { Grid } from './grid';
-export { ColumnChooser } from './column-chooser';
+export { ColumnChooser } from './plugins/column-chooser';
 export { DragDropProvider } from './plugins/drag-drop-provider';
 export { PagingPanel } from './plugins/paging-panel';
 export { GroupingPanel } from './plugins/grouping-panel';

diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/column-chooser.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/column-chooser.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ColumnChooser as ColumnChooserBase } from '@devexpress/dx-react-grid';
+import { Overlay } from '../templates/column-chooser/overlay';
+import { Container } from '../templates/column-chooser/container';
+import { Item } from '../templates/column-chooser/item';
+import { ToggleButton } from '../templates/column-chooser/toggle-button';
+
+export const ColumnChooser = props => (
+  <ColumnChooserBase
+    overlayComponent={Overlay}
+    containerComponent={Container}
+    itemComponent={Item}
+    toggleButtonComponent={ToggleButton}
+    {...props}
+  />
+);
+
+ColumnChooser.Container = Container;
+ColumnChooser.Item = Item;
+ColumnChooser.Overlay = Overlay;
+ColumnChooser.ToggleButton = ToggleButton;