Explicitly specify columns for all DetailsTable uses, added noHeader option.

Author: itsgoingd

src/components/Tabs/Performance/Timeline.vue

@@ -16,7 +16,7 @@
 			</span>
 		</div>
 
-		<details-table :items="$request.timeline" :filter="filter" filter-example="database query duration:>50">
+		<details-table :columns="['Timeline', 'Duration', 'Description']" :items="$request.timeline" :filter="filter" filter-example="database query duration:>50">
 			<template slot="header" slot-scope="{ filter }">
 				<th>Timeline</th>
 				<th class="timeline-duration">Duration</th>

src/components/Tabs/RequestTab.vue

@@ -46,7 +46,7 @@
 
 		<sidebar-section title="Middleware" name="middleware" :items="$request.middleware" filter-example="auth:admin" v-show="$request.middleware.length">
 			<template slot="table" slot-scope="{ items, filter, filterExample, expanded }">
-				<details-table :items="items" :filter="filter" :filter-example="filterExample" v-show="expanded">
+				<details-table :columns="['Value']" :items="items" :filter="filter" :filter-example="filterExample" :no-header="true" v-show="expanded">
 					<template slot="header" slot-scope="{ filter }">
 					</template>
 					<template slot="body" slot-scope="{ items }">

src/components/UI/DetailsTable.vue

@@ -1,7 +1,7 @@
 <template>
 	<table class="details-table">
 		<thead>
-			<tr>
+			<tr v-if="! noHeader">
 				<slot name="header" :filter="filter">
 					<th v-for="column, index in columns" @click="filter.sortBy(column.sortBy || column.toLowerCase())">
 						{{ column.name || column }}
@@ -11,7 +11,7 @@
 				</slot>
 			</tr>
 			<tr class="filter" v-show="filter.shown">
-				<td :colspan="columns ? columns.length : 2">
+				<td :colspan="columns.length">
 					<label>
 						<font-awesome-icon icon="search"></font-awesome-icon>
 						<input type="search" placeholder="Filter..." v-model="filter.input" ref="filterInput">
@@ -43,7 +43,7 @@ import PrettyPrint from './PrettyPrint'
 export default {
 	name: 'DetailsTable',
 	components: { DetailsTableFilterToggle, PrettyPrint },
-	props: [ 'columns', 'filter', 'filterExample', 'items' ],
+	props: [ 'columns', 'filter', 'filterExample', 'items', 'noHeader' ],
 	data: () => ({
 		showItemsCount: 30,
 		showItemsFirst: 0

src/components/UI/SidebarSection.vue

@@ -12,9 +12,7 @@
 				<slot name="above-table"></slot>
 			</div>
 			<slot name="table" :items="items" :filter="filter" :filter-example="filterExample" :expanded="expanded">
-				<details-table :items="items" :filter="filter" :filter-example="filterExample" v-show="expanded">
-					<template slot="header" slot-scope="{ filter }">
-					</template>
+				<details-table :columns="['Key', 'Value']" :items="items" :filter="filter" :filter-example="filterExample" :no-header="true" v-show="expanded">
 					<template slot="body" slot-scope="{ items }">
 						<tr v-for="item, index in items" :key="`${$request.id}-${index}`">
 							<td colspan="2">