null;
const tableTemplateMock = ({ children, ...props }) => (
{children}
@@ -92,7 +92,7 @@ describe('TableLayout', () => {
/>,
);
- testTablePart({ tree: tree.find('table > tbody'), rows, columns });
+ testTablePart({ tree: tree.find('table tbody'), rows, columns });
});
it('should render table with headerRows and columns', () => {
@@ -112,7 +112,7 @@ describe('TableLayout', () => {
/>,
);
- testTablePart({ tree: tree.find('table > thead'), rows, columns });
+ testTablePart({ tree: tree.find('table thead'), rows, columns });
});
it('should span columns if specified', () => {
@@ -138,7 +138,7 @@ describe('TableLayout', () => {
rowColumn = rowWrappers.at(1).find('td');
expect(rowColumn.length).toBe(2);
- expect(rowColumn.at(0).children(PropsContainer).props().colspan).toBe(undefined);
+ expect(rowColumn.at(0).children(PropsContainer).props()).not.toHaveProperty('colspan');
expect(rowColumn.at(1).children(PropsContainer).props().colspan).toBe(3);
});
@@ -229,24 +229,6 @@ describe('TableLayout', () => {
.toMatchObject({ row: rows[1], column: columns[1], e: {} });
});
- it('should not pass the "colspan" parameter to the cellTemplate if it is undefined', () => {
- const cellTemplate = jest.fn().mockImplementation(cellTemplateMock);
- mount(
- row.id}
- />,
- );
-
- expect(cellTemplate.mock.calls[0][0])
- .not.toHaveProperty('colspan');
- });
-
describe('flex column', () => {
it('should add flex column if all columns have fixed widths', () => {
const rows = [{ id: 1 }, { id: 2 }];
diff --git a/packages/dx-react-grid/src/components/table-layout/row-layout.jsx b/packages/dx-react-grid/src/components/table-layout/row-layout.jsx
new file mode 100644
index 0000000000..7dc7a800ee
--- /dev/null
+++ b/packages/dx-react-grid/src/components/table-layout/row-layout.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+ TemplateRenderer,
+} from '@devexpress/dx-react-core';
+
+import {
+ tableColumnKeyGetter,
+ getTableCellInfo,
+} from '@devexpress/dx-grid-core';
+
+const getColumnStyle = ({ column, animationState = {} }) => ({
+ width: column.width !== undefined ? `${column.width}px` : undefined,
+ ...animationState,
+});
+
+const getRowStyle = ({ row }) => ({
+ height: row.height !== undefined ? `${row.height}px` : undefined,
+});
+
+export class RowLayout extends React.PureComponent {
+ render() {
+ const {
+ row,
+ columns,
+ rowTemplate,
+ cellTemplate,
+ animationState,
+ } = this.props;
+
+ return (
+
+ {
+ columns
+ .filter((column, columnIndex) => !getTableCellInfo({ row, columns, columnIndex }).skip)
+ .map((column, columnIndex) => {
+ const key = tableColumnKeyGetter(column, columnIndex);
+ const colspan = getTableCellInfo({ row, columns, columnIndex }).colspan;
+ return (
+
+ );
+ })
+ }
+
+ );
+ }
+}
+
+RowLayout.propTypes = {
+ row: PropTypes.object.isRequired,
+ columns: PropTypes.array.isRequired,
+ rowTemplate: PropTypes.func.isRequired,
+ cellTemplate: PropTypes.func.isRequired,
+ animationState: PropTypes.instanceOf(Map).isRequired,
+};
diff --git a/packages/dx-react-grid/src/components/table-layout/rows-block-layout.jsx b/packages/dx-react-grid/src/components/table-layout/rows-block-layout.jsx
new file mode 100644
index 0000000000..500760d155
--- /dev/null
+++ b/packages/dx-react-grid/src/components/table-layout/rows-block-layout.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+ TemplateRenderer,
+} from '@devexpress/dx-react-core';
+
+import {
+ tableRowKeyGetter,
+ findTableCellTarget,
+} from '@devexpress/dx-grid-core';
+
+import { RowLayout } from './row-layout';
+
+export class RowsBlockLayout extends React.PureComponent {
+ render() {
+ const {
+ rows,
+ getRowId,
+ columns,
+ blockTemplate,
+ rowTemplate,
+ cellTemplate,
+ onClick,
+ animationState,
+ } = this.props;
+
+ return (
+ {
+ const { rowIndex, columnIndex } = findTableCellTarget(e);
+ if (rowIndex === -1 || columnIndex === -1) return;
+ onClick({ e, row: rows[rowIndex], column: columns[columnIndex] });
+ }}
+ >
+ {
+ rows
+ .map((row, rowIndex) => (
+
+ ))
+ }
+
+ );
+ }
+}
+
+RowsBlockLayout.propTypes = {
+ rows: PropTypes.array.isRequired,
+ getRowId: PropTypes.func.isRequired,
+ columns: PropTypes.array.isRequired,
+ blockTemplate: PropTypes.func.isRequired,
+ rowTemplate: PropTypes.func.isRequired,
+ cellTemplate: PropTypes.func.isRequired,
+ onClick: PropTypes.func.isRequired,
+ animationState: PropTypes.instanceOf(Map).isRequired,
+};