Coder Social home page Coder Social logo

Tools to create Tables about vscode-markdown HOT 21 OPEN

yzhang-gh avatar yzhang-gh commented on August 23, 2024 8
Tools to create Tables

from vscode-markdown.

Comments (21)

yzhang-gh avatar yzhang-gh commented on August 23, 2024 5

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

table-iloveimg-compressed

These are completely doable although also require much effort.

from vscode-markdown.

pellejacobs avatar pellejacobs commented on August 23, 2024 2

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.

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024 1

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

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024 1

Caret cannot do that.

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

table-iloveimg-compressed 1

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024 1

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.

from vscode-markdown.

pomdtr avatar pomdtr commented on August 23, 2024 1

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

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024

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"

from vscode-markdown.

Vijay-Nirmal avatar Vijay-Nirmal commented on August 23, 2024

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?

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024

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

from vscode-markdown.

Vijay-Nirmal avatar Vijay-Nirmal commented on August 23, 2024

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

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024

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.

from vscode-markdown.

Vijay-Nirmal avatar Vijay-Nirmal commented on August 23, 2024

Then use

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

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024

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

table-iloveimg-compressed

from vscode-markdown.

Vijay-Nirmal avatar Vijay-Nirmal commented on August 23, 2024

Creating columns?

from vscode-markdown.

Vijay-Nirmal avatar Vijay-Nirmal commented on August 23, 2024

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

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024

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.

from vscode-markdown.

yume-chan avatar yume-chan commented on August 23, 2024

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.

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024

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

from vscode-markdown.

doggy8088 avatar doggy8088 commented on August 23, 2024

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

from vscode-markdown.

yzhang-gh avatar yzhang-gh commented on August 23, 2024

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.

from vscode-markdown.

doggy8088 avatar doggy8088 commented on August 23, 2024

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

from vscode-markdown.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.