<script setup lang="ts">

const initState = () => (
  {
    columns: [{
      key: 'id',
      label: 'ID'
    }, {
      key: 'name',
      label: 'User name'
    }, {
      key: 'title',
      label: 'Job position'
    }, {
      key: 'email',
      label: 'Email'
    }, {
      key: 'role'
    }],
    rows: [{
      id: 1,
      name: 'Lindsay Walton',
      title: 'Front-end Developer',
      email: 'lindsay.walton@example.com',
      role: 'Member'
    }, {
      id: 2,
      name: 'Courtney Henry',
      title: 'Designer',
      email: 'courtney.henry@example.com',
      role: 'Admin'
    }, {
      id: 3,
      name: 'Tom Cook',
      title: 'Director of Product',
      email: 'tom.cook@example.com',
      role: 'Member'
    }, {
      id: 4,
      name: 'Whitney Francis',
      title: 'Copywriter',
      email: 'whitney.francis@example.com',
      role: 'Admin'
    }, {
      id: 5,
      name: 'Leonard Krasner',
      title: 'Senior Designer',
      email: 'leonard.krasner@example.com',
      role: 'Owner'
    }, {
      id: 6,
      name: 'Floyd Miles',
      title: 'Principal Designer',
      email: 'floyd.miles@example.com',
      role: 'Member'
    }]
  }
)
const deleteRow = (row) => {
}

</script>

<template>
  <Story title="Elements/ATable">
    <Variant
      title="default"
      :init-state="initState"
    >
      <template #default="{state}">
        <a-table
          :columns="state.columns"
          :rows="state.rows"
        >
          <template #role-data="{row}">
            <button @click="deleteRow(row)">delete</button>
          </template>
        </a-table>
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
