Implement Jupyter integration

src/Arrow.deno.ts

@@ -0,0 +1,21 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+export * from "./Arrow.node.js"
+
+// Extend table with jupyter display
+import "./table-jupyter.js"

src/table-jupyter.ts

@@ -0,0 +1,77 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { Table } from "./table.js"
+
+const jupyterDisplay = Symbol.for("Jupyter.display");
+
+const rawMap = {
+    '&': '&',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+} as const;
+
+/**
+ * Escapes text for safe interpolation into HTML.
+ */
+function escapeHTML(str: string) {
+    return str.replace(/[&<>"']/g, (char) => rawMap[char as keyof typeof rawMap]);
+}
+
+/**
+ * Render the table as HTML table element.
+ */
+function tableToHTML(table: Table): string {
+    let htmlTable = `<table class="dataframe">`;
+
+    // Add table headers
+    htmlTable += "<thead><tr>";
+    for (const field of table.schema.fields) {
+      htmlTable += `<th>${escapeHTML(field.name)}</th>`;
+    }
+    htmlTable += "</tr></thead>";
+    // Add table data
+    htmlTable += "<tbody>";
+    for (const row of table) {
+        htmlTable += "<tr>";
+        for (const field of row.toArray()) {
+            htmlTable += `<td>${escapeHTML(String(field))}</td>`;
+        }
+        htmlTable += "</tr>";
+    }
+    htmlTable += "</tbody></table>";
+
+    return htmlTable;
+}
+
+declare module "./table.js" {
+    interface Table {
+        [jupyterDisplay](): { "text/html": string };
+    }
+}
+
+Table.prototype[jupyterDisplay] = function(this: Table) {
+    // TODO: from env or options
+    const rows = 50
+    const limited = this.slice(0, rows);
+    return {
+        // TODO: application/vnd.dataresource+json
+        "text/html": tableToHTML(limited)
+    }
+}

src/table.ts

@@ -44,6 +44,7 @@ import { clampRange, wrapIndex } from './util/vector.js';
 import { ArrayDataType, BigIntArray, TypedArray, TypedArrayDataType } from './interfaces.js';
 import { RecordBatch, _InternalEmptyPlaceholderRecordBatch } from './recordbatch.js';
 
+
 /** @ignore */
 export interface Table<T extends TypeMap = any> {
     ///

test/unit/table-tests.ts

@@ -24,7 +24,8 @@ import {
     Schema, Field, Table, RecordBatch,
     Vector, builderThroughIterable,
     Float32, Int32, Dictionary, Utf8, Int8,
-    tableFromIPC, tableToIPC, vectorFromArray
+    tableFromIPC, tableToIPC, vectorFromArray,
+    tableFromJSON
 } from 'apache-arrow';
 
 const deepCopy = (t: Table) => tableFromIPC(tableToIPC(t));
@@ -306,6 +307,14 @@ describe(`Table`, () => {
         compareBatchAndTable(table, m, batch2, deepCopy(new Table([batch2])));
     });
 
+    test(`table.toHTML() create right HTML table`, () => {
+        const table = tableFromJSON([{name: "Alice", age: 30}, {name: "Bob", age: 32}])
+        const html = table.toHTML()
+        const expected = `<table><thead><tr><th>name</th><th>age></th></tr></thead><tbody><tr><td>Alice</td><td>30</td></tr><tr><td>Bob</td><td>32</td></tr></tbody></table>`
+
+        expect(html).toEqual(expected)
+    })
+
     for (const datum of test_data) {
         describe(datum.name, () => {
             test(`has the correct length`, () => {