[Table] 表格内容为数字0以及加了ellipsis时,表格无法展示为0的列
Closed this issue · 1 comments
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)}
>
小尺寸
中尺寸
大尺寸
显示斑马纹
显示表格边框
显示悬浮效果
宽度自适应
显示表头
{table}
</Space>
);
}
期望结果
希望能正常显示
实际结果
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response
👋 @chenkang-noob,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。