I'm using vue-good-table and I'm trying to change the labels area in the selected row box. Looking at the documentation the only slot available is the selected-row-actions.
Is there a way/slot to edit the left side with the labels and 'clear' action? (not just their text)
Update:
As mentioned earlier there isn't any direct configuration from library to achieve what you want to achieve. CSS only solution will look like following, take a look at this codesandbox:
<template>
...
</template>
<style>
.vgt-selection-info-row {
font-size: 0 !important;
}
.vgt-selection-info-row__actions.vgt-pull-right {
visibility: visible;
float: none !important;
}
</style>
Original answer:
There isn't any thing like that supported from the library out of the box. You can use table-actions slots to display table level actions on top right or can use selected-row-actions slot to display actions for selected row on the selection info bar like:
<div slot="selected-row-actions">
<button @click="countSelected()">Sected Row Action</button>
</div>
<div slot="table-actions">
Table Actions
</div>
That being said, its HTML we are talking about (yay!) so nothing is preventing you from overriding default styles of the library.
You can use following style to use selected-row-actions slot and move slot next to clear button:
<template>
...
<div slot="selected-row-actions">
<label>Label 1</label>
<button @click="countSelected()">Action 1</button>
<label>Label 1</label>
<button @click="countSelected()">Action 2</button>
</div>
...
</template>
<style>
.vgt-selection-info-row__actions.vgt-pull-right {
float: none !important;
margin-left: 5px;
display: inline;
}
.vgt-selection-info-row__actions.vgt-pull-right div {
display: inline-block;
}
</style>
PS: There is already a closed issue BUG 519 for the library if you like to reopen it and track.
