Display Column Header in 2 lines

Is this possible ? TQ

Small world. I was about to ask a very similar question. I’m using _calc for a column header, and need to have it on 2 lines. What I’m going for is:

Monday
8/31/2020

I’m using moment.js to extract the data from a date field. This is at the headers for a BF vuetable. I’ve tried inserting
, \n, and \r. None of these will actually insert a linebreak. Thoughts?

The column label does not accept HTML, but you can sort of get close with a slot for the filter

See this example
https://app.fmbetterforms.com/#/form/72AA15F1-95A6-154C-8D11-4F1FB2AB1941

Slot docs ref:
https://matanya.gitbook.io/vue-tables-2/slots

There could be other solutions with other slots as well.

You can use slots to display HTML in the header. If your column is named name, make a slot named h__name and use <br> or <p></p> tags in there to make line breaks

I can’t get it to populate the header slot. I’m using:

{
                    "html": "<div>Hello<br>There</div>",
                    "slot": "h__monday"
                },

The column name is ‘monday’. Hello There doesn’t show up; the word “Monday” shows up. I’ve put this under the main slots section for table. I’ve tried various iterations of this (h_monday, monday__h, …).

I’ll have to revisit this. Never could inject HTML into a header slot. I ended up just shortening the date format to Mon, 8/31/20. Not the nicest looking, but solves my issue.

I did run across this.

https://www.vuetable.com/guide/multirow-header.html#using-tableheader-scoped-slot

Not quite sure if it’s relevant, and I didn’t quite follow it…

@eluce I tried various iterations of “slot” : “h__monday” and haven’t been able to get it to work. I see where it’s listed as an option in https://matanya.gitbook.io/vue-tables-2/slots. I also found references to needing slot-scope = “props” . I tried adding that with “slot-scope”=“props”, but that didn’t work either. Any suggestions? This is all native BF.

The “filter” option is close, but the filter fields aren’t needed, and just confuse the interface.

The slot method that I suggested is mentioned in the docs for this library (as you also found), but BetterForms may not have the most updated version of this library. @delfs will have to confirm if this is the issue.

We have vue-tables-2 version 1.4.70 installed on bf-latest. vue-tables-2 latest version is 2.0.35.

Has anyone managed to find a solution for this? I’ve managed with calcs so far but now need to insert html into my table header.
I notice in the docs for vue-tables-2 they mention using a function to return html but this doesn’t seem to work and I can’t find what version this might be tied behind or indeed what the current vue-tables-2 version used in BF is.

Can you link where in docs it mentions a function and perhaps we can get you an example.

The row detailing headings Options API - vue-tables-2

Ok figured it out, you can use a calc and then "(h) => {return [expression using vue h function]}" to inject html into the heading position.

probably not relevant but to the OP,
"headings": { "name_calc": "(h) => {return [Persons Name', h('br'), 'Age']}", "test_calc": "(h) => {return [Test', h('br'), 'Subject']}", "description_calc": "(h) => {return [Desciption', h('br'), 'Remark']}" }

1 Like

Well thats a first I’ve seen a render function used in BF.
Clever indeed

Thank you mj-apj! I’ll test this with my solution the next time I update it.

1 Like

Thank you MJ-APJ. I have successfully implemented this technique. Cool :grinning: