diff --git a/dev/serve.vue b/dev/serve.vue
index 19227b6..1f902ff 100644
--- a/dev/serve.vue
+++ b/dev/serve.vue
@@ -22,6 +22,7 @@ export default {
   async created() {
     // react-notion tester: 2e22de6b770e4166be301490f6ffd420
     // equation tester: 2a1d5226d68246deba627012081693f9
+    // table tester: bd1de400a8b349dc824f4f00e61d0797
     // todo tester: 235057194b954a60ace89c052a65d102
     this.blockMap = await getPageBlocks("2e22de6b770e4166be301490f6ffd420");
   },
diff --git a/src/blocks/helpers/table-row.vue b/src/blocks/helpers/table-row.vue
deleted file mode 100644
index 79b0991..0000000
--- a/src/blocks/helpers/table-row.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <tr class="notion-simple-table-row">
-    <td
-      v-for="(cell, key, index) in row.value.properties"
-      :key="key"
-      class="notion-simple-table-data"
-      :style="isColumnStyle(rowIndex) || isRowStyle(index) ? headerStyle : null"
-    >
-      <div class="notion-simple-table-cell">
-        <div class="notion-simple-table-cell-text">
-          <NotionTextRenderer :text="cell" v-bind="pass" />
-        </div>
-      </div>
-    </td>
-  </tr>
-</template>
-
-<script>
-import Blockable, { blockComputed } from "@/lib/blockable";
-import NotionTextRenderer from "@/blocks/helpers/text-renderer";
-export default {
-  extends: Blockable,
-  name: "NotionTableRow",
-  props: {
-    row: {
-      type: Object,
-    },
-    hasColumnHeader: {
-      type: Boolean,
-      default: false,
-    },
-    hasRowHeader: {
-      type: Boolean,
-      default: false,
-    },
-    rowIndex: {
-      type: Number,
-    },
-  },
-  components: {
-    NotionTextRenderer,
-  },
-  computed: {
-    ...blockComputed,
-    headerStyle() {
-      return {
-        background: "rgb(247, 246, 243)",
-        "font-weight": 500,
-      };
-    },
-  },
-  methods: {
-    isColumnStyle(index) {
-      return this.hasColumnHeader && index === 0;
-    },
-    isRowStyle(index) {
-      return this.hasRowHeader && index === 0;
-    },
-  },
-};
-</script>
diff --git a/src/blocks/table-row.vue b/src/blocks/table-row.vue
new file mode 100644
index 0000000..4fd92c4
--- /dev/null
+++ b/src/blocks/table-row.vue
@@ -0,0 +1,51 @@
+<template>
+  <tr class="notion-simple-table-row">
+    <td
+      v-for="(columnId, columnIndex) in columns"
+      :key="columnIndex"
+      class="notion-simple-table-data"
+    >
+      <div :class="{ 'notion-simple-table-header': isHeader(columnIndex) }">
+        <div class="notion-simple-table-cell-text">
+          <NotionTextRenderer :text="cell(columnId)" v-bind="pass" />
+        </div>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script>
+import Blockable, { blockComputed } from "@/lib/blockable";
+import NotionTextRenderer from "@/blocks/helpers/text-renderer";
+
+export default {
+  extends: Blockable,
+  name: "NotionTableRow",
+  components: {
+    NotionTextRenderer,
+  },
+  computed: {
+    ...blockComputed,
+    hasHeaderColumn() {
+      return this.parent?.value?.format?.table_block_column_header;
+    },
+    hasHeaderRow() {
+      return this.parent?.value?.format?.table_block_row_header;
+    },
+    columns() {
+      return this.parent?.value?.format?.table_block_column_order;
+    },
+  },
+  methods: {
+    cell(columnId) {
+      return this.properties[columnId];
+    },
+    isHeader(columnIndex) {
+      return (
+        (this.hasHeaderColumn && this.contentIndex == 0) ||
+        (this.hasHeaderRow && columnIndex == 0)
+      );
+    },
+  },
+};
+</script>
diff --git a/src/blocks/table.vue b/src/blocks/table.vue
index f80a911..0780b9c 100644
--- a/src/blocks/table.vue
+++ b/src/blocks/table.vue
@@ -2,41 +2,17 @@
   <div>
     <table class="notion-simple-table">
       <tbody>
-        <NotionTableRow
-          v-for="(row, index) in rows"
-          :key="row.value.id"
-          :row="row"
-          :rowIndex="index"
-          :hasColumnHeader="hasColumnHeader"
-          :hasRowHeader="hasRowHeader"
-          v-bind="pass"
-        />
+        <slot />
       </tbody>
     </table>
   </div>
 </template>
 
 <script>
-import Blockable, { blockComputed } from "@/lib/blockable";
-import NotionTableRow from "@/blocks/helpers/table-row";
+import Blockable from "@/lib/blockable";
 
 export default {
   extends: Blockable,
   name: "NotionTable",
-  components: {
-    NotionTableRow,
-  },
-  computed: {
-    ...blockComputed,
-    rows() {
-      return this.value.content.map((id) => this.blockMap[id]);
-    },
-    hasColumnHeader() {
-      return this.value.format.table_block_column_header;
-    },
-    hasRowHeader() {
-      return this.value.format.table_block_row_header;
-    },
-  },
 };
 </script>
diff --git a/src/components/block.vue b/src/components/block.vue
index f385b31..5113ca4 100644
--- a/src/components/block.vue
+++ b/src/components/block.vue
@@ -34,7 +34,8 @@
     v-else-if="isType(['image', 'embed', 'figma', 'video', 'audio'])"
     v-bind="pass"
   />
-  <NotionTable v-else-if="isType('table')" v-bind="pass" />
+  <NotionTable v-else-if="isType('table')" v-bind="pass"><slot /></NotionTable>
+  <NotionTableRow v-else-if="isType('table_row')" v-bind="pass" />
   <hr v-else-if="isType('divider')" class="notion-hr" />
   <div v-else-if="todo && visible">
     todo: {{ type }}
@@ -50,16 +51,17 @@ import NotionBookmark from "@/blocks/bookmark";
 import NotionCallout from "@/blocks/callout";
 import NotionCode from "@/blocks/code";
 import NotionColumn from "@/blocks/column";
+import NotionEquation from "@/blocks/equation";
 import NotionFigure from "@/blocks/helpers/figure";
+import NotionHeader from "@/blocks/header";
 import NotionList from "@/blocks/list";
 import NotionPage from "@/blocks/page";
-import NotionHeader from "@/blocks/header";
-import NotionText from "@/blocks/text";
-import NotionToggle from "@/blocks/toggle";
 import NotionQuote from "@/blocks/quote";
-import NotionEquation from "@/blocks/equation";
-import NotionTodo from "@/blocks/todo";
 import NotionTable from "@/blocks/table";
+import NotionTableRow from "@/blocks/table-row";
+import NotionText from "@/blocks/text";
+import NotionTodo from "@/blocks/todo";
+import NotionToggle from "@/blocks/toggle";
 
 export default {
   extends: Blockable,
@@ -69,16 +71,17 @@ export default {
     NotionCallout,
     NotionCode,
     NotionColumn,
+    NotionEquation,
     NotionFigure,
+    NotionHeader,
     NotionList,
     NotionPage,
-    NotionHeader,
-    NotionText,
-    NotionToggle,
     NotionQuote,
     NotionTable,
-    NotionEquation,
+    NotionTableRow,
+    NotionText,
     NotionTodo,
+    NotionToggle,
   },
 };
 </script>
diff --git a/src/components/notion-renderer.vue b/src/components/notion-renderer.vue
index 8c7bbeb..6eadd7e 100644
--- a/src/components/notion-renderer.vue
+++ b/src/components/notion-renderer.vue
@@ -1,11 +1,12 @@
 <template>
   <NotionBlock v-bind="pass" v-if="blockMap && value">
     <NotionRenderer
-      v-for="contentId in value.content"
-      :key="contentId"
+      v-for="(contentId, contentIndex) in value.content"
       v-bind="pass"
+      :key="contentId"
       :level="level + 1"
       :content-id="contentId"
+      :content-index="contentIndex"
     />
   </NotionBlock>
 </template>
@@ -25,6 +26,7 @@ export default {
   props: {
     blockMap: [Object],
     contentId: String,
+    contentIndex: { type: Number, default: 0 },
     fullPage: { type: Boolean, default: false },
     hideList: { type: Array, default: () => [] },
     level: { type: Number, default: 0 },
diff --git a/src/lib/blockable.js b/src/lib/blockable.js
index 8acdd61..460997e 100644
--- a/src/lib/blockable.js
+++ b/src/lib/blockable.js
@@ -3,6 +3,7 @@ import { getTextContent } from "@/lib/utils";
 export const blockProps = {
   blockMap: { type: Object, required: true },
   contentId: { type: String, required: false },
+  contentIndex: { type: Number, default: 0 },
   embedAllow: { type: String, default: "fullscreen" },
   fullPage: { type: Boolean, default: false },
   hideList: { type: Array, default: () => [] },
@@ -23,6 +24,7 @@ export const blockComputed = {
     return {
       blockMap: this.blockMap,
       contentId: this.contentId,
+      contentIndex: this.contentIndex,
       embedAllow: this.embedAllow,
       fullPage: this.fullPage,
       hideList: this.hideList,
@@ -84,6 +86,9 @@ export const blockComputed = {
   hasPageLinkOptions() {
     return this.pageLinkOptions?.component && this.pageLinkOptions?.href;
   },
+  parent() {
+    return this.blockMap[this.value?.parent_id];
+  },
 };
 
 export default {
diff --git a/src/styles.css b/src/styles.css
index 0dc548d..c79e30e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -714,3 +714,8 @@ img.notion-nav-icon {
   font-size: 14px;
   line-height: 20px;
 }
+
+.notion-simple-table-header {
+  background: rgb(247, 246, 243);
+  font-weight: 500;
+}