implements table renderer

Author: markbaas

R/notebook.R

@@ -86,7 +86,8 @@ r$run(function() {
               type = "table",
               result = list(
                 html = knitr::kable(table, format = "html"),
-                markdown = paste0(knitr::kable(table, format = "markdown"), collapse = "\n")
+                markdown = paste0(knitr::kable(table, format = "markdown"), collapse = "\n"),
+                data = head(out$value, 1000)
               )
             )
           } else {

package-lock.json

@@ -66,6 +66,16 @@
   "enableProposedApi": true,
   "main": "./dist/extension",
   "contributes": {
+    "notebookOutputRenderer": [
+      {
+        "id": "r-notebook-table-renderer",
+        "displayName": "Notebook Table Renderer",
+        "entrypoint": "./dist/tableRenderer.js",
+        "mimeTypes": [
+          "ms-vscode.r-notebook/table"
+        ]
+      }
+    ],
     "viewsContainers": {
       "activitybar": [
         {
@@ -617,12 +627,12 @@
         "category": "R",
         "command": "r.helpPanel.openForSelection"
       },
-			{
-				"title": "Restart Kernel",
-				"command": "r.notebook.restartKernel",
-				"icon": "$(refresh)",
+      {
+        "title": "Restart Kernel",
+        "command": "r.notebook.restartKernel",
+        "icon": "$(refresh)",
         "category": "R"
-			}
+      }
     ],
     "keybindings": [
       {
@@ -1034,23 +1044,38 @@
     "typescript": "^4.1.3",
     "vscode-test": "^1.5.0",
     "webpack": "^5.19.0",
-    "webpack-cli": "^4.4.0",
+    "webpack-cli": "^4.5.0",
     "yamljs": "^0.3.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.2",
+    "@types/datatables.net": "^1.10.19",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/vscode-notebook-renderer": "^1.48.0",
+    "@types/webpack-env": "^1.16.0",
     "bootstrap": "^4.6.0",
     "cheerio": "^1.0.0-rc.5",
+    "css-loader": "^5.0.2",
     "datatables.net": "^1.10.23",
     "datatables.net-bs4": "^1.10.23",
     "datatables.net-fixedheader-jqui": "^3.1.7",
+    "file-loader": "^6.2.0",
     "fotorama": "^4.6.4",
     "fs-extra": "^9.1.0",
     "highlight.js": "^10.5.0",
     "jquery": "^3.5.1",
     "jquery.json-viewer": "^1.4.0",
+    "mdbreact": "^5.0.1",
     "popper.js": "^1.16.1",
+    "preact": "^10.5.12",
+    "react-bootstrap-table-next": "^4.0.3",
+    "react-dom": "^17.0.1",
     "showdown": "^1.9.1",
+    "style-loader": "^2.0.0",
     "tree-kill": "^1.2.2",
+    "url-loader": "^4.1.1",
+    "webpack-dev-server": "^3.11.2",
     "winreg": "^1.2.4"
   }
 }

package.json

@@ -8,7 +8,7 @@ df = data.frame(a = c(1,2,3,4), b = c(10, 20, 13, 1))
 library(ggplot2)
 library(plotly)
 
-
+df
 ```
 ```{r}
 ggplot(df, aes(a, b)) + geom_point()

samples/test1.rmd

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+
+import { MDBDataTable } from 'mdbreact';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import 'bootstrap-css-only/css/bootstrap.min.css';
+import 'mdbreact/dist/css/mdb.css';
+
+const notebookApi = acquireNotebookRendererApi("r-notebook-table-renderer");
+
+const DatatablePage = ({ data }) => {
+  const columns = Object.keys(data[0]).map((k) => {
+    return {
+      label: k.charAt(0).toLocaleUpperCase() + k.slice(1),
+      field: k,
+      sort: 'asc'
+    }
+  })
+  const datatable = {
+    columns: columns,
+    rows: data
+  }
+  return <MDBDataTable small hover entriesOptions={[10, 20, 25]} entries={10} data={datatable} autoWidth />;
+}
+
+notebookApi.onDidCreateOutput((evt) => {
+    const output = evt.output.data[evt.mimeType];
+    render(
+      <div style={{ padding: '5px', backgroundColor: "white" }}>
+        <DatatablePage data={output}/>
+        {/* <DataTable2 data={output} /> */}
+      </div> as any, evt.element)
+});

src/client/renderers/tableRenderer.tsx

@@ -0,0 +1,7 @@
+const notebookApi = acquireNotebookRendererApi("r-notebook-table-renderer");
+
+
+notebookApi.onDidCreateOutput((evt) => {
+    const output = evt.output.data[evt.mimeType];
+    evt.element.innerHTML =
+});

src/client/renderers/viewerRenderer.tsx

@@ -0,0 +1,12 @@
+{
+    "extends": "../tsconfig.base.json",
+    "compilerOptions": {
+        "lib": [
+            "ES2019",
+            "DOM"
+        ],
+        "jsx": "react",
+        "types": ["vscode-notebook-renderer", "webpack-env"],
+        "rootDir": ".",
+    }
+}