Adding button inside Ant-design table column

user_14360793 0
Viewed 5839

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>
  )
antd reactjs
2 Answers

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}
/>
user_143498080

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

user_130566500
Related