Display any CSV file as a searchable, filterable, pretty HTML table

https://github.com/derekeder/csv-to-html-table

268•indigodaddy•8mo ago

I combined this with a simple API to update a CSV file using Deno/deno-csv library, allowing an Ansible job to easily update a CSV file via the API with Ansible URI module, and then have that same CSV file viewable/downloadable in a simple and easy/dashboardy way (with CSV-to-html-table). Copilot created the Deno/deno-csv CSV API code and then with a little back and forth I added static website functionality (to serve the CSV table), and I had a /view and a /update route. I'm just a sysadmin but I love piecing together stuff like this. Thanks Derek!

Comments

promiseofbeans•8mo ago

How does this handle CSV's with no headers, or data that's offset from the top? (e.g. a row for title and subtitle, before the table headers & data)

brothrock•8mo ago

Great question. If it can’t skip lines, I’m out.

nxpnsv•8mo ago

or like contribute...

mokanfar•8mo ago

That is classified as an edge use-case. Realistically speaking I don't think the point of this hastily whipped up demo was to be a replacement for google sheets.

Bimos•8mo ago

Yeah but since it claims "any CSV file", and CSV files are widely known to be variate, I didn't expect it fails to work on edge use-cases.

hk1337•8mo ago

I was thinking of it as competition for GitHub’s CSV reader in repositories.

indigodaddy•8mo ago

neilv•8mo ago

Obligatory suggestion to developers who use this: Don't copy&paste reuse that custom formatting code from the demo for arbitrary CSV, since the code inserts arbitrary strings into both HTML attribute value and CDATA contexts, without escaping special characters.

    return "<a href='" + link + "' target='_blank'>" + link + "</a>";

rafaelgoncalves•8mo ago

the creator even acknowledged the risk in the sample... but i do not understand why not create a more secure sample first time? since people will absolutely copy to test.

indigodaddy•8mo ago

Dang, I'm not the author, so do not think this should be a show HN, at least not with me remaining as the submitter. I did not submit it as such, and then later an admin edited it to a show HN, and put my comment (that I added for context later for how I made use of the tool) as the description. That blurb currently as the description should probably be returned to a plain comment. All I did was stumble upon Derek's repo when I was looking for something to stitch together for a particular use-case.

gnabgib•8mo ago

[flagged]

indigodaddy•8mo ago

Eh? I'm not Derek.

dang•8mo ago

Just in case it's unclear: when we see someone submitting their own work, we often put Show HN in the title. But occasionally we misidentify the submitter as the author and do this incorrectly. That's what happened here. It's fixed now!

nurettin•8mo ago

The confusion arises from your paragraph explaining what you made, then linking to a repo that contains the component you used. Why don't you show the thing that you made? An Ansible job sounds interesting.

tomhow•8mo ago

OK, that was my screwup, I'm sorry.

I saw your comment and didn't quite clock that you're not the author. Sorry about that. We've reversed the changes to make it a normal post again.

indigodaddy•8mo ago

As nurettin said, I think I (unintentionally) made it too easy to connote that I might have been the author. I should have been more clear about it.

pphysch•8mo ago

I was wondering why this wasn't expressed as a webcomponent, then saw it's a decade old. Nice.

vasvir•8mo ago

Ha I didn't notice the date but I did notice that was based on datatables.net a very cool library.

strunz•8mo ago

Love this idea, wish I could pipe a CSV right to the tool though!

stevenpetryk•8mo ago

Could be easy enough to make a CLI tool that opens a browser to an HTML file in /tmp

sn0n•8mo ago

This is amazing!! I finally have an excuse to use spreadsheets again! I've been avoiding them for years, Legitimately.

dddw•8mo ago

What did you use instead?

65•8mo ago

Pretty cool. I'm wondering how large of a CSV you could feasibly load with this. I always have to manually open CSVs in text editors if they're too large for Excel, so if this is a better UI for it that can handle large files I will definitely use this.

