Vue-good-table: `html: true` & `formatFn`

Created on 19 Apr 2018  路  6Comments  路  Source: xaksis/vue-good-table

Issue Type

  • [x] Bug
  • [x] Enhancement Request
  • [x] Question

Specs

What version are you using?
2.3.0

What browser?
Chrome

Expected Behavior

To be able to set html: true and specify html in the formatFn function.

Actual Behavior

Data printed directly (not using the formatFn function).

Steps to Reproduce the Problem

  1. Try to use formatFn for a row with html using html: true

jsfiddle

example

Fix

  • Update this line to use collectFormatted instead of collect as above

All 6 comments

The use case I have for being able to use html in formatFn is that I want to show image(s) in a column based on array data.

I have applied the above fix and it works for me but I can not figure out how to compile the .vue files to submit a PR

Hey @jonathan-wondereur, what you're trying to do, should be accomplished using custom cells. Refer to this example: https://jsfiddle.net/aks9800/wtwzg6Lz/

html: true is to be used if your row data already contains html.
formatFn is to format the data in your row, not to render html.

closing. Let me know if this doesn't solve your issue and I'll re-open the ticket.

@xaksis this works beautifully, thanks for the fast reply with the great example!

@xaksis, although this works as you've stated - I'd love to be able to format the text with HTML. It keeps all the column settings together.

@benrolfe could you tell me more about what column settings are being lost by using the method above? or an example of what you want the formatted value to look like?

I'd like to be able to use this JS, but it doesn't work. Your proposed solution requires me to move the away from the code block into the HTML.

{
    label: 'Name',
    field: 'Name',
    html: true,
    formatFn: function(value) {
        return `<strong>${value}</strong>`
    },
},
Was this page helpful?
0 / 5 - 0 ratings

Related issues

enghelewa picture enghelewa  路  3Comments

sylvaincaillot picture sylvaincaillot  路  4Comments

hoanghiep1x0 picture hoanghiep1x0  路  5Comments

oflittlemother picture oflittlemother  路  6Comments

unixconky picture unixconky  路  4Comments