Table combinée de filtrage des tickets de service
Réalisez un tableau de filtrage combiné dans un contexte de tickets de service : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptative selon la taille.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table combinée de filtrage des tickets de service</title>
<style>
:root { --ink:#18314f; --paper:#f7f8f2; --accent:#ff6b5e; --secondary:#71c9b5; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"DIN Alternate","Arial Narrow",sans-serif; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 18px),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.mast{display:flex;justify-content:space-between;border-bottom:6px solid var(--ink);padding-bottom:18px;gap:20px;align-items:flex-end;margin:0 0 22px}.page{width:min(1240px,calc(100% - 28px));margin:auto;padding:34px 0 70px}.scenario{padding:8px 12px;border:2px solid var(--ink);font:900 12px/1 ui-monospace,monospace}.mast h1{font-family:"DIN Condensed","Arial Narrow",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(44px,10vw,104px);letter-spacing:-.02em;max-width:1000px;margin:0;line-height:.82}.intro{max-width:720px;font-family:"Arial Narrow",sans-serif;line-height:1.5}.eyebrow{display:inline-block;padding:6px 9px;color:var(--paper);background:var(--accent);font:900 10px/1 ui-monospace,monospace;letter-spacing:.12em}.demo{border-radius:3px;box-shadow:10px 10px 0 var(--accent);position:relative;min-height:400px;overflow:hidden;padding:32px;background:var(--paper)}@media(max-width:700px){.mast{display:grid;grid-template-columns:1fr}.page{width:calc(100% - 16px);padding-top:16px}.demo{padding:14px}}
.stack{display:flex;flex-direction:column;gap:18px}.panel{padding:28px;border-left:7px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.action{min-height:46px;padding:11px 18px;border:0;border-bottom:3px solid var(--ink);background:transparent;font-weight:900}.action.primary,.action.is-active{color:var(--paper);background:var(--ink)}.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}.metric{font:900 clamp(32px,7vw,64px)/1 ui-monospace,monospace}.status{min-height:22px;padding-top:12px;border-top:1px dashed var(--line)}.muted{color:color-mix(in srgb,var(--ink) 62%,transparent)}.chip{display:inline-block;padding:5px 8px;background:var(--secondary)}.meter{height:12px;border:1px solid var(--ink)}.meter>i{display:block;height:100%;background:var(--ink)}
.composition-studio{display:grid;gap:14px}.studio-ruler{display:flex;justify-content:space-between;padding:0 4px;color:color-mix(in srgb,var(--ink) 55%,transparent);font:700 11px/1 ui-monospace,monospace;letter-spacing:.14em}.studio-ruler::before{content:"01 / WORKING PROTOTYPE"}.studio-ruler::after{content:"360 · 768 · 1440"}.composition-studio .demo::after{content:"";position:absolute;right:18px;bottom:18px;width:24px;height:24px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);pointer-events:none}
.special-table{width:100%;border-collapse:collapse;background:var(--paper)}.special-table caption{padding:14px 16px;text-align:left;font-weight:800}.special-table th,.special-table td{padding:13px 16px;border-top:1px solid var(--line);text-align:left}.special-table tbody tr:hover{background:color-mix(in srgb,var(--secondary) 14%,transparent)}.special-table-shell{overflow:auto;border:1px solid var(--line);border-radius:18px;background:var(--paper)}.table-special-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px}.table-special-tools select,.table-special-tools input{min-height:40px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--paper)}.filter-table-demo{display:grid;gap:10px}.filter-table-demo h2{margin:.4em 0}.workflow-guide{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-areas:"rail core" "rail evidence";gap:14px 18px}.guide-rail{grid-area:rail;display:grid;align-content:start;gap:15px;padding:18px;border-right:1px solid var(--line)}.guide-rail ol{display:grid;gap:8px;padding:0;margin:0;list-style:none}.guide-rail li{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;padding:9px;opacity:.5}.guide-rail li[aria-current="step"]{opacity:1;color:var(--paper);background:var(--ink)}.guide-rail li.is-complete{opacity:1;color:var(--accent)}.guide-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guide-actions .action{padding-inline:8px}#workflowGuideProgress{height:6px;background:var(--line)}#workflowGuideProgress i{display:block;width:0;height:100%;background:var(--accent)}.guide-core{grid-area:core;min-width:0;padding:16px;border:1px solid var(--line)}.guide-core>p{margin:0 0 14px;padding:10px;border-left:4px solid var(--accent);background:color-mix(in srgb,var(--secondary) 12%,transparent)}.guide-core[data-guide-step="1"]{border-radius:28px}.guide-core[data-guide-step="2"]{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--accent) 35%,transparent)}.guide-evidence{grid-area:evidence;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:start}.guide-evidence details,.guide-evidence form{padding:12px;border:1px solid var(--line)}.guide-evidence label{display:grid;gap:7px}.guide-evidence textarea{width:100%;padding:9px;border:1px solid var(--line);background:var(--paper)}@media(max-width:900px){.workflow-guide{grid-template-columns:1fr;grid-template-areas:"core" "rail" "evidence"}.guide-rail{border-right:0;border-bottom:1px solid var(--line)}.guide-rail ol{grid-template-columns:repeat(3,1fr)}.guide-evidence{grid-template-columns:1fr}}
</style>
</head>
<body data-aesthetic="industrial" data-composition="studio">
<main class="page">
<header class="mast"><div><span class="eyebrow">industrial / tableau de filtrage combiné / BEGINNER</span><h1>Table combinée de filtrage des tickets de service</h1><p class="intro">Réalisez un tableau de filtrage combiné dans un contexte de tickets de service : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptative selon la taille.</p></div><span class="scenario">Tickets de service</span></header>
<div class="composition-studio"><div class="studio-ruler" aria-hidden="true"></div><section class="demo" aria-label="Zone d’interaction du tableau de filtres combinés des tickets de service"><div class="workflow-guide"><nav class="guide-rail" aria-label="Guide de traitement des tickets"><span class="eyebrow">Tickets de service GUIDE</span><ol><li data-workflow-guide-step="0" aria-current="step"><b>1</b><span>Ticket ordinaire</span></li><li data-workflow-guide-step="1"><b>2</b><span>Ticket urgent</span></li><li data-workflow-guide-step="2"><b>3</b><span>Ticket de suivi</span></li></ol><div class="guide-actions"><button id="workflowGuideBack" class="action" type="button" disabled>Étape précédente</button><button id="workflowGuideNext" class="action primary" type="button">Terminer cette étape</button></div><div id="workflowGuideProgress" role="progressbar" aria-label="Taux d’achèvement du traitement des tickets" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><i></i></div></nav><section id="workflowCore" class="workflow-core guide-core" data-guide-step="0" aria-describedby="workflowGuideInstruction"><p id="workflowGuideInstruction">Veuillez effectuer les opérations liées aux « tickets standards » dans l’exemple principal.</p><!-- 11DZ_CORE_START:tables-data-filterable-table --><div class="filter-table-demo"><header class="table-special-tools"><div><span class="eyebrow">FILTERABLE DATA</span><h2>Filtrage combiné des tickets de service</h2></div><label>État <select id="rowStatusFilter" data-core-bridge="tables-data-filterable-table"><option value="">tout</option><option>À traiter</option><option>En cours</option><option>Terminé</option></select></label><label>Mot-clé <input id="rowQueryFilter" type="search" autocomplete="off"></label></header><div class="special-table-shell"><table class="special-table"><caption>Résultats filtrés des tickets de service</caption><thead><tr><th>Projet</th><th>Valeur</th><th>État</th></tr></thead><tbody id="filteredRows"></tbody></table></div></div><!-- 11DZ_CORE_END --></section><aside class="guide-evidence"><details id="workflowGuideDetails"><summary>Voir les exigences d’acceptation</summary><ul><li>Les tickets ordinaires nécessitent un changement d’état visible en une seule fois</li><li>Les tickets urgents nécessitent un changement d’état visible unique</li><li>Les demandes de suivi nécessitent un changement d’état visible en une seule fois</li></ul></details><form id="workflowGuideEvidenceForm"><label>Preuve de cette étape<textarea id="workflowGuideEvidence" rows="3" placeholder="Enregistrer l’état observé"></textarea></label><input class="action" type="submit" value="Enregistrer la preuve"></form><output id="workflowGuideSummary">0 / 3 étapes terminées</output></aside></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:tables-data-filterable-table */
const filterRows=[{"label":"Favoris des tickets de service","value":18,"status":"À traiter"},{"label":"Vue d’ensemble des tickets de service","value":31,"status":"En cours"},{"label":"Plan de tickets de service","value":44,"status":"Terminé"},{"label":"Inspiration pour les tickets de service","value":57,"status":"À traiter"},{"label":"Journal des tickets de service","value":70,"status":"En cours"},{"label":"Collaboration sur les tickets de service","value":83,"status":"Terminé"},{"label":"Progression du ticket de service","value":96,"status":"À traiter"},{"label":"Rappel des tickets de service","value":30,"status":"En cours"},{"label":"Favoris des tickets de service","value":43,"status":"Terminé"}];const statusFilter=document.querySelector('#rowStatusFilter');const queryFilter=document.querySelector('#rowQueryFilter');function renderFilteredRows(){const words=queryFilter.value.normalize('NFKC').trim().toLowerCase().split(/\s+/).filter(Boolean);const visible=filterRows.filter(row=>(!statusFilter.value||row.status===statusFilter.value)&&words.every(word=>row.label.toLowerCase().includes(word)));document.querySelector('#filteredRows').innerHTML=visible.map(row=>'<tr><td>'+row.label+'</td><td>'+row.value+'</td><td>'+row.status+'</td></tr>').join('');announce('afficher après filtrage '+visible.length+' ligne');}statusFilter.addEventListener('change',renderFilteredRows);queryFilter.addEventListener('input',renderFilteredRows);renderFilteredRows();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"tables-data-filterable-table","selector":"[data-core-bridge=\"tables-data-filterable-table\"]","mode":"select","key":"ArrowRight"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.setAttribute('aria-keyshortcuts',workflowBridgeSpec.key);workflowBridgeControl.addEventListener('keydown',event=>{if(event.key!==workflowBridgeSpec.key)return;event.preventDefault();workflowBridgeControl.selectedIndex=(workflowBridgeControl.selectedIndex+1)%workflowBridgeControl.options.length;workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));});workflowBridgeControl.addEventListener("keydown",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('input',workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.selectedIndex=(workflowBridgeControl.selectedIndex+1)%workflowBridgeControl.options.length;workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowGuideCore=document.querySelector('#workflowCore');const workflowGuideStages=["Ticket ordinaire","Ticket urgent","Ticket de suivi"];const workflowGuideState={step:0,completed:new Set(),evidence:new Map(),consumedVersion:0};function workflowGuideDrive(){const step=workflowGuideState.step;workflowGuideCore.dataset.guideStep=String(step);document.querySelector('#workflowGuideInstruction').textContent='Veuillez terminer «'+workflowGuideStages[step]+'Opérations associées à « ».';document.querySelectorAll('[data-workflow-guide-step]').forEach((item,index)=>{item.classList.toggle('is-complete',workflowGuideState.completed.has(index));if(index===step)item.setAttribute('aria-current','step');else item.removeAttribute('aria-current');});document.querySelector('#workflowGuideBack').disabled=step===0;document.querySelector('#workflowGuideNext').textContent=step===workflowGuideStages.length-1?'Assigner le ticket':'Terminer cette étape';const percent=Math.round(workflowGuideState.completed.size/workflowGuideStages.length*100);const progress=document.querySelector('#workflowGuideProgress');progress.setAttribute('aria-valuenow',String(percent));progress.querySelector('i').style.width=percent+'%';document.querySelector('#workflowGuideSummary').textContent=workflowGuideState.completed.size+' / '+workflowGuideStages.length+' Étapes complétées · '+workflowBridgeSummary();announce('Étape actuelle de traitement du ticket :'+workflowGuideStages[step]);}function workflowGuideAdvance(direction){if(direction>0){const bridge=workflowBridgeActivate();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('Veuillez d’abord effectuer la modification d’état visible du cas principal');return;}workflowGuideState.consumedVersion=version;workflowGuideState.completed.add(workflowGuideState.step);announce('Variation du cas principal enregistrée · '+bridge.summary);}workflowGuideState.step=Math.max(0,Math.min(workflowGuideStages.length-1,workflowGuideState.step+direction));workflowGuideDrive();}document.querySelector('#workflowGuideBack').addEventListener('click',()=>workflowGuideAdvance(-1));document.querySelector('#workflowGuideNext').addEventListener('click',()=>workflowGuideAdvance(1));document.querySelector('#workflowGuideEvidenceForm').addEventListener('submit',event=>{event.preventDefault();const version=Number(workflowGuideCore.dataset.workflowVersion||0);if(version<=workflowGuideState.consumedVersion){announce('La preuve n’a pas été enregistrée : le cas principal n’a encore subi aucun changement nouveau');return;}const text=document.querySelector('#workflowGuideEvidence').value.trim();workflowGuideState.evidence.set(workflowGuideState.step,text||'Vérification de l’état visible terminée');workflowGuideState.completed.add(workflowGuideState.step);workflowGuideState.consumedVersion=version;workflowGuideDrive();announce('Les preuves de cette étape ont été enregistrées · '+workflowBridgeSummary());});document.querySelector('#workflowGuideDetails').addEventListener('toggle',event=>announce(event.currentTarget.open?'Exigences d’acceptation développées':'Exigences d’acceptation repliées'));workflowGuideDrive();
workflowBridgeReset();
</script>
</body>
</html>