From 287e18ef1f74ad738eafa33e88a28808d799f32f Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Tue, 5 Dec 2017 15:15:20 +0300
Subject: [PATCH 1/7] refactor(react-grid): add components for the Grid plugin

---
 .../src/bootstrap3/basic/basic.jsx            |  3 +++
 .../dx-react-grid-bootstrap3/package.json     |  1 +
 .../dx-react-grid-bootstrap3/src/grid.jsx     |  4 ++++
 .../src/templates/layout.jsx                  | 22 ++++++++++++++-----
 .../src/templates/layout.test.jsx             | 16 ++++++++++++++
 5 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx

diff --git a/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx b/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
index aca0fd199a..5cf7e2ffed 100644
--- a/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
+++ b/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
@@ -33,6 +33,9 @@ export default class Demo extends React.PureComponent {
       <Grid
         rows={rows}
         columns={columns}
+        rootComponent={({ children }) => <Grid.Root style={{ color: 'red' }} className="root" data="data1"> {children} </Grid.Root>}
+        headerPlaceholderComponent={({ children }) => <Grid.Header style={{ backgroundColor: 'green' }} className="header" data="data2">{ children } </Grid.Header>}
+        footerPlaceholderComponent={({ children }) => <Grid.Footer className="footer" data="data3">{ children } </Grid.Footer>}
       >
         <Table />
         <TableHeaderRow />
diff --git a/packages/dx-react-grid-bootstrap3/package.json b/packages/dx-react-grid-bootstrap3/package.json
index 82d200a853..8dafffe340 100644
--- a/packages/dx-react-grid-bootstrap3/package.json
+++ b/packages/dx-react-grid-bootstrap3/package.json
@@ -82,6 +82,7 @@
     "rollup-plugin-node-resolve": "^3.0.0"
   },
   "dependencies": {
+    "classnames": "^2.2.5",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
diff --git a/packages/dx-react-grid-bootstrap3/src/grid.jsx b/packages/dx-react-grid-bootstrap3/src/grid.jsx
index 19bbf9ea36..685a2263bb 100644
--- a/packages/dx-react-grid-bootstrap3/src/grid.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/grid.jsx
@@ -14,6 +14,10 @@ export const Grid = ({ children, ...props }) => (
   </GridBase>
 );
 
+Grid.Root = Root;
+Grid.Header = Header;
+Grid.Footer = Footer;
+
 Grid.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
index 6d115c6c7a..1006899c3a 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
@@ -1,8 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-export const Root = ({ children }) => (
-  <div className="panel panel-default">
+export const Root = ({ children, className, ...restProps }) => (
+  <div
+    className={classNames('panel panel-default', className)}
+    {...restProps}
+  >
     {children}
   </div>
 );
@@ -12,36 +16,42 @@ Root.propTypes = {
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
+  className: PropTypes.string,
 };
 
 Root.defaultProps = {
   children: undefined,
+  className: undefined,
 };
 
-export const Header = ({ children }) =>
-  children && <div className="panel-heading" style={{ paddingBottom: '5px' }}>{children}</div>;
+export const Header = ({ children, className, ...restProps }) =>
+  children && <div className={classNames('panel-heading', className)} style={{ paddingBottom: '5px' }} {...restProps}>{children}</div>;
 
 Header.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
+  className: PropTypes.string,
 };
 
 Header.defaultProps = {
   children: undefined,
+  className: undefined,
 };
 
-export const Footer = ({ children }) =>
-  children && <div className="panel-footer">{children}</div>;
+export const Footer = ({ children, className, ...restProps }) =>
+  children && <div className={classNames('panel-footer', className)} {...restProps}>{children}</div>;
 
 Footer.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
+  className: PropTypes.string,
 };
 
 Footer.defaultProps = {
   children: undefined,
+  className: undefined,
 };
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
new file mode 100644
index 0000000000..20fd23775d
--- /dev/null
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Root, Header, Footer } from './layout';
+
+describe('ColumnChooser', () => {
+  it('should render without exceptions', () => {
+    const tree = shallow((
+      <Root
+        value=""
+        onValueChange={() => { }}
+      />
+    ));
+    expect(tree.find('.panel').exists()).toBeTruthy();
+    expect(tree.find('.panel').exists()).toBeTruthy();
+  });
+});

From 449f74e2b94e8f2e79b530e6ad58bbb08446aeb5 Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Tue, 5 Dec 2017 17:10:03 +0300
Subject: [PATCH 2/7] Add bs3 components and docs

---
 .../src/bootstrap3/basic/basic.jsx            |   1 +
 .../src/templates/layout.test.jsx             | 101 ++++++++++++++++--
 packages/dx-react-grid/docs/reference/grid.md |   9 ++
 3 files changed, 101 insertions(+), 10 deletions(-)

