From a9c291aa4919c58d4ca202d917803dd8055e5bf9 Mon Sep 17 00:00:00 2001
From: ofirgalcon <ofir@gal.co.uk>
Date: Wed, 24 Dec 2025 19:49:36 +0000
Subject: [PATCH 1/2] new tab layout and widget tooltips

---
 composer.json                           |   8 +-
 locales/en.json                         |   5 +-
 views/catalog_graph_widget.php          |   2 +-
 views/catalog_widget.yml                |   3 +-
 views/included_manifests_widget.yml     |   1 +
 views/manifests_self_service_widget.php |   2 +-
 views/manifests_tab.php                 | 288 +++++++++++++++++++++---
 7 files changed, 268 insertions(+), 41 deletions(-)

diff --git a/composer.json b/composer.json
index d48b4e3..ae1a97e 100644
--- a/composer.json
+++ b/composer.json
@@ -1,5 +1,9 @@
 {
     "name": "joncrain/manifests",
     "description": "Munki Manifest module for munkireport.",
-    "license": "MIT"
-}
+    "license": "MIT",
+    "version": "3.1",
+    "require": {
+        "php":"^7.0"
+    }
+}
\ No newline at end of file
diff --git a/locales/en.json b/locales/en.json
index 559d8f5..d8b00fa 100755
--- a/locales/en.json
+++ b/locales/en.json
@@ -36,7 +36,10 @@
     "client_tab": "Munki Manifests",
     "managed_installs": "Managed Installs",
     "no_managed_installs": "No Managed Installs",
+    "user_installs": "User Installs",
     "condition_check": "Condition",
     "conditional_items": "Conditional Items",
-    "no_data": "No manifest data"
+    "no_data": "No manifest data",
+    "search": "Search...",
+    "search_all": "Search all items..."
 }
\ No newline at end of file
diff --git a/views/catalog_graph_widget.php b/views/catalog_graph_widget.php
index 9def01a..fdf8685 100644
--- a/views/catalog_graph_widget.php
+++ b/views/catalog_graph_widget.php
@@ -2,7 +2,7 @@
 
     <div class="panel panel-default" id="catalog_graph-widget">
 
-        <div class="panel-heading">
+        <div class="panel-heading" data-container="body" title="Shows catalog graph information across all clients. Displays a pie chart with the count of clients for each catalog.">
 
             <h3 class="panel-title"><i class="fa fa-globe"></i>
                 <span data-i18n="manifests.widget.catalog_graph"></span>
diff --git a/views/catalog_widget.yml b/views/catalog_widget.yml
index 9cafb1c..4a76c02 100644
--- a/views/catalog_widget.yml
+++ b/views/catalog_widget.yml
@@ -5,4 +5,5 @@ i18n_title: manifests.widget.catalog
 icon: fa-book
 listing_link: /show/listing/manifests/manifests
 search_key: catalogs
-badge: count
\ No newline at end of file
+badge: count
+i18n_tooltip: "Shows the distribution of Munki catalogs across all clients. Each catalog is listed with the number of clients using that catalog. Click on a catalog to view clients using that specific Munki catalog."
\ No newline at end of file
diff --git a/views/included_manifests_widget.yml b/views/included_manifests_widget.yml
index a3bbffd..fb83491 100755
--- a/views/included_manifests_widget.yml
+++ b/views/included_manifests_widget.yml
@@ -6,3 +6,4 @@ icon: fa-book
 listing_link: /show/listing/manifests/manifests
 search_key: manifest_name
 badge: count
+i18n_tooltip: "Shows the distribution of Munki manifests across all clients. Each manifest is listed with the number of clients assigned to that manifest. Click on a manifest to view clients assigned to that specific manifest."
diff --git a/views/manifests_self_service_widget.php b/views/manifests_self_service_widget.php
index b00a6c7..f21f487 100644
--- a/views/manifests_self_service_widget.php
+++ b/views/manifests_self_service_widget.php
@@ -1,6 +1,6 @@
 <div class="col-lg-4 col-md-6">
 	<div class="panel panel-default" id="manifests-self-service-widget">
-		<div id="manifests-self-service-widget" class="panel-heading" data-container="body">
+		<div id="manifests-self-service-widget" class="panel-heading" data-container="body" title="Shows self-service manifest information across all clients. Each entry displays the client name and manifest information.">
 			<h3 class="panel-title"><i class="fa fa-user"></i>
 				<span data-i18n="manifests.self_service"></span>
 				<span class="counter badge"></span>
