Skip to content

Data Table 🈸 , Flat Data Grid δΈ­ & Data Summary 🈷️ Renderers for VSCode Notebook πŸ““ Cell βŒ— Data Outputs

License

Notifications You must be signed in to change notification settings

RandomFractals/vscode-data-table

Repository files navigation

vscode-data-table

Apache-2.0 License Version Installs Downloads https://ko-fi.com/dataPixy


Data Table Renderers for VSCode Notebooks πŸ“š

See Data Preview 🈸 vscode extension for a generic Grid Data Viewer with many common data formats support, search, sort, filters, grouping, splits, pivot tables, aggregates and basic charts πŸ“Š.

Support

These Data Table Renderers were created to enhance raw data views in Jupyter and custom VSCode Notebooks πŸ“š.

Please consider becoming a Fan and sponsoring our dev efforts on this and other Random Fractals, Inc. code and data viz extensions if you find them useful, educational, or enhancing your daily dataViz/dev code workflows and exploratory data analysis:

β˜•οΈ https://ko-fi.com/dataPixy πŸ’– https://github.com/sponsors/RandomFractals

Data Table 🈸 Renderers

Data Table Renderers is a collection of custom tabular data renderers for vscode notebooks.

Data Table 🈸 Renderers

🈸 Features

Flat Data Grid δΈ­ in browser

Data Table 🈸 Renderer View

Data Table 🈸 Notebook πŸ““ cell βŒ— output renderer uses Observable Inputs Table component for fast incremental data display and scrolling of datasets loaded in VSCode Notebooks πŸ“š

Data Table 🈸 Renderer View

Observable Data Table 🈸 Viewer πŸ““

You can also use our generic Data Table Viewer πŸ““ notebook to preview public datasets in a browser:

Observable Data Table 🈸 Viewer πŸ““

Or use it in vscode with Observable JS Notebook πŸ““ Inspector πŸ•΅οΈ:

Observable JS Data Table 🈸 Viewer πŸ““ Inspector πŸ•΅οΈ

Or load Data Table 🈸 Viewer πŸ““ with Observable JS vscode extension:

Observable JS Data Table 🈸 Viewer πŸ““

Data Summary πŸ“Š Renderer View

This general purpose Data Table 🈸 Renderer extension also includes Data Summary πŸ“Š Renderer based on modifield Observable Summary Table component for a quick overview of datasets loaded in VSCode Notebooks πŸ“š

Data Summary πŸ“Š Renderer View

Flat Data δΈ­ Grid Renderer

Flat Data Grid renderer is the latest addition to this custom tabular data renderers collection vscode extension. It's based on the Flat UI React data grid component library created by the GitHub Next dev team & used in Flat Data viewer on flatgithub.com.

Flat Data δΈ­ Grid Renderer Example

🈸 Examples

Data Table 🈸 for Notebooks πŸ“š extension v1.6.0 and up ships with built-in Notebook examples. You can access provided Notebook Examples listed below via Data Table: Notebook Examples command from View -> Command Palette... vscode menu:

Data Table 🈸 Notebook Examples

Runme Notebook Example

  1. Install Runme vscode extension

  2. Load notebooks/world-lakes.md document

  3. Click on ▢️ in the markdown text editor context menu to Open markdown as Runme πŸ““.

  4. Run All ᐅ cells βŒ—

  5. Click on ... in the gutter of the curl command cell and Change Presentation to one of the Data Table 🈸 renderers or Leaflet πŸƒ Map πŸ—ΊοΈ renderer:

World Lakes Runme Notebook πŸ““

REST Book Example

  1. Install REST Book πŸ““ vscode extension

  2. Load Chicago Traffic Tracker REST Book πŸ““

  3. Run All ᐅ cells βŒ—

  4. Click on ... in the gutter of GET data output and change it to Data Table 🈸 renderer:

Chicago Traffic Data REST Book πŸ““

Python Notebook Example

  1. Install vega_datasets and altair Python libraries via pip or conda:
$ pip install altair vega_datasets

or

$ conda install -c conda-forge altair vega_datasets
  1. Load Iris Vega Data Python 🐍 Notebook πŸ““

  2. Run All ᐅ cells βŒ—

  3. Click on ... in the gutter of iris data output and change it to Data Table 🈸 renderer:

Iris Vega Data Table 🈸 View

or switch it to Data Summary 🈷️ renderer:

Iris Vega Data Table 🈷️ View

TypeScript Notebook Example

  1. Install TypeScript Notebooks πŸ“š vscode extension

  2. Download USA Airports data files

  3. Load USA Airports TypeScript Notebook πŸ““

  4. Run All ᐅ cells βŒ— to view local CSV and JSON text data outputs with Data Table 🈸:

