feat(react-grid): extract the Table plugin components

packages/dx-react-demos/src/demo-sources/grid-basic/bootstrap3/table-template.jsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import {
+  Grid,
+  Table,
+  TableHeaderRow,
+} from '@devexpress/dx-react-grid-bootstrap3';
+
+import {
+  generateRows,
+  globalSalesValues,
+} from '../../../demo-data/generator';
+
+const TableComponent = ({ ...restProps }) => (
+  <Table.Container
+    {...restProps}
+    className="table-striped"
+  />
+);
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      columns: [
+        { name: 'region', title: 'Region' },
+        { name: 'sector', title: 'Sector' },
+        { name: 'channel', title: 'Channel' },
+        { name: 'customer', title: 'Customer' },
+        { name: 'product', title: 'Product' },
+        { name: 'amount', title: 'Sale Amount' },
+      ],
+      rows: generateRows({ columnValues: globalSalesValues, length: 8 }),
+    };
+  }
+  render() {
+    const { rows, columns } = this.state;
+
+    return (
+      <div>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <Table
+            tableComponent={TableComponent}
+          />
+          <TableHeaderRow />
+        </Grid>
+      </div>
+    );
+  }
+}

packages/dx-react-demos/src/demo-sources/grid-basic/material-ui/table-template.jsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import Paper from 'material-ui/Paper';
+import {
+  Grid,
+  Table,
+  TableHeaderRow,
+} from '@devexpress/dx-react-grid-material-ui';
+import { withStyles } from 'material-ui/styles';
+import {
+  generateRows,
+  globalSalesValues,
+} from '../../../demo-data/generator';
+
+const styles = theme => ({
+  tableStriped: {
+    '& tbody tr:nth-of-type(odd)': {
+      backgroundColor: theme.palette.primary[50],
+    },
+  },
+});
+
+const TableComponentBase = ({ classes, ...restProps }) => (
+  <Table.Container
+    {...restProps}
+    className={classes.tableStriped}
+  />
+);
+
+export const TableComponent = withStyles(styles, { name: 'TableComponent' })(TableComponentBase);
+
+export default class Demo extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      columns: [
+        { name: 'region', title: 'Region' },
+        { name: 'sector', title: 'Sector' },
+        { name: 'channel', title: 'Channel' },
+        { name: 'customer', title: 'Customer' },
+        { name: 'product', title: 'Product' },
+        { name: 'amount', title: 'Sale Amount' },
+      ],
+      rows: generateRows({ columnValues: globalSalesValues, length: 8 }),
+    };
+  }
+  render() {
+    const { rows, columns } = this.state;
+
+    return (
+      <Paper>
+        <Grid
+          rows={rows}
+          columns={columns}
+        >
+          <Table
+            tableComponent={TableComponent}
+          />
+          <TableHeaderRow />
+        </Grid>
+      </Paper>
+    );
+  }
+}

packages/dx-react-grid-bootstrap3/src/plugins/table.jsx

@@ -7,6 +7,10 @@ import { TableStubCell } from '../templates/table-stub-cell';
 import { TableStubHeaderCell } from '../templates/table-stub-header-cell';
 import { TableNoDataCell } from '../templates/table-no-data-cell';
 import { TableRow } from '../templates/table-row';
