Select Git revision
Volker Schukai authored
277.html 6.09 KiB
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>standard method for multiselect datatable elements #277</title>
<script src="277.mjs" type="module"></script>
</head>
<body>
<h1>standard method for multiselect datatable elements #277</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/277">Issue #277</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-host><monster-config-manager></monster-config-manager></monster-host>
<monster-notify data-monster-option-orientation="bottom right"></monster-notify>
<monster-monitor-attribute-errors
data-monster-option-features-notifyUser="false"
></monster-monitor-attribute-errors>
<h2>Control with DOM datasource</h2>
<monster-datasource-rest id="ds277"
data-monster-option-features-autoInit="true"
data-monster-option-write-url="/issue-274.json"
data-monster-option-read-url="/issue-274.json?limit=5&page=${page}&q=${query}&order=${order}"
data-monster-option-filter-id="ds277-filter"
data-monster-option-features-filter="true"
></monster-datasource-rest>
<monster-datatable data-monster-datasource-selector="#ds277" id="dt277"
data-monster-option-datasource-orderdelimiter="::">
<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="ds277-filter" slot="filter"
data-monster-option-storedconfig-selector="#filtertabs">
<label data-monster-label="ID" id="id"
data-monster-template="${value | call:range:id}">
ID
<monster-filter-range></monster-filter-range>
</label>
<label data-monster-label="Fullname" id="fullname"
data-monster-template="${value}">
ID
<monster-filter-input></monster-filter-input>
</label>
</monster-datatable-filter>
</div>
</monster-tabs>
</div>
</monster-collapse>
<div slot="bar" class="monster-button-group">
<div style="flex-grow:10">
<monster-button style="width:max-content" id="action-button-1">ACTION</monster-button>
</div>
<monster-embedded-pagination data-monster-datasource-selector="#ds277"></monster-embedded-pagination>
<monster-datasource-status
data-monster-option-datasource-selector="#ds277"></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="dt277-row">
<div data-monster-order-template="${field}=${direction}" data-monster-sortable="id" data-monster-grid-template="3rem" data-monster-mode="fixed" data-monster-head="id" data-monster-replace="path:dt277-row.id"></div>
<div data-monster-grid-template="2rem" data-monster-mode="fixed" data-monster-features="select"></div>
<div data-monster-head="username" data-monster-replace="path:dt277-row.username"></div>
<div data-monster-head="email" data-monster-replace="path:dt277-row.email"></div>
<div data-monster-sortable="full_name" data-monster-head="full_name" data-monster-replace="path:dt277-row.full_name"></div>
<div data-monster-head="age" data-monster-replace="path:dt277-row.age"></div>
<div data-monster-head="country" data-monster-replace="path:dt277-row.country"></div>
<div data-monster-head="registered_date" data-monster-replace="path:dt277-row.registered_date"></div>
<div data-monster-head="status" data-monster-replace="path:dt277-row.status"></div>
</template>
</monster-datatable>
<!-- <monster-tabs id="ds274-tabs">-->
<!-- <div data-monster-button-label="Filter">-->
<!-- <monster-datatable-filter id="ds274-filter"-->
<!-- data-monster-option-features-storedConfig="true"-->
<!-- data-monster-option-storedConfig-selector="#ds274-tabs"-->
<!-- >-->
<!-- <label data-monster-label="Input">Input Filter-->
<!-- <monster-filter-input ></monster-filter-input>-->
<!-- </label>-->
<!-- <label slot="hidden" data-monster-label="Date Range">Date Range Filter-->
<!-- <monster-filter-date-range></monster-filter-date-range>-->
<!-- </label>-->
<!-- </monster-datatable-filter>-->
<!-- </div>-->
<!-- </monster-tabs>-->
<!-- <monster-pagination-->
<!-- data-monster-option-datasource-selector="#ds274-r"-->
<!-- data-monster-option-objectsperpage="1"-->
<!-- ></monster-pagination>-->
<!-- iframe src="/274.pdf" style="height: 800px; max-width: 56rem; width: 100%;"></iframe -->
</main>
</body>
</html>