From 2c195ca9e47646fe3880b1c413fcd013f6044d70 Mon Sep 17 00:00:00 2001 From: huyunan <18842920976@163.com> Date: Thu, 5 Jun 2025 09:44:02 +0800 Subject: [PATCH] add: The table stripe display can be set. --- assets/index.less | 5 +++++ docs/demo/stripe.md | 8 +++++++ docs/examples/stripe.tsx | 46 ++++++++++++++++++++++++++++++++++++++++ src/Body/index.tsx | 9 ++++++-- src/Table.tsx | 5 ++++- 5 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 docs/demo/stripe.md create mode 100644 docs/examples/stripe.tsx diff --git a/assets/index.less b/assets/index.less index e2810cc23..3a9efcbe6 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 000000000..08de5f7f8 --- /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 000000000..ad1bf46e9 --- /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 = () => ( +
+

Table with stripe

+ + +); + +export default Demo; diff --git a/src/Body/index.tsx b/src/Body/index.tsx index 58453439c..3dffff2da 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, @@ -625,7 +628,7 @@ function Table( // Body const bodyTable = ( - + ); const bodyColGroup = (