Table View

Custom Editor for Class based variable creation

Works with

currently this extenion supports .js .jsx and .ts files

Get Started

To convert rows of variables defined based on a class:

1. Select all the rows that you want to be part of the Table
2. Right click and select 'Create Table at Selection'
3. You will be prompted if you want to switch to Table View

If you don't already have content in the selected area you will be prompted to select a table type. Currently there are three types:

• Export Each - each row is exported as a consts
• Export All: Array - the table is exported as a single array
• Exports All: Object - the table is exported as a single object

When you open table view with a table that has no content you will be greeted with a select class box, the class must exist within the file to be an option. Clicking create will add a new blank item to your table. A table cannot have a class is it doesnt have any rows.

Duplicate, Hide and Delete

when hovering over a row you will see the options box on the left of the row. the options box allows you to 'duplicate' or 'hide' a row of your table. Hiding will disable the row but it will still be visable. The options box for hiden rows allows you to unhide or delete the row. Pressing the x button will trigger a notification to confirm your choice. You can select 'turn off notifications' to stop the approval popup for the session. Hidden rows will not be included in the row count on the left, meaning it can be used as an index reference.

Add

At the bottom of tables the dashed row identifies the region to add a new row. Add values to add a new row. When updating the value of a cell or adding a new row, any values that are not set before the last one that is, will be set to 'undefined'

Selection

By defualt when you click on a cell it will become selected, to start editing hit enter. From here you can press 'Control' to select other cells or 'Shift' to select range. hitting enter will allow you to start editing a cell, hitting enter again will apply that edit to every selected cell. You can use 'Escape' to exit editing. You can also click the heading to select an entire column, followed by 'Control' to select others. You can't select cells across tables and you can't add a new row at the same time as applying a batch update, meaning you can only make multiple selections within pre-exisiting content or in the new row, but not both.

Entry Validation

when you modify a cell value and hit enter it is run through basic validation to ensure it is:

1. A single argument
2. Is self contained
3. Passes 'eval' for variable names and values respectivly

Table Name

For Array and Object based tables the name of the array or object determin the name the appears at the top of the table, for Export Each tables the name is the class name.

Assigned Types

Assigned types in the constructor will be displayed on the right of the column header

Table Type Differences

The Array type is the only type without a name row

Manual setup

paste '//Table View Start // This document was build using Table View, learn more at: https://crimsonincapitals.github.io/' above the start of your list of section and '//Table View End' at the end

When a file is opened with the markers it will be replaced by table view

PSA: the class must be within the file

Development plans

In order of priority

• ✅ adding the ability to convert selected sections with a command to make adding table easier
• ✅ adding different table types
• ✅ adding 'add', 'delete' buttons
• ✅ 'duplicate' row functions
• ✅ 'disable' row function
• ✅ mulit cell editing and pasting
• ✅ column selection
• ✅ adding validation to cells
• resize collumn widths