How to custom format table data with BootstrapVue?

Question

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!

Jérôme · Accepted Answer · 2019-07-15 13:48:59Z

1

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.

answered Jul 15, 2019 at 13:48

Jérôme

2,0765 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to custom format table data with BootstrapVue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related