Repository files navigation

SeeData Preview 🈸 vscode extension for a genericGrid Data Viewer with many common data formats support, search, sort, filters, grouping, splits, pivot tables, aggregates and basic charts 📊.

TheseData Table Renderers were created to enhance raw data views in Jupyter and customVSCode Notebooks 📚.

Please consider becoming aFan and sponsoring our dev efforts on this and otherRandom Fractals, Inc. code anddata 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.

• ViewCSV, semi-flatXML,GeoJSON andJSONarray data Notebook 📓 cell ⌗ output in HTML table with column sort, number and date formatting
• Incremental Data Table 🈸 rows creation on table scroll for faster display of larger datasets
• Data Summary 📊 Renderer View for a quick overview of loaded dataset
• Flat Data 中 Grid Renderer with column summary headers, filtering, andCSV save options
• Built-inREST Book 📓,Python 🐍,TypeScript Notebook 📓,.NET Interactive Notebook 📓, andPyolite/Pyodide 🐍Notebook Examples 📚
• Geo 🌐 Data Table 🈸 View
• ExperimentalXML Data Table 🈸 View
• Notebook 📓 cell ⌗Text Output scrollable container withcode pre-wrap for quick copy/paste to other places
• UseData Table,Flat Data Grid &Data Summary Notebook 📓 cell renderers withPyolite/Pyodide 🐍 kernel inJupyter NotebooksVSCode web editor onvscode.dev andgithub.dev:

Data Table 🈸 Notebook 📓 cell ⌗ output renderer usesObservable Inputs Table component for fast incremental data display and scrolling of datasets loaded inVSCode Notebooks 📚

You can also use our genericData Table Viewer 📓 notebook to preview public datasets in a browser:

Or use it in vscode withObservable JS Notebook 📓 Inspector 🕵️:

Or load Data Table 🈸 Viewer 📓 withObservable JS vscode extension:

This general purpose Data Table 🈸 Renderer extension also includes Data Summary 📊 Renderer based on modifieldObservable Summary Table component for a quick overview of datasets loaded inVSCode Notebooks 📚

Flat Data Grid renderer is the latest addition to this custom tabular data renderers collection vscode extension. It's based on theFlat UI React data grid component library created by theGitHub Next dev team & used inFlat Data viewer onflatgithub.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 viaData Table: Notebook Examples command fromView -> Command Palette... vscode menu:

1. InstallRunme vscode extension

2. Loadnotebooks/world-lakes.md document

3. Click on▶️ in the markdown text editor context menu toOpen markdown as Runme 📓.

4. Run All ᐅ cells ⌗

5. Click on... in the gutter of thecurl command cell andChange Presentation to one of the Data Table 🈸 renderers orLeaflet 🍃 Map 🗺️ renderer:

1. InstallREST Book 📓 vscode extension

2. LoadChicago Traffic Tracker REST Book 📓

3. Run All ᐅ cells ⌗

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

1. Installvega_datasets andaltair Python libraries viapip orconda:

$ pip install altair vega_datasets

or

$ conda install -c conda-forge altair vega_datasets

2. LoadIris Vega Data Python 🐍 Notebook 📓

3. Run All ᐅ cells ⌗

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

or switch it to Data Summary 🈷️ renderer:

1. InstallTypeScript Notebooks 📚 vscode extension

2. DownloadUSA Airports data files

3. LoadUSA Airports TypeScript Notebook 📓

4. Run All ᐅ cells ⌗ to view localCSV andJSON text data outputs with Data Table 🈸:

Also, try newUSA State Capitals TypesScript Notebook 📓 withGeoJSONnode-fetch andFlat Data Grid renderer from built-inNotebook Examples:

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

2. Install.NET Interactive Notebooks 📚 vscode extension

3. LoadChicago Speed Cameras .NET Interactive Notebook 📓

4. Run All ᐅ cells ⌗:

1. InstallPyodide 🐍 vscode extension

2. LoadChicago Red Light Cameras Pyolite Notebook 📓

3. Run All ᐅ cells ⌗:

1. InstallREST Book 📓 vscode extension

2. LoadWorld 🌐 Rivers REST Book 📓

3. Run All ᐅ cells ⌗

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

1. LoadWorld 🌐 GDP REST Book 📓

2. Run All ᐅ cells ⌗

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

Data Table 🈸 renderer displays data that is not inCSV,GeoJSON orJSONarray 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 extensionpackage.json:

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

See VSCodeExtension Manifest doc for more info.

Recommended extensions for working with Interactive Notebooks 📚, data 🈸, charts 📈, and geo 🗺️ data formats inVSCode:

See#DataTableView 🈸 &#DataTableRenderers tags on ourTwitter 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 generateVSIX Data Table extension package withvsce from our latest for local dev install in VSCode.

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

Open anissue or create a pull request to make this Data Table 🈸 Renderers vscode notebooks 📚 extension work better for all.