import React, { useMemo } from 'react';
import { Table, Avatar } from '@douyinfe/semi-ui';
import { IconMore } from '@douyinfe/semi-icons';
import * as dateFns from 'date-fns';
const DAY = 24 * 60 * 60 * 1000;
const figmaIconUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png';
const Column = Table.Column;
const getData = (total) => {
const data = [];
for (let i = 0; i < total; i++) {
const isSemiDesign = i % 2 === 0;
const randomNumber = (i * 1000) % 199;
data.push({
key: '' + i,
name: isSemiDesign ? `Semi Design 设计稿${i}.fig` : `Semi Pro 设计稿${i}.fig`,
owner: isSemiDesign ? '姜鹏志' : '郝宣',
size: randomNumber,
updateTime: new Date().valueOf() + randomNumber * DAY,
avatarBg: isSemiDesign ? 'grey' : 'red'
});
}
return data;
};
function Demo() {
const data = useMemo(() => {
const _data = getData(46);
return _data;
}, []);
const nameFilters = [
{
text: 'Semi Design 设计稿',
value: 'Semi Design 设计稿',
},
{
text: 'Semi Pro 设计稿',
value: 'Semi Pro 设计稿',
},
];
const renderName = (text, record, index) => {
return (
{text}
);
};
const renderOwner = (text, record, index) => {
return (
{typeof text === 'string' && text.slice(0, 1)}
{text}
);
};
return (
{record.name}}
dataSource={data}
scroll={{ y: 400 }}
onChange={(...args) => console.log(...args)}
>
record.name.includes(value)} />
`${text} KB`} sortOrder={(a, b) => a.size - b.size > 0 ? 1 : -1} >
a.updateTime - b.updateTime > 0 ? 1 : -1} render={(value) => dateFns.format(new Date(value), 'yyyy-MM-dd')}>
} />
);
}
render(Demo);