<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection"></el-table-column>
    <!-- <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
    </el-table-column> -->
    <el-table-column v-for="column in columns" :key="column.prop">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>


  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      columns: [] // dynamic columns will be added here
    };
  },
  methods: {
    // function to fetch data and columns dynamically
    fetchData() {
      // fetch data and columns from API or other source
      // then update tableData and columns
// Generate fake data for testing purposes
const fakeData = [
        { name: 'John', age: 25, gender: 'Male' },
        { name: 'Jane', age: 30, gender: 'Female' },
        { name: 'Bob', age: 40, gender: 'Male' },
        { name: 'Alice', age: 35, gender: 'Female' },
      ];
      this.tableData = fakeData;

      const fetchedColumns = [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { prop: 'gender', label: 'Gender' },
      ];

      this.columns = fetchedColumns;


    }
  },
  mounted() {
    this.fetchData(); // call the function to fetch data and columns on component mount
  }
};
</script>

