load and set basic data table view and headers styles (#46)

Author: RandomFractals

src/renderer/index.ts

@@ -4,7 +4,7 @@ import type {
 } 
 from 'vscode-notebook-renderer';
 import errorOverlay from 'vscode-notebook-error-overlay';
-import { render } from './render';
+import {render} from './render';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 declare const __webpack_relative_entrypoint_to_root__: string;
@@ -19,6 +19,7 @@ export const activate: ActivationFunction = context => {
     renderOutputItem(outputItem: OutputItem, element: HTMLElement) {
       errorOverlay.wrap(element, () => {
         const cellOutputContainer: HTMLDivElement = document.createElement('div');
+        cellOutputContainer.className = 'data-table';
         element.appendChild(cellOutputContainer);
         render({
           container: cellOutputContainer,

src/renderer/render.ts

@@ -34,6 +34,9 @@ export function render(output: IRenderInfo) {
       break;
   }
 
+  // add data table view styles
+  addStyles(document);
+
   if (Array.isArray(data)) {
     // create data table view
     const table = inputs.table(data, {
@@ -84,3 +87,24 @@ if (module.hot) {
 
   return 0;
 }
+
+function addStyles(document: HTMLDocument): HTMLStyleElement {
+  const styles: HTMLStyleElement = document.createElement('style');
+  document.head.appendChild(styles);
+  styles.textContent = `
+  .data-table {
+    max-width: 100%;
+    background-color: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
+  }
+
+  .data-table form {
+    margin: 0px !important;
+  }
+
+  .data-table form table thead th {
+    background-color: var(--vscode-editor-background) !important;
+  }
+  `;
+  return styles;
+}

src/renderer/style.css

@@ -1,4 +1,13 @@
 .data-table {
   max-width: 100%;
-  overflow-y: scroll;
+  background-color: var(--vscode-editor-background);
+  border: 1px solid var(--vscode-panel-border);
+}
+
+.data-table form {
+  margin: 0px !important;
+}
+
+.data-table form table thead th {
+  background-color: var(--vscode-editor-background) !important;
 }