<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>revision of the list design including filters #232</title> <script src="./232.mjs" type="module"></script> </head> <body> <main style="padding: 20px"> <h1>revision of the list design including filters #232</h1> <p></p> <ul> <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/232">Issue #232</a></li> <li><a href="/">Back to overview</a></li> </ul> <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-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="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="customerUID" data-monster-template="${value | call:range:customerUID}" id="customerUID">customerUID 3<monster-filter-input name="value5" type="search"></monster-filter-input></label> <label data-monster-label="OID5" data-monster-template="${value | call:range:oid}" id="gd">OID !! 4<monster-filter-input name="value5" type="search"></monster-filter-input></label> <label data-monster-label="OID6" data-monster-template="${value | call:range:oid}" id="dq">OID 5<monster-filter-input name="value5" type="search"></monster-filter-input></label> <label data-monster-label="OID7" data-monster-template="${value | call:range:oid}" id="xc">OID 6<monster-filter-input name="value5" type="search"></monster-filter-input></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-align="end" 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="customerUID" data-monster-replace="path:t12-row.customerUID"></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> </main> </body> </html>