<template>
	<a-table
		:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
		:columns="columns"
		:data-source="data"
	/>
</template>
<script setup>
	import { computed, ref, unref } from 'vue'
	import { Table } from 'ant-design-vue'

	const DataType = ref([])

	const columns = [
		{
			title: 'Name',
			dataIndex: 'name'
		},
		{
			title: 'Age',
			dataIndex: 'age'
		},
		{
			title: 'Address',
			dataIndex: 'address'
		}
	]

	const data = DataType.value
	for (let i = 0; i < 46; i++) {
		data.push({
			key: i,
			name: `Edward King ${i}`,
			age: 32,
			address: `London, Park Lane no. ${i}`
		})
	}

	const selectedRowKeys = ref([]) // Check here to configure the default column

	const onSelectChange = (changableRowKeys) => {
		console.log('selectedRowKeys changed: ', changableRowKeys)
		selectedRowKeys.value = changableRowKeys
	}
</script>
