2a:null 2b:["$","title",null,{"children":"Table Input | linard-y | Observable"}] 31:T676,viewof CheckPointTable = { const dateInput = d => html`` const timeInput = d => { const dd3 = time(d); dd3.input.style = "width:90%;margin-right: 0.1em; margin-left: 0.2em; text-align: center; border: none; border-bottom: 0.5px solid lightgray;"; return dd3; } const vehicleInput = d => { const dd3 = select({ options: [ { label: "🚲", value: "bicycle" }, { label: "🛵", value: "scooter" }, { label: "🏍️", value: "motorcycle" }, { label: "🚜", value: "tractor" }, { label: "🚚", value: "truck" }, { label: "🚗", value: "automobile" }, { label: "🚕", value: "taxi" }, { label: "🚓", value: "police_car" }, { label: "🚒", value: "fire_engine" }, { label: "🚑", value: "ambulance" }, { label: "🚌", value: "bus" }, ], value: d }); dd3.input.style = "height: 24px; width:95%; margin-right: 0.5em; margin-left: 0.2em; text-align: center; border: none; font-size: 16px" return dd3; }; return tableInput({ width:"438px", rc:[ [40,'date', 'Date', 'input', dateInput], [30,'time', 'Time', 'input', timeInput], [25,'vehicle', 'Vehicle', 'select', vehicleInput] ], defaultRowValue:{date: "jj/mm/aaa", time: "--:--", vehicle: "-"}, action:{add:true, remove:true}, title:'Checkpoint', description:'Click <+> and enter the information every time a vehicle passes by.' }) }32:T79d,viewof CheckPointTable2 = { const dateInput = d => html`` const timeInput = d => { const dd3 = time(d); dd3.input.style = "width:90%;margin-right: 0.1em; margin-left: 0.2em; text-align: center; border: none; border-bottom: 0.5px solid lightgray;"; return dd3; } const vehicleInput = d => { const dd3 = select({ options: [ { label: "🚲", value: "bicycle" }, { label: "🛵", value: "scooter" }, { label: "🏍️", value: "motorcycle" }, { label: "🚜", value: "tractor" }, { label: "🚚", value: "truck" }, { label: "🚗", value: "automobile" }, { label: "🚕", value: "taxi" }, { label: "🚓", value: "police_car" }, { label: "🚒", value: "fire_engine" }, { label: "🚑", value: "ambulance" }, { label: "🚌", value: "bus" }, ], value: d }); dd3.input.style = "height: 24px; width:95%; margin-right: 0.5em; margin-left: 0.2em; text-align: center; border: none; font-size: 16px" return dd3; }; let data = await FileAttachment("table.json").json(); let exception1 = []; let exception2 = []; data.map((d,i)=>{ exception1.push({row:i, cell:[0,1,2], val:true}); exception2.push(i); }) return tableInput({ width:"438px", rc:[ [40,'date', 'Date', 'input', dateInput], [30,'time', 'Time', 'input', timeInput], [25,'vehicle', 'Vehicle', 'select', vehicleInput] ], defaultRowValue:{date: "jj/mm/aaa", time: "--:--", vehicle: "-"}, action:{add:true, remove:true}, title:'Checkpoint', description:'Click <+> and enter the information every time a vehicle passes by.', value: data, disabledException:exception1, actionException:exception2 }) }33:T51e,viewof DuoCreationTable = { const dateInput = d => html`` const nameInput = d => { const dd3 = text(d); dd3.input.style = "width:90%;margin-right: 0.1em; margin-left: 0.2em; text-align: center; border: none; border-bottom: 0.5px solid lightgray;"; return dd3; } const partnerInput = d => { const dd3 = select({ options: [{ label: "Tom", value: "Tom" },{ label: "Fil", value: "Fil" },{ label: "Ian", value: "Ian"}, { label: "Anjana", value: "Anjana"}, { label: "Jeremy", value: "Jeremy"}, { label: "Mike", value: "Mike"} ], value: d }); dd3.input.style = "height: 24px; width:95%; margin-right: 0.5em; margin-left: 0.2em; text-align: center; border: none; font-size: 16px" return dd3; }; return tableInput({ width:"438px", rc:[ [40,'date', 'Date', 'input', dateInput], [30,'name', 'Name', 'input', nameInput], [25,'duo', 'Duo partner', 'select', partnerInput] ], defaultRowValue:{date: "jj/mm/aaa", name: "-", partner: "-"}, action:{add:true, remove:true}, title:'Duo creation', description:'Click <+> and enter the information.' }) }34:T5e0,BuildTableGuild = (data, user, title, header, description) => { const colorInput = (d,i) => { const dd3 = color(d); dd3.input.style = "width:35%;margin-right: 0.5em; margin-left: 1.0em;"; dd3.output.style = "width:50%;margin-right: 1.0em; margin-left: 0.5em;"; return dd3; } const nameInput = (d,i) => { const dd3 = text(d); dd3.input.style = "width:90%;margin-right: 1.0em; margin-left: 1.0em; text-align: right; border: none; border-bottom: 0.5px solid lightgray;"; return dd3; } const playerInput = (d,i) => { const dd3 = text(d); dd3.input.style = "width:83%; margin-right: 1.0em; margin-left: 1.0em; text-align: right; border: none; border-bottom: 0.5px solid lightgray;"; return dd3; } var data = [{player: "Mike", name: "The Iron Ring", color: "#cb344f"},{player: "Fil", name: "The veiled society", color: "#cac6b5"},{player: "Ylu", name: "Shadows brothers", color: "#95ddea"}]; let exception1 = []; data.map((d,i) => { if (d.player==user) { exception1.push({row:i, cell:[1,2], val:false});} }) return tableInput({ rc:[ [25,'player', header[0], 'input', playerInput], [45,'name', header[1], 'input', nameInput], [25,'color', header[2], 'input', colorInput] ], defaultRowValue:{player: "", name: "", color: "#ffffff"}, value: data, disabled: {player:true, name:true, color:true}, title:title, description:description, disabledException : exception1 }); }35:T1aa3,tableInput = ({ base = 0, width = "100%", rc=[], defaultRowValue, title = "", description = "", value = null, disabled= {}, disabledException= [], action= {}, actionException= [] }) => { // This is a state variable that we will change as events occur on the input let values = value !== null ? value : new Array(base).fill(defaultRowValue); const addButton = html``; const deleteButton = i => html`` // Templates const headerRow = html` ${rc.map(c => html`${c[2]}`)} ` const inputRow = i => html` ${rc.map((c,ic) => html``)} ` const emptyRow = html` ${rc.map(c => html``)} ` const footerRow = html` ${rc.map(c => html``)} ` const form = html`` if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); // Event Dispatcher const dispatchInputEvent = () => { form.value = values; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); } // Event Handlers const addNewRow = () => { values = form.value; values.push(defaultRowValue); form.update(values); dispatchInputEvent(); } const onclick_add = e => { addNewRow(); }; addButton.addEventListener('click', onclick_add); const removeRow = e => { var id = e.target.name; var removeIdx = parseInt(id.substr(id.length - 1)); console.log('removeIdx:',removeIdx); values = form.value; values = values.filter((_, i) => i !== removeIdx); console.log('before:',actionException); actionException.map((exep,ie) => { if (parseInt(exep)==parseInt(removeIdx)) {actionException.splice(ie, 1);} }); actionException.map((exep,ie) => { if (parseInt(exep)>parseInt(removeIdx)) {actionException[ie]=parseInt(exep)-1;} }); console.log('after:',actionException); disabledException.map((d,id) => { if (removeIdx==d.row) { disabledException.splice(id, 1);} if (removeIdx { removeRow(e); }; form.update = newValues => { const thead = form.querySelector('thead'); const tbody = form.querySelector('tbody'); thead.innerHTML = ''; tbody.innerHTML = ''; thead.appendChild(headerRow); if (action['add']==true){ form.querySelector('thead').querySelector('tr').appendChild(html`${addButton}`); } if (newValues.length==0) { tbody.name = 'empty_body'; tbody.appendChild(emptyRow); } else { tbody.name = 'filled_body'; newValues.map((d,i) => {tbody.appendChild(inputRow(i));}) const rows = tbody.children; for (var i in Object.keys(rows)) { rows[i].children[0].append(html`

${(parseInt(i)).toString()} -

`); rows[i].children[0].querySelector('div').setAttribute("name", "num"); var newRowValue = newValues[i]; rc.map((c,idx)=>{ const cell = rows[i].children[idx+1]; const newCellValue = newRowValue[c[1]]; cell.append(c[4](newCellValue)); cell.querySelector(c[3]).setAttribute("name", c[1]+'Input'); }) if (action['remove']==true){ if (actionException.indexOf(parseInt(i)) == -1) { rows[i].appendChild(html`${deleteButton(i)}`) rows[i].querySelector('button[name="deleteButton'+i+'"]').addEventListener('click', onclick_delete); } } Object.keys(disabled).forEach(key => { const val = disabled[key]; if (val != null & val!= false) { for (var c of rc){ if (key==c[1]) rows[i].querySelector(c[3]+'[name="'+c[1]+'Input"]').setAttribute('disabled', val); } } }); disabledException.map(d => { if (parseInt(i)==d.row) { d.cell.map(j=>{ var c = rc[j]; if (d.val==false) { rows[i].querySelector(c[3]+'[name="'+c[1]+'Input"]').removeAttribute('disabled'); } else { rows[i].querySelector(c[3]+'[name="'+c[1]+'Input"]').setAttribute('disabled', true); } }) } }); } } } form.update(values); form.oninput = e => { e && e.preventDefault(); const tbody = form.querySelector('tbody'); const rows = tbody.children; values = new Array(); if (tbody.name=='filled_body') { for (var row of rows) { var rowValue = {}; for (var c of rc){ if (c[3]=='input') { rowValue[c[1]] = row.querySelector(c[3]+'[name="'+c[1]+'Input"]').value; } if (c[3]=='select') { const selected = Array.prototype.filter .call(row.querySelector(c[3]+'[name="'+c[1]+'Input"]').options, i => i.selected) .map(i => i.value); rowValue[c[1]] = row.querySelector(c[3]+'[name="'+c[1]+'Input"]').multiple ? selected : selected[0]; } } values.push(rowValue); } } form.value = values; }; form.onsubmit = e => e && e.preventDefault(); form["oninput"](); form.setValue = function(newValues) { form.update(newValues); dispatchInputEvent(); }; form.setDisabled = function(newDisabled) { disabled = newDisabled; form.update(form.value); dispatchInputEvent(); }; form.setAction = function(newAction) { action = newAction; form.update(form.value); dispatchInputEvent(); }; return form }36:[{"id":"28371300b6c7ab02f4df05e3614a606612440c718852adf5768313409f5d95b057508d27a19657e2eb38a226f8cf569f310337b563ab326310c2b0ef70f4cfde","href":"https://static.observableusercontent.com/files/28371300b6c7ab02f4df05e3614a606612440c718852adf5768313409f5d95b057508d27a19657e2eb38a226f8cf569f310337b563ab326310c2b0ef70f4cfde","name":"table.json","type":"application/json","lastModified":1610398736717.226,"size":877}] 2e:{"id":"5e99234cb495f174","slug":"table-input","title":"Table Input","thumbnail":"ca524814eef321f576a7301c8d035eda477a15c6d61befb2ef27f1286cf9ee4d","access_level":"public","create_time":"$D2021-01-10T08:30:30.993Z","update_time":"$D2025-05-06T23:36:42.866Z","view_time":null,"first_public_time":"$D2021-01-11T22:32:19.392Z","fork":false,"stars":34,"starred":false,"owner":{"type":"team","id":"9784867a3e59436b","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":"starter_2024"},"version":537,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}],"members":[{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null,"role":"editor"}],"comments":[{"id":"efa752159f8f9173","reply_to_id":null,"content":"This is awesome. I am looking for a good table. I use them a lot. OrderBy columns would very handy too.","create_time":"$D2021-01-16T20:37:27.969Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"7dbace8d39f04df3","reply_to_id":null,"content":"This is awesome. Is there a way where I can list in the Select, a list of already added fields?\n\nFor example, in one column you add a name.\n\nNext column you can choose one of the already added names","create_time":"$D2021-05-12T03:06:31.239Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"6af64127e9c2630a","login":"rusosnith","name":"Andres Snitcofsky","avatar_url":"https://avatars-next.observableusercontent.com/2b262ea0f2ac88cc8e7b343d227833840f0f3f16653078effbfb00582801e631","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":26,"collection":null,"type":"notebook","body":{"title":"Table Input","cells":[{"id":0,"value":"md`# Table Input`","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"md`TableInput allows you to create a table containing interactive input elements. TableInput can be used in a \"creation\" mode (starting from a blank table with the possibility of adding or deleting rows and in which cells are filled in with a set of preconfigured interactive elements) or in an \"interrogation\" mode (all or part is already filled in and a set of interactive elements allow to complete or modify the values).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`## Creation mode example\nYou want to create a table indicating the date/time of passage and the type of vehicle at a given checkpoint. The TableInput will be preconfigured to receive rows for entering the date (a date type input), the time (a time type input) and the vehicle type (a select item with different vehicle options). Below is a view of the variable _CheckpointTable_.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"md`If necessary, you can then use the data entered (for graphs, statistics...) using the CheckPointTable variable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"CheckPointTable","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"md`You could also save the data in a file as below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"{\n return DOM.download( new Blob([JSON.stringify(CheckPointTable)], {type: \"application/json\"}), undefined, \"Save data table\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"md`The tableInput can also be initialised with a data set. In the example below, the table is initialized with the data set from the **table.json** file. Existing rows have been configured to be uneditable (all input are disabled and the option to delete these rows is not enabled).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"md`Another example to respond to the Andres Snitcofsky's comment (in progress)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":470,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"md`## Interrogation mode example\nNow, you have make a game where each player have to choose a name for his guild of thieves and a color to represent it in the game. You let the opportunity at each player to see the chosen name et color of others players but each player have to be unabled to change names et colors of others players.\n\nThree players are expected to play: _Mike_, _Fil_ and _Ylu_. Suppose you have a personal identification system connected to the notebook (see [here](https://observablehq.com/@mbostock/fetch-with-basic-auth) for example). Here we assume that the player is identified with the login variable.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"viewof login = select({options:['Mike', 'Fil', 'Ylu'], title:'Login'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof TableGuild = BuildTableGuild(data_guild, login, config.title, config.header, config.description);","pinned":true,"hidden":false,"mode":"ojs"},{"id":404,"value":"config = Object({title:'Table of guilds', header:['Player','Guild','Color'], description:'Find the row with your name and enter a name for your guild and choose a color to represent it.'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"TableGuild","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"data_guild = [{player: \"Mike\", name: \"The Iron Ring\", color: \"#cb344f\"},{player: \"Fil\", name: \"The veiled society\", color: \"#cac6b5\"},{player: \"Ylu\", name: \"Shadows brothers\", color: \"#95ddea\"}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`***\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"import {select, color, slider, radio, checkbox, text, date, time} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2f:"$2e:body"