react-component · huyunan · Jun 5, 2025 · Jun 23, 2025 · Jul 23, 2025
diff --git 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
@@ -0,0 +1,8 @@
+---
+title: stripe
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/stripe.tsx"></code>
diff --git a/docs/examples/stripe.tsx 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<FieldType>['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 = () => (
+  <div>
+    <h2>Table with stripe</h2>
+    <Table columns={columns} data={data} stripe />
+  </div>
+);
+
+export default Demo;
diff --git a/src/Body/index.tsx b/src/Body/index.tsx
@@ -14,14 +14,15 @@
 export interface BodyProps<RecordType> {
   data: readonly RecordType[];
   measureColumnWidth: boolean;
+  stripe: boolean;
 }
 
 function Body<RecordType>(props: BodyProps<RecordType>) {
   if (process.env.NODE_ENV !== 'production') {
     devRenderTimes(props);
   }
 
-  const { data, measureColumnWidth } = props;
+  const { data, measureColumnWidth, stripe } = props;
 
   const {
     prefixCls,
@@ -96,10 +97,14 @@
   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 (
         <BodyRow
           classNames={bodyCls}
+          className={className}
           styles={bodyStyles}
           key={rowKey}
           rowKey={rowKey}

diff --git a/src/Table.tsx b/src/Table.tsx
@@ -130,6 +130,8 @@ export interface TableProps<RecordType = any>
 
   direction?: Direction;
 
+  stripe?: boolean;
+
   sticky?: boolean | TableSticky;
 
   rowHoverable?: boolean;
@@ -207,6 +209,7 @@ function Table<RecordType extends DefaultRecordType>(
     scroll,
     tableLayout,
     direction,
+    stripe,
 
     // Additional Part
     title,
@@ -625,7 +628,7 @@ function Table<RecordType extends DefaultRecordType>(
 
   // Body
   const bodyTable = (
-    <Body data={mergedData} measureColumnWidth={fixHeader || horizonScroll || isSticky} />
+    <Body data={mergedData} stripe={stripe} measureColumnWidth={fixHeader || horizonScroll || isSticky} />
   );
 
   const bodyColGroup = (