Skip to content

add: The table stripe display can be set. #1290

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions assets/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@
}
}

&-row-striped {
.@{tablePrefixCls}-cell {
background: #fcf4f4;
}
}
// ================== Cell ==================
&-cell {
background: #f4f4f4;
Expand Down
8 changes: 8 additions & 0 deletions docs/demo/stripe.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: stripe
nav:
title: Demo
path: /demo
---

<code src="../examples/stripe.tsx"></code>
46 changes: 46 additions & 0 deletions docs/examples/stripe.tsx
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 7 additions & 2 deletions src/Body/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@
export interface BodyProps<RecordType> {
data: readonly RecordType[];
measureColumnWidth: boolean;
stripe: boolean;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

修复类型定义不一致问题

BodyProps 中的 stripe 属性应该标记为可选,以与 TableProps 中的定义保持一致。

export interface BodyProps<RecordType> {
  data: readonly RecordType[];
  measureColumnWidth: boolean;
- stripe: boolean;
+ stripe?: boolean;
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
stripe: boolean;
export interface BodyProps<RecordType> {
data: readonly RecordType[];
measureColumnWidth: boolean;
stripe?: boolean;
}
🤖 Prompt for AI Agents
In src/Body/index.tsx at line 17, the stripe property in the BodyProps interface
is currently required but should be marked as optional to match the definition
in TableProps. Update the type definition by adding a question mark after stripe
to indicate it is optional.

}

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

const { data, measureColumnWidth } = props;
const { data, measureColumnWidth, stripe } = props;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

添加默认值处理

应该为 stripe 属性提供默认值,确保在未传递该属性时的正确行为。

- const { data, measureColumnWidth, stripe } = props;
+ const { data, measureColumnWidth, stripe = false } = props;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const { data, measureColumnWidth, stripe } = props;
const { data, measureColumnWidth, stripe = false } = props;
🤖 Prompt for AI Agents
In src/Body/index.tsx at line 25, the destructured prop 'stripe' lacks a default
value, which may cause issues if it is undefined. Update the destructuring
assignment to provide a default value for 'stripe', such as 'false' or another
appropriate default, ensuring consistent behavior when the prop is not passed.


const {
prefixCls,
Expand Down Expand Up @@ -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`;
}

Check warning on line 103 in src/Body/index.tsx

View check run for this annotation

Codecov / codecov/patch

src/Body/index.tsx#L103

Added line #L103 was not covered by tests
return (
<BodyRow
classNames={bodyCls}
className={className}
styles={bodyStyles}
key={rowKey}
rowKey={rowKey}
Expand Down
5 changes: 4 additions & 1 deletion src/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,8 @@ export interface TableProps<RecordType = any>

direction?: Direction;

stripe?: boolean;

sticky?: boolean | TableSticky;

rowHoverable?: boolean;
Expand Down Expand Up @@ -207,6 +209,7 @@ function Table<RecordType extends DefaultRecordType>(
scroll,
tableLayout,
direction,
stripe,

// Additional Part
title,
Expand Down Expand Up @@ -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 = (
Expand Down