We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
1.10.0
https://stackblitz.com/edit/react-wwzryl?file=src%2Fdemo.tsx
import React, { useState } from 'react'; import { Table, Checkbox, Radio, Space, Tag } from 'tdesign-react'; import { ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon, } from 'tdesign-icons-react';
import type { TableProps } from 'tdesign-react';
const RadioButton = Radio.Button; const RadioGroup = Radio.Group; const data: TableProps['data'] = [ { channel: '__OTHER', paycurrencyamtusd_sum: 0, provideuin_count_distinct: 0, id: '4Pq3ZU5G', }, ]; const total = 28;
type SizeEnum = 'small' | 'medium' | 'large';
const statusNameListMap = { 0: { label: '审批通过', theme: 'success', icon: }, 1: { label: '审批失败', theme: 'danger', icon: }, 2: { label: '审批过期', theme: 'warning', icon: }, };
export default function TableBasic() { const [stripe, setStripe] = useState(false); const [bordered, setBordered] = useState(false); const [hover, setHover] = useState(false); const [tableLayout, setTableLayout] = useState(false); const [size, setSize] = useState('medium'); const [showHeader, setShowHeader] = useState(true);
// const table = ( <Table data={data} columns={[ { title: 'channel', colKey: 'channel', ellipsis: true, }, { title: 'paycurrencyamtusd', colKey: 'paycurrencyamtusd_sum', ellipsis: true, }, { title: 'provideuin', colKey: 'provideuin_count_distinct', ellipsis: true, }, ]} rowKey="index" verticalAlign="top" size={size} bordered={bordered} hover={hover} stripe={stripe} showHeader={showHeader} tableLayout={tableLayout ? 'auto' : 'fixed'} rowClassName={({ rowIndex }) => ${rowIndex}-class} cellEmptyContent={'-'} resizable // 与pagination对齐 pagination={{ defaultCurrent: 2, defaultPageSize: 5, total, showJumper: true, onChange(pageInfo) { console.log(pageInfo, 'onChange pageInfo'); }, onCurrentChange(current, pageInfo) { console.log(current, pageInfo, 'onCurrentChange current'); }, onPageSizeChange(size, pageInfo) { console.log(size, pageInfo, 'onPageSizeChange size'); }, }} onPageChange={(pageInfo) => { console.log(pageInfo, 'onPageChange'); }} onRowClick={({ row, index, e }) => { console.log('onRowClick', { row, index, e }); }} /> );
${rowIndex}-class
return ( <RadioGroup value={size} variant="default-filled" onChange={(size: SizeEnum) => setSize(size)} > 小尺寸 中尺寸 大尺寸 显示斑马纹 显示表格边框 显示悬浮效果 宽度自适应 显示表头
{table} </Space>
); }
希望能正常显示
No response
The text was updated successfully, but these errors were encountered:
👋 @chenkang-noob,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。
Sorry, something went wrong.
No branches or pull requests
tdesign-react 版本
1.10.0
重现链接
https://stackblitz.com/edit/react-wwzryl?file=src%2Fdemo.tsx
重现步骤
import React, { useState } from 'react';
import { Table, Checkbox, Radio, Space, Tag } from 'tdesign-react';
import {
ErrorCircleFilledIcon,
CheckCircleFilledIcon,
CloseCircleFilledIcon,
} from 'tdesign-icons-react';
import type { TableProps } from 'tdesign-react';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const data: TableProps['data'] = [
{
channel: '__OTHER',
paycurrencyamtusd_sum: 0,
provideuin_count_distinct: 0,
id: '4Pq3ZU5G',
},
];
const total = 28;
type SizeEnum = 'small' | 'medium' | 'large';
const statusNameListMap = {
0: { label: '审批通过', theme: 'success', icon: },
1: { label: '审批失败', theme: 'danger', icon: },
2: { label: '审批过期', theme: 'warning', icon: },
};
export default function TableBasic() {
const [stripe, setStripe] = useState(false);
const [bordered, setBordered] = useState(false);
const [hover, setHover] = useState(false);
const [tableLayout, setTableLayout] = useState(false);
const [size, setSize] = useState('medium');
const [showHeader, setShowHeader] = useState(true);
//
const table = (
<Table
data={data}
columns={[
{
title: 'channel',
colKey: 'channel',
ellipsis: true,
},
{
title: 'paycurrencyamtusd',
colKey: 'paycurrencyamtusd_sum',
ellipsis: true,
},
{
title: 'provideuin',
colKey: 'provideuin_count_distinct',
ellipsis: true,
},
]}
rowKey="index"
verticalAlign="top"
size={size}
bordered={bordered}
hover={hover}
stripe={stripe}
showHeader={showHeader}
tableLayout={tableLayout ? 'auto' : 'fixed'}
rowClassName={({ rowIndex }) =>
${rowIndex}-class
}cellEmptyContent={'-'}
resizable
// 与pagination对齐
pagination={{
defaultCurrent: 2,
defaultPageSize: 5,
total,
showJumper: true,
onChange(pageInfo) {
console.log(pageInfo, 'onChange pageInfo');
},
onCurrentChange(current, pageInfo) {
console.log(current, pageInfo, 'onCurrentChange current');
},
onPageSizeChange(size, pageInfo) {
console.log(size, pageInfo, 'onPageSizeChange size');
},
}}
onPageChange={(pageInfo) => {
console.log(pageInfo, 'onPageChange');
}}
onRowClick={({ row, index, e }) => {
console.log('onRowClick', { row, index, e });
}}
/>
);
return (
<RadioGroup
value={size}
variant="default-filled"
onChange={(size: SizeEnum) => setSize(size)}
>
小尺寸
中尺寸
大尺寸
显示斑马纹
显示表格边框
显示悬浮效果
宽度自适应
显示表头
);
}
期望结果
希望能正常显示
实际结果
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
The text was updated successfully, but these errors were encountered: