Skip to content

Commit ac3c4de

Browse files
yesmeckyesmeck
committed
Add onRow onHeaderRow column[onCell] and column[onHeaderCell]
1 parent 505b44b commit ac3c4de

File tree

7 files changed

+144
-44
lines changed

7 files changed

+144
-44
lines changed

‎src/ExpandableTable.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,12 +111,14 @@ class ExpandableTable extends React.Component {
111111
return;
112112
}
113113

114-
rows[0].unshift({
115-
key: 'rc-table-expandIconAsCell',
114+
const iconColumn = {
115+
key: 'rc-table-expand-icon-cell',
116116
className: `${prefixCls}-expand-icon-th`,
117117
title: '',
118118
rowSpan: rows.length,
119-
});
119+
};
120+
121+
rows[0].unshift({ ...iconColumn, column: iconColumn });
120122
}
121123

122124
renderExpandedRow(content, className, ancestorKeys, fixed) {

‎src/Table.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default class Table extends React.Component {
2222
rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
2323
rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
2424
onRow: PropTypes.func,
25+
onHeaderRow: PropTypes.func,
2526
onRowClick: PropTypes.func,
2627
onRowDoubleClick: PropTypes.func,
2728
onRowContextMenu: PropTypes.func,
@@ -62,6 +63,7 @@ export default class Table extends React.Component {
6263
rowKey: 'key',
6364
rowClassName: () => '',
6465
onRow() {},
66+
onHeaderRow() {},
6567
onRowClick() {},
6668
onRowDoubleClick() {},
6769
onRowContextMenu() {},

‎src/TableCell.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ export default class TableCell extends React.Component {
6363
}
6464
}
6565

66+
if (column.onCell) {
67+
tdProps = { ...tdProps, ...column.onCell(record) };
68+
}
69+
6670
// Fix https://github.com/ant-design/ant-design/issues/1202
6771
if (this.isInvalidRenderCellText(text)) {
6872
text = null;
@@ -81,8 +85,8 @@ export default class TableCell extends React.Component {
8185
return (
8286
<BodyCell
8387
className={className}
84-
{...tdProps}
8588
onClick={this.handleClick}
89+
{...tdProps}
8690
>
8791
{indentText}
8892
{expandIcon}

‎src/TableHeader.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ function getHeaderRows(columns, currentRow = 0, rows) {
1616
key: column.key,
1717
className: column.className || '',
1818
children: column.title,
19+
column,
1920
};
2021
if (column.children) {
2122
getHeaderRows(column.children, currentRow + 1, rows);
@@ -35,7 +36,7 @@ function getHeaderRows(columns, currentRow = 0, rows) {
3536

3637
export default function TableHeader(props, { table }) {
3738
const { components } = table;
38-
const { prefixCls, showHeader } = table.props;
39+
const { prefixCls, showHeader, onHeaderRow } = table.props;
3940
const { expander, columns, fixed } = props;
4041

4142
if (!showHeader) {
@@ -54,11 +55,13 @@ export default function TableHeader(props, { table }) {
5455
rows.map((row, index) => (
5556
<TableHeaderRow
5657
key={index}
58+
index={index}
5759
fixed={fixed}
5860
columns={columns}
5961
rows={rows}
6062
row={row}
6163
components={components}
64+
onHeaderRow={onHeaderRow}
6265
/>
6366
))
6467
}
@@ -70,6 +73,7 @@ TableHeader.propTypes = {
7073
fixed: PropTypes.string,
7174
columns: PropTypes.array.isRequired,
7275
expander: PropTypes.object.isRequired,
76+
onHeaderRow: PropTypes.func,
7377
};
7478

7579
TableHeader.contextTypes = {

‎src/TableHeaderRow.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
import React from 'react';
22
import { connect } from 'mini-store';
33

4-
function TableHeaderRow({ row, height, components }) {
4+
function TableHeaderRow({ row, index, height, components, onHeaderRow }) {
55
const style = { height };
66
const HeaderRow = components.header.row;
77
const HeaderCell = components.header.cell;
8+
const rowProps = onHeaderRow(row.map(cell => cell.column), index);
89

910
return (
10-
<HeaderRow style={style}>
11-
{row.map((cell, i) => <HeaderCell {...cell} key={i} />)}
11+
<HeaderRow style={style} {...rowProps}>
12+
{row.map((cell, i) => {
13+
const { column, ...cellProps } = cell;
14+
const customProps = column.onHeaderCell ? column.onHeaderCell(column) : {};
15+
return <HeaderCell {...cellProps} {...customProps} key={i} />;
16+
})}
1217
</HeaderRow>
1318
);
1419
}

‎tests/Table.spec.js‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -441,7 +441,7 @@ describe('Table', () => {
441441
expect(wrapper).toMatchSnapshot();
442442
});
443443

444-
it('onRow', () => {
444+
it('renders onRow correctly', () => {
445445
const onRow = (record, index) => ({
446446
id: `row-${record.key}`,
447447
index,
@@ -451,6 +451,43 @@ describe('Table', () => {
451451
expect(wrapper.find('tbody tr')).toMatchSnapshot();
452452
});
453453

454+
it('renders column.onCell correctly', () => {
455+
const onCell = (record) => ({
456+
id: `cell-${record.name}`,
457+
});
458+
const columns = [
459+
{ title: 'Name', dataIndex: 'name', key: 'name', onCell },
460+
];
461+
const wrapper = render(createTable({ columns }));
462+
463+
expect(wrapper.find('tbody td')).toMatchSnapshot();
464+
});
465+
466+
it('renders onHeaderRow correctly', () => {
467+
const onHeaderRow = jest.fn((columns, index) => ({
468+
id: `header-row-${index}`,
469+
}));
470+
const wrapper = render(createTable({ onHeaderRow }));
471+
472+
expect(wrapper.find('thead tr')).toMatchSnapshot();
473+
expect(onHeaderRow).toBeCalledWith(
474+
[{ title: 'Name', dataIndex: 'name', key: 'name' }],
475+
0,
476+
);
477+
});
478+
479+
it('renders column.onHeaderCell', () => {
480+
const onHeaderCell = (column) => ({
481+
id: `header-cell-${column.key}`,
482+
});
483+
const columns = [
484+
{ title: 'Name', dataIndex: 'name', key: 'name', onHeaderCell },
485+
];
486+
const wrapper = render(createTable({ columns }));
487+
488+
expect(wrapper.find('thead th')).toMatchSnapshot();
489+
});
490+
454491
describe('custom components', () => {
455492
const MyTable = (props) => <table name="my-table" {...props} />;
456493
const HeaderWrapper = (props) => <thead name="my-header-wrapper" {...props} />;

‎tests/__snapshots__/Table.spec.js.snap‎

Lines changed: 81 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -386,41 +386,6 @@ exports[`Table dataIndex render text by path 1`] = `
386386
</div>
387387
`;
388388

389-
exports[`Table onRow 1`] = `
390-
Array [
391-
<tr
392-
class="rc-table-row rc-table-row-level-0"
393-
id="row-key0"
394-
index="0"
395-
>
396-
<td
397-
class=""
398-
>
399-
<span
400-
class="rc-table-row-indent indent-level-0"
401-
style="padding-left:0px"
402-
/>
403-
Lucy
404-
</td>
405-
</tr>,
406-
<tr
407-
class="rc-table-row rc-table-row-level-0"
408-
id="row-key1"
409-
index="1"
410-
>
411-
<td
412-
class=""
413-
>
414-
<span
415-
class="rc-table-row-indent indent-level-0"
416-
style="padding-left:0px"
417-
/>
418-
Jack
419-
</td>
420-
</tr>,
421-
]
422-
`;
423-
424389
exports[`Table renders colSpan correctly 1`] = `
425390
<div
426391
class="rc-table rc-table-scroll-position-left"
@@ -557,6 +522,40 @@ exports[`Table renders column correctly 1`] = `
557522
</div>
558523
`;
559524

525+
exports[`Table renders column.onCell correctly 1`] = `
526+
Array [
527+
<td
528+
class=""
529+
id="cell-Lucy"
530+
>
531+
<span
532+
class="rc-table-row-indent indent-level-0"
533+
style="padding-left:0px"
534+
/>
535+
Lucy
536+
</td>,
537+
<td
538+
class=""
539+
id="cell-Jack"
540+
>
541+
<span
542+
class="rc-table-row-indent indent-level-0"
543+
style="padding-left:0px"
544+
/>
545+
Jack
546+
</td>,
547+
]
548+
`;
549+
550+
exports[`Table renders column.onHeaderCell 1`] = `
551+
<th
552+
class=""
553+
id="header-cell-name"
554+
>
555+
Name
556+
</th>
557+
`;
558+
560559
exports[`Table renders correctly 1`] = `
561560
<div
562561
class="test-prefix test-class-name test-prefix-scroll-position-left"
@@ -1039,6 +1038,53 @@ exports[`Table renders footer correctly 1`] = `
10391038
</div>
10401039
`;
10411040

1041+
exports[`Table renders onHeaderRow correctly 1`] = `
1042+
<tr
1043+
id="header-row-0"
1044+
>
1045+
<th
1046+
class=""
1047+
>
1048+
Name
1049+
</th>
1050+
</tr>
1051+
`;
1052+
1053+
exports[`Table renders onRow correctly 1`] = `
1054+
Array [
1055+
<tr
1056+
class="rc-table-row rc-table-row-level-0"
1057+
id="row-key0"
1058+
index="0"
1059+
>
1060+
<td
1061+
class=""
1062+
>
1063+
<span
1064+
class="rc-table-row-indent indent-level-0"
1065+
style="padding-left:0px"
1066+
/>
1067+
Lucy
1068+
</td>
1069+
</tr>,
1070+
<tr
1071+
class="rc-table-row rc-table-row-level-0"
1072+
id="row-key1"
1073+
index="1"
1074+
>
1075+
<td
1076+
class=""
1077+
>
1078+
<span
1079+
class="rc-table-row-indent indent-level-0"
1080+
style="padding-left:0px"
1081+
/>
1082+
Jack
1083+
</td>
1084+
</tr>,
1085+
]
1086+
`;
1087+
10421088
exports[`Table renders rowSpan correctly 1`] = `
10431089
<div
10441090
class="rc-table rc-table-scroll-position-left"

0 commit comments

Comments
 (0)