Skip to content

Commit b5d933b

Browse files
chetoncheton
committed
Pass rowIndex to expandedRowRender, onRowClick, and column's render
function * expandedRowRender(record, rowIndex) * onRowClick(record, rowIndex) * render(value, record, rowIndex)
1 parent c92e71e commit b5d933b

File tree

4 files changed

+49
-73
lines changed

4 files changed

+49
-73
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -419,12 +419,12 @@ columns | Object[] | [] | The columns
419419
data | Object[] | [] | Data record array to be rendered.
420420
emptyText | Function | () => { return 'No Data'; } | Display text when data is empty.
421421
expandedRowKeys | String[] | | Current expanded rows keys.
422-
expandedRowRender | Function(record, key) | | Expanded content render function.
422+
expandedRowRender | Function(record, rowIndex) | | Expanded content render function.
423423
footer | React Node or Function(): React Node| | Table footer render function.
424424
hoverable | Boolean | true | Whether use row hover style.
425425
loading | Boolean | false | Whether table is loading.
426426
maxHeight | Number | | Table maximum height.
427-
onRowClick | Function(record, key) | | Handle rowClick action.
427+
onRowClick | Function(record, rowIndex, event) | | Handle rowClick action.
428428
showHeader | Boolean | true | Whether table head is shown.
429429
sortable | Boolean | false | Whether table head is sortable.
430430
title | React Node or Function(): React Node| | Table title render function.
@@ -449,7 +449,7 @@ dataIndex | String | | Display field of the data record.
449449
dataKey | String | | dataKey is an alias for dataIndex.
450450
width | String or Number | | Width of the specific proportion calculation according to the width of the columns.
451451
fixed | Boolean | false | This column will be fixed at left side when table scroll horizontally.
452-
render | Function(value, row) | | The render function of cell, has two params: the text of this cell, the record of this row, it's return a react node.
452+
render | Function(value, record, rowIndex) | | The render function of cell, has two params: the text of this cell, the record of this row, it's return a react node.
453453
454454
## License
455455

‎src/TableBody.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ class TableBody extends PureComponent {
9292
expandedRowKeys={expandedRowKeys}
9393
expandedRowRender={expandedRowRender}
9494
rowKey={key}
95-
index={index}
95+
rowIndex={index}
9696
key={key}
9797
onHover={onRowHover}
9898
onRowClick={onRowClick}

‎src/TableCell.jsx‎

Lines changed: 12 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,16 @@
1-
import classNames from 'classnames';
2-
import React, { Component } from 'react';
3-
import PropTypes from 'prop-types';
4-
import get from 'lodash.get';
1+
import cx from 'classnames';
2+
import React from 'react';
53
import styles from './index.styl';
64

7-
class TableCell extends Component {
8-
static propTypes = {
9-
column: PropTypes.object,
10-
record: PropTypes.object
11-
};
12-
13-
static defaultProps = {
14-
column: {},
15-
record: {}
16-
};
17-
18-
shouldComponentUpdate(nextProps, nextState) {
19-
return (
20-
(typeof nextProps.column.render === 'function')
21-
||
22-
nextProps.column !== this.props.column
23-
||
24-
nextProps.record !== this.props.record
25-
);
26-
}
27-
28-
render() {
29-
const { column, record } = this.props;
30-
const render = column.render;
31-
// dataKey is an alias for dataIndex
32-
const dataKey = (typeof column.dataKey !== 'undefined') ? column.dataKey : column.dataIndex;
33-
const text = get(record, dataKey);
34-
35-
return (
36-
<div
37-
className={classNames(
38-
styles.td,
39-
column.className,
40-
column.cellClassName
41-
)}
42-
style={{
43-
...column.style,
44-
...column.cellStyle
45-
}}
46-
>
47-
<div className={styles.tdContent}>
48-
{typeof render === 'function' ? render(text, record) : text}
49-
</div>
50-
</div>
51-
);
52-
}
53-
}
5+
const TableCell = ({ className, children, ...props }) => (
6+
<div
7+
{...props}
8+
className={cx(className, styles.td)}
9+
>
10+
<div className={styles.tdContent}>
11+
{children}
12+
</div>
13+
</div>
14+
);
5415

5516
export default TableCell;

‎src/TableRow.jsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import classNames from 'classnames';
1+
import cx from 'classnames';
22
import ensureArray from 'ensure-array';
3+
import get from 'lodash.get';
34
import React, { PureComponent } from 'react';
45
import PropTypes from 'prop-types';
56
import styles from './index.styl';
@@ -12,7 +13,7 @@ class TableRow extends PureComponent {
1213
expandedRowKeys: PropTypes.array,
1314
expandedRowRender: PropTypes.func,
1415
rowKey: PropTypes.any,
15-
index: PropTypes.number,
16+
rowIndex: PropTypes.number,
1617
onHover: PropTypes.func,
1718
onRowClick: PropTypes.func,
1819
record: PropTypes.object,
@@ -31,8 +32,8 @@ class TableRow extends PureComponent {
3132
};
3233

3334
handleRowClick = (event) => {
34-
const { onRowClick, record, index } = this.props;
35-
onRowClick(record, index, event);
35+
const { onRowClick, record, rowIndex } = this.props;
36+
onRowClick(record, rowIndex, event);
3637
};
3738

3839
handleRowMouseEnter = (event) => {
@@ -65,18 +66,20 @@ class TableRow extends PureComponent {
6566
hoveredRowKey,
6667
expandedRowRender,
6768
rowKey,
69+
rowIndex,
6870
record,
6971
rowClassName
7072
} = this.props;
7173
const className = rowClassName(record, rowKey);
7274
const isRowExpanded = this.isRowExpanded(record, rowKey);
7375
let expandedRowContent;
7476
if (expandedRowRender && isRowExpanded) {
75-
expandedRowContent = expandedRowRender(record, rowKey);
77+
expandedRowContent = expandedRowRender(record, rowIndex);
7678
}
79+
7780
return (
7881
<div
79-
className={classNames(
82+
className={cx(
8083
styles.tr,
8184
className,
8285
{ [styles['tr-hover']]: (hoveredRowKey === rowKey) }
@@ -87,18 +90,30 @@ class TableRow extends PureComponent {
8790
role="presentation"
8891
onClick={this.handleRowClick}
8992
>
90-
{
91-
columns.map((column, i) => {
92-
const index = i++;
93-
return (
94-
<TableCell
95-
key={`${rowKey}_${index}`}
96-
column={column}
97-
record={record}
98-
/>
99-
);
100-
})
101-
}
93+
{columns.map((column, index) => {
94+
const key = `${rowKey}_${index}`;
95+
// dataKey is an alias for dataIndex
96+
const dataKey = (typeof column.dataKey !== 'undefined')
97+
? column.dataKey
98+
: column.dataIndex;
99+
let cellValue = get(record, dataKey);
100+
if (typeof column.render === 'function') {
101+
cellValue = column.render(cellValue, record, rowIndex);
102+
}
103+
104+
return (
105+
<TableCell
106+
key={key}
107+
className={cx(column.className, column.cellClassName)}
108+
style={{
109+
...column.style,
110+
...column.cellStyle
111+
}}
112+
>
113+
{cellValue}
114+
</TableCell>
115+
);
116+
})}
102117
{isRowExpanded &&
103118
<div className={styles['tr-expand']}>
104119
{ expandedRowContent }

0 commit comments

Comments
 (0)