USA Airports TypeScript Notebook πŸ““

Also, try new USA State Capitals TypesScript Notebook πŸ““ with GeoJSON node-fetch and Flat Data Grid renderer from built-in Notebook Examples:

USA State Capitals TypeScript Notebook πŸ““

.NET Interactive Notebook Example

  1. Install .NET Install Tool for Extension Authors vscode extension

  2. Install .NET Interactive Notebooks πŸ“š vscode extension

  3. Load Chicago Speed Cameras .NET Interactive Notebook πŸ““

  4. Run All ᐅ cells βŒ—:

Chicago Speed Cameras .NET Interactive Notebook πŸ““

Pyolite Notebook Example

  1. Install Pyodide 🐍 vscode extension

  2. Load Chicago Red Light Cameras Pyolite Notebook πŸ““

  3. Run All ᐅ cells βŒ—:

Chicago Red Light Cameras Pyolite Notebook πŸ““

Geo 🌐 Data Table 🈸 View

  1. Install REST Book πŸ““ vscode extension

  2. Load World 🌐 Rivers REST Book πŸ““

  3. Run All ᐅ cells βŒ—

  4. Click on ... in the gutter of GET data output and change it to Data Table 🈸 for geo table view:

World 🌐 Rivers Geo Data REST Book πŸ““

XML Data Table 🈸 View

  1. Load World 🌐 GDP REST Book πŸ““

  2. Run All ᐅ cells βŒ—

  3. Click on ... in the gutter of GET data output and change it to Data Table 🈸 for XML data table view:

World 🌐 GDP Data REST Book πŸ““

Text Oputput View

Data Table 🈸 renderer displays data that is not in CSV, GeoJSON or JSON array data format in a scrollable text container:

Text Output Notebook πŸ““ View

Data Table Renderers Extension Dependency

You can add our Data Table 🈸 Notebook πŸ““ Renderers dependency to your custom VSCode notebook kernels to enable users of your custom notebooks to view data with our Data Table renderers by declaring extension dependency in your VSCode extension package.json:

"extensionDependencies": [
		"RandomFractalsInc.vscode-data-table"
	],

See VSCode Extension Manifest doc for more info.

Recommended Extensions

Recommended extensions for working with Interactive Notebooks πŸ“š, data 🈸, charts πŸ“ˆ, and geo πŸ—ΊοΈ data formats in VSCode:

Extension Description
Data Preivew 🈸 Data Preview 🈸 extension for importing πŸ“€ viewing πŸ”Ž slicing πŸ”ͺ dicing 🎲 charting πŸ“Š & exporting πŸ“₯ large JSON array/config, YAML, Apache Arrow, Avro & Excel data files
Geo Data Viewer πŸ—ΊοΈ kepler.gl Geo Data Analytics tool to gen. some snazzy πŸ—ΊοΈs w/0 Py 🐍 pyWidgets βš™οΈ pandas 🐼 or react βš›οΈ
Vega Viewer πŸ“ˆ Provides Interactive Preview of Vega & Vega-Lite maps πŸ—ΊοΈ & graphs πŸ“ˆ
Leaflet πŸƒ Map πŸ—ΊοΈ Leaflet πŸƒ Map πŸ—ΊοΈ for Notebook πŸ““ cell βŒ— data outputs
JS Notebook πŸ““ Inspector πŸ•΅οΈ Provides Interactive Preview of Observable JS Notebooks πŸ“š, Notebook πŸ““ nodes βŽ‡ & cells βŒ— source code
Observable JS Observable Notebooks πŸ“š Interpreter with VSCode Notebook view support, Observable js and md code outlines and previews
Runme ▢️ Runme executes commands and code blocks from markdown documents, and provides direct CLI integration and multi-language support in Visual Studio Code markdown text editor and markdown-based notebooks.
DeltaXML XPath Notebook XPath 3.1 Notebook πŸ““ for Visual Studio Code

Dev Log

See #DataTableView 🈸 & #DataTableRenderers tags on our Twitter feed for the latest & greatest updates on this vscode extension & what's next in store for new data tools in vscode.

Dev Build

$ git clone https://github.com/RandomFractals/vscode-data-table
$ cd vscode-data-table
$ npm install
$ npm run compile
$ code .

F5 to launch Data Table extension VSCode debug session.

||

vscode-data-table>vsce package

to generate VSIX Data Table extension package with vsce from our latest for local dev install in VSCode.

Contributions

Any and all test, code or feedback contributions are welcome.

Open an issue or create a pull request to make this Data Table 🈸 Renderers vscode notebooks πŸ“š extension work better for all.

Backers

support me on ko-fi.com