infinite-table
diff --git a/Diff for: ‎.gitignore
+3-1 b/Diff for: ‎.gitignore
+3-1
diff --git a/Diff for: ‎examples/src/pages/_app.page.tsx
+7 b/Diff for: ‎examples/src/pages/_app.page.tsx
+7
diff --git a/Diff for: ‎examples/src/pages/tests/table/props/data/basic.page.tsx
+47-13 b/Diff for: ‎examples/src/pages/tests/table/props/data/basic.page.tsx
+47-13
@@ -101,4 +101,6 @@ test-results
 .contentlayer
 
 /www/public/_pagefind
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+
+.parcel-cache
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Head from 'next/head';
 import '../index.global.css';
 import '../globals.css';
 
@@ -20,6 +21,12 @@ function MyApp({ Component, pageProps }: any) {
       //@ts-ignore ignore
       style={{ '--it-row-height': '3rem', color: 'var(--infinite-cell-color)' }}
     >
+      <Head>
+        <meta
+          http-equiv="Content-Security-Policy"
+          content="default-src * 'unsafe-inline'; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;"
+        />
+      </Head>
       <Component {...pageProps} />
     </div>
   );
 
@@ -101,21 +101,55 @@ const columns: Record<string, InfiniteTableColumn<CarSale>> = {
 };
 
 export default function DataTestPage() {
+  const [active, setActive] = React.useState([true, false]);
   return (
     <React.StrictMode>
-      <DataSource<CarSale> data={carsales} primaryKey="id">
-        <InfiniteTable<CarSale>
-          domProps={{
-            style: {
-              margin: '5px',
-              height: 900,
-              border: '1px solid gray',
-              position: 'relative',
-            },
-          }}
-          columns={columns}
-        />
-      </DataSource>
+      <button onClick={() => setActive([!active[0], active[1]])}>
+        toggle test
+      </button>
+      {active[0] && (
+        <DataSource<CarSale> data={carsales} primaryKey="id">
+          <InfiniteTable<CarSale>
+            debugId="test"
+            debugMode
+            domProps={{
+              style: {
+                margin: '5px',
+                height: 900,
+                border: '1px solid gray',
+                position: 'relative',
+              },
+            }}
+            columns={columns}
+          />
+        </DataSource>
+      )}
+      <button onClick={() => setActive([active[0], !active[1]])}>
+        toggle simple
+      </button>
+      {active[1] && (
+        <DataSource<CarSale>
+          data={carsales}
+          primaryKey="id"
+          selectionMode="multi-row"
+        >
+          <InfiniteTable<CarSale>
+            debugId="simple"
+            debugMode
+            domProps={{
+              style: {
+                margin: '5px',
+                height: 900,
+                border: '1px solid gray',
+                position: 'relative',
+              },
+            }}
+            columns={{
+              make: columns.make,
+            }}
+          />
+        </DataSource>
+      )}
     </React.StrictMode>
   );
 }