vue-virtual-table icon indicating copy to clipboard operation
vue-virtual-table copied to clipboard

Date Formatting

Open DavidKCalnex opened this issue 5 years ago • 5 comments

Dates seem to be handled just as strings in this component. Is there any way to at a minimum have the dates formatted.

I have my dates coming back from the server in ISO 8601 format e.g. "2019-08-31T14:36:28.511Z" but I would like to format them in a cleaner way say "August 31st 2019". Is there a way to run an external function on each cell?

DavidKCalnex avatar Sep 03 '19 10:09 DavidKCalnex

You can customize the cell content. Refer to this example

waningflow avatar Sep 03 '19 11:09 waningflow

Sorry, I don't see where in that example it shows custom cell content.

DavidKCalnex avatar Sep 03 '19 11:09 DavidKCalnex

You can use like this:

<template slot-scope="scope" slot="actionDate">
       <span>{{parseDateFun(scope.row.date)}}</span>
</template>

And add this to the config:

{ prop: "_action", name: "date", actionName: "actionDate" }

waningflow avatar Sep 03 '19 11:09 waningflow

That's great thanks ! but I've noticed that sorting in this mode no longer works on the column. Also adding filtering to the column then shows what looks like Chinese buttons with a filter popup that doesn't work.

DavidKCalnex avatar Sep 03 '19 12:09 DavidKCalnex

When using customized cell it's content may be anything even a picture. Thus it's not possible to use these props like "filterable".

waningflow avatar Sep 03 '19 12:09 waningflow