Nested data / child rows

[Josh-Nicholson]

I have implemented a datatable using the following interface.

export interface Order {
	id: string;
	orderNumber: string;
	totalPrice: number;
        orderDate: Date;	
}

However I now want to add a property that is a list of objects.
Something like this.

export interface Order {
    id: string;
    orderNumber: string;
    totalPrice: number;
    orderDate: Date;
    orderItems: OrderItems[];	
}

export interface OrderItems {
    quantity: number;
    price: number;
}

From looking at the docs https://vincjo.fr/datatables/examples/nested-objects I can see how to do nested data grouped into the same column.
However I'm hoping to be able to have a expand/collapse functionality on the parent row, this way I can also have property headings as well.

So something like https://datatables.net/examples/api/row_details.html
Or this:

Is something like this possible using this library? If so can you point me in the right direction?

Thanks in advance.

[Josh-Nicholson]

So I've had a go myself.
Here is the code:

<script lang="ts">
    export let data: PageData;
    let orders: Order[] = data.Orders;
	
    const ordersHandler = new DataHandler(orders, { rowsPerPage: 10 });
    const orderRows = ordersHandler.getRows();

    const displayedChildRows = writable<number[]>([]);
    function showHideChildRow(index: number, orderItems: OrderItem[]) {
	displayedChildRows.update((rows) => {
	    if (rows.includes(index)) {
	        return rows.filter((i) => i !== index);
	    } else {
		return [...rows, index];
	    }
    });

    const currentRow = document.getElementById(`orderItemRows${index}`);

    if (currentRow) {
	const nextElement = currentRow.nextElementSibling;
	if (nextElement && nextElement.classList.contains('child-row')) {
		nextElement.remove();
	} else {
		const newRow = document.createElement('tr');
		newRow.classList.add('child-row');
		newRow.innerHTML = `
		<td colspan="2">
		    <table class="w-full">
		        <thead>
			    <tr>
			        <th>Quantity</th>
				<th>Price</th>
			    </tr>
			</thead>
			<tbody>
			    ${orderItems ? orderItems.map((orderItem) => `
			        <tr>
				    <td>${orderItem.quantity}</td>
				    <td>${orderItem.price}</td>
				</tr>
			    `).join('')	: `<tr><td colspan="4">No batches available</td></tr>`}
		    </tbody>
		</table>
	    </td>`;
	    currentRow.insertAdjacentElement('afterend', newRow);
	}
    }
}
</script>


