TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Show HN: A grid based editor for Markdown tables, CSV, Gherkin tables, HTML

9 pointsby eviltesterover 3 years ago

2 comments

eviltesterover 3 years ago
I wanted to improve my JavaScript programming, and learn AG Grid at the same time so I tried to think of an application which had a data grid front and center, but met needs that I had. So I built a Markdown table code generator.<p>I&#x27;ve always hated building tables for Markdown so this was helpful in intial prototype stage.<p>I added CSV because AG Grid has an exportDataAsCSV function so it was a &#x27;no cost&#x27; feature.<p>The parsing code for importing the various formats is pretty minimal so there will be many edge cases that don&#x27;t work.<p>Because everything is based around the same data structures internally adding new import and export formats was fairly simple.<p>I haven&#x27;t added any tests yet because I was incrementally building it and learning to structure JavaScript at the same time.<p>It is pure JavaScript with no frameworks, simply because I&#x27;m concentrating on learning JavaScript at the moment and there is no build system.<p>Looking at the code now, after a 4 month gap I can see that I didn&#x27;t even know about JavaScript modules and imports at the time I started so the code is just added directly into the main index through a script element include.<p>It isn&#x27;t the most robust application but it was an interesting starting point.<p>My end goal with it was to add data generation capabilities, and have it all run in the browser, but I haven&#x27;t got to that point yet. My plan is to try to do this by adding a &#x27;type&#x27; to each column and then using Faker to generate the data <a href="https:&#x2F;&#x2F;github.com&#x2F;marak&#x2F;Faker.js&#x2F;" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;marak&#x2F;Faker.js&#x2F;</a><p>Thought it might be useful if anyone is learning JavaScript and wants to see a simple application.<p>Code is here:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;eviltester&#x2F;grid-table-editor" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;eviltester&#x2F;grid-table-editor</a><p>The readme file in the source has links to other similar apps which have been around for much longer if anyone needs an inbrowser table editor.
评论 #28921545 未加载
eviltesterover 3 years ago
I&#x27;ve updated this to use RandExp<p><a href="http:&#x2F;&#x2F;fent.github.io&#x2F;randexp.js&#x2F;" rel="nofollow">http:&#x2F;&#x2F;fent.github.io&#x2F;randexp.js&#x2F;</a><p>And Faker.js<p><a href="http:&#x2F;&#x2F;marak.github.io&#x2F;faker.js&#x2F;" rel="nofollow">http:&#x2F;&#x2F;marak.github.io&#x2F;faker.js&#x2F;</a><p>To allow populating the grid with random data using a simple data generation spec, documented the spec in the readme.md<p><a href="https:&#x2F;&#x2F;github.com&#x2F;eviltester&#x2F;grid-table-editor#to-generate-test-data" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;eviltester&#x2F;grid-table-editor#to-generate-...</a><p>e.g.<p>```<p>name<p>faker.fake {{name.lastName}}, {{name.firstName}}<p>desc<p>faker.lorem.paragraph<p>collects<p>faker.hacker.noun<p>prefers<p>(Connie|Bob)<p>```