Vue template slots for pageLength and other datatable controls

klymov.inekon

Hello. I have a question. I would like to be able to set slot for datatables controls. For example pageLength set something like this

<DataTable :columns="columns" ... >
  <template #page-lenght="{ props }">
    <v-select :items="props.items" @change="props.change">
    </v-select>
  </template>
</DataTable>

Maybe there are other options? Bootstrap styling for addons doesn't work for me in Vue. I don't know why, it just gives errors inside the library during initialization that some variables are undefined. I also wouldn't want to change classes manually via css, since it would be difficult for all elements and you would need to take into account many parameters such as the theme.

allan

I'm afraid there is no option for that at the moment. use layout to position the controls around the table in different locations.

Bootstrap styling for addons doesn't work for me in Vue. I don't know why

If you could create a StackBltiz example showing that I'll take a look.

Allan

allan

I was thinking over this, and realised that you are asking not to use a slot to decide where the control should be positioned, but rather using a custom control in place of the default ones - for example v-select rather than the default select for the length menu, aren't you? Apologies for my misunderstanding yesterday.

Unfortunately, it doesn't really change the answer - it isn't possible out of the box, it would require code modification. Specifically a feature plugin would need to be created which uses v-select.

Allan