diff --git a/assets/index.less b/assets/index.less
index e2810cc2..3a9efcbe 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -55,6 +55,11 @@
}
}
+ &-row-striped {
+ .@{tablePrefixCls}-cell {
+ background: #fcf4f4;
+ }
+ }
// ================== Cell ==================
&-cell {
background: #f4f4f4;
diff --git a/docs/demo/stripe.md b/docs/demo/stripe.md
new file mode 100644
index 00000000..08de5f7f
--- /dev/null
+++ b/docs/demo/stripe.md
@@ -0,0 +1,8 @@
+---
+title: stripe
+nav:
+ title: Demo
+ path: /demo
+---
+
+
diff --git a/docs/examples/stripe.tsx b/docs/examples/stripe.tsx
new file mode 100644
index 00000000..ad1bf46e
--- /dev/null
+++ b/docs/examples/stripe.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import type { TableProps } from 'rc-table';
+import Table from 'rc-table';
+import '../../assets/index.less';
+
+interface FieldType {
+ name?: string;
+ age?: string;
+ address?: string;
+}
+
+const columns: TableProps['columns'] = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: 'Age',
+ dataIndex: 'age',
+ key: 'age',
+ },
+ {
+ title: 'Address',
+ dataIndex: 'address',
+ key: 'address',
+ },
+];
+
+const data = [
+ { name: 'John', age: '25', address: '1 A Street' },
+ { name: 'Fred', age: '38', address: '2 B Street' },
+ { name: 'Anne', age: '47', address: '3 C Street' },
+ { name: 'Ben', age: '14', address: '4 C Street' },
+ { name: 'Hali', age: '34', address: '5 C Street' },
+ { name: 'Hama', age: '25', address: '6 C Street' },
+];
+
+const Demo = () => (
+
+);
+
+export default Demo;
diff --git a/src/Body/index.tsx b/src/Body/index.tsx
index 58453439..3dffff2d 100644
--- a/src/Body/index.tsx
+++ b/src/Body/index.tsx
@@ -14,6 +14,7 @@ import cls from 'classnames';
export interface BodyProps {
data: readonly RecordType[];
measureColumnWidth: boolean;
+ stripe: boolean;
}
function Body(props: BodyProps) {
@@ -21,7 +22,7 @@ function Body(props: BodyProps) {
devRenderTimes(props);
}
- const { data, measureColumnWidth } = props;
+ const { data, measureColumnWidth, stripe } = props;
const {
prefixCls,
@@ -96,10 +97,14 @@ function Body(props: BodyProps) {
if (data.length) {
rows = flattenData.map((item, idx) => {
const { record, indent, index: renderIndex, rowKey } = item;
-
+ let className = '';
+ if (stripe && idx % 2 === 1) {
+ className = `${prefixCls}-row-striped`;
+ }
return (
direction?: Direction;
+ stripe?: boolean;
+
sticky?: boolean | TableSticky;
rowHoverable?: boolean;
@@ -207,6 +209,7 @@ function Table(
scroll,
tableLayout,
direction,
+ stripe,
// Additional Part
title,
@@ -639,7 +642,7 @@ function Table(
// Body
const bodyTable = (
-
+
);
const bodyColGroup = (