Auto Merge

You can automatically merge the adjacent cells in a column that contains the same value using the AutoMerge feature. This example shows how you can merge the cells in columns in the grid layout engine.

You can automatically merge the adjacent cells in a column that contains the same value using the AutoMerge feature. This example shows how you can merge the cells in columns in the grid layout engine. In order to enable automatic merging in the grid, set the grid option allowCellMerging to true and set the same option to true in the column where you want to merge the same values. The cellMergingSettings.mode option in the grid has two values: restrict and free. The free option is the default. The restrict mode means cells within a column are merged when the cells have the same values and the corresponding cells in the previous column also have the same value. If grouping exists, all automatically merged cells cannot cross the group range.
<!DOCTYPE html> <html lang="en"> <head> <base href="/dataviewsjs/demos/en/sample/Features/Columns/AutoMerge/purejs/" /> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="keywords" content="columns, auto, merge" /> <meta name="description" content="You can automatically merge the adjacent cells in a column that contains the same value using the AutoMerge feature. This example shows how you can merge the cells in columns in the grid layout engine." /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Auto Merge | Features | MESCIUS DataViewsJS JavaScript Demos</title> <link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/css/bootstrap-snippet.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" /> <link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" /> <link href="styles.css" rel="stylesheet" type="text/css" /> <script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script> <script type="text/javascript"> window.process = { env: { NODE_ENV: 'production', USE_NPM: false, USE_CDN: false, SITE_ROOT: '/dataviewsjs/demos', FRAMEWORK: 'purejs', DVJS_LICENSE_KEY: 'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&amp;Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr', SJS_LICENSE_KEY: 'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&amp;Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep', }, }; </script> <script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script> <script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script> </head> <body class="theme-default"> <noscript>You need to enable JavaScript to run this app.</noscript> <div class="main-container responsive-container"> <div class="mobile-only toggle-options"> <span class="fa fa-cog"></span> </div> <div id="grid" class="grid main-content"></div> <div class="sample-options"> <div class="option-row"> <label> Cell merging mode </label> <select id="cell-merging-mode"> <option value="free" selected>free</option> <option value="restrict">restrict</option> </select> </div> <div class="option-row"> <input type="checkbox" id="allow-cell-merging" checked /> <label for="allow-cell-merging"> Allow cell merging </label> </div> <div class="option-row"> <input type="checkbox" id="always-show-text" /> <label for="always-show-text"> Always show text </label> </div> <div class="option-row"> <input type="checkbox" id="grouped-by-country" checked /> <label for="grouped-by-country"> Group by country and state </label> </div> </div> </div> <script src="data.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> </body> </html>
var cols = [ { id: 'country', caption: 'Country', dataField: 'Country', width: 180, allowCellMerging: true, allowEditing: false, }, { id: 'state', caption: 'State', dataField: 'State', width: 150, allowCellMerging: true, allowEditing: false, }, { id: 'city', caption: 'City', dataField: 'City', width: 225, allowCellMerging: true, }, { id: 'product', caption: 'Product', dataField: 'Product', width: 290, allowCellMerging: true, }, { id: 'detail', caption: 'Detail', dataField: 'Product_Detail', width: '*', minWidth: 300, }, ]; var grouping = [ { field: 'country', header: { visible: false, }, footer: { visible: false, }, }, { field: 'state', header: { visible: false, }, footer: { visible: false, }, }, ]; var dataView = new GC.DataViews.DataView( document.getElementById('grid'), data, cols, new GC.DataViews.GridLayout({ allowColumnReorder: false, allowCellMerging: true, selectionUnit: 'cell', grouping: grouping, }) ); var options = dataView.layoutEngine.options; $('#allow-cell-merging').click(function () { options.allowCellMerging = $('#allow-cell-merging').prop('checked'); dataView.invalidate(); }); $('#cell-merging-mode').change(function () { options.cellMergingSettings.mode = $('#cell-merging-mode').val(); dataView.invalidate(); }); $('#always-show-text').click(function () { dataView.options.cellMergingSettings.alwaysShowText = $('#always-show-text').prop('checked'); dataView.invalidate(); }); $('#grouped-by-country').click(function () { var groupByCountry = $('#grouped-by-country').prop('checked'); if (groupByCountry) { dataView.data.groupDescriptors = grouping; } else { dataView.data.groupDescriptors = []; } }); // helpers for responsive options panel $(function () { $('body').on('click', '.toggle-options', function () { const options = $('.sample-options'); const display = options.css('display'); options.css({ display: display === 'flex' ? 'none' : 'flex' }); $('.toggle-options .fa').toggleClass('fa-cog').toggleClass('fa-times'); }); window.addEventListener('resize', function () { if ($('.mobile-only').css('visibility') === 'hidden') { $('.sample-options').css({ display: 'flex' }); } }); });
// sales jan small dataset var data = [{ Transaction_Id: 182782, Transaction_Date: '2018/1/2', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'Carolina', City: 'Basildon', State: 'England', Country: 'United Kingdom', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 8 }, { Transaction_Id: 182783, Transaction_Date: '2018/1/2', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Visa', Name: 'Betina', City: 'Parkville', State: 'MO', Country: 'United States', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 3 }, { Transaction_Id: 182784, Transaction_Date: '2018/1/2', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Mastercard', Name: 'Federica e Andrea', City: 'Astoria', State: 'OR', Country: 'United States', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182785, Transaction_Date: '2018/1/3', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Visa', Name: 'Gouya', City: 'Echuca', State: 'Victoria', Country: 'Australia', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 2 }, { Transaction_Id: 182786, Transaction_Date: '2018/1/4', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Visa', Name: 'Gerd W', City: 'Cahaba Heights', State: 'AL', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 1 }, { Transaction_Id: 182787, Transaction_Date: '2018/1/4', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Visa', Name: 'LAURENCE', City: 'Mickleton', State: 'NJ', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 1 }, { Transaction_Id: 182788, Transaction_Date: '2018/1/4', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'Fleur', City: 'Peoria', State: 'IL', Country: 'United States', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 9 }, { Transaction_Id: 182789, Transaction_Date: '2018/1/2', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'Adam', City: 'Martin', State: 'TN', Country: 'United States', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 1 }, { Transaction_Id: 182790, Transaction_Date: '2018/1/4', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Mastercard', Name: 'Renee Elisabeth', City: 'Tel Aviv', State: 'Tel Aviv', Country: 'Israel', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 2 }, { Transaction_Id: 182791, Transaction_Date: '2018/1/4', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Aidan', City: 'Chatou', State: 'Ile-de-France', Country: 'France', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 5 }, { Transaction_Id: 182792, Transaction_Date: '2018/1/5', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Diners', Name: 'Stacy', City: 'New York', State: 'NY', Country: 'United States', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182793, Transaction_Date: '2018/1/5', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Amex', Name: 'Heidi', City: 'Eindhoven', State: 'Noord-Brabant', Country: 'Netherlands', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182794, Transaction_Date: '2018/1/2', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Mastercard', Name: 'Sean', City: 'Shavano Park', State: 'TX', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 1 }, { Transaction_Id: 182795, Transaction_Date: '2018/1/5', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Georgia', City: 'Eagle', State: 'ID', Country: 'United States', Product_Detail: '18.25 Ounce', Quantity: 4 }, { Transaction_Id: 182796, Transaction_Date: '2018/1/2', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Richard', City: 'Riverside', State: 'NJ', Country: 'United States', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182797, Transaction_Date: '2018/1/4', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Diners', Name: 'Leanne', City: 'Julianstown', State: 'Meath', Country: 'Ireland', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182798, Transaction_Date: '2018/1/5', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Janet', City: 'Ottawa', State: 'Ontario', Country: 'Canada', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182799, Transaction_Date: '2018/1/6', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Diners', Name: 'Barbara', City: 'Hyderabad', State: 'Andhra Pradesh', Country: 'India', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 1 }, { Transaction_Id: 182800, Transaction_Date: '2018/1/6', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Sabine', City: 'London', State: 'England', Country: 'United Kingdom', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182801, Transaction_Date: '2018/1/2', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Diners', Name: 'Hani', City: 'Salt Lake City', State: 'UT', Country: 'United States', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182802, Transaction_Date: '2018/1/6', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Jeremy', City: 'Manchester', State: 'England', Country: 'United Kingdom', Product_Detail: '24 oz', Quantity: 10 }, { Transaction_Id: 182803, Transaction_Date: '2018/1/1', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Diners', Name: 'Janis', City: 'Ballynora', State: 'Cork', Country: 'Ireland', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 3 }, { Transaction_Id: 182804, Transaction_Date: '2018/1/5', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Mastercard', Name: 'Nicola', City: 'Roodepoort', State: 'Gauteng', Country: 'South Africa', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182805, Transaction_Date: '2018/1/6', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Visa', Name: 'Asuman', City: 'Chula Vista', State: 'CA', Country: 'United States', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 2 }, { Transaction_Id: 182806, Transaction_Date: '2018/1/2', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Mastercard', Name: 'Lena', City: 'Kuopio', State: 'Ita-Suomen Laani', Country: 'Finland', Product_Detail: '18.25 Ounce', Quantity: 1 }, { Transaction_Id: 182807, Transaction_Date: '2018/1/1', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Visa', Name: 'Lisa', City: 'Sugar Land', State: 'TX', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 5 }, { Transaction_Id: 182808, Transaction_Date: '2018/1/7', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Diners', Name: 'Bryan Kerrene', City: 'New York', State: 'NY', Country: 'United States', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182809, Transaction_Date: '2018/1/2', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Visa', Name: 'Chris', City: 'London', State: 'England', Country: 'United Kingdom', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 1 }, { Transaction_Id: 182810, Transaction_Date: '2018/1/1', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Visa', Name: 'Maxine', City: 'Morton', State: 'IL', Country: 'United States', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 6 }, { Transaction_Id: 182811, Transaction_Date: '2018/1/8', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Visa', Name: 'Family', City: 'Los Gatos', State: 'CA', Country: 'United States', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 1 }, { Transaction_Id: 182812, Transaction_Date: '2018/1/8', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Mastercard', Name: 'Katherine', City: 'New York', State: 'NY', Country: 'United States', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 1 }, { Transaction_Id: 182813, Transaction_Date: '2018/1/8', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Mastercard', Name: 'Linda', City: 'Miami', State: 'FL', Country: 'United States', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182814, Transaction_Date: '2018/1/8', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'SYLVIA', City: 'Vesenaz', State: 'Geneve', Country: 'Switzerland', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 7 }, { Transaction_Id: 182815, Transaction_Date: '2018/1/3', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Diners', Name: 'Sheila', City: 'Brooklyn', State: 'NY', Country: 'United States', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 4 }, { Transaction_Id: 182816, Transaction_Date: '2018/1/5', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Mastercard', Name: 'Stephanie', City: 'Badhoevedorp', State: 'Noord-Holland', Country: 'Netherlands', Product_Detail: '30 Ounces', Quantity: 1 }, { Transaction_Id: 182817, Transaction_Date: '2018/1/6', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Amex', Name: 'Kelly', City: 'Reston', State: 'VA', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 1 }, { Transaction_Id: 182818, Transaction_Date: '2018/1/5', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'James', City: 'Burpengary', State: 'Queensland', Country: 'Australia', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182819, Transaction_Date: '2018/1/8', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Jennifer', City: 'Phoenix', State: 'AZ', Country: 'United States', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 3 }, { Transaction_Id: 182820, Transaction_Date: '2018/1/9', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Mastercard', Name: 'Anneli', City: 'Houston', State: 'TX', Country: 'United States', Product_Detail: '18.25 Ounce', Quantity: 1 }, { Transaction_Id: 182821, Transaction_Date: '2018/1/6', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Amex', Name: 'Ritz', City: 'Pittsfield', State: 'VT', Country: 'United States', Product_Detail: '18.25 Ounce', Quantity: 2 }, { Transaction_Id: 182822, Transaction_Date: '2018/1/6', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Amex', Name: 'Sylvia', City: 'Pittsfield', State: 'VT', Country: 'United States', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182823, Transaction_Date: '2018/1/7', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Mastercard', Name: 'Marie', City: 'Ball Ground', State: 'GA', Country: 'United States', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182824, Transaction_Date: '2018/1/3', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Mehmet Fatih', City: 'Helsingor', State: 'Frederiksborg', Country: 'Denmark', Product_Detail: '18.25 Ounce', Quantity: 1 }, { Transaction_Id: 182825, Transaction_Date: '2018/1/7', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Visa', Name: 'Anabela', City: 'Flossmoor', State: 'IL', Country: 'United States', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 1 }, { Transaction_Id: 182826, Transaction_Date: '2018/1/7', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Amex', Name: 'Nicole', City: 'Houston', State: 'TX', Country: 'United States', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 1 }, { Transaction_Id: 182827, Transaction_Date: '2018/1/3', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Christiane', City: 'Delray Beach', State: 'FL', Country: 'United States', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 9 }, { Transaction_Id: 182828, Transaction_Date: '2018/1/9', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Mastercard', Name: 'Sari', City: 'Newbury', State: 'England', Country: 'United Kingdom', Product_Detail: '24 oz', Quantity: 4 }, { Transaction_Id: 182829, Transaction_Date: '2018/1/3', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Mastercard', Name: 'Simone', City: 'Kobenhavn', State: 'Kobenhavn', Country: 'Denmark', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182830, Transaction_Date: '2018/1/10', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Amex', Name: 'Vanessa', City: 'Sandy Springs', State: 'GA', Country: 'United States', Product_Detail: '18.25 Ounce', Quantity: 1 }, { Transaction_Id: 182831, Transaction_Date: '2018/1/10', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Diners', Name: 'Anupam', City: 'Kinsaley', State: 'Dublin', Country: 'Ireland', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 2 }, { Transaction_Id: 182832, Transaction_Date: '2018/1/10', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Visa', Name: 'Karina', City: 'Fort Lauderdale', State: 'FL', Country: 'United States', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 2 }, { Transaction_Id: 182833, Transaction_Date: '2018/1/6', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Mastercard', Name: 'Frank', City: 'Melbourne', State: 'Victoria', Country: 'Australia', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 3 }, { Transaction_Id: 182834, Transaction_Date: '2018/1/10', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Visa', Name: 'Angela', City: 'Ankeny', State: 'IA', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 8 }, { Transaction_Id: 182835, Transaction_Date: '2018/1/7', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Darren', City: 'Pittsboro', State: 'NC', Country: 'United States', Product_Detail: '24 oz', Quantity: 10 }, { Transaction_Id: 182836, Transaction_Date: '2018/1/1', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'Nikki', City: 'New Rochelle', State: 'NY', Country: 'United States', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 4 }, { Transaction_Id: 182837, Transaction_Date: '2018/1/11', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Chris', City: 'Gold Coast', State: 'Queensland', Country: 'Australia', Product_Detail: '18.25 Ounce', Quantity: 3 }, { Transaction_Id: 182838, Transaction_Date: '2018/1/11', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Visa', Name: 'Stephanie', City: 'Brussels', State: 'Brussels (Bruxelles)', Country: 'Belgium', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 10 }, { Transaction_Id: 182839, Transaction_Date: '2018/1/10', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Anushka', City: 'Maple Ridge District Municipality', State: 'British Columbia', Country: 'Canada', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182840, Transaction_Date: '2018/1/7', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Mastercard', Name: 'June', City: 'Beachwood', State: 'OH', Country: 'United States', Product_Detail: '24 oz', Quantity: 7 }, { Transaction_Id: 182841, Transaction_Date: '2018/1/4', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Diners', Name: 'Baybars', City: 'Prince Albert', State: 'Saskatchewan', Country: 'Canada', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 5 }, { Transaction_Id: 182842, Transaction_Date: '2018/1/5', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'Bonnie', City: 'Saltsjobaden', State: 'Stockholm', Country: 'Sweden', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 7 }, { Transaction_Id: 182843, Transaction_Date: '2018/1/2', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Cindy', City: 'Kemble', State: 'England', Country: 'United Kingdom', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182844, Transaction_Date: '2018/1/12', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Mastercard', Name: 'Chrissy', City: 'W Lebanon', State: 'NH', Country: 'United States', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182845, Transaction_Date: '2018/1/4', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Mastercard', Name: 'Tamar', City: 'Headley', State: 'England', Country: 'United Kingdom', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182846, Transaction_Date: '2018/1/7', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Mastercard', Name: 'Deirdre', City: 'Lausanne', State: 'Vaud', Country: 'Switzerland', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182847, Transaction_Date: '2018/1/12', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Mastercard', Name: 'Bernadett', City: 'Southampton', State: 'England', Country: 'United Kingdom', Product_Detail: '18.25 Ounce', Quantity: 1 }, { Transaction_Id: 182848, Transaction_Date: '2018/1/8', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Dottie', City: 'Woodsboro', State: 'MD', Country: 'United States', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182849, Transaction_Date: '2018/1/11', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Stefan', City: 'Stavanger', State: 'Rogaland', Country: 'Norway', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 2 }, { Transaction_Id: 182850, Transaction_Date: '2018/1/7', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Gina', City: 'Red Deer', State: 'Alberta', Country: 'Canada', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182851, Transaction_Date: '2018/1/2', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Diners', Name: 'Lynne', City: 'Memphis', State: 'TN', Country: 'United States', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 4 }, { Transaction_Id: 182852, Transaction_Date: '2018/1/5', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Mastercard', Name: 'Tammy', City: 'Morges', State: 'Vaud', Country: 'Switzerland', Product_Detail: '30 Ounces', Quantity: 4 }, { Transaction_Id: 182853, Transaction_Date: '2018/1/8', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Kim', City: 'Calgary', State: 'Alberta', Country: 'Canada', Product_Detail: '18.25 Ounce', Quantity: 2 }, { Transaction_Id: 182854, Transaction_Date: '2018/1/8', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Visa', Name: 'Bruce', City: 'Belleville', State: 'Ontario', Country: 'Canada', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 6 }, { Transaction_Id: 182855, Transaction_Date: '2018/1/11', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Visa', Name: 'Rosa Maria', City: 'Cincinnati', State: 'OH', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 1 }, { Transaction_Id: 182856, Transaction_Date: '2018/1/12', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Visa', Name: 'Lydia', City: 'Comox', State: 'British Columbia', Country: 'Canada', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 3 }, { Transaction_Id: 182857, Transaction_Date: '2018/1/12', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Eric', City: 'Gasperich', State: 'Luxembourg', Country: 'Luxembourg', Product_Detail: '18.25 Ounce', Quantity: 1 }, { Transaction_Id: 182858, Transaction_Date: '2018/1/11', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'AnaPaula', City: 'Helens Bay', State: 'Northern Ireland', Country: 'United Kingdom', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 1 }, { Transaction_Id: 182859, Transaction_Date: '2018/1/13', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Robin', City: 'Milan', State: 'Lombardy', Country: 'Italy', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }, { Transaction_Id: 182860, Transaction_Date: '2018/1/13', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Visa', Name: 'Gitte', City: 'Staten Island', State: 'NY', Country: 'United States', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 8 }, { Transaction_Id: 182861, Transaction_Date: '2018/1/8', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Dr. Claudia', City: 'Oslo', State: 'Oslo', Country: 'Norway', Product_Detail: '18.25 Ounce', Quantity: 1 }, { Transaction_Id: 182862, Transaction_Date: '2018/1/2', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Visa', Name: 'Crystal', City: 'Farmington', State: 'Michigan', Country: 'United States', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182863, Transaction_Date: '2018/1/7', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Diners', Name: 'Delphine', City: 'Santa Monica', State: 'CA', Country: 'United States', Product_Detail: '18.25 Ounce', Quantity: 8 }, { Transaction_Id: 182864, Transaction_Date: '2018/1/1', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Nathalie', City: 'Calgary', State: 'Alberta', Country: 'Canada', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182865, Transaction_Date: '2018/1/3', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'Lindi', City: 'Vancouver', State: 'British Columbia', Country: 'Canada', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 6 }, { Transaction_Id: 182866, Transaction_Date: '2018/1/12', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Mastercard', Name: 'Valda', City: 'Irvine', State: 'CA', Country: 'United States', Product_Detail: '24 oz', Quantity: 6 }, { Transaction_Id: 182867, Transaction_Date: '2018/1/5', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Mastercard', Name: 'Marcia', City: 'Telgte', State: 'Nordrhein-Westfalen', Country: 'Germany', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 4 }, { Transaction_Id: 182868, Transaction_Date: '2018/1/10', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Mastercard', Name: 'Kevin', City: 'Cheltenham', State: 'England', Country: 'United Kingdom', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 4 }, { Transaction_Id: 182869, Transaction_Date: '2018/1/13', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Clare', City: 'Keller', State: 'VA', Country: 'United States', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 2 }, { Transaction_Id: 182870, Transaction_Date: '2018/1/2', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Alice', City: 'Nakskov', State: 'Storstrom', Country: 'Denmark', Product_Detail: '24 oz', Quantity: 2 }, { Transaction_Id: 182871, Transaction_Date: '2018/1/14', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Mastercard', Name: 'ZENA', City: 'Honolulu', State: 'HI', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 7 }, { Transaction_Id: 182872, Transaction_Date: '2018/1/6', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Andrea', City: 'Bubuieci', State: 'Chisinau', Country: 'Moldova', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 2 }, { Transaction_Id: 182873, Transaction_Date: '2018/1/3', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Rennae', City: 'Amelia Island', State: 'FL', Country: 'United States', Product_Detail: '24 oz', Quantity: 8 }, { Transaction_Id: 182874, Transaction_Date: '2018/1/4', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Gerhard', City: 'Alliston', State: 'Ontario', Country: 'Canada', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182875, Transaction_Date: '2018/1/12', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Amex', Name: 'Megan', City: 'La Alberca', State: 'Murcia', Country: 'Spain', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182876, Transaction_Date: '2018/1/6', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Mastercard', Name: 'Danielle', City: 'Rathgar', State: 'Dublin', Country: 'Ireland', Product_Detail: '30 Ounces', Quantity: 6 }, { Transaction_Id: 182877, Transaction_Date: '2018/1/13', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Mastercard', Name: 'Tod', City: 'Coral Gables', State: 'FL', Country: 'United States', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 4 }, { Transaction_Id: 182878, Transaction_Date: '2018/1/14', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Janaina', City: 'Miami', State: 'FL', Country: 'United States', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 6 }, { Transaction_Id: 182879, Transaction_Date: '2018/1/6', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Kofi', City: 'Vancouver', State: 'British Columbia', Country: 'Canada', Product_Detail: '18.25 Ounce', Quantity: 3 }, { Transaction_Id: 182880, Transaction_Date: '2018/1/14', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Visa', Name: 'Jennifer', City: 'Jumeira', State: 'Dubayy', Country: 'United Arab Emirates', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 4 }, { Transaction_Id: 182881, Transaction_Date: '2018/1/13', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Jolene', City: 'Englewood', State: 'CO', Country: 'United States', Product_Detail: '18.25 Ounce', Quantity: 3 }, { Transaction_Id: 182882, Transaction_Date: '2018/1/8', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Mastercard', Name: 'Anne', City: 'Bournemouth', State: 'England', Country: 'United Kingdom', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 7 }, { Transaction_Id: 182883, Transaction_Date: '2018/1/15', Product: 'Kraft Real Mayo', Price: 5.71, Payment_Type: 'Mastercard', Name: 'Alexis', City: 'Genoa', State: 'IL', Country: 'United States', Product_Detail: '30 Ounces', Quantity: 8 }, { Transaction_Id: 182884, Transaction_Date: '2018/1/12', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Visa', Name: 'Dez', City: "Al 'Adliyah", State: 'Al Manamah', Country: 'Bahrain', Product_Detail: '24 oz', Quantity: 3 }, { Transaction_Id: 182885, Transaction_Date: '2018/1/15', Product: "Jaybee's Gourmet Nuts Gift Pack (3 Lb)", Price: 35, Payment_Type: 'Visa', Name: 'Stephanie', City: 'Rouen', State: 'Upper Normandy', Country: 'France', Product_Detail: 'Premium Quality Nuts Elegant Design Vegetarian Friendly & Kosher', Quantity: 1 }, { Transaction_Id: 182886, Transaction_Date: '2018/1/5', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Melissa', City: 'Parkland', State: 'FL', Country: 'United States', Product_Detail: '18.25 Ounce', Quantity: 2 }, { Transaction_Id: 182887, Transaction_Date: '2018/1/10', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Amex', Name: 'CLARE', City: 'San Francisco', State: 'CA', Country: 'United States', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 7 }, { Transaction_Id: 182888, Transaction_Date: '2018/1/15', Product: 'Kraft Grated Parmesan Cheese', Price: 14.89, Payment_Type: 'Mastercard', Name: 'Catherine', City: 'Keller', State: 'VA', Country: 'United States', Product_Detail: '24 oz', Quantity: 1 }, { Transaction_Id: 182889, Transaction_Date: '2018/1/12', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Visa', Name: 'Veronique', City: 'Tsawwassen', State: 'British Columbia', Country: 'Canada', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 3 }, { Transaction_Id: 182890, Transaction_Date: '2018/1/6', Product: 'Teddy Grahams Crackers', Price: 19.6, Payment_Type: 'Mastercard', Name: 'Bruce and Camille', City: 'Clinton', State: 'NJ', Country: 'United States', Product_Detail: 'Honey 10-Ounce Boxes 6-Pack', Quantity: 1 }, { Transaction_Id: 182891, Transaction_Date: '2018/1/14', Product: 'KIND Bars Almond & Coconut Gluten Free', Price: 14.5, Payment_Type: 'Mastercard', Name: 'Ellen', City: 'Owensboro', State: 'KY', Country: 'United States', Product_Detail: '1.4 Ounce Bars 12 Count', Quantity: 10 }, { Transaction_Id: 182892, Transaction_Date: '2018/1/14', Product: 'Planters Deluxe Whole Cashew', Price: 8.52, Payment_Type: 'Visa', Name: 'Amy', City: 'Lakewood Village', State: 'TX', Country: 'United States', Product_Detail: '18.25 Ounce', Quantity: 1 }, { Transaction_Id: 182893, Transaction_Date: '2018/1/6', Product: 'Smartfood Popcorn', Price: 2.5, Payment_Type: 'Visa', Name: 'Anna', City: 'Okotoks', State: 'Alberta', Country: 'Canada', Product_Detail: 'White Cheddar 9 Ounce', Quantity: 1 }];
.main-container { width: 100%; height: 100%; } .sample-options { background: #fbfbfb; box-sizing: border-box; height: 100%; overflow: auto; padding: 10px; min-width: 240px; max-width: 250px; } .sample-options .option-row { display: flex; align-items: center; margin-bottom: 5px; } .sample-options select { margin-left: 5px; } .sample-options input[type=checkbox] { margin-right: 5px; } .sample-options label { margin: 0; } #grid { height: 100%; padding: 0; } .flex-break { flex-basis: 100%; height: 0; } .mobile-only { visibility: hidden; } .responsive-container { display: flex; box-sizing: border-box; } .responsive-container .main-content { box-sizing: border-box; height: 100%; flex-grow: 1; flex-shrink: 1; min-width: 50%; max-width: 100%; } .responsive-container .sample-options { box-sizing: border-box; display: inline-flex; flex-direction: column; height: 100%; flex-grow: 0; flex-shrink: 1; } .responsive-container .sample-options .option-row { box-sizing: border-box; display: inline-flex; align-items: center; flex-grow: 0; flex-shrink: 0; flex-basis: auto; white-space: nowrap; padding-right: 10px; width: auto; } .responsive-container .toggle-options { align-items: center; justify-content: center; position: absolute; top: 5px; right: 5px; background-color: #ebebeb; color: #47a06c; border-radius: 16px; cursor: pointer; width: 36px; height: 36px; font-size: 28px; z-index: 101; display: none; } @media (min-width: 320px) and (max-width: 480px) and (orientation: portrait) { .mobile-only { visibility: visible; } .responsive-container { display: block; position: relative; } .responsive-container .main-content { position: absolute; display: block; top: 0; left: 0; width: 100%; max-width: 100%; z-index: 99; } .responsive-container .toggle-options { display: flex; } .responsive-container .sample-options { display: none; position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; z-index: 100; } .responsive-container .sample-options .option-row { padding-right: 20px; } } /*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0NvbHVtbnMvQXV0b01lcmdlL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0NvbHVtbnMvQXV0b01lcmdlL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsV0FBQTtFQUNBLFlBQUE7QUNDRjs7QURFQTtFQUNFLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGFBQUE7RUFDQSxnQkFBQTtFQUNBLGdCQUFBO0FDQ0Y7QURDRTtFQUNFLGFBQUE7RUFDQSxtQkFBQTtFQUNBLGtCQUFBO0FDQ0o7QURFRTtFQUNFLGdCQUFBO0FDQUo7QURHRTtFQUNFLGlCQUFBO0FDREo7QURJRTtFQUNFLFNBQUE7QUNGSjs7QURNQTtFQUNFLFlBQUE7RUFDQSxVQUFBO0FDSEY7O0FEdUJBO0VBQ0UsZ0JBQUE7RUFDQSxTQUFBO0FDcEJGOztBRHVCQTtFQUNFLGtCQUFBO0FDcEJGOztBRHVCQTtFQUNFLGFBQUE7RUFDQSxzQkFBQTtBQ3BCRjtBRHNCRTtFQUNFLHNCQUFBO0VBQ0EsWUFBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0VBQ0EsY0FBQTtFQUNBLGVBQUE7QUNwQko7QUR1QkU7RUFDRSxzQkFBQTtFQUNBLG9CQUFBO0VBQ0Esc0JBQUE7RUFDQSxZQUFBO0VBQ0EsWUFBQTtFQUNBLGNBQUE7QUNyQko7QUR1Qkk7RUFDRSxzQkFBQTtFQUNBLG9CQUFBO0VBQ0EsbUJBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtFQUNBLGdCQUFBO0VBQ0EsbUJBQUE7RUFDQSxtQkFBQTtFQUNBLFdBQUE7QUNyQk47QUR5QkU7RUExREEsbUJBQUE7RUFDQSx1QkFBQTtFQUNBLGtCQUFBO0VBQ0EsUUFBQTtFQUNBLFVBQUE7RUFDQSx5QkFBQTtFQUNBLGNBQUE7RUFDQSxtQkFBQTtFQUNBLGVBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGVBQUE7RUFDQSxZQUFBO0VBZ0RFLGFBQUE7QUNYSjs7QURnQkE7RUFDRTtJQUNFLG1CQUFBO0VDYkY7O0VEZUE7SUFDRSxjQUFBO0lBQ0Esa0JBQUE7RUNaRjtFRGNFO0lBQ0Usa0JBQUE7SUFDQSxjQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFdBQUE7RUNaSjtFRGVFO0lBQ0UsYUFBQTtFQ2JKO0VEZ0JFO0lBQ0UsYUFBQTtJQUNBLGtCQUFBO0lBQ0EsTUFBQTtJQUNBLE9BQUE7SUFDQSxXQUFBO0lBQ0EsZUFBQTtJQUNBLFlBQUE7SUFDQSxZQUFBO0VDZEo7RURnQkk7SUFDRSxtQkFBQTtFQ2ROO0FBQ0YiLCJmaWxlIjoiRmVhdHVyZXMvQ29sdW1ucy9BdXRvTWVyZ2UvcHVyZWpzL3N0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubWFpbi1jb250YWluZXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBtaW4td2lkdGg6IDI0MHB4O1xuICBtYXgtd2lkdGg6IDI1MHB4O1xuXG4gIC5vcHRpb24tcm93IHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgbWFyZ2luLWJvdHRvbTogNXB4O1xuICB9XG5cbiAgc2VsZWN0IHtcbiAgICBtYXJnaW4tbGVmdDogNXB4O1xuICB9XG5cbiAgaW5wdXRbdHlwZT0nY2hlY2tib3gnXSB7XG4gICAgbWFyZ2luLXJpZ2h0OiA1cHg7XG4gIH1cblxuICBsYWJlbCB7XG4gICAgbWFyZ2luOiAwO1xuICB9XG59XG5cbiNncmlkIHtcbiAgaGVpZ2h0OiAxMDAlO1xuICBwYWRkaW5nOiAwO1xufVxuXG4vLyBoZWxwZXJzIGZvciByZXNwb25zaXZlIG9wdGlvbnMgcGFuZWxcbkBtaXhpbiBtb2JpbGUtYnRuKCkge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDVweDtcbiAgcmlnaHQ6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ViZWJlYjtcbiAgY29sb3I6ICM0N2EwNmM7XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgd2lkdGg6IDM2cHg7XG4gIGhlaWdodDogMzZweDtcbiAgZm9udC1zaXplOiAyOHB4O1xuICB6LWluZGV4OiAxMDE7XG59XG5cbi5mbGV4LWJyZWFrIHtcbiAgZmxleC1iYXNpczogMTAwJTtcbiAgaGVpZ2h0OiAwO1xufVxuXG4ubW9iaWxlLW9ubHkge1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG59XG5cbi5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cbiAgLm1haW4tY29udGVudCB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgZmxleC1ncm93OiAxO1xuICAgIGZsZXgtc2hyaW5rOiAxO1xuICAgIG1pbi13aWR0aDogNTAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgfVxuXG4gIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBmbGV4LWdyb3c6IDA7XG4gICAgZmxleC1zaHJpbms6IDE7XG5cbiAgICAub3B0aW9uLXJvdyB7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgICAgZGlzcGxheTogaW5saW5lLWZsZXg7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgZmxleC1ncm93OiAwO1xuICAgICAgZmxleC1zaHJpbms6IDA7XG4gICAgICBmbGV4LWJhc2lzOiBhdXRvO1xuICAgICAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcbiAgICAgIHBhZGRpbmctcmlnaHQ6IDEwcHg7XG4gICAgICB3aWR0aDogYXV0bztcbiAgICB9XG4gIH1cblxuICAudG9nZ2xlLW9wdGlvbnMge1xuICAgIEBpbmNsdWRlIG1vYmlsZS1idG47XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxufVxuXG4vLyBtb3N0IHNtYXJ0cGhvbmVzXG5AbWVkaWEgKG1pbi13aWR0aDogMzIwcHgpIGFuZCAobWF4LXdpZHRoOiA0ODBweCkgYW5kIChvcmllbnRhdGlvbjogcG9ydHJhaXQpIHtcbiAgLm1vYmlsZS1vbmx5IHtcbiAgICB2aXNpYmlsaXR5OiB2aXNpYmxlO1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuXG4gICAgLm1haW4tY29udGVudCB7XG4gICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRvcDogMDtcbiAgICAgIGxlZnQ6IDA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIG1heC13aWR0aDogMTAwJTtcbiAgICAgIHotaW5kZXg6IDk5O1xuICAgIH1cblxuICAgIC50b2dnbGUtb3B0aW9ucyB7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgIH1cblxuICAgIC5zYW1wbGUtb3B0aW9ucyB7XG4gICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgdG9wOiAwO1xuICAgICAgbGVmdDogMDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgbWF4LXdpZHRoOiAxMDAlO1xuICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgei1pbmRleDogMTAwO1xuXG4gICAgICAub3B0aW9uLXJvdyB7XG4gICAgICAgIHBhZGRpbmctcmlnaHQ6IDIwcHg7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG4iLCIubWFpbi1jb250YWluZXIge1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuXG4uc2FtcGxlLW9wdGlvbnMge1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBoZWlnaHQ6IDEwMCU7XG4gIG92ZXJmbG93OiBhdXRvO1xuICBwYWRkaW5nOiAxMHB4O1xuICBtaW4td2lkdGg6IDI0MHB4O1xuICBtYXgtd2lkdGg6IDI1MHB4O1xufVxuLnNhbXBsZS1vcHRpb25zIC5vcHRpb24tcm93IHtcbiAgZGlzcGxheTogZmxleDtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgbWFyZ2luLWJvdHRvbTogNXB4O1xufVxuLnNhbXBsZS1vcHRpb25zIHNlbGVjdCB7XG4gIG1hcmdpbi1sZWZ0OiA1cHg7XG59XG4uc2FtcGxlLW9wdGlvbnMgaW5wdXRbdHlwZT1jaGVja2JveF0ge1xuICBtYXJnaW4tcmlnaHQ6IDVweDtcbn1cbi5zYW1wbGUtb3B0aW9ucyBsYWJlbCB7XG4gIG1hcmdpbjogMDtcbn1cblxuI2dyaWQge1xuICBoZWlnaHQ6IDEwMCU7XG4gIHBhZGRpbmc6IDA7XG59XG5cbi5mbGV4LWJyZWFrIHtcbiAgZmxleC1iYXNpczogMTAwJTtcbiAgaGVpZ2h0OiAwO1xufVxuXG4ubW9iaWxlLW9ubHkge1xuICB2aXNpYmlsaXR5OiBoaWRkZW47XG59XG5cbi5yZXNwb25zaXZlLWNvbnRhaW5lciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG59XG4ucmVzcG9uc2l2ZS1jb250YWluZXIgLm1haW4tY29udGVudCB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGhlaWdodDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbiAgbWluLXdpZHRoOiA1MCU7XG4gIG1heC13aWR0aDogMTAwJTtcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBkaXNwbGF5OiBpbmxpbmUtZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgaGVpZ2h0OiAxMDAlO1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAxO1xufVxuLnJlc3BvbnNpdmUtY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyB7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIGRpc3BsYXk6IGlubGluZS1mbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBmbGV4LWJhc2lzOiBhdXRvO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xuICBwYWRkaW5nLXJpZ2h0OiAxMHB4O1xuICB3aWR0aDogYXV0bztcbn1cbi5yZXNwb25zaXZlLWNvbnRhaW5lciAudG9nZ2xlLW9wdGlvbnMge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB0b3A6IDVweDtcbiAgcmlnaHQ6IDVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ViZWJlYjtcbiAgY29sb3I6ICM0N2EwNmM7XG4gIGJvcmRlci1yYWRpdXM6IDE2cHg7XG4gIGN1cnNvcjogcG9pbnRlcjtcbiAgd2lkdGg6IDM2cHg7XG4gIGhlaWdodDogMzZweDtcbiAgZm9udC1zaXplOiAyOHB4O1xuICB6LWluZGV4OiAxMDE7XG4gIGRpc3BsYXk6IG5vbmU7XG59XG5cbkBtZWRpYSAobWluLXdpZHRoOiAzMjBweCkgYW5kIChtYXgtd2lkdGg6IDQ4MHB4KSBhbmQgKG9yaWVudGF0aW9uOiBwb3J0cmFpdCkge1xuICAubW9iaWxlLW9ubHkge1xuICAgIHZpc2liaWxpdHk6IHZpc2libGU7XG4gIH1cblxuICAucmVzcG9uc2l2ZS1jb250YWluZXIge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLm1haW4tY29udGVudCB7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgICB6LWluZGV4OiA5OTtcbiAgfVxuICAucmVzcG9uc2l2ZS1jb250YWluZXIgLnRvZ2dsZS1vcHRpb25zIHtcbiAgICBkaXNwbGF5OiBmbGV4O1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogMDtcbiAgICBsZWZ0OiAwO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIG1heC13aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgei1pbmRleDogMTAwO1xuICB9XG4gIC5yZXNwb25zaXZlLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMgLm9wdGlvbi1yb3cge1xuICAgIHBhZGRpbmctcmlnaHQ6IDIwcHg7XG4gIH1cbn0iXX0= */