How to generate automatically headers in Vue 3?

ag281198

I am making an application with Vue 3 and I am generating DataTables automatically from a JSON. I managed to insert the table information but I can't get the column titles to be generated automatically. But I get the error: Cannot read properties of undefined (reading 'aDataSort').

And I don't know how to fix it. Any idea? This is my code:

<template>
  <DataTable :data="data" :columns="tableColumns" :options="tableOptions" class="display">
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
  </DataTable>
</template>

<script>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
 
DataTable.use(DataTablesCore);

export default {
  components: {
    DataTable,
  },
  data() {
    return {
      data: [],
      tableOptions: {
        paging: true,
        pageLength: 10,
        ordering: true,
        searching: true,
        autoWidth: false,
        language: {
          paginate: {
            first: 'First',
            previous: 'Previous',
            next: 'Next',
            last: 'Last',
          },
          search: 'Filter:',
          emptyTable: 'No data',
        },
      },
      tableColumns: [], 
      headers: [], 
    }
  },
  created() {
    fetch('http://localhost:3001/DataTable')
      .then((response) => response.json())
      .then((data) => {
        this.data = data.DataTable || [];
        this.headers = this.generateHeaders();
        this.tableColumns = this.generateColumns();
      })
      .catch((error) => {
        console.error('Error:', error);
      });

  },
  methods: {
    generateHeaders() {
      if (this.data.length > 0) {
        return Object.keys(this.data[0]);
      }
      return [];
    },
    generateColumns() {
      return this.headers.map(header => ({
        title: header,
        data: header,
      }));
    },
  },
}
</script>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you link to a page showing the issue please? I'm particularly interested in what this.generateColumns() is returning. You also don't need the v-for in the thead since you are setting the columns.title - DataTables will generate the header cell for you.

Allan

ag281198

Ok I change a little bit of the code, The method of generateColumns returns an object with the shape " {title: 'Id', data: 'Id'} ..." I add pictures of what's is shown in console, I'm sorry if I put something wrong I´m new in the forum and I don´t know how it works.

:

<template>
  <DataTable :data="data" :columns="tableColumns.title" :options="tableOptions"></DataTable>
</template>

<script>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
 
DataTable.use(DataTablesCore);

export default {
  components: {
    DataTable,
  },
  data() {
    return {
      data: [],
      tableOptions: {
        paging: true,
        pageLength: 10,
        ordering: true,
        searching: true,
        autoWidth: false,
        language: {
          paginate: {
            first: 'First',
            previous: 'Previous',
            next: 'Next',
            last: 'Last',
          },
          search: 'Filter:',
          emptyTable: 'No data',
        },
      },
      tableColumns: [],
    }
  },
  created() {
    fetch('http://localhost:3001/DataTable')
      .then((response) => response.json())
      .then((data) => {
        this.data = data || [];
        console.log('Data:', this.data);
        this.headers = this.generateHeaders();
        console.log('Headers:', this.headers);
        this.tableColumns = this.generateColumns();
        console.log('Table Columns:', this.tableColumns);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  },
  methods: {
    generateHeaders() {
      if (this.data.length > 0) {
        return Object.keys(this.data[0]);
      }
      return [];
    },
    generateColumns() {
      return this.headers.map((header) => ({
        title: header,
        data: header,
      }));
    },
  },
}
</script>