73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import { Typography, Button, Table, Tag } from 'antd'
|
|
import { CheckOutlined, DeleteOutlined } from '@ant-design/icons'
|
|
const { Title } = Typography
|
|
|
|
function ToDoTable({ todos, onComplete, onDelete }) {
|
|
const columns = [
|
|
{
|
|
title: 'Description',
|
|
dataIndex: 'description',
|
|
key: 'description',
|
|
},
|
|
{
|
|
title: 'Completed',
|
|
dataIndex: 'completed',
|
|
key: 'completed',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: 'Complete',
|
|
dataIndex: '',
|
|
key: 'v',
|
|
align: 'center',
|
|
render: (text, record) => (
|
|
<Button
|
|
icon={<CheckOutlined />}
|
|
type='primary'
|
|
shape="circle"
|
|
onClick={(e) => { onComplete(record.key, e) }}
|
|
>
|
|
</Button>
|
|
),
|
|
},
|
|
{
|
|
title: 'Delete',
|
|
dataIndex: '',
|
|
key: 'x',
|
|
align: 'center',
|
|
render: (text, record) => (
|
|
<Button
|
|
icon={<DeleteOutlined />}
|
|
type='primary'
|
|
shape="circle"
|
|
onClick={(e) => { onDelete(record.key, e) }}
|
|
danger
|
|
>
|
|
</Button>
|
|
),
|
|
},
|
|
]
|
|
|
|
const dataSource = todos.map(todo => {
|
|
return {
|
|
key: todo.id,
|
|
description: todo.description,
|
|
completed: todo.completed ?
|
|
<Tag color="green">true</Tag> : <Tag color="red">false</Tag>
|
|
}
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<Title level={3}>ToDo Table</Title>
|
|
<Table
|
|
dataSource={dataSource}
|
|
columns={columns}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ToDoTable
|