Add table ordering

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");
   },

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>

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>

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>

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 },

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 {

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;
+}