Vuejs - property 'id' of undefined when using router.push()

Hi so I have a table where all my info is registered and one field has a button to consult each row . what I want is getting the id of each row and pass it in the router.push but doing so get's me the undefined error can anyone help me how to make this work?

I use Ant Design Vue that's why I have a- elements,here's my file

<a-table :data-source="dataSource" :columns="columns" :loading="loading" rowKey="id">
// ive got more code here but this is the button code  :
<template #details>
    <span>
      <a-button
        @click="click(record)"
        class="btn btn-sm btn-light mr-2"
      >
        Details
      </a-button>
    </span>
  </template>
</a-table>
     <script>
      setup()      
 {const router = useRouter()
    const click = (record) => {
      router.push({ 
          name:'details' , params:{id:[record.id]},
        })
    }
   }

How can I really get the id to successfully pass it and open my new page?

So i missed a simple details and thanks to Matt U i get it : i just have to add "record" in my template this way :

  <template #details="{record}"> <-- here's the add
    <span>
      <a-button
        @click="click(record)"
        class="btn btn-sm btn-light mr-2"
      >
        Details
      </a-button>
    </span>
  </template>