diff --git a/views/manifests_tab.php b/views/manifests_tab.php
index 7e0bb83..5ff11d6 100755
--- a/views/manifests_tab.php
+++ b/views/manifests_tab.php
@@ -1,8 +1,27 @@
 <div id="manifests-tab"></div>
-<h2 data-i18n="manifests.client_tab"></h2>
+
+<div id="lister" style="font-size: large; float: right;">
+    <a href="/show/listing/manifests/manifests" title="List">
+        <i class="btn btn-default tab-btn fa fa-list-alt"></i>
+    </a>
+</div>
+<div id="report_btn" style="font-size: large; float: right;">
+    <a href="/show/report/manifests/manifests" title="Report">
+        <i class="btn btn-default tab-btn fa fa-bar-chart-o"></i>
+    </a>
+</div>
+<h2><i class="fa fa-list-alt"></i> <span data-i18n="manifests.client_tab"></span></h2>
+
+<div id="unified-search-container" style="margin-bottom: 15px; max-width: 300px;">
+    <input type="text" class="form-control input-sm" id="unified-manifest-search" 
+           style="height: 28px; padding: 4px 8px; font-size: 12px;">
+</div>
 
 <script>
     $(document).on('appReady', function() {
+        // Set placeholder for unified search
+        $('#unified-manifest-search').attr('placeholder', i18n.t('manifests.search_all'));
+        
         mr.mwa2Link = "<?= conf('mwa2_link') ?>";
 
         $.getJSON(appUrl + '/module/manifests/get_manifests_data/' + serialNumber, function(data) {
@@ -15,40 +34,202 @@
                     .append($('<h4>')
                         .append(i18n.t('manifests.no_data')))
             } else {
+                // Sort data hierarchically (SelfServeManifest first, then by dependency depth)
+                function getDependencyDepth(manifest, allManifests, visited) {
+                    if (visited.has(manifest.manifest_name)) {
+                        return 0; // Circular dependency, return 0 to break cycle
+                    }
+                    visited.add(manifest.manifest_name);
+                    
+                    if (!manifest.included_manifests || manifest.included_manifests.trim() === '') {
+                        return 0; // Base manifest, no dependencies
+                    }
+                    
+                    var included = manifest.included_manifests.split(',').map(function(m) {
+                        return m.trim();
+                    }).filter(function(m) {
+                        return m.length > 0;
+                    });
+                    
+                    if (included.length === 0) {
+                        return 0;
+                    }
+                    
+                    var maxDepth = 0;
+                    for (var i = 0; i < included.length; i++) {
+                        var includedManifest = allManifests.find(function(m) {
+                            return m.manifest_name === included[i];
+                        });
+                        if (includedManifest) {
+                            var depth = getDependencyDepth(includedManifest, allManifests, new Set(visited));
+                            maxDepth = Math.max(maxDepth, depth + 1);
+                        }
+                    }
+                    return maxDepth;
+                }
+                
+                // Calculate depth for each manifest
+                data.forEach(function(manifest) {
+                    manifest._depth = getDependencyDepth(manifest, data, new Set());
+                });
+                
+                // Sort: SelfServeManifest first, then by depth (shallowest first), then alphabetically
+                data.sort(function(a, b) {
+                    // SelfServeManifest always first
+                    if (a.manifest_name === 'SelfServeManifest') return -1;
+                    if (b.manifest_name === 'SelfServeManifest') return 1;
+                    
+                    // Then sort by depth (base manifests first)
+                    if (a._depth !== b._depth) {
+                        return a._depth - b._depth;
+                    }
+                    
+                    // Same depth, sort alphabetically
+                    return a.manifest_name.localeCompare(b.manifest_name);
+                });
 
                 var skipThese = ['id', 'name', 'serial_number'];
+                // Properties that should be displayed as scrollable lists
+                var listProperties = ['managed_installs', 'managed_uninstalls', 'optional_installs', 
+                                     'managed_updates', 'featured_items', 'catalogs', 'included_manifests'];
+                
                 $.each(data, function(i, d) {
+                    // First, collect conditional items organized by property type
+                    var conditionalItemsByProp = {};
+                    if (d.conditional_items && d.conditional_items !== '' && d.conditional_items !== null) {
+                        try {
+                            var conditional_items_json = JSON.parse(d.conditional_items);
+                            for (var cond_i in conditional_items_json) {
+                                var cond_item = conditional_items_json[cond_i];
+                                var condition = cond_item['condition'];
+                                
+                                // Process each property in the conditional item
+                                for (var cond_prop in cond_item) {
+                                    if (cond_prop !== 'condition' && cond_item[cond_prop] && cond_item[cond_prop] !== '' && cond_item[cond_prop] !== null) {
+                                        // Initialize array if needed
+                                        if (!conditionalItemsByProp[cond_prop]) {
+                                            conditionalItemsByProp[cond_prop] = [];
+                                        }
+                                        
+                                        // Handle both array and comma-separated string formats
+                                        var cond_items = [];
+                                        if (Array.isArray(cond_item[cond_prop])) {
+                                            cond_items = cond_item[cond_prop];
+                                        } else {
+                                            cond_items = String(cond_item[cond_prop]).split(',').map(function(item) {
+                                                return item.trim();
+                                            }).filter(function(item) {
+                                                return item.length > 0;
+                                            });
+                                        }
+                                        
+                                        // Add items with their condition
+                                        $.each(cond_items, function(idx, item) {
+                                            conditionalItemsByProp[cond_prop].push({
+                                                item: item,
+                                                condition: condition
+                                            });
+                                        });
+                                    }
+                                }
+                            }
+                        } catch (e) {
+                            console.error('Error parsing conditional_items:', e);
+                        }
+                    }
+                    
                     // Generate rows from data
                     var rows = ''
+                    var displayName = '';
                     for (var prop in d) {
                         // Skip skipThese
                         if (skipThese.indexOf(prop) == -1) {
-                            if (d[prop] == '' || d[prop] == null || prop == 'manifest_name') {
-                                // Do nothing for a blank entry
-                            } else if (prop == 'conditional_items') {
-
-                                rows = rows + '<tr><td colspan="2"><table><tr><th>' + i18n.t('manifests.' + prop) + '</th></tr>';
-                                var nested_rows = '';
-                                // parse d[prop]
-                                conditional_items_json = JSON.parse(d[prop])
-                                for (item_i in conditional_items_json) {
-                                    item = conditional_items_json[item_i];
-                                    condition = item['condition'];
-                                    nested_rows = nested_rows + '<tr><th colspan="2" style="padding-right: 10px;">' + condition + '</th><td><table class="table-condensed table-striped">';
-                                    var nested_nested_rows = '';
-                                    for (item_t in item) {
-                                        if (item[item_t] == '' || item[item_t] == null || item_t == 'condition') {
-                                            // Do nothing
-                                        } else {
-                                            nested_nested_rows = nested_nested_rows + '<tr><th>' + i18n.t('manifests.' + item_t) + ' </th><td style="text-align: left;">' + String(item[item_t]).split(",").join(", ") + '</td></tr>';
+                            if (d[prop] == '' || d[prop] == null || prop == 'manifest_name' || prop == 'conditional_items') {
+                                // Do nothing for a blank entry or conditional_items (already processed)
+                            } else if (prop == 'display_name') {
+                                // Store display name to show at top
+                                displayName = d[prop];
+                            } else if (listProperties.indexOf(prop) !== -1) {
+                                // Display as scrollable list with merged conditional items
+                                var items = d[prop].split(',').map(function(item) {
+                                    return item.trim();
+                                }).filter(function(item) {
+                                    return item.length > 0;
+                                });
+                                
+                                // Add conditional items for this property
+                                if (conditionalItemsByProp[prop]) {
+                                    $.each(conditionalItemsByProp[prop], function(idx, condData) {
+                                        items.push({
+                                            name: condData.item,
+                                            condition: condData.condition,
+                                            isConditional: true
+                                        });
+                                    });
+                                }
+                                
+                                // Convert regular items to objects for consistent handling
+                                var allItems = items.map(function(item) {
+                                    if (typeof item === 'string') {
+                                        return { name: item, isConditional: false };
+                                    }
+                                    return item;
+                                });
+                                
+                                // Sort all items alphabetically by name
+                                allItems.sort(function(a, b) {
+                                    var nameA = a.name.toLowerCase();
+                                    var nameB = b.name.toLowerCase();
+                                    if (nameA < nameB) return -1;
+                                    if (nameA > nameB) return 1;
+                                    return 0;
+                                });
+                                
+                                if (allItems.length > 0) {
+                                    // Create unique ID for this list
+                                    var listId = 'list-' + i + '-' + prop;
+                                    
+                                    var listHtml = '<div class="list-group scroll-box manifest-list" id="' + listId + '" style="max-height: 195px; overflow-y: auto; margin-bottom: 0;">';
+                                    
+                                    $.each(allItems, function(idx, itemData) {
+                                        var itemName = itemData.name;
+                                        var escapedItem = itemName.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+                                        var escapedCondition = itemData.isConditional ? itemData.condition.replace(/"/g, '&quot;').replace(/'/g, '&#39;') : '';
+                                        
+                                        // Build searchable text (item name + condition)
+                                        var searchableText = itemName;
+                                        if (itemData.isConditional) {
+                                            searchableText += ' ' + itemData.condition;
+                                        }
+                                        
+                                        // Style with thinner borders and tighter spacing
+                                        var borderStyle = idx === 0 ? 'border-top: none;' : 'border-top: 0.5px solid rgba(0,0,0,0.1);';
+                                        var itemHtml = '<span class="list-group-item" style="padding: 1px 8px; font-size: 12px; line-height: 1.2; border-width: 0.5px; ' + borderStyle + '" data-item-text="' + 
+                                            escapedItem + (escapedCondition ? ' ' + escapedCondition : '') + '">';
+                                        
+                                        itemHtml += itemName;
+                                        
+                                        // Add condition in brackets if conditional
+                                        if (itemData.isConditional) {
+                                            itemHtml += ' <span style="color: #999; font-size: 11px; font-style: italic;">[' + 
+                                                $('<div>').text(itemData.condition).html() + ']</span>';
                                         }
+                                        
+                                        itemHtml += '</span>';
+                                        listHtml += itemHtml;
+                                    });
+                                    listHtml += '</div>';
+                                    
+                                    // Use "User Installs" instead of "Managed Installs" for SelfServeManifest
+                                    var labelKey = 'manifests.' + prop;
+                                    if (d.manifest_name === 'SelfServeManifest' && prop === 'managed_installs') {
+                                        labelKey = 'manifests.user_installs';
                                     }
-                                    nested_rows = nested_rows + nested_nested_rows + '</table></td></tr>';
+                                    
+                                    rows = rows + '<tr><th style="width: 20%;">' + i18n.t(labelKey) + '</th><td style="padding: 5px;">' + listHtml + '</td></tr>';
                                 }
-                                rows = rows + nested_rows;
-                                rows = rows + '</table></td></tr>';
                             } else {
-                                rows = rows + '<tr><th>' + i18n.t('manifests.' + prop) + '</th><td>' + d[prop] + '</td></tr>';
+                                rows = rows + '<tr><th style="width: 20%;">' + i18n.t('manifests.' + prop) + '</th><td>' + d[prop] + '</td></tr>';
                             }
                         }
                     }
@@ -63,19 +244,56 @@
                         link = ' ' + d.manifest_name
                     }
 
-                    $('#manifests-tab')
-                        .append($('<h4>')
-                            .append($('<i>')
-                                .addClass('fa fa-book'))
-                            .append(link))
-                        .append($('<div style="max-width:1600px;">')
-                            //                        .addClass('table-responsive')
-                            .append($('<table>')
-                                .addClass('table table-striped table-condensed')
-                                .append($('<tbody>')
-                                    .append(rows))))
+                    var manifestHeader = $('<h4>')
+                        .append($('<i>')
+                            .addClass('fa fa-book'))
+                        .append(link);
+                    
+                    // Add display name if it exists
+                    if (displayName && displayName !== '') {
+                        manifestHeader.append($('<span>')
+                            .css('margin-left', '10px')
+                            .css('font-weight', 'normal')
+                            .css('color', '#666')
+                            .css('font-size', '0.9em')
+                            .text('(' + displayName + ')'));
+                    }
+
+                    var manifestContainer = $('<div>');
+                    manifestContainer.append(manifestHeader);
+                    manifestContainer.append($('<div style="max-width:800px;">')
+                        //                        .addClass('table-responsive')
+                        .append($('<table>')
+                            .addClass('table table-striped table-condensed')
+                            .append($('<tbody>')
+                                .append(rows))));
+                    
+                    // Add separator line under SelfServeManifest
+                    if (d.manifest_name === 'SelfServeManifest') {
+                        manifestContainer.append($('<div>')
+                            .css('max-width', '800px')
+                            .css('margin-top', '15px')
+                            .css('margin-bottom', '15px')
+                            .css('border-bottom', '1px solid rgba(0,0,0,0.15)'));
+                    }
+                    
+                    $('#manifests-tab').append(manifestContainer);
                 })
             }
         });
+        
+        // Unified search functionality - filters all lists
+        $('#unified-manifest-search').on('keyup', function() {
+            var searchText = $(this).val().toLowerCase();
+            
+            $('.manifest-list .list-group-item').each(function() {
+                var itemText = $(this).data('item-text').toLowerCase();
+                if (searchText === '' || itemText.indexOf(searchText) !== -1) {
+                    $(this).show();
+                } else {
+                    $(this).hide();
+                }
+            });
+        });
     });
-</script>
\ No newline at end of file
+</script>

From 64441c0607e3000c3c2ffcb63e75a836901040dc Mon Sep 17 00:00:00 2001
From: ofirgalcon <ofir@gal.co.uk>
Date: Mon, 19 Jan 2026 02:41:35 +0000
Subject: [PATCH 2/2] Update manifests_tab.php

---
 views/manifests_tab.php | 101 +++++++++++++++++++++++++---------------
 1 file changed, 64 insertions(+), 37 deletions(-)

diff --git a/views/manifests_tab.php b/views/manifests_tab.php
index 5ff11d6..ea02b9a 100755
--- a/views/manifests_tab.php
+++ b/views/manifests_tab.php
@@ -13,8 +13,7 @@
 <h2><i class="fa fa-list-alt"></i> <span data-i18n="manifests.client_tab"></span></h2>
 
 <div id="unified-search-container" style="margin-bottom: 15px; max-width: 300px;">
-    <input type="text" class="form-control input-sm" id="unified-manifest-search" 
-           style="height: 28px; padding: 4px 8px; font-size: 12px;">
+    <input type="text" class="form-control input-sm" id="unified-manifest-search">
 </div>
 
 <script>
@@ -96,43 +95,71 @@ function getDependencyDepth(manifest, allManifests, visited) {
                 $.each(data, function(i, d) {
                     // First, collect conditional items organized by property type
                     var conditionalItemsByProp = {};
-                    if (d.conditional_items && d.conditional_items !== '' && d.conditional_items !== null) {
-                        try {
-                            var conditional_items_json = JSON.parse(d.conditional_items);
-                            for (var cond_i in conditional_items_json) {
-                                var cond_item = conditional_items_json[cond_i];
-                                var condition = cond_item['condition'];
+                    
+                    // Recursive function to process conditional items (handles nested conditional_items)
+                    function processConditionalItems(conditionalArray, parentCondition) {
+                        if (!conditionalArray || !Array.isArray(conditionalArray)) {
+                            return;
+                        }
+                        
+                        for (var cond_i = 0; cond_i < conditionalArray.length; cond_i++) {
+                            var cond_item = conditionalArray[cond_i];
+                            var condition = cond_item['condition'] || '';
+                            
+                            // Build full condition path (combine parent + current condition)
+                            var fullCondition = condition;
+                            if (parentCondition && condition) {
+                                fullCondition = parentCondition + ' AND ' + condition;
+                            } else if (parentCondition) {
+                                fullCondition = parentCondition;
+                            }
+                            
+                            // Process each property in the conditional item
+                            for (var cond_prop in cond_item) {
+                                if (cond_prop === 'condition') {
+                                    continue; // Skip the condition key itself
+                                }
                                 
-                                // Process each property in the conditional item
-                                for (var cond_prop in cond_item) {
-                                    if (cond_prop !== 'condition' && cond_item[cond_prop] && cond_item[cond_prop] !== '' && cond_item[cond_prop] !== null) {
-                                        // Initialize array if needed
-                                        if (!conditionalItemsByProp[cond_prop]) {
-                                            conditionalItemsByProp[cond_prop] = [];
-                                        }
-                                        
-                                        // Handle both array and comma-separated string formats
-                                        var cond_items = [];
-                                        if (Array.isArray(cond_item[cond_prop])) {
-                                            cond_items = cond_item[cond_prop];
-                                        } else {
-                                            cond_items = String(cond_item[cond_prop]).split(',').map(function(item) {
-                                                return item.trim();
-                                            }).filter(function(item) {
-                                                return item.length > 0;
-                                            });
-                                        }
-                                        
-                                        // Add items with their condition
-                                        $.each(cond_items, function(idx, item) {
-                                            conditionalItemsByProp[cond_prop].push({
-                                                item: item,
-                                                condition: condition
-                                            });
+                                // Handle nested conditional_items recursively
+                                if (cond_prop === 'conditional_items') {
+                                    processConditionalItems(cond_item[cond_prop], fullCondition);
+                                    continue;
+                                }
+                                
+                                if (cond_item[cond_prop] && cond_item[cond_prop] !== '' && cond_item[cond_prop] !== null) {
+                                    // Initialize array if needed
+                                    if (!conditionalItemsByProp[cond_prop]) {
+                                        conditionalItemsByProp[cond_prop] = [];
+                                    }
+                                    
+                                    // Handle both array and comma-separated string formats
+                                    var cond_items = [];
+                                    if (Array.isArray(cond_item[cond_prop])) {
+                                        cond_items = cond_item[cond_prop];
+                                    } else {
+                                        cond_items = String(cond_item[cond_prop]).split(',').map(function(item) {
+                                            return item.trim();
+                                        }).filter(function(item) {
+                                            return item.length > 0;
                                         });
                                     }
+                                    
+                                    // Add items with their full condition path
+                                    $.each(cond_items, function(idx, item) {
+                                        conditionalItemsByProp[cond_prop].push({
+                                            item: item,
+                                            condition: fullCondition
+                                        });
+                                    });
                                 }
                             }
+                        }
+                    }
+                    
+                    if (d.conditional_items && d.conditional_items !== '' && d.conditional_items !== null) {
+                        try {
+                            var conditional_items_json = JSON.parse(d.conditional_items);
+                            processConditionalItems(conditional_items_json, '');
                         } catch (e) {
                             console.error('Error parsing conditional_items:', e);
                         }
@@ -204,14 +231,14 @@ function getDependencyDepth(manifest, allManifests, visited) {
                                         
                                         // Style with thinner borders and tighter spacing
                                         var borderStyle = idx === 0 ? 'border-top: none;' : 'border-top: 0.5px solid rgba(0,0,0,0.1);';
-                                        var itemHtml = '<span class="list-group-item" style="padding: 1px 8px; font-size: 12px; line-height: 1.2; border-width: 0.5px; ' + borderStyle + '" data-item-text="' + 
+                                        var itemHtml = '<span class="list-group-item" style="padding: 0.5px 8px; font-size: 11px; line-height: 1.0; border-width: 0.5px; ' + borderStyle + '" data-item-text="' + 
                                             escapedItem + (escapedCondition ? ' ' + escapedCondition : '') + '">';
                                         
                                         itemHtml += itemName;
                                         
                                         // Add condition in brackets if conditional
                                         if (itemData.isConditional) {
-                                            itemHtml += ' <span style="color: #999; font-size: 11px; font-style: italic;">[' + 
+                                            itemHtml += ' <span class="text-muted" style="font-style: italic;">[' + 
                                                 $('<div>').text(itemData.condition).html() + ']</span>';
                                         }
                                         
@@ -226,7 +253,7 @@ function getDependencyDepth(manifest, allManifests, visited) {
                                         labelKey = 'manifests.user_installs';
                                     }
                                     
-                                    rows = rows + '<tr><th style="width: 20%;">' + i18n.t(labelKey) + '</th><td style="padding: 5px;">' + listHtml + '</td></tr>';
+                                    rows = rows + '<tr><th style="width: 20%;">' + i18n.t(labelKey) + '</th><td style="padding: 3px;">' + listHtml + '</td></tr>';
                                 }
                             } else {
                                 rows = rows + '<tr><th style="width: 20%;">' + i18n.t('manifests.' + prop) + '</th><td>' + d[prop] + '</td></tr>';