Why b-table displays all columns of my database even I specify the columns on my server

Question

Why my b-table displays all columns of my table even I only selected some?

Here is my server-side code that calls the selected columns. Also, it worked if I use bootstrap only not bootstrap-vue.

router.get('/users', function(req, res) {
  /* Get the person who has the latest date  */
  let getUser = "SELECT DISTINCT(MEMB.MEMB_N), MAX(PrintDate) AS PrintDate, MEMB.* \
                       FROM MEMB LEFT JOIN VD_Print ON MEMB.MEMB_N = VD_Print.MEMB_N GROUP BY MEMB.LAST_M \
                       ORDER BY PrintDate DESC LIMIT 100;"
  myDB.query(getUser, function(err, rows) {
    if (err) {
      console.log(err);
    } else {
      console.log(rows);
      res.send(rows);
    }
  });
});

And this one is on my client-side which is vuejs

<template>
      <section>
        <div class="sidebar"></div>
        <div>
          <b-form-input class="searchBar" placeholder="Search Here"></b-form-input>
        </div>
        <div>
          <b-table class="table" striped hover :items="results"></b-table>
        </div>
        <b-button class="printBtn">PRINT</b-button>
      </section>
    </template>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        results: [],
      };
    },
    mounted() {
      this.getUsers();
    },
    methods: {
      getUsers: function() {
        axios
          .get("http://localhost:9000/api/users/")
          .then(response => (this.results = response.data))
          .catch(error => alert(error));
      }
    }
  };
</script>

My JSON looks like this:

Answer 1

You need to define the your column name in field definition of b-table. If you multiple filed in response but you want to display some fields.

Please below code and working demo.

CODE SNIPPET

export default {
  data() {
    return {
      selectAll: false,
      records: [],
      perPage: 10,
      currentPage: 1,
      pageOptions: [5, 10, 15],
      column: [{
        key: "name",
        sortable: true,
        label: "Log File Name"
      }, {
        key: "lastModified",
        sortable: true,
        label: "Last Modified Date",
        class: "text-right options-column"
      }]
    };
  }
}

<template>
    <div>
      <div v-if="!hasRecords" style="text-align: center"><br><br>LOADING DATA...</div>
      <div style="padding: 15px;" v-if="hasRecords">
        <b-table :items="records" :fields="column" striped hover :current-page="currentPage" :per-page="perPage">
        </b-table>
        <b-row>
          <b-col md="6" class="my-1">
              <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
          </b-col>
          <b-col md="6" class="my-1">
              <b-form-group horizontal label="Per page" class="mb-0">
                  <b-form-select :options="pageOptions" v-model="perPage" />
              </b-form-group>
          </b-col>
        </b-row>
      </div>
    </div>
</template>