Closed dwhudson closed 3 years ago
Format the data before passing down to the component
I was able to get it. Might be worth adding this to the demo page. Totally could have filtered it before hand. New to Vue didn't realize scope="props" use in the code.
`<datatable
title="Testing Locations"
:columns="tableColumns1"
:rows="userSitesFilter"
>
<th slot="thead-tr">Updated</th>
<th slot="thead-tr">Actions</th>
<template slot="tbody-tr" scope="props">
<td>{{ props.row.updatedOn | formatDate }}</td>
<td>
<button
@click="(e) => $refs.modalName.openModal(props.row, e)"
class="waves-effect waves-light btn blue darken-4"
>
View/Edit
</button>
</td>
</template>
</datatable>`
This datatable component is da bomb. I'm attempting to work through getting a couple of features to work. Specifically I'm passing in a json object via a return statement from computed method to :rows. It's showing my data properly. My struggle is with the date column. On my original grid below the datatable you can see how it takes my date value and coverts the output. My filter is is basically: formatDate(val) and returns the value in the output I want.
field: "name", // Field name from row // Use dot for nested props // Can be function with row as 1st param
In my tables columns definition I'm trying to implement it as follows: { label: "Updated", field: "function(row => {row.updatedOn | formatDate })", //this.formatDate(updatedOn), numeric: true, html: false, },
Anyone have any thoughts on how I can implement my formatDate function to work with the datatable? Thanks in advance for any help