31:T565,// https://github.com/observablehq/inputs/blob/main/src/format.js formatAuto = { function stringify(x) { return x == null ? "" : x + ""; } function formatAuto(value) { return value == null ? "" : typeof value === "number" ? formatNumber(value) : value instanceof Date ? formatDate(value) : value + ""; } function formatNumber(value) { return value === 0 ? "0" : value.toLocaleString("en"); // handle negative zero } function formatDate(date) { var hours = date.getUTCHours(), minutes = date.getUTCMinutes(), seconds = date.getUTCSeconds(), milliseconds = date.getUTCMilliseconds(); return isNaN(date) ? "Invalid Date" : formatYear(date.getUTCFullYear(), 4) + "-" + pad(date.getUTCMonth() + 1, 2) + "-" + pad(date.getUTCDate(), 2) + (milliseconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2) + "." + pad(milliseconds, 3) + "Z" : seconds ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + ":" + pad(seconds, 2) + "Z" : minutes || hours ? "T" + pad(hours, 2) + ":" + pad(minutes, 2) + "Z" : ""); } function formatYear(year) { return year < 0 ? "-" + pad(-year, 6) : year > 9999 ? "+" + pad(year, 6) : pad(year, 4); } function pad(value, width) { return (value + "").padStart(width, "0"); } return formatAuto; }32:[{"id":"c2a61cc0354ee791571922d79246a74bc75ccc575efe6ebf1369dcf412f97bfdb01c11cc4b999efc4ec5cce301676c665a1d394ca7b5465e8cbc045a2b764681","href":"https://static.observableusercontent.com/files/c2a61cc0354ee791571922d79246a74bc75ccc575efe6ebf1369dcf412f97bfdb01c11cc4b999efc4ec5cce301676c665a1d394ca7b5465e8cbc045a2b764681","name":"targets-1.csv","type":"text/csv","lastModified":1634480898454.458,"size":443}] 2f:{"title":"Table Validator","cells":[{"id":0,"value":"md`# Table Validator\n\nWraps the standard Table input to flag invalid cells and provide a summary of warnings at the bottom, using two new Table options: \n\n- \\`dataRules\\`: array of functions that will be called with data and should return either \\`true\\` or a warning string\n- \\`columnRules\\`: object of functions (with column names as keys) that will be called with cell values and should return either \\`true\\` or a warning string`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = FileAttachment(\"targets-1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"viewof validator = Table(data, {\n dataRules: [data => data.length <= 5 || \"Data cannot have more than 5 rows\"], \n columnRules: {actual: d => d !== 0 || \"Cannot be zero\"}\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`It’s a view, and the standard Table’s checkboxes still work:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"validator","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"md`This is a fairly thin wrapper; you can also just \n\n1. Use \\`getWarningFormatter\\` to pass a formatter to the standard Table and\n2. Use \\`renderWarnings\\` and \\`getColumnWarnings\\` summarize the warnings:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"columnRules = ({actual: d => d !== 0 || \"Cannot be zero\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"// normal off-the-shelf @observablehq/inputs Table\nInputs.table(data, {format: getWarningFormatter(columnRules)})","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"renderWarnings(getColumnWarnings(columnRules, data))","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`---\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"Table = (data, {dataRules = [], columnRules = {}, ...options} = {}) => {\n const dataWarnings = getDataWarnings(dataRules, data);\n const columnWarnings = getColumnWarnings(columnRules, data)\n const format = getWarningFormatter(columnRules)\n const tableNode = Inputs.table(data, {...options, format});\n const node = htl.html`\n ${tableNode}\n ${renderWarnings([...dataWarnings, ...columnWarnings])}\n `\n node.value = data;\n tableNode.addEventListener(\"input\", e => {\n console.log(e)\n node.value = e.currentTarget.value\n });\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"renderWarnings = warnings => htl.html`${warnings.map(warning => htl.html`

\n ${badge()} ${warning}\n

`)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"getWarningFormatter = columnRules => Object.fromEntries(Object.keys(columnRules).map(\n col => [\n col, \n d => columnRules[col](d) !== true \n ? htl.html`

${formatAuto(d)}

`\n : formatAuto(d)\n ]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"getDataWarnings = (dataRules, data) => dataRules.map(rule => rule(data)).filter(d => d)","pinned":true,"hidden":false,"mode":"ojs"},{"id":163,"value":"getColumnWarnings = (columnRules, data) => Object.keys(columnRules).map(\n col => {\n const warnings = data.map(row => columnRules[col](row[col])).filter(d => d !== true)\n return warnings.length \n && htl.html`${col}: ${warnings[0]} ${warnings.length > 1 ? `(${warnings.length})` : \"\"}`\n }).filter(d => d) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"badge = () => htl.html`

\n !\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"warningStyle = ({\n font: \"12px var(--sans-serif)\",\n padding: \"3px 0\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"reddish = \"rgba(255, 165, 0, 0.15)\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}