Open external link

\n \n

\n \n );\n}\n\nfunction Home() {\n const data = useLoaderData();\n return (\n

\n {data.map((val) => )}\n

\n );\n}\n\nfunction Table() {\n return (\n

\n Item 1\n

\n Item 2\n

\n );\n}\n\ninterface ValCardProps {\n val: ValInfo;\n}\n\nexport function ValCard({ val }: ValCardProps) {\n return (\n

\n {val.valName}\n {val.valUrl && (\n \n \n Open external link\n \n \n \n )}\n

by @{val.author}

\n\n

\n {val.subdomain && (\n

\n File Name\n

\n {val.fileName}\n

\n )}\n\n {val.subdomain && (\n

\n Endpoint\n

\n {val.subdomain}\n

\n )}\n

\n );\n}\n\nasync function catsLoader() {\n const data = await fetch(API_URL)\n .then((res) => res.json());\n return data;\n}\n\nfunction mockLoader() {\n const vals: ValInfo[] = [\n {\n id: \"d17279f7-3efe-43f0-ac02-0b0d3c303c47\",\n author: \"nbbaier\",\n fileName: \"http.tsx\",\n subdomain: \"https://mycustomsubdomain.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/custom-domains-val-api/code/\",\n valName: \"custom-domains-val-api\",\n },\n {\n id: \"cb0e7ec0-60bc-11f0-9083-0224a6c84d84\",\n author: \"nbbaier\",\n fileName: \"index.ts\",\n subdomain: \"https://subdomains.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/subdomain-dashboard/code/\",\n valName: \"subdomain-dashboard\",\n },\n {\n id: \"2361420d-4270-4b6b-b704-8025aa0d6f06\",\n author: \"nbbaier\",\n fileName: \"main.ts\",\n subdomain: \"https://nbbaier-mcp.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/mcp-starter/code/\",\n valName: \"mcp-starter\",\n },\n ];\n\n return vals;\n}\n\nexport const routes = [\n {\n Component: Layout,\n children: [\n {\n Component: Home,\n index: true,\n loader: mockLoader,\n },\n {\n Component: Table,\n path: \"/table\",\n },\n ],\n },\n];\n\nexport default routes;",[],[237],{"_105":245,"_96":246,"_161":247,"_163":-5,"_164":142,"_165":248,"_167":22,"_107":249,"_101":250,"_169":212,"_171":251,"_173":22,"_174":-5,"_175":252,"_99":253},"b80e6a22-60fa-11f0-874a-0224a6c84d84","table-copy.tsx","853435c8-60fa-11f0-93a2-0224a6c84d84",253,["D",1752529039442],4,"/** @jsxImportSource https://esm.sh/react@19 */\nimport React from \"https://esm.sh/react@19\";\n\nimport {\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n useReactTable,\n} from \"https://esm.sh/@tanstack/react-table\";\n\nexport interface ValInfo {\n id: string;\n fileName: string;\n author: string;\n subdomain: string;\n valName: string;\n valUrl: string;\n}\n\nconst vals: ValInfo[] = [\n {\n id: \"d17279f7-3efe-43f0-ac02-0b0d3c303c47\",\n author: \"nbbaier\",\n fileName: \"http.tsx\",\n subdomain: \"https://mycustomsubdomain.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/custom-domains-val-api/code/\",\n valName: \"custom-domains-val-api\",\n },\n {\n id: \"cb0e7ec0-60bc-11f0-9083-0224a6c84d84\",\n author: \"nbbaier\",\n fileName: \"index.ts\",\n subdomain: \"https://subdomains.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/subdomain-dashboard/code/\",\n valName: \"subdomain-dashboard\",\n },\n {\n id: \"2361420d-4270-4b6b-b704-8025aa0d6f06\",\n author: \"nbbaier\",\n fileName: \"main.ts\",\n subdomain: \"https://nbbaier-mcp.val.run/\",\n valUrl: \"https://www.val.town/x/nbbaier/mcp-starter/code/\",\n valName: \"mcp-starter\",\n },\n];\n\nconst columnHelper = createColumnHelper();\n\nconst columns = [\n columnHelper.accessor((row) => row.id, {\n id: \"id\",\n header: () => Val ID,\n cell: (info) => info.getValue(),\n }),\n columnHelper.accessor((row) => row.author, {\n id: \"author\",\n cell: (info) => {info.getValue()},\n header: () => Author,\n }),\n columnHelper.accessor(\"fileName\", {\n header: () => \"File Name\",\n cell: (info) => info.renderValue(),\n }),\n];\n\nexport default function Table() {\n const [data, _setData] = React.useState(() => [...vals]);\n const rerender = React.useReducer(() => ({}), {})[1];\n\n const table = useReactTable({\n data,\n columns,\n getCoreRowModel: getCoreRowModel(),\n });\n\n return (\n

\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => (\n \n ))}\n \n ))}\n \n \n {table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n ))}\n \n ))}\n \n

