CODEWITHSUNDEEP
vuejs2bootstrap-vue
redshift
redshift

Reputation: 5217

How to custom format table data with BootstrapVue?

I am using BootstrapVue's Table component and Luxon and trying to format an ISO date using the 'formatter callback' to customize the date output to something more human readable.

Unfortunately, I get an error Invalid DateTime

Sample data ../assets/users.json":

{
  "data": [
    {
      "id": 1,
      "first_name": "Salmon",
      "last_name": "Searight",
      "email": "[email protected]",
      "gender": "Male",
      "ip_address": "186.63.72.254",
      "date_assigned": "2019-07-15T12:58:06.382Z"
    },
    {
      "id": 2,
      "first_name": "Marika",
      "last_name": "Cloonan",
      "email": "[email protected]",
      "gender": "Female",
      "ip_address": "247.143.78.216",
      "date_assigned": "2019-07-15T12:58:06.382Z"
    },
    {
      "id": 3,
      "first_name": "Dyan",
      "last_name": "Dainter",
      "email": "[email protected]",
      "gender": "Female",
      "ip_address": "234.16.229.89",
      "date_assigned": "2019-07-15T12:58:06.382Z"
    }
  ]
}

Here's my attempt (with sample sandbox):

<template>
  <div>
    <b-table :items="users" :fields="fields">
      <!-- A custom formatted column -->
      <template slot="name" slot-scope="data">{{ data.value.userId }}</template>
    </b-table>
  </div>
</template>

<script>
import users from "../assets/users.json";
import { DateTime } from "luxon";

export default {
  data() {
    return {
      users: [],
      fields: [
        { key: "id" },
        { key: "first_name" },
        { key: "date_assigned", formatter: "formatDateAssigned" }
      ]
    };
  },
  methods: {
    formatDateAssigned(value) {
      const formattedDate = DateTime.fromISO(
        value.date_assigned
      ).toLocaleString(DateTime.DATETIME_SHORT);
      return formattedDate;
    }
  }
};
</script>

Does anyone spot anything that is causing the error? Thanks!

Upvotes: 1

Views: 4021

Answers (1)

J&#233;r&#244;me
J&#233;r&#244;me

Reputation: 2056

The problem come from the value used inside the formatter, the value passed to the formatter function is already the one you want, you don't need to use the field key inside.

Just replace value.date_assigned to value inside your formatDateAssigned function.

Upvotes: 1

Related Questions