How to create a simple table generator for emmet? - emmet

Question

I want to create an emmet generator that behaves similar to the loremX but to create a html table.
Right now, what I have is simple table snippet that creates one column:
{
"html": {
"snippets": {
"ftable": "table>(thead>tr>th)+(tbody>tr>td)"
}
}
}
So whenever I type ftable I'll get:
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
But I want more. I'd like to do something like ftable5:
And get 5 th's/td's instead.
So the emmet code for this case should be:
table>(thead>tr>th*5)+(tbody>tr>td*5)
I don't think I can do that with a simple declaration on the snipper. I suppose I should create a generator for that like the one for loremX, but I have 0 clue on how to even begin, and honestly I couldn't find much information around. It actually surprises me that such a thing doesn't exist yet (or if it does, let me know), as to generate a HTML table you'd still need to type that much code.

Answer 1

I guess your millage may very depending on the tools at hand, but as long as vscode is concerned, it has tabstop options https://code.visualstudio.com/docs/editor/userdefinedsnippets#_snippet-syntax
Let's say your snippet definition looks like the one bellow (notice the $1 placeholder)
"table": {
"scope": "html",
"prefix": "table-n",
"description": "Generates table with n columns",
"body": "table>(thead>tr>th*$1)(tbody>tr>td*$1)"
}
You would typically
type the snippet prefix like table-n
click Enter to select the snippet
the snippet is filled in
cursor for the placeholder blinks
type the number of expected columns
click Tab to trigger the emmet generation
the end result should look like this when $1 is say 3
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>