Answers

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

  July 2023

  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 Posts: 9Questions: 7Answers: 0

  July 2023

  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>