Vscode-markdown: Tools to create Tables

[Vijay-Nirmal]

• Code snippet to create basic table layout.
  | | | | --- | --- | | | |
  Pressing Tab should loop the cursor in different cells
• Right clicking inside the table should have options to Add New Row At End, Add New Column At End, Add New Row(Creates new Row next to the current row), Add New Column (Creates new Column next to the current Column), Delete Row(Deletes current Row), Delete Column(Deletes current Column).

[yzhang-gh]

Thanks for your suggestion.
It is a good feature. But I would like to think more about the UX. Right clicking to add row/column is kind of... "strange"

[Vijay-Nirmal]

What about Shortcut keys? But I would prefer Right Click because it is more visible to users.
Will VS code API allows you to make a ToolBar?

[yzhang-gh]

vscode API provides very limited support for these customizations. That is why I am hesitant.

[Vijay-Nirmal]

New Method. When the user places the cursor in a specific cell

• Pressing Double Enter creates new Row
• Pressing Double Tab creates new Column
• Pressing Ctrl + Double Enter Deletes current Row
• Pressing Ctrl + Double Tab Deletes current Column

[yzhang-gh]

I'm afraid that we cannot easily detect double enter/tab event… (how do we do when we find the enter key is pressed once? Breaking line immediately? Or waiting for another pressing?)

Thanks again for your suggestion.

And before I find a good way, you can add some simple shortcuts for workaround.

[Vijay-Nirmal]

Then use

• Ctrl + Enter(Tab) for Create
• Shift + Enter(Tab) for Delete

[yzhang-gh]

Let me do some investigations on how other Markdown editors do this

[yzhang-gh]

Caret is a good Markdown editor. It

• creates tables on Enter based on header | abc | abc |
• creates table rows on Enter
• resizes table columns on typing

[Vijay-Nirmal]

Creating columns?

[yzhang-gh]

Caret cannot do that.

Typora has a custom control to change table size and alignment. But it is hard to bring that to vscode.

[Vijay-Nirmal]

What about adding an additional column in header automatically creates a new column in the whole table?
Also, Alignment will be a good addition.

[yzhang-gh]

I agree that adding table body as typing table header is a natural way.
But some tricks are needed to implement this (because of vscode API). So at this time I'm not motivated to do it 😓.

As for the alignment, choose :---, ---: and :---: in the second line.

[yume-chan]

I think you can use CodeLens and CodeAction to provide these actions.

Put the cursor in a cell, then the CodeLens provides align left, align center, align right, insert column left, insert column right commands, while the CodeAction provides insert row above and insert row below commands.

[yzhang-gh]

Of course you can do that. But the problem is it will add too many "buttons" in the UI making it looks bad.

[doggy8088]

@neilsustc Is it possible to add Convert tabular data to tables feature? So that I can easily copy Excel data into a Markdown table.

[yzhang-gh]

Accessing clipboard is a big problem. More info here

The VSCode API doesn't provide methods to access the clipboard. There are several open issues regarding this issue (217, 4972, lots of duplicates), but it doesn't look like Microsoft has plans to implement an API for the clipboard. This could be an issue as there are several issues noted by users with the workaround libraries recommended by the VSCode team.

[doggy8088]

@neilsustc Maybe you can check this out: Markdown Shortcuts. It do have a Convert tabular data to tables feature in it.

[yzhang-gh]

OK, I understand now. (I thought you meaned to paste Markdown table directly from Excel data)

I opened another issue for it. You can use Markdown Shortcuts as a complement before that feature is added.

[pellejacobs]

In case this feature is still being considered, Atom has an amazing package that is very intuitive to use: https://atom.io/packages/markdown-table-editor.

Shotcuts like tab to jump to a next cell are really useful.

[yzhang-gh]

Thanks for the information. This is similar to Caret I mentioned before

Caret is a good Markdown editor. It

• creates tables on Enter based on header | abc | abc |
• creates table rows on Enter
• [added] goes to next cell on Tab
• resizes table columns on typing/Tab

These are completely doable although also require much effort.

[pomdtr]

This extension kind of does the job : https://marketplace.visualstudio.com/items?itemName=JayFiDev.tablegenerator&ssr=false#review-details