diff --git a/README.md b/README.md
index 5ebc7149..fe1371ec 100644
--- a/README.md
+++ b/README.md
@@ -84,7 +84,7 @@ If you want to use Graphic Walker as a data exploration tool without thinking ab
 
 Use it here: [Graphic Walker Online](https://graphic-walker.kanaries.net)
 
-Examples here: [Graphic Walker Examples](https://graphic-walker.kanaries.net/examples)
+Examples here: [Graphic Walker Examples](https://graphic-walker.kanaries.net/examples/)
 
 ### Method 1: use as an independent app.
 ```bash
@@ -156,6 +156,23 @@ const YourChart: React.FC<IYourChartProps> = props => {
 export default YourChart;
 ```
 
+You can use `TableWalker` component to make a single table view with your data. it accepts same props as `GraphicWalker`, but you don't need to pass the chart prop, and you can control the page size by pageSize prop(default value is 20).
+
+```typescript
+import { TableWalker } from '@kanaries/graphic-walker';
+
+const YourChart: React.FC<IYourChartProps> = props => {
+    const { dataSource, fields, spec } = props;
+    return <TableWalker
+        dataSource={dataSource}
+        rawFields={fields}
+        pageSize={50}
+    />;
+}
+
+export default YourChart;
+```
+
 ### try local (dev mode)
 ```bash
 # packages/graphic-walker
diff --git a/packages/playground/src/examples/nav.tsx b/packages/playground/src/examples/nav.tsx
index 502a225d..73b246d0 100644
--- a/packages/playground/src/examples/nav.tsx
+++ b/packages/playground/src/examples/nav.tsx
@@ -23,6 +23,10 @@ export const pages = [
         comp: () => import('./pages/cc'),
         name: 'CustomColor',
     },
+    {
+        comp: () => import('./pages/table'),
+        name: 'TableWalker',
+    },
 ].map((Component) => ({
     name: Component.name,
     path: Component.name.replace(/\s/g, '_'),
diff --git a/packages/playground/src/examples/pages/cc.stories.tsx b/packages/playground/src/examples/pages/cc.stories.tsx
index a042e432..9b6b24ee 100644
--- a/packages/playground/src/examples/pages/cc.stories.tsx
+++ b/packages/playground/src/examples/pages/cc.stories.tsx
@@ -28,7 +28,7 @@ const colorConfig: IColorConfig = {
 
 export default function GraphicWalkerComponent() {
     const { theme } = useContext(themeContext);
-    const { dataSource, fields } = useFetch<IDataSource>('https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-students-service.json');
+    const { dataSource, fields } = useFetch<IDataSource>('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json');
     return (
         <div className="bg-amber-100 dark:bg-amber-900 p-4">
             <GraphicWalker rawFields={fields} dataSource={dataSource} dark={theme} colorConfig={colorConfig} />
diff --git a/packages/playground/src/examples/pages/ds.stories.tsx b/packages/playground/src/examples/pages/ds.stories.tsx
index 11685ed7..b30e3e2f 100644
--- a/packages/playground/src/examples/pages/ds.stories.tsx
+++ b/packages/playground/src/examples/pages/ds.stories.tsx
@@ -10,7 +10,7 @@ export default function DataSourceSegment() {
     const { theme } = useContext(themeContext);
     const provider = getProvider();
     return (
-        <DataSourceSegmentComponent provider={provider}>
+        <DataSourceSegmentComponent dark={theme} provider={provider}>
             {(p) => {
                 return (
                     <GraphicWalker
diff --git a/packages/playground/src/examples/pages/inModal.stories.tsx b/packages/playground/src/examples/pages/inModal.stories.tsx
index d1c87911..ae507882 100644
--- a/packages/playground/src/examples/pages/inModal.stories.tsx
+++ b/packages/playground/src/examples/pages/inModal.stories.tsx
@@ -7,7 +7,7 @@ import { useFetch, IDataSource } from '../util';
 export default function GraphicWalkerInModal() {
     const ref = useRef<VizSpecStore>(null);
     const { theme } = useContext(themeContext);
-    const { dataSource, fields } = useFetch<IDataSource>('https://chspace.oss-cn-hongkong.aliyuncs.com/api/ds-students-service.json');
+    const { dataSource, fields } = useFetch<IDataSource>('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json');
 
     useEffect(() => {
         setTimeout(() => {
diff --git a/packages/playground/src/examples/pages/table.stories.tsx b/packages/playground/src/examples/pages/table.stories.tsx
new file mode 100644
index 00000000..0c8b4e8b
--- /dev/null
+++ b/packages/playground/src/examples/pages/table.stories.tsx
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { TableWalker } from '@kanaries/graphic-walker';
+import { themeContext } from '../context';
+import { useFetch, IDataSource } from '../util';
+
+export default function GraphicWalkerComponent() {
+    const { theme } = useContext(themeContext);
+    const { dataSource, fields } = useFetch<IDataSource>('https://pub-2422ed4100b443659f588f2382cfc7b1.r2.dev/datasets/ds-students-service.json');
+
+    return <TableWalker rawFields={fields} dataSource={dataSource} dark={theme} pageSize={50} />;
+}
diff --git a/packages/playground/src/examples/pages/table.tsx b/packages/playground/src/examples/pages/table.tsx
new file mode 100644
index 00000000..f5c34351
--- /dev/null
+++ b/packages/playground/src/examples/pages/table.tsx
@@ -0,0 +1,11 @@
+import Example from '../components/examplePage';
+import code from './table.stories?raw';
+import Comp from './table.stories';
+
+export default function GraphicWalkerComponent() {
+    return (
+        <Example name="TableWalker" code={code}>
+            <Comp />
+        </Example>
+    );
+}