Skip to content

Commit 2c195ca

Browse files
huyunanhuyunan
committed
add: The table stripe display can be set.
1 parent 2ad5512 commit 2c195ca

File tree

5 files changed

+70
-3
lines changed

5 files changed

+70
-3
lines changed

‎assets/index.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,11 @@
5555
}
5656
}
5757

58+
&-row-striped {
59+
.@{tablePrefixCls}-cell {
60+
background: #fcf4f4;
61+
}
62+
}
5863
// ================== Cell ==================
5964
&-cell {
6065
background: #f4f4f4;

‎docs/demo/stripe.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: stripe
3+
nav:
4+
title: Demo
5+
path: /demo
6+
---
7+
8+
<code src="../examples/stripe.tsx"></code>

‎docs/examples/stripe.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react';
2+
import type { TableProps } from 'rc-table';
3+
import Table from 'rc-table';
4+
import '../../assets/index.less';
5+
6+
interface FieldType {
7+
name?: string;
8+
age?: string;
9+
address?: string;
10+
}
11+
12+
const columns: TableProps<FieldType>['columns'] = [
13+
{
14+
title: 'Name',
15+
dataIndex: 'name',
16+
key: 'name',
17+
},
18+
{
19+
title: 'Age',
20+
dataIndex: 'age',
21+
key: 'age',
22+
},
23+
{
24+
title: 'Address',
25+
dataIndex: 'address',
26+
key: 'address',
27+
},
28+
];
29+
30+
const data = [
31+
{ name: 'John', age: '25', address: '1 A Street' },
32+
{ name: 'Fred', age: '38', address: '2 B Street' },
33+
{ name: 'Anne', age: '47', address: '3 C Street' },
34+
{ name: 'Ben', age: '14', address: '4 C Street' },
35+
{ name: 'Hali', age: '34', address: '5 C Street' },
36+
{ name: 'Hama', age: '25', address: '6 C Street' },
37+
];
38+
39+
const Demo = () => (
40+
<div>
41+
<h2>Table with stripe</h2>
42+
<Table columns={columns} data={data} stripe />
43+
</div>
44+
);
45+
46+
export default Demo;

‎src/Body/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@ import cls from 'classnames';
1414
export interface BodyProps<RecordType> {
1515
data: readonly RecordType[];
1616
measureColumnWidth: boolean;
17+
stripe: boolean;
1718
}
1819

1920
function Body<RecordType>(props: BodyProps<RecordType>) {
2021
if (process.env.NODE_ENV !== 'production') {
2122
devRenderTimes(props);
2223
}
2324

24-
const { data, measureColumnWidth } = props;
25+
const { data, measureColumnWidth, stripe } = props;
2526

2627
const {
2728
prefixCls,
@@ -96,10 +97,14 @@ function Body<RecordType>(props: BodyProps<RecordType>) {
9697
if (data.length) {
9798
rows = flattenData.map((item, idx) => {
9899
const { record, indent, index: renderIndex, rowKey } = item;
99-
100+
let className = '';
101+
if (stripe && idx % 2 === 1) {
102+
className = `${prefixCls}-row-striped`;
103+
}
100104
return (
101105
<BodyRow
102106
classNames={bodyCls}
107+
className={className}
103108
styles={bodyStyles}
104109
key={rowKey}
105110
rowKey={rowKey}

‎src/Table.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,8 @@ export interface TableProps<RecordType = any>
130130

131131
direction?: Direction;
132132

133+
stripe?: boolean;
134+
133135
sticky?: boolean | TableSticky;
134136

135137
rowHoverable?: boolean;
@@ -207,6 +209,7 @@ function Table<RecordType extends DefaultRecordType>(
207209
scroll,
208210
tableLayout,
209211
direction,
212+
stripe,
210213

211214
// Additional Part
212215
title,
@@ -625,7 +628,7 @@ function Table<RecordType extends DefaultRecordType>(
625628

626629
// Body
627630
const bodyTable = (
628-
<Body data={mergedData} measureColumnWidth={fixHeader || horizonScroll || isSticky} />
631+
<Body data={mergedData} stripe={stripe} measureColumnWidth={fixHeader || horizonScroll || isSticky} />
629632
);
630633

631634
const bodyColGroup = (

0 commit comments

Comments
 (0)