Finish datagrid logic

packages/csvviewer/src/table.ts

@@ -58,20 +58,22 @@ class CSVModel extends DataModel {
   }
 
   columnCount(region: DataModel.ColumnRegion): number {
-    return region === 'body' ?  this._data.columns.length : 1;
+    let count = this._data.columns ? this._data.columns.length : 1;
+    return region === 'body' ? count : 1;
   }
 
   data(region: DataModel.CellRegion, row: number, column: number): any {
+    let colName = this._data.columns ? this._data.columns[column] : '';
     if (region === 'row-header') {
-      return `${row}`;
+      return `${row + 1}`;
     }
     if (region === 'column-header') {
-      return `${this._data[column]}`;
+      return `${colName}`;
     }
     if (region === 'corner-header') {
       return '';
     }
-    return String(this._data[row][column]);
+    return String(this._data[row][colName]);
   }
 
   /**

packages/csvviewer/src/widget.ts

@@ -44,6 +44,11 @@ const CSV_CLASS = 'jp-CSVViewer';
  */
 const CSV_VIEWER_CLASS = 'jp-CSVViewer-toolbar';
 
+/**
+ * The class name added to a CSV viewer datagrid.
+ */
+const CSV_GRID_CLASS = 'jp-CSVViewer-grid';
+
 
 const RENDER_TIMEOUT = 1000;
 
@@ -67,6 +72,7 @@ class CSVViewer extends Widget {
 
     this._model = new CSVModel({ content: context.model.toString() });
     this._grid = new DataGrid();
+    this._grid.addClass(CSV_GRID_CLASS);
     this._grid.model = this._model;
 
     this._toolbar = new CSVToolbar();

packages/csvviewer/style/index.css

@@ -47,27 +47,13 @@
     margin-bottom: 2px;
 }
 
+
 .jp-CSVToolbar .jp-CSVToolbar-dropdown select.jp-mod-styled {
   font-size: var(--jp-ui-font-size1);
 }
 
-.jp-CSVTable {
-  flex: 1 1 auto;
-  overflow: auto;
-}
 
-.jp-CSVTable.jp-RenderedHTMLCommon table {
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
-
-.jp-CSVViewer-warning {
-  flex: 0 0 auto;
-  padding-left: 8px;
+.jp-CSVViewer-grid {
+  flex: 1 1 auto;
   overflow: auto;
-  color: var(--jp-warn-color1);
-  line-height: 1.5;
-  font-size: var(--jp-ui-font-size1);
-  background: transparent;
 }

packages/theming/style/index.css

@@ -23,7 +23,7 @@ body {
 @import './images.css';
 @import './icons.css';
 @import './menus.css';
-@import './scrollbars.css';
+@import './scrollbar.css';
 @import './tabs.css';
 
 

packages/theming/style/scrollbar.css

@@ -77,20 +77,20 @@
 
 
 .p-ScrollBar[data-orientation='horizontal'] .p-ScrollBar-button[data-action='decrement'] {
-  background-image: url(../images/caretleft.png);
+  background-image: url(./images/caretleft.png);
 }
 
 
 .p-ScrollBar[data-orientation='horizontal'] .p-ScrollBar-button[data-action='increment'] {
-  background-image: url(../images/caretright.png);
+  background-image: url(./images/caretright.png);
 }
 
 
 .p-ScrollBar[data-orientation='vertical'] .p-ScrollBar-button[data-action='decrement'] {
-  background-image: url(../images/caretup.png);
+  background-image: url(./images/caretup.png);
 }
 
 
 .p-ScrollBar[data-orientation='vertical'] .p-ScrollBar-button[data-action='increment'] {
-  background-image: url(../images/caretdown.png);
+  background-image: url(./images/caretdown.png);
 }