diff --git a/examples/basic-example/components/Table.tsx b/examples/basic-example/components/Table.tsx
index dd0644a0..7dc3a9be 100644
--- a/examples/basic-example/components/Table.tsx
+++ b/examples/basic-example/components/Table.tsx
@@ -22,6 +22,7 @@ import React, { useEffect, useMemo, useState } from "react";
 
 import parseCsv from "../lib/parseCsv";
 import DebouncedInput from "./DebouncedInput";
+import loadUrlProxied from "../lib/loadUrlProxied";
 
 const Table = ({
   data: ogData = [],
@@ -66,6 +67,17 @@ const Table = ({
     getSortedRowModel: getSortedRowModel(),
   });
 
+  useEffect(() => {
+    if (url) {
+      loadUrlProxied(url).then((data) => {
+        console.log(data)
+        const { rows, fields } = parseCsv(data);
+        setData(rows);
+        setCols(fields);
+      });
+    }
+  }, [url]);
+
   return (
     <div className={`${fullWidth ? "w-[90vw] ml-[calc(50%-45vw)]" : "w-full"}`}>
       <DebouncedInput
diff --git a/examples/basic-example/content/my-dataset/data_1.csv b/examples/basic-example/content/my-dataset/data_1.csv
new file mode 100644
index 00000000..2284ed58
--- /dev/null
+++ b/examples/basic-example/content/my-dataset/data_1.csv
@@ -0,0 +1,3 @@
+Year,Temp Anomaly
+1850,-0.418
+2020,0.923
diff --git a/examples/basic-example/lib/loadUrlProxied.tsx b/examples/basic-example/lib/loadUrlProxied.tsx
new file mode 100644
index 00000000..8682e327
--- /dev/null
+++ b/examples/basic-example/lib/loadUrlProxied.tsx
@@ -0,0 +1,11 @@
+export default async function loadUrlProxied(url: string) {
+  // HACK: duplicate of Excel code - maybe refactor
+  // if url is external may have CORS issue so we proxy it ...
+  if (url.startsWith("http")) {
+    const PROXY_URL = "/api/proxy";
+    url = PROXY_URL + "?url=" + encodeURIComponent(url);
+  }
+  const response = await fetch(url)
+  const data = await response.text()
+  return data
+}
diff --git a/examples/basic-example/middleware.ts b/examples/basic-example/middleware.ts
index 9856edbb..f4ee6eb0 100644
--- a/examples/basic-example/middleware.ts
+++ b/examples/basic-example/middleware.ts
@@ -3,12 +3,15 @@ import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
 // This function can be marked `async` if using `await` inside
-export function middleware(request: NextRequest) {
-  console.log('FUCK MY LIFE')
-  return NextResponse.redirect(new URL('/about-2', request.url))
+export async function middleware(req: NextRequest, res: NextResponse) {
+  const refererPaths = req.headers.get('referer').split('/'); // logs the referer URL to the console
+  const urlPaths = req.nextUrl.pathname.split('/')
+  const datasetName = refererPaths[refererPaths.length - 1]
+  const fileName = urlPaths[urlPaths.length - 1]
+  return NextResponse.rewrite(new URL(`/api/get-data-file?datasetName=${datasetName}&fileName=${fileName}`, req.url))
 }
 
 // See "Matching Paths" below to learn more
 export const config = {
-  matcher: '/datasets/:datasetName',
+  matcher: '/datasets/:file*.csv',
 }
diff --git a/examples/basic-example/pages/api/get-data-file.ts b/examples/basic-example/pages/api/get-data-file.ts
new file mode 100644
index 00000000..c2dbe50b
--- /dev/null
+++ b/examples/basic-example/pages/api/get-data-file.ts
@@ -0,0 +1,18 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from 'next'
+import { promises as fs } from 'fs';
+import path from 'path';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<string>
+) {
+  const query = req.query;
+  const { datasetName, fileName } = query;
+  const dataFile = path.join(
+    process.cwd(),
+    '/content/' + datasetName + '/' + fileName
+  );
+  const data = await fs.readFile(dataFile, 'utf8');
+  res.status(200).send(data)
+}
diff --git a/examples/basic-example/pages/api/hello.ts b/examples/basic-example/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e5..00000000
--- a/examples/basic-example/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
-  name: string
-}
-
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>
-) {
-  res.status(200).json({ name: 'John Doe' })
-}
diff --git a/examples/basic-example/pages/datasets/[datasetId].tsx b/examples/basic-example/pages/datasets/[datasetId].tsx
index a0862d04..020350e6 100644
--- a/examples/basic-example/pages/datasets/[datasetId].tsx
+++ b/examples/basic-example/pages/datasets/[datasetId].tsx
@@ -21,6 +21,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
   );
   const readme = await fs.readFile(jsonDirectory, 'utf8');
   let { mdxSource, frontMatter, excerpt } = await parse(readme, '.mdx');
+  console.log(mdxSource, frontMatter, excerpt)
   return {
     props: {
       mdxSource,
diff --git a/examples/basic-example/tsconfig.json b/examples/basic-example/tsconfig.json
index b8d59788..2156abd4 100644
--- a/examples/basic-example/tsconfig.json
+++ b/examples/basic-example/tsconfig.json
@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "middleware.ts"],
   "exclude": ["node_modules"]
 }