indigodaddy•8mo ago

Perhaps setting paging to true would improve the handling of a very large CSV

joseangel_sc•8mo ago

i’m gonna test this on a 52k rows document, very curious if it can handle that

indigodaddy•8mo ago

Perhaps turn paging on in the config for a very large CSV?

hermitcrab•8mo ago

52k rows is a large CSV? BWAHAHAHA. I guess it is all relative.

34f34f3•8mo ago

Alternatively, feed your spreadsheet file (CSV, XLS, whatever) to Google Sheets and then select File > Download > Web Page (.html) – especially when you have a ton of formatting (font, colors, borders, whatnot)... the result looks great!

bryanhogan•8mo ago

But does this include options for sorting and filtering?

nathell•8mo ago

Alternatively, use visidata (https://www.visidata.org/) in the terminal. Supports xls/xlsx too! One of my favourite tools for terminal data exploration (along with jq, fx, and jet).

ThrowawayTestr•8mo ago

Does that do the Excel thing where it crushes all the numbers to exponents?

6510•8mo ago

I wrote this long ago. Looking at it I'm really a master spaghetti coder.

https://jsfiddle.net/ypfr98su/5/

Propelloni•8mo ago

Spaghetti code is underrated.

magesh_magi1•8mo ago

Ha, I'm working on a similar utility with some extra features also enabling WASM that might help in case of larger files.

szszrk•8mo ago

I know PowerShell is surrounded with polarized opinions, but that's one of the things it's amazing for. Import-Csv with Out-GridView gives nice results and it can be just a one-liner wrote from memory.

Just a reminder that it's possible and often built into our work environments, while we pretend it's not there.

rahimnathwani•8mo ago

I don't use Windows as my daily driver, so I had no idea Import-Csv existed until last week, when I pasted a shell command that I had run on my Mac, and asked it to write something that would work for Windows (for my colleague).

I hadn't understood how different Powershell is, compared with cmd.exe of old.

razakel•8mo ago

They should really have called it PowerScript. It's the full blown .NET ecosystem.

bblb•8mo ago

PowerShell is the first thing I install on my Linux workstation/jump host because of those built-in Import/Export/Convertto goodies. Import-Excel module works on Linux too. Too bad the Invoke-WebRequest uses basic parsing only, it used to parse the actual DOM with JS and all, but I guess that was a security issue.

majkinetor•8mo ago

Nah, that required IE which isn't available on Linux.

porridgeraisin•8mo ago

Does it write UTF16 on linux too? That's my biggest gripe with powershell redirections and Out-File's on windows.

greenmartian•8mo ago

In `pwsh` (that's the xplat version of powershell, v7+), default encoding for Out-File is `utf8noBOM`.

MstWntd•8mo ago

install tabview?..

jayd16•8mo ago

Pwsh is actually pretty good.

My hottest of takes...Powershell is the easiest way to write consistent scripts across the big three OSes.

tailspin2019•8mo ago

I have a simultaneous respect for the power and capabilities of PowerShell while also for some reason harbouring a very strong loathing of it. I just viscerally dislike it. Maybe it’s the syntax… or perhaps just some latent decades-old Windows admin trauma…

szszrk•8mo ago

I guess there is consensus that powershell is good. Unix people may still find in cumbersome. For windows-primary people maybe it came too late? For a longer while it wasn't even integral part of Windows.

But honestly often when I talk to people they don't know the basics of cmd.exe, even if they worked with it for years. Like... surprised that it has pipes :) And apparently it's been there since DOS 2.0 (early 1980's).

tailspin2019•8mo ago

Good point about it coming too late. I grew up using Windows pre-powershell and then had switched to Macs by the time Powershell got a lot of improvements and became a lot more worthy of attention!

bryanhogan•8mo ago

I was actually looking for something like this! It seems to be a bit old though, does it work well? Also I can't seem to filter columns?

Are there other tools like it?

Got a collection of larger CSV files that I wanted to include on a Astro Starlight project of mine.

waltbosz•8mo ago

> I'm just a sysadmin but I love piecing together stuff like this.

I'm a developer and piecing stuff together is my favorite part of the job. The joy is in the design, the actual coding is just a means to an end.

I've written similar browser tools for handing tabular data. One neat thing I've learned is if you copy and paste from Excel into an html `textarea`, you get the data as tab delimited text. Add a `paste` event handler to the `textarea` then parse the data in code.

datax2•8mo ago

Not for nothing, you could do this with Streamlit and 30 seconds of vibe coding.

you can also use Kanaries if you are looking for some more detailed "Tableau" like analytics platform.

indigodaddy•8mo ago

Why would you want to vibe code a whole python server setup when someone already made this that you can just plug and play? Id understand if you need a lot of different features, but to me this is neat and ticks a lot of boxes.

hk1337•8mo ago

I kind of want to fork it and work out the jQuery dependency.

*EDIT* Would probably be easier to start a new one and maybe use PapaParse to parse the CSV.

catapart•8mo ago

My first thought too. Though, I'll probably write it as a custom element so that I can pass a csv path to it via an attribute. Seems like a really handy thing to have, and I'm already working on a similar type of thing for pdfs. Definitely in the 'everything is a nail' phase of building a library of custom elements.

hk1337•8mo ago

I was thinking just a table element with data attributes and maybe a class name.

catapart•8mo ago

For sure! I was just thinking of wrapping that table with an element so I don't have to call "load" or "init" or whatever from a separate script. I'm a big fan of html that works well and tables are pretty awesome for tabular data.

indigodaddy•8mo ago

I think this fork actually uses papaparse. I actually thought it was slightly less attractive though and also it did not have the download csv capability:

https://github.com/pavelsr/csv-to-tablesorter

mattsouth•8mo ago

Nice. Its interesting to me that searching and filtering isnt something that http://csvbase.com has.

indigodaddy•8mo ago

I looked at that too for my use case. It was super cool, but I needed something to utilize a CSV that I did not have to initially upload through webui, and also wanted it to be downloadable, so this hit those checkboxes for me.

RUnconcerned•8mo ago

This is neat. I had a recent need to do something similar, but ended up using Grist CSV Viewer[1], which I think is a bit more feature complete. I had ChatGPT create an HTML file that would let me paste the CSV instead of loading a specific file and it worked pretty well while being more convenient than loading the CSV into Google Sheets or whatever.

[1] https://www.getgrist.com/csv-viewer/

hilti•8mo ago

Thank you for sharing this! I‘m using pivottable.js but I noticed that it‘s sometimes hard to understand by my colleagues. Will Grist definitely give try.

CommenterPerson•8mo ago

Nice work! Immediately usable.

nashashmi•8mo ago

Custom formatting should be called js column wrapper.

I thought custom formatting would be changing colors and widths text wrappings.

And maybe add a head wrapper?

1vuio0pswjnm7•8mo ago

I use sqlite3 for this task because I use a text-only browser to read HTML. It has no Javascript engine. The HTML tables prooduced by sqlite3 do not require Javascript.

schwartzworld•8mo ago

That was my thought. Sqlite3+datasets works great for this

davidcollantes•8mo ago

If the author is here, I would love a JSON to pretty HTML table too (with all the features this one has)!

cbeach•8mo ago

Datasette (open source project by @simonw, 10K stars on GitHub) excels at this: https://datasette.io/

Plugins like datasette-extract (AI powered data extraction) are amazing: https://www.youtube.com/watch?v=g3NtJatmQR0

indigodaddy•8mo ago

Datasette isn't really comparable to this. This is just about a simple, clean, webview of a CSV. Datasette isn't exactly that, and for sure not out of the box like that nor as simple to plug and play for this exact use case. Datasette is obviously awesome and very powerful, it's just a different tool and don't think it overlaps much with most use cases of this particular project.

ederderek•8mo ago

hey all - I'm the creator of this tool. very cool to see a project I wrote 10 years ago get some recognition. Sorry about the jQuery. Pull Requests welcome!

o1nder•8mo ago

Loved the tool. Modified it so you can drag and drop CSV files in the browser instead of having to pull and run locally, and of course credited you. Hosted on Github Pages here (https://thomasinch.github.io/csv-to-html-table/), but made it a single index.html so it can be downloaded and used offline. Cheers!

Voxtral Realtime 4B Pure C Implementation

I Was Trapped in Chinese Mafia Crypto Slavery [video]

U.S. CBP Reported Employee Arrests (FY2020 – FYTD)

Show HN: I built a free UCP checker – see if AI agents can find your store

Show HN: SVGV – A Real-Time Vector Video Format for Budget Hardware

Study of 150 developers shows AI generated code no harder to maintain long term

Spotify now requires premium accounts for developer mode API access

When Albert Einstein Moved to Princeton

Agents.md as a Dark Signal

System time, clocks, and their syncing in macOS

McCLIM and 7GUIs – Part 1: The Counter

So whats the next word, then? Almost-no-math intro to transformer models

Ed Zitron: The Hater's Guide to Microsoft

UK infants ill after drinking contaminated baby formula of Nestle and Danone

Show HN: Android-based audio player for seniors – Homer Audio Player

Starter Template for Ory Kratos

LLMs are powerful, but enterprises are deterministic by nature

Make your iPad 3 a touchscreen for your computer

Internationalization and Localization in the Age of Agents

Building a Custom Clawdbot Workflow to Automate Website Creation

Why the "Taiwan Dome" won't survive a Chinese attack

Xkcd: Game AIs

Windows 11 is finally killing off legacy printer drivers in 2026

From Offloading to Engagement (Study on Generative AI)

AI for People

Rome is studded with cannon balls (2022)

8-piece tablebase development on Lichess (op1 partial)

US to bankroll far-right think tanks in Europe against digital laws

Ask HN: Have AI companies replaced their own SaaS usage with agents?

pi-nes

Voxtral Realtime 4B Pure C Implementation

I Was Trapped in Chinese Mafia Crypto Slavery [video]

U.S. CBP Reported Employee Arrests (FY2020 – FYTD)

Show HN: I built a free UCP checker – see if AI agents can find your store

Show HN: SVGV – A Real-Time Vector Video Format for Budget Hardware

Study of 150 developers shows AI generated code no harder to maintain long term

Spotify now requires premium accounts for developer mode API access

When Albert Einstein Moved to Princeton

Agents.md as a Dark Signal

System time, clocks, and their syncing in macOS

McCLIM and 7GUIs – Part 1: The Counter

So whats the next word, then? Almost-no-math intro to transformer models

Ed Zitron: The Hater's Guide to Microsoft

UK infants ill after drinking contaminated baby formula of Nestle and Danone

Show HN: Android-based audio player for seniors – Homer Audio Player

Starter Template for Ory Kratos

LLMs are powerful, but enterprises are deterministic by nature

Make your iPad 3 a touchscreen for your computer

Internationalization and Localization in the Age of Agents

Building a Custom Clawdbot Workflow to Automate Website Creation

Why the "Taiwan Dome" won't survive a Chinese attack

Xkcd: Game AIs

Windows 11 is finally killing off legacy printer drivers in 2026

From Offloading to Engagement (Study on Generative AI)

AI for People

Rome is studded with cannon balls (2022)

8-piece tablebase development on Lichess (op1 partial)

US to bankroll far-right think tanks in Europe against digital laws

Ask HN: Have AI companies replaced their own SaaS usage with agents?

pi-nes

Display any CSV file as a searchable, filterable, pretty HTML table

Comments