Select Git revision
243-test2.html
260.html 16.66 KiB
<!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 #260</title>
<script src="./260.mjs" type="module"></script>
</head>
<body>
<h1>colum layout for datatable command buttons #260</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/260">Issue #260</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">
<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>