How to generate automatically headers in Vue 3?

How to generate automatically headers in Vue 3?

ag281198ag281198 Posts: 9Questions: 7Answers: 0
edited July 2023 in Free community support

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.

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • ag281198ag281198 Posts: 9Questions: 7Answers: 0

    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>
    
    
Sign In or Register to comment.