+import { Table as TableComponent } from '../templates/table';
+
+const TableHead = props => <thead {...props} />;
+const TableBody = props => <tbody {...props} />;
 
 const defaultMessages = {
   noData: 'No data',
@@ -21,6 +25,9 @@ export class Table extends React.PureComponent {
 
     return (
       <TableBase
+        tableComponent={TableComponent}
+        headComponent={TableHead}
+        bodyComponent={TableBody}
         layoutComponent={TableLayout}
         rowComponent={TableRow}
         cellComponent={TableCell}
@@ -41,6 +48,9 @@ Table.NoDataCell = TableNoDataCell;
 Table.NoDataRow = TableRow;
 Table.StubCell = TableStubCell;
 Table.StubHeaderCell = TableStubCell;
+Table.Container = TableComponent;
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
 
 Table.propTypes = {
   messages: PropTypes.shape({

packages/dx-react-grid-bootstrap3/src/plugins/virtual-table.jsx

@@ -2,13 +2,18 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { createRenderComponent } from '@devexpress/dx-react-core';
 import { Table as TableBase } from '@devexpress/dx-react-grid';
+import { Table as TableComponent } from '../templates/table';
 import { VirtualTableLayout } from '../templates/virtual-table-layout';
 import { TableCell } from '../templates/table-cell';
 import { TableRow } from '../templates/table-row';
 import { TableNoDataCell } from '../templates/table-no-data-cell';
 import { TableStubCell } from '../templates/table-stub-cell';
 import { TableStubHeaderCell } from '../templates/table-stub-header-cell';
 
+const StickyTable = props => <TableComponent use="head" {...props} />;
+const TableHead = props => <thead {...props} />;
+const TableBody = props => <tbody {...props} />;
+
 const defaultMessages = {
   noData: 'No data',
 };
@@ -35,6 +40,10 @@ export class VirtualTable extends React.PureComponent {
     return (
       <TableBase
         layoutComponent={this.layoutRenderComponent.component}
+        tableComponent={TableComponent}
+        headComponent={TableHead}
+        bodyComponent={TableBody}
+        stickyTableComponent={StickyTable}
         rowComponent={TableRow}
         cellComponent={TableCell}
         noDataRowComponent={TableRow}
@@ -54,6 +63,10 @@ VirtualTable.NoDataCell = TableNoDataCell;
 VirtualTable.NoDataRow = TableRow;
 VirtualTable.StubCell = TableStubCell;
 VirtualTable.StubHeaderCell = TableStubCell;
+VirtualTable.Container = TableComponent;
+VirtualTable.TableHead = TableHead;
+VirtualTable.TableBody = TableBody;
+VirtualTable.StickyTable = StickyTable;
 
 VirtualTable.propTypes = {
   estimatedRowHeight: PropTypes.number,

packages/dx-react-grid-bootstrap3/src/templates/table-layout.jsx

@@ -5,19 +5,18 @@ import {
   StaticTableLayout,
 } from '@devexpress/dx-react-grid';
 import { TableContainer } from './table-container';
-import { Table } from './table';
 
 const MINIMAL_COLUMN_WIDTH = 120;
 
-const TableHead = props => <thead {...props} />;
-const TableBody = props => <tbody {...props} />;
-
 export const TableLayout = ({
   headerRows,
   bodyRows,
   columns,
   cellComponent,
   rowComponent,
+  tableComponent,
+  headComponent,
+  bodyComponent,
 }) => (
   <TableLayoutCore
     layoutComponent={StaticTableLayout}
@@ -26,9 +25,9 @@ export const TableLayout = ({
     columns={columns}
     minColumnWidth={MINIMAL_COLUMN_WIDTH}
     containerComponent={TableContainer}
-    tableComponent={Table}
-    headComponent={TableHead}
-    bodyComponent={TableBody}
+    tableComponent={tableComponent}
+    headComponent={headComponent}
+    bodyComponent={bodyComponent}
     rowComponent={rowComponent}
     cellComponent={cellComponent}
   />
@@ -40,4 +39,7 @@ TableLayout.propTypes = {
   columns: PropTypes.array.isRequired,
   cellComponent: PropTypes.func.isRequired,
   rowComponent: PropTypes.func.isRequired,
+  tableComponent: PropTypes.func.isRequired,
+  headComponent: PropTypes.func.isRequired,
+  bodyComponent: PropTypes.func.isRequired,
 };

packages/dx-react-grid-bootstrap3/src/templates/table.jsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 let globalStickyProp;
 const testCSSProp = (property, value, noPrefixes) => {
@@ -45,14 +46,13 @@ export class Table extends React.Component {
   }
   render() {
     const {
-      children, use, style,
-      ...restProps
+      children, use, style, className, ...restProps
     } = this.props;
     const { stickyProp, backgroundColor } = this.state;
     return (
       <table
         ref={(node) => { this.node = node; }}
-        className="table"
+        className={classNames('table', className)}
         style={{
           tableLayout: 'fixed',
           overflow: 'hidden',
@@ -76,9 +76,11 @@ Table.propTypes = {
   use: PropTypes.oneOf(['head']),
   children: PropTypes.node.isRequired,
   style: PropTypes.object,
+  className: PropTypes.string,
 };
 
 Table.defaultProps = {
   use: undefined,
   style: null,
+  className: undefined,
 };

packages/dx-react-grid-bootstrap3/src/templates/table.test.jsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { Table } from './table';
+
+describe('Table', () => {
+  it('should pass class to the root element', () => {
+    const tree = mount((
+      <div className="panel">
+        <Table className="custom-class">
+          <tbody />
+        </Table>
+      </div>
+    ));
+
+    expect(tree.find('table').is('.custom-class'))
+      .toBeTruthy();
+    expect(tree.find('table').is('.table'))
+      .toBeTruthy();
+  });
+
+  it('should pass rest props to the root element', () => {
+    const tree = mount((
+      <div className="panel">
+        <Table data={{ a: 1 }}>
+          <tbody />
+        </Table>
+      </div>
+    ));
+
+    expect(tree.find('table').props().data)
+      .toMatchObject({ a: 1 });
+  });
+});

packages/dx-react-grid-bootstrap3/src/templates/virtual-table-layout.jsx

@@ -5,14 +5,9 @@ import {
   VirtualTableLayout as VirtualTableLayoutCore,
 } from '@devexpress/dx-react-grid';
 import { TableContainer } from './table-container';
-import { Table } from './table';
 
 const MINIMAL_COLUMN_WIDTH = 120;
 
-const HeadTable = props => <Table use="head" {...props} />;
-const TableHead = props => <thead {...props} />;
-const TableBody = props => <tbody {...props} />;
-
 export const VirtualTableLayout = ({
   headerRows,
   bodyRows,
@@ -21,6 +16,7 @@ export const VirtualTableLayout = ({
   rowComponent,
   height,
   estimatedRowHeight,
+  tableComponent, headComponent, bodyComponent, headTableComponent,
 }) => (
   <TableLayout
     layoutComponent={VirtualTableLayoutCore}
@@ -29,10 +25,10 @@ export const VirtualTableLayout = ({
     columns={columns}
     cellComponent={cellComponent}
     rowComponent={rowComponent}
-    headComponent={TableHead}
-    bodyComponent={TableBody}
-    tableComponent={Table}
-    headTableComponent={HeadTable}
+    tableComponent={tableComponent}
+    headComponent={headComponent}
+    bodyComponent={bodyComponent}
+    headTableComponent={headTableComponent}
     containerComponent={TableContainer}
     estimatedRowHeight={estimatedRowHeight}
     minColumnWidth={MINIMAL_COLUMN_WIDTH}
@@ -48,4 +44,8 @@ VirtualTableLayout.propTypes = {
   rowComponent: PropTypes.func.isRequired,
   height: PropTypes.number.isRequired,
   estimatedRowHeight: PropTypes.number.isRequired,
+  tableComponent: PropTypes.func.isRequired,
+  headComponent: PropTypes.func.isRequired,
+  bodyComponent: PropTypes.func.isRequired,
+  headTableComponent: PropTypes.func.isRequired,
 };

packages/dx-react-grid-material-ui/src/plugins/table.jsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Table as TableBase } from '@devexpress/dx-react-grid';
+import { TableBody, TableHead } from 'material-ui/Table';
+import { Table as TableComponent } from '../templates/table';
 import { TableRow } from '../templates/table-row';
 import { TableLayout } from '../templates/table-layout';
 import { TableCell } from '../templates/table-cell';
@@ -20,6 +22,9 @@ export class Table extends React.PureComponent {
 
     return (
       <TableBase
+        tableComponent={TableComponent}
+        headComponent={TableHead}
+        bodyComponent={TableBody}
         layoutComponent={TableLayout}
         rowComponent={TableRow}
         cellComponent={TableCell}
@@ -40,6 +45,9 @@ Table.NoDataCell = TableNoDataCell;
 Table.NoDataRow = TableRow;
 Table.StubCell = TableStubCell;
 Table.StubHeaderCell = TableStubCell;
+Table.Container = TableComponent;
+Table.TableHead = TableHead;
+Table.TableBody = TableBody;
 
 Table.propTypes = {
   messages: PropTypes.shape({