Display Column Header in 2 lines

Support
1

Is this possible ? TQ

image
image1002Ɨ506 60.1 KB

2

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?

3

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.

4

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

5

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, ā€¦).

6

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ā€¦

7

@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.

8

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.

9

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

10

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.

11

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

12

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

image
image1125Ɨ2225 230 KB

13

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
14

Well thats a first Iā€™ve seen a render function used in BF.
Clever indeed

15

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

1 Like
16

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