<!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>