Has anyone implemented a child row within a datata

Support
1

Neil Manchester:
Has anyone implemented a child row within a datatable? I can see it’s supported in the docs https://matanya.gitbook.io/vue-tables-2/child-rows but can’t see any example (unless I’m being blind)

Delfs:
the snippets use one actually. I think // thought we had an example.

Agnes Riley:
I did one years ago.

Neil Manchester:
Can’t see anything about this in the snippet or an example. Don’t suppose you could dig out an example of how you did it could you @Agnes Riley?

Agnes Riley:
I don’t have access anymore but maybe @Stephen Dolenski will help you.

Delfs:

{
                            "columns": ["name", "type", "copy"],
                            "label": "Snippet Library",
                            "model": "snippets",
                            "options": {
                                "columnsClasses": {
                                    "copy": "col-xs-1 p0",
                                    "name": "col-xs-8",
                                    "type": "col-xs-2"
                                },
                                "headings": {
                                    "copy": "",
                                    "name": "Name",
                                    "type": "Type"
                                },
                                "orderBy": {
                                    "column": "name"
                                },
                                "perPage": 100,
                                "perPageValues": [],
                                "preserveState": true,
                                "skin": "VueTables__table table table-hover",
                                "sortable": [],
                                "texts": {
                                    "chunk": 4,
                                    "count": "",
                                    "filter": "",
                                    "filterPlaceholder": "Search Snippets ..."
                                },
                                "xpagination": {
                                    "edge": false,
                                    "show": false
                                }
                            },
                            "slots": [{
                                "_note": "access ROW via props.row, or props.row",
                                "html": "<i \nv-on:click.stop=\"namedAction('copySnippet', { snip: props.row.snippet } )\"  \nclass=\"fal fa-copy btn\">\n    \n</i>",
                                "slot": "copy"
                            }, {
                                "html": "<div class=\"w-80\">\n    <div class=\"w-80\" v-html=\"marked(props.row.description)\"></div>\n    \n    <strong>Snippet</strong>\n    <pre class=\"w-80\">\n    {{JSON.parse(props.row.snippet)}}\n    </pre>\n    <strong>Reference:</strong>\n    {{props.row.links}}\n\n</div>",
                                "slot": "child_row"
                            }],
                            "styleClasses": "text-sm hide-pagination",
                            "type": "table2",
                            "visible_calc": "!model.readOnly"
                        }

This is an example

2

Adding the following CSS to your app shows the open/close icon for the child row

.VueTables__child-row-toggler {
    width: 16px;
    height: 16px;
    line-height: 50px;
    display: block;
    margin: auto;
    text-align: center;
}

.VueTables__child-row-toggler--closed::before {
  content: "+";
}

.VueTables__child-row-toggler--open::before {
  content: "-";
}

A v-for within the child_row slot is then a great way of showing line items for objects such as invoices or purchase orders without having to open a detailed view.

Thanks for the help