<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>colum layout for datatable command buttons #266</title> <script src="266.mjs" type="module"></script> </head> <body> <h1>colum layout for datatable command buttons #266</h1> <p></p> <ul> <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/266">Issue #266</a></li> <li><a href="/">Back to overview</a></li> </ul> <button id="button" onclick="getElementById('main').style.width = '650px';">650px</button> <button id="button" onclick="getElementById('main').style.width = '550px';">550px</button> <button id="button" onclick="getElementById('main').style.width = '450px';">450px</button> <button id="button" onclick="getElementById('main').style.width = '350px';">350px</button> <main id="main"> <monster-datasource-dom id="myDataSourceID"> <script type="application/json"> { "dataset": [ { "id": 1, "name": "John Doe", "street": "Main Street 1", "city": "Berlin", "zipcode": "10115", "country": "Germany", "phone": "+49 30 1234.56", "email": "john.doe@example.com" }, { "id": 2, "name": "Jane Doe", "street": "Second Avenue 2", "city": "Munich", "zipcode": "80331", "country": "Germany", "phone": "+49 89 6543.21", "email": "jane.doe@example.com" }, { "id": 3, "name": "Max Mustermann", "street": "Example Road 3", "city": "Hamburg", "zipcode": "20095", "country": "Germany", "phone": "+49 40 1111.11", "email": "max.mustermann@example.com" }, { "id": 4, "name": "Lena Schmidt", "street": "Hauptstrasse 4", "city": "Cologne", "zipcode": "50667", "country": "Germany", "phone": "+49 221 9876.54", "email": "lena.schmidt@example.com" }, { "id": 5, "name": "Markus Meier", "street": "Ringstrasse 5", "city": "Frankfurt", "zipcode": "60311", "country": "Germany", "phone": "+49 69 4321.98", "email": "markus.meier@example.com" }, { "id": 6, "name": "Sophie Fischer", "street": "Bachstrasse 6", "city": "Stuttgart", "zipcode": "70173", "country": "Germany", "phone": "+49 711 5678.90", "email": "sophie.fischer@example.com" }, { "id": 7, "name": "Michael Weber", "street": "Schillerstrasse 7", "city": "Dusseldorf", "zipcode": "40213", "country": "Germany", "phone": "+49 211 1234.78", "email": "michael.weber@example.com" }, { "id": 8, "name": "Laura Hoffmann", "street": "Goethestrasse 8", "city": "Leipzig", "zipcode": "04109", "country": "Germany", "phone": "+49 341 2345.67", "email": "laura.hoffmann@example.com" }, { "id": 9, "name": "Daniel Zimmermann", "street": "Blumenstrasse 9", "city": "Dresden", "zipcode": "01067", "country": "Germany", "phone": "+49 351 8765.43", "email": "daniel.zimmermann@example.com" }, { "id": 10, "name": "Anna Lehmann", "street": "Marktplatz 10", "city": "Nuremberg", "zipcode": "90403", "country": "Germany", "phone": "+49 911 3456.21", "email": "anna.lehmann@example.com" }, { "id": 11, "name": "Tim Köhler", "street": "Wiesenstrasse 11", "city": "Hannover", "zipcode": "30159", "country": "Germany", "phone": "+49 511 5678.90", "email": "tim.koehler@example.com" }, { "id": 12, "name": "Sara Wagner", "street": "Schlossallee 12", "city": "Bremen", "zipcode": "28195", "country": "Germany", "phone": "+49 421 7890.12", "email": "sara.wagner@example.com" }, { "id": 13, "name": "Patrick Müller", "street": "Waldstrasse 13", "city": "Dortmund", "zipcode": "44135", "country": "Germany", "phone": "+49 231 6789.45", "email": "patrick.mueller@example.com" }, { "id": 14, "name": "Julia Braun", "street": "Lindenallee 14", "city": "Essen", "zipcode": "45127", "country": "Germany", "phone": "+49 201 7890.65", "email": "julia.braun@example.com" }, { "id": 15, "name": "Stefan Klein", "street": "Weinbergstrasse 15", "city": "Duisburg", "zipcode": "47051", "country": "Germany", "phone": "+49 203 1234.89", "email": "stefan.klein@example.com" }, { "id": 16, "name": "Nina Wolf", "street": "Gartenstrasse 16", "city": "Bochum", "zipcode": "44787", "country": "Germany", "phone": "+49 234 6789.12", "email": "nina.wolf@example.com" }, { "id": 17, "name": "Jan Hartmann", "street": "Dorfstrasse 17", "city": "Wuppertal", "zipcode": "42103", "country": "Germany", "phone": "+49 202 3456.78", "email": "jan.hartmann@example.com" }, { "id": 18, "name": "Katharina Krämer", "street": "Kaiserstrasse 18", "city": "Bonn", "zipcode": "53111", "country": "Germany", "phone": "+49 228 1234.90", "email": "katharina.kraemer@example.com" }, { "id": 19, "name": "Tom Schröder", "street": "Brunnenstrasse 19", "city": "Mannheim", "zipcode": "68159", "country": "Germany", "phone": "+49 621 5678.54", "email": "tom.schroeder@example.com" }, { "id": 20, "name": "Lisa Schmitt", "street": "Ringweg 20", "city": "Karlsruhe", "zipcode": "76133", "country": "Germany", "phone": "+49 721 4321.90", "email": "lisa.schmitt@example.com" }, { "id": 21, "name": "Erik Berger", "street": "Hügelstrasse 21", "city": "Augsburg", "zipcode": "86150", "country": "Germany", "phone": "+49 821 1234.45", "email": "erik.berger@example.com" }, { "id": 22, "name": "Eva Schwarz", "street": "Altstadtgasse 22", "city": "Kiel", "zipcode": "24103", "country": "Germany", "phone": "+49 431 6789.32", "email": "eva.schwarz@example.com" }, { "id": 23, "name": "Lars Becker", "street": "Holzweg 23", "city": "Magdeburg", "zipcode": "39104", "country": "Germany", "phone": "+49 391 2345.76", "email": "lars.becker@example.com" } ], "sys": { "pagination": { "pages": 10, "objectsPerPage": 3, "currentPage": 2 } } } </script> </monster-datasource-dom> <monster-host> <monster-config-manager></monster-config-manager> </monster-host> <monster-datatable data-monster-datasource-selector="#myDataSourceID" data-monster-option-features-copyAll="false"> <monster-collapse id="filter-collapse" data-monster-role="filter-collapse"> <div class="flex"> <monster-tabs style="width: 100%" data-monster-option-features-opendelay="500" data-monster-option-classes-navigation="monster-theme-background-inherit" data-monster-option-classes-button="monster-theme-background-inherit" id="filtertabs"> <div data-monster-button-label="Filter" data-monster-state="active" class="active"> <monster-datatable-filter id="listfilter1" slot="filter" data-monster-option-storedconfig-selector="#filtertabs"> <label data-monster-label="ID" id="id" data-monster-template="${value | call:range:oid}"> ID <monster-filter-range></monster-filter-range> </label> </monster-datatable-filter> </div> </monster-tabs> </div> </monster-collapse> <div slot="bar" class="monster-button-group"> <monster-embedded-pagination id="pagination" data-monster-datasource-selector="#myDataSourceID"></monster-embedded-pagination> <monster-datasource-status data-monster-option-datasource-selector="#myDataSourceID"></monster-datasource-status> <monster-datatable-filter-button data-monster-reference="#filter-collapse" data-monster-role="filter-button">Filter </monster-datatable-filter-button> </div> <template id="row"> <div data-monster-sortable="DESC 2" data-monster-mode="fixed" data-monster-grid-template="3.2rem" data-monster-head="id" data-monster-replace="path:row.id"></div> <div data-monster-grid-template="auto" class="auto" data-monster-head="name" data-monster-replace="path:row.name"></div> <div data-monster-grid-template="3fr" data-monster-head="street" data-monster-replace="path:row.street"></div> <div data-monster-align="end" class="end" data-monster-head="city" data-monster-replace="path:row.city"></div> <div data-monster-mode="hidden" data-monster-head="zipcode" data-monster-replace="path:row.zipcode"></div> <div data-monster-mode="hidden" data-monster-head="country" data-monster-replace="path:row.country"></div> <div data-monster-mode="hidden" data-monster-head="phone" data-monster-replace="path:row.phone" class="monospace"></div> <div data-monster-mode="hidden" class="" data-monster-head="email" data-monster-replace="path:row.email"></div> <div data-monster-mode="fixed" class="visible" data-monster-head=""> <monster-button-bar> <monster-button data-monster-role="details-button" data-monster-attributes="data-alvine-id path:listDatatable-row.aid"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"></path> </svg> </monster-button> <monster-confirm-button data-monster-option-popper-placement="left" data-monster-role="delete-button" data-monster-attributes="data-alvine-primary-id path:listDatatable-row.aid"> <div> <p>Are you sure you want to delete this File?</p> </div> <div slot="confirm">Yes</div> <div slot="cancel">No</div> <div slot="button"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16"> <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"></path> </svg> </div> </monster-confirm-button> </monster-button-bar> </div> </template> </monster-datatable> </main> </body> </html>