How can we add html elements in v-pane-header

[ravindran549793]

I'm trying to add table-like headings in v-pane-header. Is there a work-around?

[bguyb]

Hey ravindran
Did you find an answer?

[ravimallya]

Hi @ravindran549793 and @bguyb .

Is this you guys want? I used bootstrap 4 cols with CSS overridden for the same:

  <v-accordion id="date-orderno-accordion" class="vAccordion--default" onexpand="expandDateWebOrderNoCallback(index, id)" multiple>
                        <v-pane ng-repeat="item in dateData" id="{{ ::item.orderNum }}">
                            <v-pane-header>
                                <div class="row row-table-body">
                                    <div class="col col-sm-2">{{item.orderNum}}</div>
                                    <div class="col col-sm-2"></div>
                                    <div class="col col-sm-2"></div>
                                    <div class="col col-sm-2 text-right">{{addDecimal(item.amount)}}</div>
                                    <div class="col col-sm-2 text-right">{{addDecimal(item.fee)}}</div>
                                    <div class="col col-sm-2 text-right">{{addDecimal(item.net)}}</div>
                                </div>
                            </v-pane-header>
                            <v-pane-content>
                                <div class="row row-table-head">
                                    <div class="col col-sm-1"></div>
                                    <div class="col col-sm-2">Transaction Date</div>
                                    <div class="col col-sm-2">Payout Date</div>
                                    <div class="col col-sm-1">Type</div>
                                    <div class="col col-sm-2">Amount</div>
                                    <div class="col col-sm-2">Fee</div>
                                    <div class="col col-sm-2">Net</div>

                                </div>
                                <div class="row row-table-body" ng-repeat="data in item.dataDateTotalInvoice">
                                    <div class="col col-sm-1"></div>
                                    <div class="col col-sm-2">{{data.transactionDate | date:'MM/dd/yyyy'}}</div>
                                    <div class="col col-sm-2">{{data.payoutdate | date:'MM/dd/yyyy'}}</div>
                                    <div class="col col-sm-1 text-capitalize">{{data.type }}</div>
                                    <div class="col col-sm-2 text-right">{{addDecimal(data.amount)}}</div>
                                    <div class="col col-sm-2 text-right">{{addDecimal(data.fee)}}</div>
                                    <div class="col col-sm-2 text-right">{{addDecimal(data.net)}}</div>

                                </div>
                            </v-pane-content>
                        </v-pane>
                    </v-accordion>

and css (remove unwanted css as I pasted what I used for our need)

v-pane-header {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.vAccordion--default v-accordion {
    padding-left: 0;
    margin-top: 0;
}

.vAccordion--default v-pane-header,
.vAccordion--default v-pane.is-expanded > v-pane-header {
    margin-bottom: 0;
}

.vAccordion--default v-pane-content > div {
    padding-bottom: 0px;
}

.vAccordion--default v-pane-header::after,
.vAccordion--default v-pane-header::before {
    left: 10px;
    right: inherit;
}

.vAccordion--default v-pane-header {
    padding-left: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid #D8D8D8;
}

.vAccordion--default v-pane-header .row-table-body > div {
    padding-top: 5px;
    padding-bottom: 5px;
}

.vAccordion--default v-pane.is-expanded > v-pane-content > div {
    border-bottom: 1px solid #ddd;
}

.vAccordion--default v-pane.is-expanded > v-pane-header {
    border-bottom-color: #ddd;
    color: #333;
}
.row-table-head {
    padding-left: 2rem;
    margin-left: 0;
    margin-right: 0;
    border-bottom: 1px solid #ddd;
    background: #f1f1f1;
}

.row-table-head>div {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-right: 1px solid #ddd;
}

.row-table-body {
    margin: 0;
}

.row-table-body>div {
    padding-left: 10px;
    padding-right: 10px;
    border-right: 1px solid #ddd;
}

#date-orderno-accordion v-pane-content .row-table-body,
#invoice-weborderinvoice-accordion v-pane-content .row-table-body {
    padding-left: 2rem;
}

#date-orderno-accordion v-pane-content .row-table-body>div {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

#date-orderno-accordion v-pane.is-expanded,
#date-invoiceno-accordion>v-pane.is-expanded {
    border: 1px solid #999;
}

#date-orderno-accordion v-pane.is-expanded>v-pane-header,
#date-invoiceno-accordion v-pane.is-expanded>v-pane-header {
    color: #333;
    font-weight: bold;
}

#date-weborderinvoice-accordion.vAccordion--default v-pane-header::after,
#date-weborderinvoice-accordion.vAccordion--default v-pane-header::before {
    left: 40px;
}

#date-weborderinvoice-accordion v-pane-content>div {
    padding-bottom: 0;
}

#date-weborderinvoice-accordion v-pane-content .row-table-body {
    background: #fff;
    padding-left: 2rem;
}

#date-weborderinvoice-accordion v-pane-content .row-table-body>div {
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #ddd;
}

Screenshot: