Question 291958 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can i rename vuetify data-table group label?

I want to change group label of vuetify data-table. For earlier versions of Vuetify below the code was working fine but now it doesn’t work.

<va-data-table-server
  :items-per-page="50"
  :group-by="groupBy"
  row-create
  row-clone
  row-edit
  disable-edit
  disable-show
  disable-clone
  disable-create-redirect
>
  <template v-slot:column.data-table-group>
  </template>
</va-data-table-server>

How can i rename vuetify data-table group label

Here is demo link.

https://play.vuetifyjs.com/#eNq9lt9vmzAQx

Tags:

2

Answers


  1. 0

    Use header slot

    You can use the dynamic slots header.<key> to customize only certain columns. <key> corresponds to the key property in the items found in the headers prop.

    The key for the "Group" header is data-table-group (found by first using the headers slot and printing all column data to the UI: seen here), so the actual slot you need to use is header.data-table-group

    <template v-slot:header.data-table-group>
  <div>custom</div>
</template>

    Vuetify Playground

    Login or Signup to reply.
  2. 0

    You can add a header declaration with the key data-table-group to your headers array:

    data() {
  return {
    headers: [
      { title: 'My renamed group title', key: 'data-table-group' },
      ...

    This also allows you to move the group column in the table.

    playground

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search