Refined-github: Improve <table> input in the comment field

[fregante]

There are many ways to simplify creation of tables. This is the simplest UI I've seen but I'm open to suggestions. It's only 2 clicks to add a table.

1. Click on "add table" button (dropdown opens)
2. Click the desired table size

The grid is too big for us, but a 5x5 would be plenty. No need to get fancy with alignment options and headers; those can be more easily added by the user if desired.

Example table usage: https://github.com/sindresorhus/refined-github/issues/2874

Output would be a simplified HTML5 table markup:

<table>
    <tr>
        <td> A1
        <td> B1
    <tr>
        <td> A2
        <td> B2
</table>

A1	B1
A2	B2

[jerone]

GFM can be used instead of HTML5: https://github.github.com/gfm/#tables-extension- & https://help.github.com/en/github/writing-on-github/organizing-information-with-tables

[fregante]

Indeed. The problem with those tables is that they’re unreadable unless there’s a only a couple of words in each cell. The moment a table row “wraps” good luck finding the separator for the next cell (especially here since there’s no syntax highlighting)

HTML tables however make it “difficult“ to use markdown content in each cell:

<table><tr><td> *test*

*test*

Forcing you to wrap (if you know this)

<table><tr><td> 

*test*

*test*

and as you can see this also creates a <p>

[fregante]

I think, yeah, while Markdown tables are unreadable they’re easier to use and probably preferred in this case

[esakki-selvaraj]

Can I work on this? and also don't you think entering numbers of columns and rows will be more efficient than dragging and it is also not restricted to any size??

[fregante]

entering numbers of columns and rows will be more efficient

No, because that requires at least 4 clicks and 2 key presses, while this is only 2 clicks (no dragging, just a click)

not restricted to any size??

Nobody needs 100 columns in a GitHub comment; rows can be trivially added by copy-pasting the result as many times as needed, if you need more than 7 rows.

Can I work on this?

You can, but please keep it as simple as possible, probably around 50 lines or less.

You can copy the DOM from the canned replies (but the dropdown content would of course be like in the very first gif):

[esakki-selvaraj]

Sure I will keep it simple..

[cheap-glitch]

This looks fun, imma try it too.