Data Table đ¸ , Flat Data Grid ä¸ & Data Summary đˇī¸ Renderers for VSCode Notebook đ Cell â Data Outputs
APACHE-2.0 License
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 đ.
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 is a collection of custom tabular data renderers for vscode notebooks.
CSV
, semi-flat XML
, GeoJSON
and JSON
array data Notebook đ cell â output in HTML table with column sort, number and date formattingCSV
save optionsData Table đ¸ Notebook đ cell â output renderer uses Observable Inputs Table component for fast incremental data display and scrolling of datasets loaded in VSCode Notebooks đ
You can also use our generic Data Table Viewer đ notebook to preview public datasets in a browser:
Or use it in vscode with Observable JS Notebook đ Inspector đĩī¸:
Or load Data Table đ¸ Viewer đ with Observable JS vscode extension:
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 đ
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.
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:
Install Runme vscode extension
Load notebooks/world-lakes.md document
Click on âļī¸ in the markdown text editor context menu to Open markdown as Runme
đ.
Run All á cells â
Click on ...
in the gutter of the curl
command cell and Change Presentation
to one of the Data Table đ¸ renderers or Leaflet đ Map đēī¸ renderer:
Install REST Book đ vscode extension
Load Chicago Traffic Tracker REST Book đ
Run All á cells â
Click on ...
in the gutter of GET
data output and change it to Data Table đ¸ renderer:
vega_datasets
and altair
Python libraries via pip
or conda
:$ pip install altair vega_datasets
or
$ conda install -c conda-forge altair vega_datasets
Load Iris Vega Data Python đ Notebook đ
Run All á cells â
Click on ...
in the gutter of iris data output and change it to Data Table đ¸ renderer:
or switch it to Data Summary đˇī¸ renderer:
Install TypeScript Notebooks đ vscode extension
Download USA Airports data files
Load USA Airports TypeScript Notebook đ
Run All á
cells â to view local CSV
and JSON
text data outputs with Data Table đ¸:
Also, try new USA State Capitals TypesScript Notebook đ with GeoJSON
node-fetch and Flat Data Grid renderer from built-in Notebook Examples:
Install .NET Install Tool for Extension Authors vscode extension
Install .NET Interactive Notebooks đ vscode extension
Load Chicago Speed Cameras .NET Interactive Notebook đ
Run All á cells â:
Install Pyodide đ vscode extension
Load Chicago Red Light Cameras Pyolite Notebook đ
Run All á cells â:
Install REST Book đ vscode extension
Load World đ Rivers REST Book đ
Run All á cells â
Click on ...
in the gutter of GET
data output and change it to Data Table đ¸ for geo table view:
Load World đ GDP REST Book đ
Run All á cells â
Click on ...
in the gutter of GET
data output and change it to Data Table đ¸ for XML data table view:
Data Table đ¸ renderer displays data that is not in CSV
, GeoJSON
or JSON
array data format in a scrollable text container:
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 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 |
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.
$ 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.
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.