diff --git a/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx b/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
index 5cf7e2ffed..7b1ff2210f 100644
--- a/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
+++ b/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
@@ -29,6 +29,7 @@ export default class Demo extends React.PureComponent {
   render() {
     const { rows, columns } = this.state;
 
+    // TODO remove all custom components from Grid demo
     return (
       <Grid
         rows={rows}
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
index 20fd23775d..f0e44393ae 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
@@ -2,15 +2,96 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Root, Header, Footer } from './layout';
 
-describe('ColumnChooser', () => {
-  it('should render without exceptions', () => {
-    const tree = shallow((
-      <Root
-        value=""
-        onValueChange={() => { }}
-      />
-    ));
-    expect(tree.find('.panel').exists()).toBeTruthy();
-    expect(tree.find('.panel').exists()).toBeTruthy();
+const children = <div>test</div>;
+
+describe('Grids components:', () => {
+  describe('Root:', () => {
+    it('should render without exceptions', () => {
+      const tree = shallow((
+        <Root
+          value=""
+          onValueChange={() => { }}
+        />
+      ));
+      expect(tree.find('.panel-default').exists())
+        .toBeTruthy();
+    });
+
+    it('should pass rest props to the root element', () => {
+      const tree = shallow((
+        <Root className="custom-class" data={{ a: 1 }} />
+      ));
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+      expect(tree.is('.panel-default'))
+        .toBeTruthy();
+      expect(tree.props().data)
+        .toMatchObject({ a: 1 });
+    });
+  });
+  describe('Header:', () => {
+    it('should render without exceptions', () => {
+      const tree = shallow((
+        <Header
+          value=""
+          onValueChange={() => { }}
+        >
+          { children }
+        </Header>
+      ));
+      expect(tree.find('.panel-heading').exists())
+        .toBeTruthy();
+    });
+
+    it('should pass rest props to the root element', () => {
+      const tree = shallow((
+        <Header
+          className="custom-class"
+          data={{ a: 1 }}
+        >
+          { children }
+        </Header>
+      ));
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+      expect(tree.is('.panel-heading'))
+        .toBeTruthy();
+      expect(tree.props().data)
+        .toMatchObject({ a: 1 });
+    });
+  });
+  describe('Header:', () => {
+    it('should render without exceptions', () => {
+      const tree = shallow((
+        <Footer
+          value=""
+          onValueChange={() => { }}
+        >
+          { children }
+        </Footer>
+      ));
+      expect(tree.find('.panel-footer').exists())
+        .toBeTruthy();
+    });
+
+    it('should pass rest props to the root element', () => {
+      const tree = shallow((
+        <Footer
+          className="custom-class"
+          data={{ a: 1 }}
+        >
+          { children }
+        </Footer>
+      ));
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+      expect(tree.is('.panel-footer'))
+        .toBeTruthy();
+      expect(tree.props().data)
+        .toMatchObject({ a: 1 });
+    });
   });
 });
diff --git a/packages/dx-react-grid/docs/reference/grid.md b/packages/dx-react-grid/docs/reference/grid.md
index 733b0e2b65..e48c6ed8ca 100644
--- a/packages/dx-react-grid/docs/reference/grid.md
+++ b/packages/dx-react-grid/docs/reference/grid.md
@@ -53,6 +53,15 @@ Field | Type | Description
 ------|------|------------
 children? | ReactElement | A React element to be placed in the footer.
 
+## Plugin Components
+
+Name | Properties | Description
+-----|------------|------------
+Grid.Root | [GridRootProps](#gridrootprops) | A component that renders tables body.
+Grid.Header | [GridHeaderPlaceholderProps](#gridheaderplaceholderprops) | A component that renders tables header.
+Grid.Footer | [GridFooterPlaceholderProps](#gridfooterplaceholderprops) | A component that renders tables footer.
+
+If you specify additional properties, they are added to the component's root element.
 ## Plugin Developer Reference
 
 ### Exports

From c94020985a28ebd8e516f385c3d5890a628f0fbb Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Tue, 5 Dec 2017 18:25:08 +0300
Subject: [PATCH 3/7] Add MUI components

---
 .../src/bootstrap3/basic/basic.jsx            |  4 -
 .../src/templates/layout.test.jsx             | 70 +++++++-------
 .../dx-react-grid-material-ui/src/grid.jsx    |  4 +
 .../src/templates/layout.jsx                  | 25 +++--
 .../src/templates/layout.test.jsx             | 91 +++++++++++++------
 5 files changed, 116 insertions(+), 78 deletions(-)

diff --git a/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx b/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
index 7b1ff2210f..aca0fd199a 100644
--- a/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
+++ b/packages/dx-react-demos/src/bootstrap3/basic/basic.jsx
@@ -29,14 +29,10 @@ export default class Demo extends React.PureComponent {
   render() {
     const { rows, columns } = this.state;
 
-    // TODO remove all custom components from Grid demo
     return (
       <Grid
         rows={rows}
         columns={columns}
-        rootComponent={({ children }) => <Grid.Root style={{ color: 'red' }} className="root" data="data1"> {children} </Grid.Root>}
-        headerPlaceholderComponent={({ children }) => <Grid.Header style={{ backgroundColor: 'green' }} className="header" data="data2">{ children } </Grid.Header>}
-        footerPlaceholderComponent={({ children }) => <Grid.Footer className="footer" data="data3">{ children } </Grid.Footer>}
       >
         <Table />
         <TableHeaderRow />
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
index f0e44393ae..3e7703bd86 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
@@ -2,94 +2,88 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Root, Header, Footer } from './layout';
 
-const children = <div>test</div>;
+describe('Layout', () => {
+  const children = <div />;
 
-describe('Grids components:', () => {
-  describe('Root:', () => {
-    it('should render without exceptions', () => {
+  describe('Root', () => {
+    it('should pass className to the root element', () => {
       const tree = shallow((
-        <Root
-          value=""
-          onValueChange={() => { }}
-        />
+        <Root className="custom-class" />
       ));
-      expect(tree.find('.panel-default').exists())
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+      expect(tree.is('.panel-default'))
         .toBeTruthy();
     });
 
     it('should pass rest props to the root element', () => {
       const tree = shallow((
-        <Root className="custom-class" data={{ a: 1 }} />
+        <Root data={{ a: 1 }} />
       ));
 
-      expect(tree.is('.custom-class'))
-        .toBeTruthy();
-      expect(tree.is('.panel-default'))
-        .toBeTruthy();
       expect(tree.props().data)
         .toMatchObject({ a: 1 });
     });
   });
-  describe('Header:', () => {
-    it('should render without exceptions', () => {
+
+  describe('Header', () => {
+    it('should pass className to the root element', () => {
       const tree = shallow((
         <Header
-          value=""
-          onValueChange={() => { }}
+          className="custom-class"
+          data={{ a: 1 }}
         >
-          { children }
+          {children}
         </Header>
       ));
-      expect(tree.find('.panel-heading').exists())
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+      expect(tree.is('.panel-heading'))
         .toBeTruthy();
     });
 
     it('should pass rest props to the root element', () => {
       const tree = shallow((
         <Header
-          className="custom-class"
           data={{ a: 1 }}
         >
-          { children }
+          {children}
         </Header>
       ));
 
-      expect(tree.is('.custom-class'))
-        .toBeTruthy();
-      expect(tree.is('.panel-heading'))
-        .toBeTruthy();
       expect(tree.props().data)
         .toMatchObject({ a: 1 });
     });
   });
-  describe('Header:', () => {
-    it('should render without exceptions', () => {
+
+  describe('Footer', () => {
+    it('should pass className to the root element', () => {
       const tree = shallow((
         <Footer
-          value=""
-          onValueChange={() => { }}
+          data={{ a: 1 }}
+          className="custom-class"
         >
-          { children }
+          {children}
         </Footer>
       ));
-      expect(tree.find('.panel-footer').exists())
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+      expect(tree.is('.panel-footer'))
         .toBeTruthy();
     });
 
     it('should pass rest props to the root element', () => {
       const tree = shallow((
         <Footer
-          className="custom-class"
           data={{ a: 1 }}
         >
-          { children }
+          {children}
         </Footer>
       ));
 
-      expect(tree.is('.custom-class'))
-        .toBeTruthy();
-      expect(tree.is('.panel-footer'))
-        .toBeTruthy();
       expect(tree.props().data)
         .toMatchObject({ a: 1 });
     });
diff --git a/packages/dx-react-grid-material-ui/src/grid.jsx b/packages/dx-react-grid-material-ui/src/grid.jsx
index 19bbf9ea36..685a2263bb 100644
--- a/packages/dx-react-grid-material-ui/src/grid.jsx
+++ b/packages/dx-react-grid-material-ui/src/grid.jsx
@@ -14,6 +14,10 @@ export const Grid = ({ children, ...props }) => (
   </GridBase>
 );
 
+Grid.Root = Root;
+Grid.Header = Header;
+Grid.Footer = Footer;
+
 Grid.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
index fce584691d..bf74cbcd8b 100644
--- a/packages/dx-react-grid-material-ui/src/templates/layout.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { withStyles } from 'material-ui/styles';
 
 const styles = theme => ({
@@ -14,8 +15,8 @@ const styles = theme => ({
   },
 });
 
-export const Root = ({ children }) => (
-  <div>{children}</div>
+export const Root = ({ children, ...restProps }) => (
+  <div {...restProps}>{children}</div>
 );
 
 Root.propTypes = {
@@ -29,8 +30,12 @@ Root.defaultProps = {
   children: undefined,
 };
 
-const HeaderBase = ({ children, classes }) =>
-  children && <div className={classes.headingPanel}>{children}</div>;
+const HeaderBase = ({
+  children, classes,
+  className, ...restProps
+}) =>
+  children &&
+    <div className={classNames(classes.headingPanel, className)} {...restProps}>{children}</div>;
 
 HeaderBase.propTypes = {
   children: PropTypes.oneOfType([
@@ -38,16 +43,22 @@ HeaderBase.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
   ]),
   classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
 };
 
 HeaderBase.defaultProps = {
   children: undefined,
+  className: undefined,
 };
 
 export const Header = withStyles(styles, { name: 'GridLayout' })(HeaderBase);
 
-const FooterBase = ({ children, classes }) =>
-  children && <div className={classes.footerPanel}>{children}</div>;
+const FooterBase = ({
+  children, classes,
+  className, ...restProps
+}) =>
+  children &&
+    <div className={classNames(classes.footerPanel, className)} {...restProps}>{children}</div>;
 
 FooterBase.propTypes = {
   children: PropTypes.oneOfType([
@@ -55,10 +66,12 @@ FooterBase.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
   ]),
   classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
 };
 
 FooterBase.defaultProps = {
   children: undefined,
+  className: undefined,
 };
 
 export const Footer = withStyles(styles, { name: 'GridLayout' })(FooterBase);
diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx
index d150a69fb7..b687c17104 100644
--- a/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx
@@ -1,66 +1,97 @@
 import React from 'react';
-import { createMount, getClasses } from 'material-ui/test-utils';
-import { setupConsole } from '@devexpress/dx-testing';
-import { Header, Footer } from './layout';
+import { shallow } from 'enzyme';
+import { getClasses, createShallow } from 'material-ui/test-utils';
+import { Header, Footer, Root } from './layout';
 
 describe('Layout', () => {
-  let resetConsole;
+  let shallowWrapper;
+  const children = <div />;
   beforeAll(() => {
-    resetConsole = setupConsole({ ignore: ['SheetsRegistry'] });
-  });
-  afterAll(() => {
-    resetConsole();
+    shallowWrapper = createShallow({ dive: true });
   });
 
   describe('Header', () => {
-    let mount;
     let classes;
     beforeAll(() => {
       classes = getClasses((
         <Header>
-          <div />
+          {children}
         </Header>
       ));
-      mount = createMount();
-    });
-    afterAll(() => {
-      mount.cleanUp();
     });
+    it('should pass className to the root element', () => {
+      const tree = shallowWrapper((
+        <Header className="custom-class">
+          {children}
+        </Header>
+      ));
 
-    it('should have a correct css class', () => {
-      const tree = mount((
-        <Header>
-          <div />
+      expect(tree.is(`.${classes.headingPanel}`))
+        .toBeTruthy();
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+    });
+    it('should pass rest props to the root element', () => {
+      const tree = shallowWrapper((
+        <Header data={{ a: 1 }}>
+          {children}
         </Header>
       ));
 
-      expect(tree.find(`.${classes.headingPanel}`).exists()).toBeTruthy();
+      expect(tree.props().data)
+        .toMatchObject({ a: 1 });
     });
   });
 
   describe('Footer', () => {
-    let mount;
     let classes;
     beforeAll(() => {
       classes = getClasses((
         <Footer>
-          <div />
+          {children}
         </Footer>
       ));
-      mount = createMount();
     });
-    afterAll(() => {
-      mount.cleanUp();
+    it('should pass className to the root element', () => {
+      const tree = shallowWrapper((
+        <Footer className="custom-class">
+          {children}
+        </Footer>
+      ));
+
+      expect(tree.is(`.${classes.footerPanel}`))
+        .toBeTruthy();
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
     });
+    it('should pass rest props to the root element', () => {
+      const tree = shallowWrapper((
+        <Header data={{ a: 1 }}>
+          {children}
+        </Header>
+      ));
 
-    it('should have a correct css class', () => {
-      const tree = mount((
-        <Footer>
-          <div />
-        </Footer>
+      expect(tree.props().data)
+        .toMatchObject({ a: 1 });
+    });
+  });
+
+  describe('Root', () => {
+    it('should pass className to the root element', () => {
+      const tree = shallow((
+        <Root className="custom-class" />
+      ));
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+    });
+    it('should pass rest props to the root element', () => {
+      const tree = shallow((
+        <Root data={{ a: 1 }} />
       ));
 
-      expect(tree.find(`.${classes.footerPanel}`).exists()).toBeTruthy();
+      expect(tree.props().data)
+        .toMatchObject({ a: 1 });
     });
   });
 });

From 7e6fb0efbca7af687957813e63f9cb3105dc1a32 Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Wed, 6 Dec 2017 10:15:20 +0300
Subject: [PATCH 4/7] Fix after review

---
 .../src/templates/layout.jsx                  | 24 +++++++++++++------
 packages/dx-react-grid/docs/reference/grid.md |  6 ++---
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
index 1006899c3a..60e439470a 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
@@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export const Root = ({ children, className, ...restProps }) => (
-  <div
-    className={classNames('panel panel-default', className)}
-    {...restProps}
-  >
+  <div className={classNames('panel panel-default', className)}{...restProps}>
     {children}
   </div>
 );
@@ -24,8 +21,18 @@ Root.defaultProps = {
   className: undefined,
 };
 
-export const Header = ({ children, className, ...restProps }) =>
-  children && <div className={classNames('panel-heading', className)} style={{ paddingBottom: '5px' }} {...restProps}>{children}</div>;
+export const Header = ({
+  children, className,
+  style, ...restProps
+}) => children && (
+  <div
+    className={classNames('panel-heading', className)}
+    style={{ paddingBottom: '5px', ...style }}
+    {...restProps}
+  >
+    {children}
+  </div>
+);
 
 Header.propTypes = {
   children: PropTypes.oneOfType([
@@ -33,15 +40,18 @@ Header.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
   ]),
   className: PropTypes.string,
+  style: PropTypes.object,
 };
 
 Header.defaultProps = {
   children: undefined,
   className: undefined,
+  style: null,
 };
 
 export const Footer = ({ children, className, ...restProps }) =>
-  children && <div className={classNames('panel-footer', className)} {...restProps}>{children}</div>;
+  children &&
+    <div className={classNames('panel-footer', className)} {...restProps}>{children}</div>;
 
 Footer.propTypes = {
   children: PropTypes.oneOfType([
diff --git a/packages/dx-react-grid/docs/reference/grid.md b/packages/dx-react-grid/docs/reference/grid.md
index e48c6ed8ca..e2db5eedf7 100644
--- a/packages/dx-react-grid/docs/reference/grid.md
+++ b/packages/dx-react-grid/docs/reference/grid.md
@@ -57,9 +57,9 @@ children? | ReactElement | A React element to be placed in the footer.
 
 Name | Properties | Description
 -----|------------|------------
-Grid.Root | [GridRootProps](#gridrootprops) | A component that renders tables body.
-Grid.Header | [GridHeaderPlaceholderProps](#gridheaderplaceholderprops) | A component that renders tables header.
-Grid.Footer | [GridFooterPlaceholderProps](#gridfooterplaceholderprops) | A component that renders tables footer.
+Grid.Root | [GridRootProps](#gridrootprops) | A component that renders the grid root layout.
+Grid.Header | [GridHeaderPlaceholderProps](#gridheaderplaceholderprops) | A component that renders the grid header placeholder.
+Grid.Footer | [GridFooterPlaceholderProps](#gridfooterplaceholderprops) | A component that renders the grid footer placeholder.
 
 If you specify additional properties, they are added to the component's root element.
 ## Plugin Developer Reference

From 504da8b52b9f81058ad666b90c4123e12c0d341b Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Wed, 6 Dec 2017 11:12:27 +0300
Subject: [PATCH 5/7] Fix after review

---
 packages/dx-react-grid-bootstrap3/src/grid.jsx      |  4 ++--
 .../src/templates/layout.jsx                        |  4 ++--
 .../src/templates/layout.test.jsx                   | 13 +++++++++++++
 packages/dx-react-grid-material-ui/src/grid.jsx     |  4 ++--
 .../src/templates/layout.jsx                        |  4 ++--
 packages/dx-react-grid/docs/reference/grid.md       |  4 ++--
 6 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/dx-react-grid-bootstrap3/src/grid.jsx b/packages/dx-react-grid-bootstrap3/src/grid.jsx
index 685a2263bb..3b71efb810 100644
--- a/packages/dx-react-grid-bootstrap3/src/grid.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/grid.jsx
@@ -15,8 +15,8 @@ export const Grid = ({ children, ...props }) => (
 );
 
 Grid.Root = Root;
-Grid.Header = Header;
-Grid.Footer = Footer;
+Grid.HeaderPlaceholder = Header;
+Grid.FooterPlaceholder = Footer;
 
 Grid.propTypes = {
   children: PropTypes.oneOfType([
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
index 60e439470a..5ac7247d06 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
@@ -24,7 +24,7 @@ Root.defaultProps = {
 export const Header = ({
   children, className,
   style, ...restProps
-}) => children && (
+}) => !!children && (
   <div
     className={classNames('panel-heading', className)}
     style={{ paddingBottom: '5px', ...style }}
@@ -50,7 +50,7 @@ Header.defaultProps = {
 };
 
 export const Footer = ({ children, className, ...restProps }) =>
-  children &&
+  !!children &&
     <div className={classNames('panel-footer', className)} {...restProps}>{children}</div>;
 
 Footer.propTypes = {
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
index 3e7703bd86..eb0e09ca48 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
@@ -44,6 +44,19 @@ describe('Layout', () => {
         .toBeTruthy();
     });
 
+    it('should combine style on the root element', () => {
+      const tree = shallow((
+        <Header
+          style={{ color: 'red' }}
+        >
+          {children}
+        </Header>
+      ));
+
+      expect(tree.props().style)
+        .toMatchObject({ paddingBottom: '5px', color: 'red' });
+    });
+
     it('should pass rest props to the root element', () => {
       const tree = shallow((
         <Header
diff --git a/packages/dx-react-grid-material-ui/src/grid.jsx b/packages/dx-react-grid-material-ui/src/grid.jsx
index 685a2263bb..3b71efb810 100644
--- a/packages/dx-react-grid-material-ui/src/grid.jsx
+++ b/packages/dx-react-grid-material-ui/src/grid.jsx
@@ -15,8 +15,8 @@ export const Grid = ({ children, ...props }) => (
 );
 
 Grid.Root = Root;
-Grid.Header = Header;
-Grid.Footer = Footer;
+Grid.HeaderPlaceholder = Header;
+Grid.FooterPlaceholder = Footer;
 
 Grid.propTypes = {
   children: PropTypes.oneOfType([
diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
index bf74cbcd8b..e26bd7a04c 100644
--- a/packages/dx-react-grid-material-ui/src/templates/layout.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
@@ -34,7 +34,7 @@ const HeaderBase = ({
   children, classes,
   className, ...restProps
 }) =>
-  children &&
+  !!children &&
     <div className={classNames(classes.headingPanel, className)} {...restProps}>{children}</div>;
 
 HeaderBase.propTypes = {
@@ -57,7 +57,7 @@ const FooterBase = ({
   children, classes,
   className, ...restProps
 }) =>
-  children &&
+  !!children &&
     <div className={classNames(classes.footerPanel, className)} {...restProps}>{children}</div>;
 
 FooterBase.propTypes = {
diff --git a/packages/dx-react-grid/docs/reference/grid.md b/packages/dx-react-grid/docs/reference/grid.md
index e2db5eedf7..bcc4f1a2cb 100644
--- a/packages/dx-react-grid/docs/reference/grid.md
+++ b/packages/dx-react-grid/docs/reference/grid.md
@@ -58,8 +58,8 @@ children? | ReactElement | A React element to be placed in the footer.
 Name | Properties | Description
 -----|------------|------------
 Grid.Root | [GridRootProps](#gridrootprops) | A component that renders the grid root layout.
-Grid.Header | [GridHeaderPlaceholderProps](#gridheaderplaceholderprops) | A component that renders the grid header placeholder.
-Grid.Footer | [GridFooterPlaceholderProps](#gridfooterplaceholderprops) | A component that renders the grid footer placeholder.
+Grid.HeaderPlaceholder | [GridHeaderPlaceholderProps](#gridheaderplaceholderprops) | A component that renders the grid header placeholder.
+Grid.FooterPlaceholder | [GridFooterPlaceholderProps](#gridfooterplaceholderprops) | A component that renders the grid footer placeholder.
 
 If you specify additional properties, they are added to the component's root element.
 ## Plugin Developer Reference

From 56b5caaabb5f0418a980a3ea54fe84731219f5df Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Wed, 6 Dec 2017 14:13:11 +0300
Subject: [PATCH 6/7] Extract only root component from the Grid plugin

---
 .../dx-react-grid-bootstrap3/src/grid.jsx     |  2 -
 .../src/templates/layout.jsx                  | 31 +++-----
 .../src/templates/layout.test.jsx             | 79 +------------------
 .../dx-react-grid-material-ui/src/grid.jsx    |  2 -
 .../src/templates/layout.jsx                  | 15 +---
 .../src/templates/layout.test.jsx             | 75 +-----------------
 packages/dx-react-grid/docs/reference/grid.md |  2 -
 7 files changed, 16 insertions(+), 190 deletions(-)

diff --git a/packages/dx-react-grid-bootstrap3/src/grid.jsx b/packages/dx-react-grid-bootstrap3/src/grid.jsx
index 3b71efb810..ca86589bf7 100644
--- a/packages/dx-react-grid-bootstrap3/src/grid.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/grid.jsx
@@ -15,8 +15,6 @@ export const Grid = ({ children, ...props }) => (
 );
 
 Grid.Root = Root;
-Grid.HeaderPlaceholder = Header;
-Grid.FooterPlaceholder = Footer;
 
 Grid.propTypes = {
   children: PropTypes.oneOfType([
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
index 5ac7247d06..264525d21e 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.jsx
@@ -21,47 +21,38 @@ Root.defaultProps = {
   className: undefined,
 };
 
-export const Header = ({
-  children, className,
-  style, ...restProps
-}) => !!children && (
-  <div
-    className={classNames('panel-heading', className)}
-    style={{ paddingBottom: '5px', ...style }}
-    {...restProps}
-  >
-    {children}
-  </div>
-);
+export const Header = ({ children }) =>
+  !!children && (
+    <div
+      className="panel-heading"
+      style={{ paddingBottom: '5px' }}
+    >
+      {children}
+    </div>
+  );
 
 Header.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
-  className: PropTypes.string,
-  style: PropTypes.object,
 };
 
 Header.defaultProps = {
   children: undefined,
-  className: undefined,
-  style: null,
 };
 
-export const Footer = ({ children, className, ...restProps }) =>
+export const Footer = ({ children }) =>
   !!children &&
-    <div className={classNames('panel-footer', className)} {...restProps}>{children}</div>;
+    <div className="panel-footer">{children}</div>;
 
 Footer.propTypes = {
   children: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(PropTypes.node),
   ]),
-  className: PropTypes.string,
 };
 
 Footer.defaultProps = {
   children: undefined,
-  className: undefined,
 };
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
index eb0e09ca48..f1873d670c 100644
--- a/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
+++ b/packages/dx-react-grid-bootstrap3/src/templates/layout.test.jsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Root, Header, Footer } from './layout';
+import { Root } from './layout';
 
 describe('Layout', () => {
-  const children = <div />;
-
   describe('Root', () => {
     it('should pass className to the root element', () => {
       const tree = shallow((
@@ -26,79 +24,4 @@ describe('Layout', () => {
         .toMatchObject({ a: 1 });
     });
   });
-
-  describe('Header', () => {
-    it('should pass className to the root element', () => {
-      const tree = shallow((
-        <Header
-          className="custom-class"
-          data={{ a: 1 }}
-        >
-          {children}
-        </Header>
-      ));
-
-      expect(tree.is('.custom-class'))
-        .toBeTruthy();
-      expect(tree.is('.panel-heading'))
-        .toBeTruthy();
-    });
-
-    it('should combine style on the root element', () => {
-      const tree = shallow((
-        <Header
-          style={{ color: 'red' }}
-        >
-          {children}
-        </Header>
-      ));
-
-      expect(tree.props().style)
-        .toMatchObject({ paddingBottom: '5px', color: 'red' });
-    });
-
-    it('should pass rest props to the root element', () => {
-      const tree = shallow((
-        <Header
-          data={{ a: 1 }}
-        >
-          {children}
-        </Header>
-      ));
-
-      expect(tree.props().data)
-        .toMatchObject({ a: 1 });
-    });
-  });
-
-  describe('Footer', () => {
-    it('should pass className to the root element', () => {
-      const tree = shallow((
-        <Footer
-          data={{ a: 1 }}
-          className="custom-class"
-        >
-          {children}
-        </Footer>
-      ));
-
-      expect(tree.is('.custom-class'))
-        .toBeTruthy();
-      expect(tree.is('.panel-footer'))
-        .toBeTruthy();
-    });
-
-    it('should pass rest props to the root element', () => {
-      const tree = shallow((
-        <Footer
-          data={{ a: 1 }}
-        >
-          {children}
-        </Footer>
-      ));
-
-      expect(tree.props().data)
-        .toMatchObject({ a: 1 });
-    });
-  });
 });
diff --git a/packages/dx-react-grid-material-ui/src/grid.jsx b/packages/dx-react-grid-material-ui/src/grid.jsx
index 3b71efb810..ca86589bf7 100644
--- a/packages/dx-react-grid-material-ui/src/grid.jsx
+++ b/packages/dx-react-grid-material-ui/src/grid.jsx
@@ -15,8 +15,6 @@ export const Grid = ({ children, ...props }) => (
 );
 
 Grid.Root = Root;
-Grid.HeaderPlaceholder = Header;
-Grid.FooterPlaceholder = Footer;
 
 Grid.propTypes = {
   children: PropTypes.oneOfType([
diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
index e26bd7a04c..517fc9766a 100644
--- a/packages/dx-react-grid-material-ui/src/templates/layout.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/layout.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { withStyles } from 'material-ui/styles';
 
 const styles = theme => ({
@@ -30,12 +29,9 @@ Root.defaultProps = {
   children: undefined,
 };
 
-const HeaderBase = ({
-  children, classes,
-  className, ...restProps
-}) =>
+const HeaderBase = ({ children, classes }) =>
   !!children &&
-    <div className={classNames(classes.headingPanel, className)} {...restProps}>{children}</div>;
+    <div className={classes.headingPanel}>{children}</div>;
 
 HeaderBase.propTypes = {
   children: PropTypes.oneOfType([
@@ -43,22 +39,19 @@ HeaderBase.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
   ]),
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
 };
 
 HeaderBase.defaultProps = {
   children: undefined,
-  className: undefined,
 };
 
 export const Header = withStyles(styles, { name: 'GridLayout' })(HeaderBase);
 
 const FooterBase = ({
   children, classes,
-  className, ...restProps
 }) =>
   !!children &&
-    <div className={classNames(classes.footerPanel, className)} {...restProps}>{children}</div>;
+    <div className={classes.footerPanel}>{children}</div>;
 
 FooterBase.propTypes = {
   children: PropTypes.oneOfType([
@@ -66,12 +59,10 @@ FooterBase.propTypes = {
     PropTypes.arrayOf(PropTypes.node),
   ]),
   classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
 };
 
 FooterBase.defaultProps = {
   children: undefined,
-  className: undefined,
 };
 
 export const Footer = withStyles(styles, { name: 'GridLayout' })(FooterBase);
diff --git a/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx b/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx
index b687c17104..045955420a 100644
--- a/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx
+++ b/packages/dx-react-grid-material-ui/src/templates/layout.test.jsx
@@ -1,81 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { getClasses, createShallow } from 'material-ui/test-utils';
-import { Header, Footer, Root } from './layout';
+import { Root } from './layout';
 
 describe('Layout', () => {
-  let shallowWrapper;
-  const children = <div />;
-  beforeAll(() => {
-    shallowWrapper = createShallow({ dive: true });
-  });
-
-  describe('Header', () => {
-    let classes;
-    beforeAll(() => {
-      classes = getClasses((
-        <Header>
-          {children}
-        </Header>
-      ));
-    });
-    it('should pass className to the root element', () => {
-      const tree = shallowWrapper((
-        <Header className="custom-class">
-          {children}
-        </Header>
-      ));
-
-      expect(tree.is(`.${classes.headingPanel}`))
-        .toBeTruthy();
-      expect(tree.is('.custom-class'))
-        .toBeTruthy();
-    });
-    it('should pass rest props to the root element', () => {
-      const tree = shallowWrapper((
-        <Header data={{ a: 1 }}>
-          {children}
-        </Header>
-      ));
-
-      expect(tree.props().data)
-        .toMatchObject({ a: 1 });
-    });
-  });
-
-  describe('Footer', () => {
-    let classes;
-    beforeAll(() => {
-      classes = getClasses((
-        <Footer>
-          {children}
-        </Footer>
-      ));
-    });
-    it('should pass className to the root element', () => {
-      const tree = shallowWrapper((
-        <Footer className="custom-class">
-          {children}
-        </Footer>
-      ));
-
-      expect(tree.is(`.${classes.footerPanel}`))
-        .toBeTruthy();
-      expect(tree.is('.custom-class'))
-        .toBeTruthy();
-    });
-    it('should pass rest props to the root element', () => {
-      const tree = shallowWrapper((
-        <Header data={{ a: 1 }}>
-          {children}
-        </Header>
-      ));
-
-      expect(tree.props().data)
-        .toMatchObject({ a: 1 });
-    });
-  });
-
   describe('Root', () => {
     it('should pass className to the root element', () => {
       const tree = shallow((
diff --git a/packages/dx-react-grid/docs/reference/grid.md b/packages/dx-react-grid/docs/reference/grid.md
index bcc4f1a2cb..d32afe5640 100644
--- a/packages/dx-react-grid/docs/reference/grid.md
+++ b/packages/dx-react-grid/docs/reference/grid.md
@@ -58,8 +58,6 @@ children? | ReactElement | A React element to be placed in the footer.
 Name | Properties | Description
 -----|------------|------------
 Grid.Root | [GridRootProps](#gridrootprops) | A component that renders the grid root layout.
-Grid.HeaderPlaceholder | [GridHeaderPlaceholderProps](#gridheaderplaceholderprops) | A component that renders the grid header placeholder.
-Grid.FooterPlaceholder | [GridFooterPlaceholderProps](#gridfooterplaceholderprops) | A component that renders the grid footer placeholder.
 
 If you specify additional properties, they are added to the component's root element.
 ## Plugin Developer Reference

From b1993d3bb5271e91214c56494affcb8b88f6e8f8 Mon Sep 17 00:00:00 2001
From: MaximKudriavtsev <maxim_71rus_wow@mail.ru>
Date: Thu, 7 Dec 2017 13:52:03 +0300
Subject: [PATCH 7/7] Add empty row to Grid.md

---
 packages/dx-react-grid/docs/reference/grid.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dx-react-grid/docs/reference/grid.md b/packages/dx-react-grid/docs/reference/grid.md
index d32afe5640..483d8cdd80 100644
--- a/packages/dx-react-grid/docs/reference/grid.md
+++ b/packages/dx-react-grid/docs/reference/grid.md
@@ -60,6 +60,7 @@ Name | Properties | Description
 Grid.Root | [GridRootProps](#gridrootprops) | A component that renders the grid root layout.
 
 If you specify additional properties, they are added to the component's root element.
+
 ## Plugin Developer Reference
 
 ### Exports