No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Add columns to datatable in code

    Framework
    3
    4
    796
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • テ
      テクニカル諏訪子 last edited by

      I use Axios to get database data, but I want to create columns based on received data.
      Only initialised columns get added, not the data-based columns.

      Example:

      Vue.axios.get(process.env.API_SERV + '/api/getcustomer/' + this.id).then(data => {
        data.data.map(cb => {
          cb.map(x => {
            if (x === 'kaishain') {
              this.columns.push({
                label: '会社員',
                field: 'kaishain',
                width: '140px',
                filter: true,
                sort: true,
                type: 'string'
              })
            }
            if (x === 'okyakusama') {
              this.columns.push({
                label: 'お客様',
                field: 'okyakusama',
                width: '140px',
                filter: true,
                sort: true,
                type: 'string'
              })
            }
          })
        })
      })
      

      Advice is appreciated.

      1 Reply Last reply Reply Quote 0
      • mesqueeb
        mesqueeb last edited by

        Dear @テクニカル諏訪子
        What do you mean with “Only initialised columns get added, not the data-based columns.”

        (I’m actually from Japan, maybe you can try asking in Japanese, I’ll try to help)

        1 Reply Last reply Reply Quote 1
        • テ
          テクニカル諏訪子 last edited by

          I mean columns in “data”.

          Example:

          data: function () {
            return {
              ...
             columns: [
                {
                  label: '氏名',
                  field: 'shimei',
                  width: '140px',
                  filter: true,
                  sort: true,
                  type: 'string'
                },
                {
                  label: '性別',
                  field: 'seibetsu',
                  width: '140px',
                  filter: true,
                  sort: true,
                  type: 'string'
                },
                {
                  label: '誕生日',
                  field: 'tanjoubi',
                  width: '140px',
                  filter: true,
                  sort: true,
                  type: 'string'
                }
              ]
            }
          }
          

          Then I get a table with all full name, gender, and birthday, but no employee and customer.

          (I will proceed in English, so more people can support.)

          1 Reply Last reply Reply Quote 0
          • benoitranque
            benoitranque last edited by

            You want to add columns dynamically?

            I remember someone had a similar issue. If I’m not mistaken, the columns do get added, they just are not selected to display by default. You can access the inner state of data-table to add them, I’'m not sure if removing he ability to select what columns are displayed also fixes the issue.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post