\n {header.isPlaceholder ? null : flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n
\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n

\n \n

\n );\n}",[],[246],"files",[158,178,187,196,205,216,225,235,244],"counts",{"_258":32,"_259":182,"_260":32,"_261":262,"_265":266},"pulls","branches","forks","envVars",{"_263":32,"_264":32},"count","emptyCount","connections",{"_263":32,"_267":32},"unfilledCount","contents",[],{"_105":188,"_96":100,"_161":117,"_163":-5,"_164":142,"_165":189,"_167":22,"_107":271,"_101":191,"_169":192,"_171":193,"_173":22,"_174":-5,"_99":272},["D",1752527604589],[100],"upstreamProject",{"_105":150,"_96":97,"_113":275,"_114":276,"_111":112,"_23":277},"Minimal React Router starter using data mode","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e8cc626c-830e-44c2-a64a-c33638026c00/square512",{"_94":278,"_134":279},"jxnblk","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512","upstreamBranch",{"_105":145,"_107":282,"_283":284,"_96":44,"_143":150,"_101":147,"_144":285,"_146":286,"_287":288,"_109":-5,"_155":22,"_111":112,"_154":278,"_16":152,"_153":97},["D",1747317015958],"updatedAt",["D",1747318353219],"48e70732-1fb7-11f0-a587-569c3dd06744",87,"lockfileKey","1763487330350-esm.town_v_jxnblk_react-router-data-mode-starter@33-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":295,"_156":300,"_254":328,"_170":329,"_268":331,"_332":333,"_336":-5,"_337":338,"_339":32,"_340":341,"_261":-5},{"_105":106,"_96":97,"_107":296,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":297,"_136":298,"_139":299,"_155":22},["D",1752523533770],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":145,"_146":147,"_148":112,"_149":150,"_151":152,"_153":97,"_154":95},[301,304,307,310,313,316,319,322,325],{"_105":159,"_96":160,"_161":162,"_163":-5,"_164":142,"_165":166,"_167":119,"_107":168,"_101":32,"_169":170,"_171":172,"_173":22,"_174":-5,"_175":302,"_99":303},[],[160],{"_105":179,"_96":180,"_161":181,"_163":-5,"_164":142,"_165":182,"_167":119,"_107":183,"_101":32,"_169":170,"_171":184,"_173":22,"_174":-5,"_175":305,"_99":306},[],[180],{"_105":188,"_96":100,"_161":117,"_163":-5,"_164":142,"_165":189,"_167":22,"_107":190,"_101":191,"_169":192,"_171":193,"_173":22,"_174":-5,"_175":308,"_99":309},[],[100],{"_105":197,"_96":198,"_161":199,"_163":-5,"_164":142,"_165":200,"_167":119,"_107":201,"_101":32,"_169":170,"_171":202,"_173":22,"_174":-5,"_175":311,"_99":312},[],[198],{"_105":206,"_96":207,"_161":208,"_163":-5,"_164":142,"_165":209,"_167":22,"_107":210,"_101":211,"_169":212,"_171":213,"_173":22,"_174":-5,"_175":314,"_99":315},[],[207],{"_105":217,"_96":218,"_161":219,"_163":-5,"_164":142,"_165":220,"_167":22,"_107":221,"_101":32,"_169":170,"_171":222,"_173":22,"_174":-5,"_175":317,"_99":318},[],[218],{"_105":226,"_96":227,"_161":228,"_163":-5,"_164":142,"_165":229,"_167":119,"_107":230,"_101":231,"_169":192,"_171":232,"_173":22,"_174":-5,"_175":320,"_99":321},[],[227],{"_105":236,"_96":237,"_161":238,"_163":-5,"_164":142,"_165":102,"_167":22,"_107":239,"_101":240,"_169":212,"_171":241,"_173":22,"_174":-5,"_175":323,"_99":324},[],[237],{"_105":245,"_96":246,"_161":247,"_163":-5,"_164":142,"_165":248,"_167":22,"_107":249,"_101":250,"_169":212,"_171":251,"_173":22,"_174":-5,"_175":326,"_99":327},[],[246],[301,304,307,310,313,316,319,322,325],{"_105":188,"_96":100,"_161":117,"_163":-5,"_164":142,"_165":189,"_167":22,"_107":271,"_101":191,"_169":192,"_171":193,"_173":22,"_174":-5,"_99":330},[100],[],"upstream",{"_105":145,"_107":334,"_283":335,"_96":44,"_143":150,"_101":147,"_144":285,"_146":286,"_287":288,"_109":-5,"_155":22,"_111":112,"_154":278,"_16":152,"_153":97},["D",1747317015958],["D",1747318353219],"pull","ahead",325,"behind","templates",[],"actionData","errors"]