{"app":{"id":19,"summary":"Table component showcase","versions":[65],"created_by":"sindre svendby964","created_at":"2023-08-17T09:43:25.687Z","votes":0,"approved":false,"apps":["windmill"],"app_type":"openapp","external_embed_url":null,"value":{"css":{},"grid":[{"3":{"h":1,"w":1,"x":0,"y":0,"fixed":false},"12":{"h":1,"w":10,"x":0,"y":0,"id":"b","fixed":false},"id":"b","data":{"id":"b","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Table Component - Showcase ","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":8,"w":2,"x":0,"y":11,"fixed":false},"12":{"h":19,"w":12,"x":0,"y":1,"id":"c","fixed":false},"id":"c","data":{"id":"c","tabs":["initalState","Search","Actions (Select and Button)","Combine with other components","Transformers"],"type":"tabscomponent","customCss":{},"disabledTabs":[{"type":"static","value":false,"fieldType":"boolean"},{"type":"static","value":false,"fieldType":"boolean"},{"type":"static","value":false,"fieldType":"boolean"},{"type":"static","value":false,"fieldType":"boolean"},{"type":"static","value":false,"fieldType":"boolean"}],"configuration":{"tabsKind":{"type":"static","value":"tabs"}},"numberOfSubgrids":5}}],"subgrids":{"c-0":[{"3":{"h":1,"w":1,"x":0,"y":0,"fixed":false},"12":{"h":1,"w":12,"x":0,"y":0,"id":"d","fixed":false},"id":"d","data":{"id":"d","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Hide column - columnVisibility is hiding the id field","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":10,"w":3,"x":0,"y":1,"fixed":false},"12":{"h":6,"w":12,"x":0,"y":1,"id":"a","fixed":false},"id":"a","data":{"id":"a","type":"tablecomponent","customCss":{},"actionButtons":[],"configuration":{"search":{"type":"static","value":"Disabled"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{"columnVisibility":{"id":false}}},"downloadButton":{"type":"static","value":false}},"componentInput":{"type":"static","value":[{"id":1,"age":42,"name":"A cell with a long name"},{"id":2,"age":84,"name":"A briefer cell"}],"fieldType":"array","subFieldType":"object"}}},{"3":{"h":1,"w":1,"x":1,"y":0,"fixed":true},"12":{"h":1,"w":12,"x":0,"y":9,"id":"e","fixed":true},"id":"e","data":{"id":"e","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Reorder column - columnOrder - id is last","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":10,"w":3,"x":0,"y":11,"fixed":true},"12":{"h":6,"w":12,"x":0,"y":10,"id":"f","fixed":true},"id":"f","data":{"id":"f","type":"tablecomponent","customCss":{},"actionButtons":[],"configuration":{"search":{"type":"static","value":"Disabled"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{"columnOrder":["name","age","id"]}},"downloadButton":{"type":"static","value":false}},"componentInput":{"type":"static","value":[{"id":1,"age":42,"name":"A cell with a long name"},{"id":2,"age":84,"name":"A briefer cell"}],"fieldType":"array","subFieldType":"object"}}},{"3":{"h":1,"w":1,"x":0,"y":41,"fixed":false},"12":{"h":1,"w":9,"x":0,"y":17,"id":"t","fixed":false},"id":"t","data":{"id":"t","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"columnPinning - choose columns to the right and left ","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":10,"w":3,"x":0,"y":21,"fixed":false},"12":{"h":6,"w":12,"x":0,"y":18,"id":"r","fixed":false},"id":"r","data":{"id":"r","type":"tablecomponent","customCss":{},"actionButtons":[],"configuration":{"search":{"type":"static","value":"Disabled"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{"columnPinning":{"left":["name"],"right":["id"]}}},"downloadButton":{"type":"static","value":false}},"componentInput":{"type":"static","value":[{"id":1,"age":42,"name":"A cell with a long name"},{"id":2,"age":84,"name":"A briefer cell"}],"fieldType":"array","subFieldType":"object"}}},{"3":{"h":1,"w":1,"x":1,"y":41,"fixed":false},"12":{"h":1,"w":10,"x":0,"y":26,"id":"u","fixed":false},"id":"u","data":{"id":"u","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"columnSizing","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":10,"w":3,"x":0,"y":31,"fixed":false},"12":{"h":6,"w":12,"x":0,"y":27,"id":"s","fixed":false},"id":"s","data":{"id":"s","type":"tablecomponent","customCss":{},"actionButtons":[],"configuration":{"search":{"type":"static","value":"Disabled"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{"columnSizing":{"id":10,"age":150,"name":750}}},"downloadButton":{"type":"static","value":false}},"componentInput":{"type":"static","value":[{"id":1,"age":42,"name":"A cell with a long name"},{"id":2,"age":84,"name":"A briefer cell"}],"fieldType":"array","subFieldType":"object"}}}],"c-1":[{"3":{"h":1,"w":1,"x":0,"y":0,"fixed":false},"12":{"h":1,"w":12,"x":0,"y":0,"id":"h","fixed":false},"id":"h","data":{"id":"h","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Body"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"by component - frontend component is doing the search for you","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":10,"w":3,"x":0,"y":1,"fixed":false},"12":{"h":7,"w":12,"x":0,"y":1,"id":"g","fixed":false},"id":"g","data":{"id":"g","type":"tablecomponent","customCss":{},"actionButtons":[],"configuration":{"search":{"type":"static","value":"By Component"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{}},"downloadButton":{"type":"static","value":false}},"componentInput":{"type":"static","value":[{"id":1,"age":42,"name":"A cell with a long name"},{"id":2,"age":84,"name":"A briefer cell"}],"fieldType":"array","subFieldType":"object"}}},{"3":{"h":1,"w":1,"x":1,"y":0,"fixed":false},"12":{"h":1,"w":12,"x":0,"y":10,"id":"i","fixed":false},"id":"i","data":{"id":"i","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Body"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"by runnabel - your script is doing the search ","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":10,"w":3,"x":0,"y":11,"fixed":false},"12":{"h":7,"w":12,"x":0,"y":11,"id":"g","fixed":false},"id":"j","data":{"id":"j","type":"tablecomponent","customCss":{},"actionButtons":[],"configuration":{"search":{"type":"static","value":"By Runnable"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{}},"downloadButton":{"type":"static","value":false}},"componentInput":{"type":"runnable","value":[{"id":1,"age":42,"name":"A cell with a long name"},{"id":2,"age":84,"name":"A briefer cell"}],"fields":{"input":{"type":"connected","value":null,"fieldType":"string","connection":{"path":"search","componentId":"j"}}},"runnable":{"name":"search  by runnable","type":"runnableByName","inlineScript":{"path":"u/sindrekahoot/table_component/search  by runnable","schema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":["input"],"properties":{"input":{"type":"string","default":null,"description":""}}},"content":"export async function main(input: string) {\n  const data = [\n    {\n      \"id\": 1,\n      \"name\": \"A cell with a long name\",\n      \"age\": 42,\n    },\n    {\n      \"id\": 2,\n      \"name\": \"A briefer cell\",\n      \"age\": 84,\n    },\n  ];\n\n  return data.filter((elem) =>\n    elem.name.toLocaleLowerCase().startsWith(input.toLocaleLowerCase())\n  );\n}\n","language":"deno"}},"fieldType":"array","autoRefresh":true,"subFieldType":"object","recomputeOnInputChanged":true}}}],"c-2":[{"3":{"h":1,"w":1,"x":1,"y":0,"fixed":false},"12":{"h":1,"w":6,"x":0,"y":0,"id":"q","fixed":false},"id":"q","data":{"id":"q","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Body"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Select/Dropdown with different data on each row ","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":10,"w":3,"x":0,"y":1,"fixed":false},"12":{"h":6,"w":12,"x":0,"y":1,"id":"k","fixed":false},"id":"k","data":{"id":"k","type":"tablecomponent","customCss":{},"actionButtons":[{"id":"k_b","type":"checkboxcomponent","customCss":{},"recomputeIds":[],"configuration":{"label":{"type":"static","value":"Disable Run button"},"defaultValue":{"type":"static"}},"verticalAlignment":"center","horizontalAlignment":"center"},{"id":"k_c","type":"selectcomponent","customCss":{},"recomputeIds":[],"configuration":{"items":{"expr":"k.result[row.index].fruits","type":"eval","value":[{"label":"Foo","value":"foo"},{"label":"Bar","value":"bar"}]},"create":{"type":"static","value":false},"fullWidth":{"type":"static","value":false},"placeholder":{"type":"static","value":"Select an item"},"defaultValue":{"expr":"Object.keys(row.value)[3]","type":"eval"},"preselectFirst":{"type":"static","value":false}},"verticalAlignment":"center"},{"id":"k_a","type":"buttoncomponent","customCss":{},"recomputeIds":[],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"blue"},"label":{"type":"static","value":"Run"},"onError":{"type":"oneOf","selected":"errorOverlay","configuration":{"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"openModal":{"modalId":{"type":"static","value":""}},"closeModal":{"modalId":{"type":"static","value":""}},"errorOverlay":{},"sendErrorToast":{"message":{"type":"static","value":""},"appendError":{"type":"static","value":true}}}},"disabled":{"expr":"p.inputs.k_b[row.index]","type":"eval","value":false},"afterIcon":{"type":"static","value":""},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"openModal":{"modalId":{"type":"static","value":""}},"sendToast":{"message":{"type":"static","value":""}},"closeModal":{"modalId":{"type":"static","value":""}}}},"beforeIcon":{"type":"static","value":""},"fillContainer":{"type":"static","value":false},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"fieldType":"any"},"verticalAlignment":"center","horizontalAlignment":"center"}],"configuration":{"search":{"type":"static","value":"Disabled"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{"columnVisibility":{"fruits":false}}},"downloadButton":{"type":"static","value":false}},"componentInput":{"type":"static","value":[{"id":1,"age":42,"name":"A cell with a long name","fruits":[{"key":"carrot","label":"Carrot"},{"key":"Cake","label":"Cake"}]},{"id":2,"age":84,"name":"A briefer cell","fruits":[{"key":"pear","label":"Pear"},{"key":"apple","label":"Apple"}]}],"fieldType":"array","subFieldType":"object"}}},{"3":{"h":1,"w":1,"x":0,"y":0,"fixed":false},"12":{"h":1,"w":8,"x":0,"y":8,"id":"o","fixed":false},"id":"o","data":{"id":"o","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Body"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Disable button that only disable a button on it's row","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}}],"c-3":[{"3":{"h":1,"w":2,"x":0,"y":11,"fixed":false},"12":{"h":1,"w":3,"x":9,"y":0,"id":"n","fixed":false},"id":"n","data":{"id":"n","type":"selectcomponent","customCss":{},"recomputeIds":[],"configuration":{"items":{"type":"static","value":[{"label":"Foo","value":"Below 50"},{"label":"Bar","value":"bar"}]},"create":{"type":"static","value":false},"fullWidth":{"type":"static","value":true},"placeholder":{"type":"static","value":"Select an item"},"defaultValue":{"type":"static"},"preselectFirst":{"type":"static","value":true}},"verticalAlignment":"center"}},{"3":{"h":10,"w":3,"x":0,"y":1,"fixed":false},"12":{"h":6,"w":12,"x":0,"y":1,"id":"l","fixed":false},"id":"l","data":{"id":"l","type":"tablecomponent","customCss":{},"actionButtons":[],"configuration":{"search":{"type":"static","value":"Disabled"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{}},"downloadButton":{"type":"static","value":true}},"componentInput":{"type":"static","value":[{"id":1,"age":42,"name":"A cell with a long name"},{"id":2,"age":84,"name":"A briefer cell"}],"fieldType":"array","subFieldType":"object"}}},{"3":{"h":1,"w":1,"x":0,"y":0,"fixed":false},"12":{"h":1,"w":3,"x":0,"y":8,"id":"m","fixed":false},"id":"m","data":{"id":"m","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Body"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Hello ${ctx.username}","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}}],"c-4":[{"3":{"h":10,"w":3,"x":0,"y":1,"fixed":false},"12":{"h":6,"w":12,"x":0,"y":0,"id":"p","fixed":false},"id":"p","data":{"id":"p","type":"tablecomponent","customCss":{},"actionButtons":[],"configuration":{"search":{"type":"static","value":"Disabled"},"pagination":{"type":"oneOf","selected":"auto","configuration":{"auto":{"pageSize":{"type":"static","value":20}},"manual":{"pageCount":{"type":"static","value":-1}}}},"initialState":{"type":"static","value":{}},"downloadButton":{"type":"static","value":false}},"componentInput":{"type":"runnable","value":[{"id":1,"age":42,"name":"A cell with a long name","ageAndIdSum":43},{"id":2,"age":84,"name":"A briefer cell","ageAndIdSum":86}],"fields":{},"runnable":{"name":"datasource for transformer tab","type":"runnableByName","inlineScript":{"path":"u/sindrekahoot/table_component/datasource for transformer tab","schema":{"type":"object","$schema":"https://json-schema.org/draft/2020-12/schema","required":[],"properties":{}},"content":"export async function main() {\n\treturn [\n\t\t{\n\t\t\t\"id\": 1,\n\t\t\t\"name\": \"A cell with a long name\",\n\t\t\t\"age\": 42\n\t\t},\n\t\t{\n\t\t\t\"id\": 2,\n\t\t\t\"name\": \"A briefer cell\",\n\t\t\t\"age\": 84\n\t\t}\n\t]\n}","language":"deno"}},"fieldType":"array","autoRefresh":true,"transformer":{"path":"u/sindrekahoot/table_component/Transformer","content":"return result.map(elem => {\r\n  return { ...elem, ageAndIdSum: elem.age + elem.id }\r\n})","language":"frontend"},"subFieldType":"object","recomputeOnInputChanged":true}}}]},"fullscreen":false,"norefreshbar":true,"hiddenInlineScripts":[{"name":"Go to tab (tabIndex)","type":"runnableByName","fields":{},"autoRefresh":true,"inlineScript":{"path":"u/sindrekahoot/table_component/Go to tab (tabIndex)","content":"const urlParams = new URLSearchParams(window.location.search);\nconst tabIndex = urlParams.get('tabIndex');\n\nif (c.selectedTabIndex === tabIndex) {\n  console.log(\"RETURN 1\")\n  return\n}\n\nif (typeof window.tabIndex === \"undefined\") {\n  window.tabIndex = tabIndex\n} else {\n  console.log(\"RETURN 2\")\n  return\n}\nconsole.log(\"TABINDEX \", tabIndex)\nif (tabIndex) {\n  console.log(\"Setting TAB\")\n  setTab(\"c\", tabIndex)\n}","language":"frontend","refreshOn":[{"id":"c","key":"selectedTabIndex"}]},"recomputeIds":[],"recomputeOnInputChanged":true},{"name":"Background Runnable 0","type":"runnableByName","fields":{},"autoRefresh":true,"inlineScript":{"path":"u/sindrekahoot/table_component/Background Runnable 0","content":"console.log(\"Running\")\n","language":"frontend"},"recomputeIds":[],"recomputeOnInputChanged":true}],"unusedInlineScripts":[]},"description":"Showcase all the different options you have with the table component","vcreated_at":"2023-08-17T09:43:25.687Z","vcreated_by":"sindre svendby964","comments":[]}}