Skip to content
Snippets Groups Projects
Verified Commit 7798d854 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: datatable colum with #143

parent 11ee0e34
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
playground/datatable/index.html
+ 1
− 1
View file @ 7798d854
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
<a data-monster-attributes="href path:t12-row.oid | tostring | prefix:#" <a data-monster-attributes="href path:t12-row.oid | tostring | prefix:#"
data-monster-replace="path:t12-row.oid | tostring">Link</a> data-monster-replace="path:t12-row.oid | tostring">Link</a>
</div> </div>
<div data-monster-grid-template="1fr"> <div data-monster-grid-template="3fr">
<ul> <ul>
<li><input type="date"></li> <li><input type="date"></li>
<li data-monster-replace="path:t12-row.oid">test 1</li> <li data-monster-replace="path:t12-row.oid">test 1</li>
......
playground/issues/143.html 0 → 100644
+ 157
− 0
View file @ 7798d854
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Issues</title>
<script src="./143.js" type="module"></script>
<style>
monster-button-bar {
}
monster-button-bar button {
padding: 0;
margin-right: -2px;
}
monster-button-bar button:first-child {
}
</style>
</head>
<body>
<main>
<h1>Issues #143</h1>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/143" target="_blank">#143</a></li>
<li><a href="../../">Back to overview</a></li>
</ul>
<div style="width: 950px;margin: 0 auto;">
<monster-datasource-rest id="data1" data-monster-option-write-url="/demo/bind-with-datasource/data.json" data-monster-option-read-url="/demo/bind-with-datasource/data.json"></monster-datasource-rest>
<monster-datatable id="test-datatable" data-monster-datasource-selector="#data1">
<monster-collapse id="my-collapse" data-monster-role="filter-collapse">
<div class="flex">
<monster-tabs style="width: 100%" data-monster-option-classes-button="monster-theme-primary-2" 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="OID1" id="oid1"
data-monster-template="${value | call:range:oid}">
RANGE OID
<monster-filter-range></monster-filter-range>
</label>
<label data-monster-label="date" id="date2"
data-monster-template="${value | call:date-range:orderDate}">Date
<monster-filter-date-range></monster-filter-date-range>
</label>
<label data-monster-label="OID2" data-monster-template="${value}" id="sdfsdf">
The label
<monster-filter-select data-monster-selected-template="selected">
<div>sdfsd</div>
</monster-filter-select>
</label>
<label data-monster-label="OID3" data-monster-template="${value | call:range:oid}" id="qq">OID
2
<monster-filter-input name="value3" type="search"></monster-filter-input>
</label>
<label data-monster-label="OID4" data-monster-template="${value | call:range:oid}" id="cc">OID
3<input name="value4" type="search"></label>
<label data-monster-label="OID5" data-monster-template="${value | call:range:oid}" id="gd">OID
4<input name="value5" type="search"></label>
<label data-monster-label="OID6" data-monster-template="${value | call:range:oid}" id="dq">OID
5<input name="value6" type="search"></label>
<label data-monster-label="OID7" data-monster-template="${value | call:range:oid}" id="xc">OID
6<input name="value7" type="search"></label>
</monster-datatable-filter>
</div>
<div data-monster-button-label="SDAFASDFDS"></div>
</monster-tabs>
</div>
</monster-collapse>
<monster-datasource-save-button slot="bar" data-monster-option-datasource-selector="#data1">
</monster-datasource-save-button>
<monster-datasource-status slot="bar" data-monster-option-datasource-selector="#data1">
</monster-datasource-status>
<div slot="bar" class="monster-button-group">
<monster-datasource-status data-monster-option-datasource-selector="#data1"></monster-datasource-status>
<monster-embedded-pagination
data-monster-datasource-selector="#data1"></monster-embedded-pagination>
<!-- <monster-embedded-state-->
<!-- data-monster-datasource-selector="#data1"></monster-embedded-state>-->
<monster-datatable-filter-button data-monster-reference="#my-collapse"
data-monster-role="filter-button">Filter
</monster-datatable-filter-button>
</div>
<template id="test-datatable-row">
<div data-monster-mode="fixed" data-monster-sortable="oid asc" data-monster-head="OID">
<a data-monster-attributes="href path:t12-row.oid | tostring | prefix:#"
data-monster-replace="path:t12-row.oid | tostring">Link</a>
</div>
<div data-monster-grid-template="4fr" data-monster-head="i18n:key22">
<ul>
<li><input type="date"></li>
<li data-monster-replace="path:t12-row.oid">test 1</li>
<li>asdfjasdkfjk</li>
</ul>
</div>
<div data-monster-mode="fixed" data-monster-head="i18n:key1" data-monster-grid-template="1fr"><input
type="checkbox"></div>
<div data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | date"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-head="orderState 2" class="center" data-monster-align="center"
data-monster-replace="path:t12-row.orderState"></div>
<div class="end" data-monster-align="end"
data-monster-replace="path:t12-row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
<div data-monster-mode="hidden" data-monster-head="OS2" data-monster-replace="static:OXXXXX"></div>
<div data-monster-sortable="orderState" data-monster-head="State"
data-monster-replace="path:t12-row.orderState | tostring | prefix:____"></div>
<div data-monster-head="xxx" data-monster-replace="static:wwwww"></div>
<div>
<button data-monster-replace="static:doit">Click</button>
<monster-popper-button>
<form class="monster-form">
<label><input>test 1</label>
<label>test 2<input></label>
<button>OK</button>
</form>
</monster-popper-button>
</div>
</template>
</monster-datatable>
</div>
</main>
</body>
</html>
\ No newline at end of file
playground/issues/143.js 0 → 100644
+ 44
− 0
View file @ 7798d854
import "../../source/components/host/overlay.mjs";
import "../../source/components/datatable/datatable.mjs";
import "../../source/components/datatable/dataset.mjs";
import "../../source/components/datatable/datasource/dom.mjs";
import "../../source/components/datatable/datasource/rest.mjs";
import "../../source/components/datatable/save-button.mjs";
import "../../source/components/form/button.mjs";
import "../../source/components/form/select.mjs";
import "../../source/components/form/toggle-switch.mjs";
import "../../source/components/style/common.pcss";
import "../../source/components/style/color.pcss";
import "../../source/components/style/theme.pcss";
import "../../source/components/style/table.pcss";
import "../../source/components/style/badge.pcss";
import "../../source/components/style/button.pcss";
import "../../source/components/style/link.pcss";
import "../../source/components/style/data-grid.pcss";
import "../../source/components/style/property.pcss";
import "../../source/components/style/typography.pcss";
import "../../source/components/style/display.pcss";
import "../../source/components/datatable/datasource/rest.mjs";
import "../../source/components/datatable/filter.mjs";
import "../../source/components/datatable/filter-button.mjs";
import "../../source/components/datatable/embedded-pagination.mjs";
import "../../source/components/datatable/datatable.mjs";
import "../../source/components/datatable/dataset.mjs";
import "../../source/components/datatable/status.mjs";
import "../../source/components/datatable/save-button.mjs";
import "../../source/components/datatable/change-button.mjs";
import "../../source/components/datatable/filter/range.mjs";
import "../../source/components/datatable/filter/select.mjs";
import "../../source/components/datatable/filter/input.mjs";
import "../../source/components/datatable/filter/date-range.mjs";
import {windowReady} from "../../source/dom/ready.mjs";
import "../../source/components/host/host.mjs";
import "../../source/components/form/button.mjs";
import "../../source/components/form/button-bar.mjs";
import "../../source/components/form/popper-button.mjs";
import "../../source/components/form/tabs.mjs";
import "./generic.pcss";
source/components/datatable/style/datatable.pcss
+ 3
− 0
View file @ 7798d854
...@@ -76,6 +76,9 @@ ...@@ -76,6 +76,9 @@
border-bottom: 1px dashed var(--monster-bg-color-primary-2); border-bottom: 1px dashed var(--monster-bg-color-primary-2);
box-sizing: border-box; box-sizing: border-box;
min-width: 0;
overflow: auto;
&.start { &.start {
justify-content: flex-start; justify-content: flex-start;
} }
......
source/components/datatable/stylesheet/datatable.mjs
+ 1
− 1
View file @ 7798d854
Source diff could not be displayed: it is too large. Options to address this: view the blob.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment