feat(column): support rowSpan on <Column> (#243)

* feat(column): support `rowSpan` on `<Column>`

* docs: update README.md

docs/data/usersForRowSpan.ts

@@ -0,0 +1,156 @@
+export default [
+  {
+    id: 1,
+    city: 'New Gust',
+    rowspan: 3,
+    email: 'Leora13@yahoo.com',
+    firstName: 'Ernest Schuppe Anderson',
+    lastName: null,
+    street: null,
+    zipCode: '17026-3154',
+    date: '2016-09-23T07:57:40.195Z',
+    bs: 'global drive functionalities',
+    catchPhrase: 'Intuitive impactful software',
+    companyName: 'Lebsack - Nicolas',
+    words: 'saepe et omnis',
+    sentence: 'Quos aut sunt id nihil qui.'
+  },
+  {
+    id: 2,
+    city: 'New Gust',
+    email: 'Mose_Gerhold51@yahoo.com',
+    firstName: 'Janis',
+    lastName: 'Bode',
+    street: 'Dickinson Keys',
+    zipCode: '43767',
+    date: '2017-03-06T09:59:12.551Z',
+    bs: 'e-business maximize bandwidth',
+    catchPhrase: 'De-engineered discrete secured line',
+    companyName: 'Glover - Hermiston',
+    words: 'deleniti dolor nihil',
+    sentence: 'Illo quidem libero corporis laborum.'
+  },
+  {
+    id: 3,
+    city: 'New Gust',
+    email: 'Frieda.Sauer61@gmail.com',
+    firstName: 'Makenzie Vandervort',
+    lastName: null,
+    street: 'Legros Divide',
+    zipCode: '54812',
+    date: '2016-12-08T13:44:26.557Z',
+    bs: 'plug-and-play e-enable content',
+    catchPhrase: 'Ergonomic 6th generation challenge',
+    companyName: 'Williamson - Kassulke',
+    words: 'quidem earum magnam',
+    sentence: 'Nam qui perferendis ut rem vitae saepe.'
+  },
+  {
+    id: 4,
+    rowspan: 2,
+    city: 'Vandervort，East Catalina',
+    email: 'Eloisa.OHara@hotmail.com',
+    firstName: 'Ciara',
+    lastName: 'Towne',
+    street: null,
+    zipCode: '76315-2246',
+    date: '2016-07-19T12:54:30.994Z',
+    bs: 'extensible innovate e-business',
+    catchPhrase: 'Upgradable local model',
+    companyName: 'Hilpert, Eichmann and Brown',
+    words: 'exercitationem rerum sit',
+    sentence: 'Qui rerum ipsa atque qui.'
+  },
+  {
+    id: 5,
+    city: 'Vandervort，East Catalina',
+    email: 'Brisa46@hotmail.com',
+    firstName: 'Suzanne',
+    lastName: 'Wolff',
+    street: null,
+    zipCode: '88870-3897',
+    date: '2017-02-23T17:11:53.875Z',
+    bs: 'back-end orchestrate networks',
+    catchPhrase: 'Exclusive human-resource knowledge base',
+    companyName: 'Mayer - Considine',
+    words: 'voluptatum tempore at',
+    sentence: 'Enim quia deleniti molestiae aut.'
+  },
+  {
+    id: 6,
+    rowspan: 3,
+    city: 'Maria Junctions, Schummtown',
+    email: 'Cody.Schultz56@gmail.com',
+    firstName: 'Alessandra',
+    lastName: null,
+    street: 'Mosciski Estate',
+    zipCode: '81514',
+    date: '2016-06-30T05:23:18.734Z',
+    bs: 'sexy evolve technologies',
+    catchPhrase: 'Virtual hybrid throughput',
+    companyName: 'Nikolaus and Sons',
+    words: 'alias minus repudiandae',
+    sentence: 'Sed qui eius excepturi sunt voluptates.'
+  },
+  {
+    id: 7,
+    city: 'Maria Junctions, Schummtown',
+    email: 'Enrico_Beer@yahoo.com',
+    firstName: 'Margret',
+    lastName: 'Heller',
+    street: null,
+    zipCode: '17423-9317',
+    date: '2017-03-13T21:09:47.253Z',
+    bs: 'wireless morph synergies',
+    catchPhrase: 'Profit-focused radical help-desk',
+    companyName: 'Corwin, Maggio and Wintheiser',
+    words: 'temporibus possimus neque',
+    sentence: 'Eum amet ea non natus qui assumenda illo officia qui.'
+  },
+  {
+    id: 8,
+    city: 'Maria Junctions, Schummtown',
+    email: 'Mitchel.Herman@yahoo.com',
+    firstName: 'Emiliano',
+    lastName: 'Moore',
+    street: null,
+    zipCode: '33930-7081',
+    date: '2016-03-27T07:26:57.345Z',
+    bs: 'customized integrate e-tailers',
+    catchPhrase: 'Total system-worthy contingency',
+    companyName: 'Gulgowski - Botsford',
+    words: 'deleniti ipsa hic',
+    sentence: 'Ducimus id quaerat neque.'
+  },
+  {
+    id: 9,
+    city: 'Gilberthaven',
+    rowspan: 2,
+    email: 'Gaylord_Reichel16@yahoo.com',
+    firstName: 'Alessandra',
+    lastName: 'Smith',
+    street: 'Kali Spurs',
+    zipCode: '01370',
+    date: '2017-01-24T22:11:53.835Z',
+    bs: 'extensible repurpose action-items',
+    catchPhrase: 'Virtual dedicated definition',
+    companyName: 'Maggio LLC',
+    words: 'libero unde est',
+    sentence: 'Non adipisci hic laboriosam et qui laudantium aspernatur.'
+  },
+  {
+    id: 10,
+    city: 'Gilberthaven',
+    email: 'Eileen48@gmail.com',
+    firstName: 'Eldridge',
+    lastName: 'Bins',
+    street: 'Casper Squares',
+    zipCode: '80025-1552',
+    date: '2016-07-20T05:59:45.630Z',
+    bs: 'cutting-edge expedite partnerships',
+    catchPhrase: 'Organic user-facing functionalities',
+    companyName: 'Leffler, Cummerata and Price',
+    words: 'sed exercitationem quas',
+    sentence: 'Voluptas dolorem quasi aspernatur.'
+  }
+];

docs/index.tsx

@@ -11,6 +11,7 @@ import { Table, Column, Cell, HeaderCell, ColumnGroup } from '../src';
 import fakeData from './data/users';
 import fakeTreeData from './data/treeData';
 import fakeDataForColSpan from './data/usersForColSpan';
+import fakeDataForRowSpan from './data/usersForRowSpan';
 import fakeLargeData from './data/fakeLargeData.json';
 import fakeObjectDataListStore, { createFakeRowObjectData } from './data/fakeObjectDataListStore';
 import { useDrag, useDrop, DndProvider } from 'react-dnd';
@@ -37,6 +38,7 @@ function App() {
           fakeTreeData,
           fakeLargeData,
           fakeDataForColSpan,
+          fakeDataForRowSpan,
           Table,
           Column,
           ColumnGroup,
@@ -117,7 +119,10 @@ function App() {
             title: 'Colspan Cell',
             content: require('./md/ColspanTable.md')
           },
-
+          {
+            title: 'Rowspan Cell',
+            content: require('./md/RowspanTable.md')
+          },
           {
             title: 'Column Group',
             content: require('./md/ColumnGroupTable.md')

docs/md/RowspanTable.md

@@ -0,0 +1,103 @@
+### Rowspan Cell
+
+<!--start-code-->
+
+```js
+const App = () => {
+  return (
+    <Table
+      bordered
+      height={400}
+      data={fakeDataForRowSpan}
+      onRowClick={data => {
+        console.log(data);
+      }}
+    >
+      <Column
+        width={250}
+        resizable
+        verticalAlign="middle"
+        rowSpan={rowData => {
+          return rowData.rowspan;
+        }}
+      >
+        <HeaderCell>city</HeaderCell>
+        <Cell dataKey="city" />
+      </Column>
+
+      <Column width={130} resizable>
+        <HeaderCell>firstName</HeaderCell>
+        <Cell dataKey="firstName" />
+      </Column>
+
+      <Column width={130} resizable>
+        <HeaderCell>lastName</HeaderCell>
+        <Cell dataKey="lastName" />
+      </Column>
+
+      <Column width={200} resizable>
+        <HeaderCell>street</HeaderCell>
+        <Cell dataKey="street" />
+      </Column>
+
+      <Column width={200}>
+        <HeaderCell>Company Name</HeaderCell>
+        <Cell dataKey="companyName" />
+      </Column>
+
+      <Column width={200}>
+        <HeaderCell>Email</HeaderCell>
+        <Cell dataKey="email" />
+      </Column>
+    </Table>
+  );
+};
+
+ReactDOM.render(<App />);
+```
+
+<!--end-code-->
+
+```js
+const data = [
+  {
+    city: 'New Gust',
+    name: 'Janis',
+    rowspan: 2
+  },
+  {
+    city: 'New Gust',
+    name: 'Ernest Schuppe Anderson'
+  },
+  {
+    city: 'Maria Junctions',
+    name: 'Alessandra',
+    rowspan: 3
+  },
+  {
+    city: 'Maria Junctions',
+    name: 'Margret'
+  },
+  {
+    city: 'Maria Junctions',
+    name: 'Emiliano'
+  }
+];
+
+<Table data={data}>
+  <Column
+    width={100}
+    verticalAlign="middle"
+    rowSpan={rowData => {
+      return rowData.rowspan;
+    }}
+  >
+    <HeaderCell>Name</HeaderCell>
+    <Cell dataKey="city" />
+  </Column>
+  <Column width={100}>
+    <HeaderCell />
+    <Cell dataKey="name" />
+  </Column>
+</Table>;
+```

src/Cell.tsx

@@ -35,6 +35,7 @@ export interface InnerCellProps extends CellProps {
   hasChildren?: boolean;
   children?: React.ReactNode | ((rowData: RowDataType, rowIndex: number) => React.ReactNode);
   rowKey?: string | number;
+  rowSpan?: number;
   depth?: number;
   wordWrap?: boolean;
   removed?: boolean;
@@ -74,6 +75,7 @@ const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElem
     rowIndex,
     removed,
     rowKey,
+    rowSpan,
     wordWrap,
     depth,
     verticalAlign,
@@ -104,7 +106,12 @@ const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElem
   const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
   const classes = merge(
     className,
-    withClassPrefix({ expanded: expanded && isTreeCol, first: firstColumn, last: lastColumn })
+    withClassPrefix({
+      expanded: expanded && isTreeCol,
+      first: firstColumn,
+      last: lastColumn,
+      rowspan: rowSpan && !isHeaderCell
+    })
   );
 
   const nextHeight = isHeaderCell ? headerHeight : cellHeight;

src/Column.tsx

@@ -7,6 +7,9 @@ export interface ColumnProps {
   /** Merges column cells to merge when the dataKey value for the merged column is null or undefined. */
   colSpan?: number;
 
+  /** Merges rows on the specified column. */
+  rowSpan?: (rowData: any) => number;
+
   /** Fixed column */
   fixed?: boolean | 'left' | 'right';
 
@@ -50,6 +53,7 @@ const propTypes = {
   flexGrow: PropTypes.number,
   minWidth: PropTypes.number,
   colSpan: PropTypes.number,
+  rowSpan: PropTypes.func,
   treeCol: PropTypes.bool,
   onResize: PropTypes.func
 };

src/Row.tsx

@@ -11,6 +11,7 @@ export interface RowProps extends StandardProps {
   top?: number;
   isHeaderRow?: boolean;
   rowRef?: any;
+  rowSpan?: number;
 }
 
 const Row = React.forwardRef((props: RowProps, ref: React.Ref<HTMLDivElement>) => {
@@ -25,12 +26,13 @@ const Row = React.forwardRef((props: RowProps, ref: React.Ref<HTMLDivElement>) =
     rowRef,
     classPrefix,
     children,
+    rowSpan,
     ...rest
   } = props;
 
   const { translateDOMPositionXY } = useContext(TableContext);
   const { withClassPrefix, merge } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({ header: isHeaderRow }));
+  const classes = merge(className, withClassPrefix({ header: isHeaderRow, rowspan: rowSpan }));
 
   const styles = {
     minWidth: width,
@@ -62,7 +64,8 @@ Row.propTypes = {
   rowRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   className: PropTypes.string,
   classPrefix: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  rowSpan: PropTypes.number
 };
 
 export default Row;