<div class="card flex flex-col flex-1 p-2">
    <section class="flex-grow overflow-auto">
        <table class="table table-hover !overflow-auto !border-separate !border-spacing-0">
	    <thead class="sticky top-0">
	        <tr>
		    <th class="table-cell-fit sticky top-0 border-b border-black"><strong class="customColumnHeading">Actions</strong></th>
		    <Th handler={ordersHandler} orderBy="orderNumber" class="sticky top-0 border-b border-black">Order Number</Th>
		    <Th handler={ordersHandler} orderBy="totalPrice" class="sticky top-0 border-b border-black">Total Price</Th>
                    <Th handler={ordersHandler} orderBy="orderDate" class="sticky top-0 border-b border-black">Order Date</Th>
		</tr>
	    </thead>
	    <tbody>
	        {#each $orderItemRows as row, i}
		    <tr id={`orderLinesRows${i}`}>
		        <td class="table-cell-fit">
			    <button class="btn-icon btn-icon-sm variant-outline-primary hover:variant-filled-primary hover:text-white"
					  on:click={() => { showHideChildRow(i, row.orderItems); }}>
			        {#if $displayedChildRows.includes(i)}
				    <IcBaselineKeyboardArrowUp />
				{:else}
				    <IcBaselineKeyboardArrowDown />
				{/if}
			    </button>
			</td>
			<td>{row.orderNumber}</td>
			<td>{row.totalPrice}</td>
			<td>{row.orderDate}</td>
		    </tr>
		{/each}
	    </tbody>
	</table>
    </section>
    <footer class="h-28 py-2 md:h-12">
        <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 lg:space-x-4 justify-between h-full">
	    <div>
                <RowsPerPage handler={ordersHandler} />
	    </div>
	    <div>
	        <RowCount handler={ordersHandler} />
	    </div>
	    <div>
	         <Pagination handler={ordersHandler} />
	    </div>
	</div>
    </footer>
</div>

Just not sure if this is the right approach.
In the child row I want to have a 'Actions' column that has buttons for Edit and Delete functionality.
Normally I would use a svelte component here but I'm unsure how to do that inside a js function rather than the markup.

[Josh-Nicholson]

Been playing around and think this is the better approach

<script lang="ts">
    export let data: PageData;
    let orders: Order[] = data.Orders;
	
    const ordersHandler = new DataHandler(orders, { rowsPerPage: 10 });
    const orderRows = ordersHandler.getRows();

    const displayedChildRows = writable<number[]>([]);
    function showHideChildRow(index: number) {
	displayedChildRows.update((rows) => {
	    if (rows.includes(index)) {
	        return rows.filter((i) => i !== index);
	    } else {
		return [...rows, index];
	    }
    });
</script>


<div class="card flex flex-col flex-1 p-2">
    <section class="flex-grow overflow-auto">
        <table class="table table-hover !overflow-auto !border-separate !border-spacing-0">
	    <thead class="sticky top-0">
	        <tr>
		    <th class="table-cell-fit sticky top-0 border-b border-black"><strong class="customColumnHeading">Actions</strong></th>
		    <Th handler={ordersHandler} orderBy="orderNumber" class="sticky top-0 border-b border-black">Order Number</Th>
		    <Th handler={ordersHandler} orderBy="totalPrice" class="sticky top-0 border-b border-black">Total Price</Th>
                    <Th handler={ordersHandler} orderBy="orderDate" class="sticky top-0 border-b border-black">Order Date</Th>
		</tr>
	    </thead>
	    <tbody>
	        {#each $orderItemRows as row, i}
		    <tr id={`orderLinesRows${i}`}>
		        <td class="table-cell-fit">
			    <button class="btn-icon btn-icon-sm variant-outline-primary hover:variant-filled-primary hover:text-white"
					  on:click={() => showHideChildRow(i)}>
			        {#if $displayedChildRows.includes(i)}
				    <IcBaselineKeyboardArrowUp />
				{:else}
				    <IcBaselineKeyboardArrowDown />
				{/if}
			    </button>
			</td>
			<td>{row.orderNumber}</td>
			<td>{row.totalPrice}</td>
			<td>{row.orderDate}</td>
		    </tr>
	            {#if $displayedChildRows.includes(i)}
			<tr class="child-row">
			    <td colspan="3">
			        <table class="w-full">
				    <thead>
				        <tr>
					    <th>Actions</th>
					    <th>Quantity</th>
					    <th>Price</th>													
					</tr>
				    </thead>
				    <tbody>
				        {#each row.orderItems as orderItem, j (orderItem.id)}
					    <tr>
					        <td>
					            <OrderItemTableRowActions															 
                                                        clickedCustomerOrderId={customerOrder.id}
							index={j}
							id={orderItem.id}
							quantity={batch.quantity}
							price={orderItem.price}
							/>
						</td>
						<td>{orderItem.quantity}</td>
					        <td>{orderItem.price}</td>
					    </tr>
					{/each}
				    </tbody>
				</table>
			    </td>
			</tr>
		    {/if}
		{/each}
	    </tbody>
	</table>
    </section>
    <footer class="h-28 py-2 md:h-12">
        <div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 lg:space-x-4 justify-between h-full">
	    <div>
                <RowsPerPage handler={ordersHandler} />
	    </div>
	    <div>
	        <RowCount handler={ordersHandler} />
	    </div>
	    <div>
	         <Pagination handler={ordersHandler} />
	    </div>
	</div>
    </footer>
</div>