Adding button inside Ant-design table column - reactjs

Question

I want to create a button inside table column. I have tried using Cell but its not working.
Cell: ({ cell }) => (
<button value={cell.row.values.name} onClick={props.handleClickGroup}>
{cell.row.values.name}
</button>
)

Answer 1

You can render a button inside column using the render property:
const columns = [
{
title: 'Button Test',
key: 'key',
dataIndex: 'key',
render: (text, record) => (
<button onClick={()=> console.log(record)}>
{"Button Text"}
</button>
),
},
];
const data = [
{
key: '1',
name: 'John Doe',
age: 35,
address: 'New York No. 1 Lake Park'
},
];
<Table
columns={columns}
dataSource={data}
/>

Answer 2

If it is ant-design for Vue you can try this:
Template
<template>
<a-table :columns="columns" :data-source="data">
<a-button slot="action">{ buttonText }</a-button>
</a-table>
</template>
Script
<script>
const columns = [
{ title: 'Name', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action' } },
]
const data = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
},
]
export default{
data(){
return{
data,
columns,
buttonText: "view"
}
}
}
</script>
You can find more information on their site https://antdv.com/components/table/ under Expandable Row