feat(react-grid): TableView support stub cell rendering if no data fo…

…r cell is provided (#155)
DevExpress · Jun 21, 2017 · 34dee6c · 34dee6c
1 parent 8af3dde
commit 34dee6c
Show file tree

Hide file tree

Showing 19 changed files with 452 additions and 117 deletions.
diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/table-group-row.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/table-group-row.jsx
@@ -1,15 +1,13 @@
 import React from 'react';
 
 import { TableGroupRow as TableGroupRowBase } from '@devexpress/dx-react-grid';
-import { TableGroupCell, TableGroupIndentCell } from '../templates/table-group-row-cell';
+import { TableGroupCell } from '../templates/table-group-row-cell';
 
 const groupCellTemplate = props => <TableGroupCell {...props} />;
-const groupIndentCellTemplate = props => <TableGroupIndentCell {...props} />;
 
 export const TableGroupRow = props => (
   <TableGroupRowBase
     groupCellTemplate={groupCellTemplate}
-    groupIndentCellTemplate={groupIndentCellTemplate}
     groupIndentColumnWidth={20}
     {...props}
   />

diff --git a/packages/dx-react-grid-bootstrap3/src/plugins/table-view.jsx b/packages/dx-react-grid-bootstrap3/src/plugins/table-view.jsx
@@ -4,10 +4,14 @@ import { combineTemplates } from '@devexpress/dx-react-core';
 import { TableView as TableViewBase } from '@devexpress/dx-react-grid';
 import { Table } from '../templates/table';
 import { TableCell } from '../templates/table-cell';
+import { TableStubCell } from '../templates/table-stub-cell';
+import { TableStubHeaderCell } from '../templates/table-stub-header-cell';
 import { TableNoDataCell } from '../templates/table-no-data-cell';
 
 const tableTemplate = props => <Table {...props} />;
 const defaultCellTemplate = props => <TableCell {...props} />;
+const stubCellTemplate = props => <TableStubCell {...props} />;
+const stubHeaderCellTemplate = props => <TableStubHeaderCell {...props} />;
 const noDataCellTemplate = props => <TableNoDataCell {...props} />;
 
 export const TableView = ({ tableCellTemplate, ...props }) => (
@@ -17,6 +21,8 @@ export const TableView = ({ tableCellTemplate, ...props }) => (
       tableCellTemplate,
       defaultCellTemplate,
     )}
+    tableStubCellTemplate={stubCellTemplate}
+    tableStubHeaderCellTemplate={stubHeaderCellTemplate}
     tableNoDataCellTemplate={noDataCellTemplate}
     {...props}
   />

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-filter-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-filter-cell.jsx
@@ -1,33 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-export const TableFilterCell = ({ style, column, filter, setFilter }) => (
+export const TableFilterCell = ({ style, filter, setFilter }) => (
   <th
     style={{
       fontWeight: 'normal',
       ...style,
     }}
   >
-    {!column.type && (
-      <input
-        type="text"
-        className="form-control"
-        value={filter ? filter.value : ''}
-        onChange={e => setFilter({ value: e.target.value })}
-      />
-    )}
+    <input
+      type="text"
+      className="form-control"
+      value={filter ? filter.value : ''}
+      onChange={e => setFilter({ value: e.target.value })}
+    />
   </th>
 );
 
 TableFilterCell.propTypes = {
-  column: PropTypes.object,
   style: PropTypes.object,
   filter: PropTypes.object,
   setFilter: PropTypes.func,
 };
 
 TableFilterCell.defaultProps = {
-  column: {},
   style: null,
   filter: null,
   setFilter: () => {},

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-group-row-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-group-row-cell.jsx
@@ -37,25 +37,3 @@ TableGroupCell.defaultProps = {
   isExpanded: false,
   toggleGroupExpanded: () => {},
 };
-
-export const TableGroupIndentCell = ({ column, style }) => (
-  <td
-    style={{
-      ...style,
-      width: column.width,
-    }}
-  >
-    &nbsp;
-  </td>
-);
-
-TableGroupIndentCell.propTypes = {
-  style: PropTypes.object,
-  column: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-  }).isRequired,
-};
-
-TableGroupIndentCell.defaultProps = {
-  style: {},
-};
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-stub-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-stub-cell.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const TableStubCell = ({ style }) => (
+  <td style={style} />
+);
+
+TableStubCell.propTypes = {
+  style: PropTypes.shape(),
+};
+
+TableStubCell.defaultProps = {
+  style: null,
+};
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-stub-header-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-stub-header-cell.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const TableStubHeaderCell = ({ style }) => (
+  <th style={style} />
+);
+
+TableStubHeaderCell.propTypes = {
+  style: PropTypes.shape(),
+};
+
+TableStubHeaderCell.defaultProps = {
+  style: null,
+};
diff --git a/packages/dx-react-grid-material-ui/src/plugins/table-group-row.jsx b/packages/dx-react-grid-material-ui/src/plugins/table-group-row.jsx
@@ -1,15 +1,13 @@
 import React from 'react';
 
 import { TableGroupRow as TableGroupRowBase } from '@devexpress/dx-react-grid';
-import { TableGroupCell, TableGroupIndentCell } from '../templates/table-group-row-cell';
+import { TableGroupCell } from '../templates/table-group-row-cell';
 
 const groupCellTemplate = props => <TableGroupCell {...props} />;
-const groupIndentCellTemplate = props => <TableGroupIndentCell {...props} />;
 
 export const TableGroupRow = props => (
   <TableGroupRowBase
     groupCellTemplate={groupCellTemplate}
-    groupIndentCellTemplate={groupIndentCellTemplate}
     groupIndentColumnWidth={24}
     {...props}
   />

diff --git a/packages/dx-react-grid-material-ui/src/plugins/table-view.jsx b/packages/dx-react-grid-material-ui/src/plugins/table-view.jsx
@@ -4,10 +4,12 @@ import { combineTemplates } from '@devexpress/dx-react-core';
 import { TableView as TableViewBase } from '@devexpress/dx-react-grid';
 import { Table } from '../templates/table';
 import { TableCell } from '../templates/table-cell';
+import { TableStubCell } from '../templates/table-stub-cell';
 import { TableNoDataCell } from '../templates/table-no-data-cell';
 
 const tableTemplate = props => <Table {...props} />;
 const defaultCellTemplate = props => <TableCell {...props} />;
+const stubCellTemplate = props => <TableStubCell {...props} />;
 const noDataCellTemplate = props => <TableNoDataCell {...props} />;
 
 export const TableView = ({ tableCellTemplate, ...props }) => (
@@ -17,6 +19,8 @@ export const TableView = ({ tableCellTemplate, ...props }) => (
       tableCellTemplate,
       defaultCellTemplate,
     )}
+    tableStubCellTemplate={stubCellTemplate}
+    tableStubHeaderCellTemplate={stubCellTemplate}
     tableNoDataCellTemplate={noDataCellTemplate}
     {...props}
   />

diff --git a/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-filter-cell.jsx
@@ -16,32 +16,28 @@ const styleSheet = createStyleSheet('TableFilterCell', theme => ({
   },
 }));
 
-const TableFilterCellBase = ({ style, column, filter, setFilter, classes }) => (
+const TableFilterCellBase = ({ style, filter, setFilter, classes }) => (
   <TableCell
     className={classes.cell}
     style={style}
   >
-    {!column.type && (
-      <Input
-        className={classes.input}
-        value={filter ? filter.value : ''}
-        placeholder={'Filter...'}
-        onChange={e => setFilter({ value: e.target.value })}
-      />
-    )}
+    <Input
+      className={classes.input}
+      value={filter ? filter.value : ''}
+      placeholder={'Filter...'}
+      onChange={e => setFilter({ value: e.target.value })}
+    />
   </TableCell>
 );
 
 TableFilterCellBase.propTypes = {
-  column: PropTypes.object,
   style: PropTypes.object,
   filter: PropTypes.object,
   setFilter: PropTypes.func,
   classes: PropTypes.object.isRequired,
 };
 
 TableFilterCellBase.defaultProps = {
-  column: {},
   style: null,
   filter: null,
   setFilter: () => {},

diff --git a/packages/dx-react-grid-material-ui/src/templates/table-group-row-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-group-row-cell.jsx
@@ -74,30 +74,3 @@ TableGroupCellBase.defaultProps = {
 };
 
 export const TableGroupCell = withStyles(styleSheet)(TableGroupCellBase);
-
-const TableGroupIndentCellBase = ({ column, style, classes }) => (
-  <TableCell
-    style={{
-      width: column.width,
-      ...style,
-    }}
-    className={classes.indentCell}
-  >
-    &nbsp;
-  </TableCell>
-);
-
-TableGroupIndentCellBase.propTypes = {
-  style: PropTypes.object,
-  column: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-  }).isRequired,
-  classes: PropTypes.object.isRequired,
-};
-
-TableGroupIndentCellBase.defaultProps = {
-  style: {},
-};
-
-export const TableGroupIndentCell = withStyles(styleSheet)(TableGroupIndentCellBase);
-
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-stub-cell.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TableCell } from 'material-ui';
+import { withStyles, createStyleSheet } from 'material-ui/styles';
+
+const styleSheet = createStyleSheet('TableStubCell', () => ({
+  cell: {
+    padding: 0,
+  },
+}));
+
+const TableStubCellBase = ({ style, classes }) => (
+  <TableCell
+    style={style}
+    className={classes.cell}
+  />
+);
+
+TableStubCellBase.propTypes = {
+  style: PropTypes.object,
+  classes: PropTypes.object.isRequired,
+};
+
+TableStubCellBase.defaultProps = {
+  style: {},
+};
+
+export const TableStubCell = withStyles(styleSheet)(TableStubCellBase);
diff --git a/packages/dx-react-grid/docs/reference/table-group-row.md b/packages/dx-react-grid/docs/reference/table-group-row.md
@@ -14,21 +14,21 @@ A plugin that renders group rows with the capability to expand and collapse them
 Name | Type | Default | Description
 -----|------|---------|------------
 groupCellTemplate | (args: [GroupCellArgs](#group-cell-args)) => ReactElement | | A component that renders a group row
-groupIndentCellTemplate | (args: [GroupIndentCellArgs](#group-indent-cell-args)) => ReactElement | | A component that renders a group indent cell
+groupIndentCellTemplate | (args: [GroupIndentCellArgs](#group-indent-cell-args)) => ReactElement | null | A component that renders a group indent cell
 groupIndentColumnWidth | number | | Width of the group indent columns
 
 ## Interfaces
 
 ### <a name="group-cell-args"></a>GroupCellArgs
 
-Describes properties passed to the template that renders a group row.
+Describes the properties passed to the template that renders a group row.
 
 A value with the following shape:
 
 Field | Type | Description
 ------|------|------------
 row | [GroupRow](#group-row) | A group row data object
-isExpanded | boolean | Specifies whether or not a row is expanded
+isExpanded | boolean | Specifies if a row is expanded
 toggleGroupExpanded | () => void | Toggles the expanded state of a group row
 
 ### <a name="group-indent-cell-args"></a>GroupIndentCellArgs