Detail Row

This is new feature in v1.2 Please make sure you are using at least v1.2.0 version.

Detail row is additional row hidden underneath each data row in the table. It will help keep your table displaying only important or relavent data. But if you would like the user to be able to see more detail information, "Detail Row" would be a great help.

In order to use Detail row, you will need to create a function that will return a valid HTML in your main Vue instance then use detail-row-callback prop to specify the name of that function. This will tell vuetable that you will use Detail row feature and the given callback name is the one to render its content.

However, vuetable needs to keep track of which detail rows are shown or hidden. It will need to know how it can uniquely identified each row of data, usually the id column. You can use detail-row-id prop to specify the name of that column. If your data returned from the server already contain the id column, you do not have to do anything. But if you use other column (e.g. barcode), you will have to specify that in the detail-row-id prop like so.

    <vuetable
        //...
        detail-row-callback="renderDetailRow"
        detail-row-id="barcode"
    ></vuetable>

In order to toggle the display of detail row, you will have to $broadcast the vuetable:toggle-detail event (together with the id of the target data) down the chain. When vuetable detects the event, it will toggle the display of the detail row of the given id. You can also use vuetable:show-detail or vuetable:hide-detail to specifically tell vuetable to show or hide the detail row.

This will work best when combining with the item-actions. It might easier to understand if you look at the example here and here.