Export HTML Table to CSV

Download to CSV

Something cool I challenged myself with during our short coding stint here at GA was a way to take the donation history table data and export it to a .csv file. CSV files are widely used in the non-profit space for tracking donations and for Venmo users, it could be used for tax purposes as well. Here's the HTML and JS:


Javascript adapted from Terry Young's post:

<a href="#" class="exportcsv button">Download CSV</a>
<div id="dvData">
  <table class="tablesorter">
        <th class="date">Date</th>
        <th class="to">Donation Made To</th>
        <th class="amount">Amount</th>
        <td class="date">1/15/2015</td>
        <td class="to">Johns Hopkins University ALS Clinic</td>
        <td class="amount">$80.00 USD</td>
        <td class="date">2/1/2015</td>
        <td class="to">American Heart Association</td>
        <td class="amount">$10.00 USD</td>
        <td class="date">2/24/2015</td>
        <td class="to">Virginia Commonwealth Univeristy School of the Arts</td>
        <td class="amount">$30.00 USD</td>
        <td class="date">3/16/2015</td>
        <td class="to">American Red Cross</td>
        <td class="amount">$10.00 USD</td>
        <td class="date">4/20/2015</td>
        <td class="to">World Wide Fund for Nature</td>
        <td class="amount">$20.00 USD</td>
$(document).ready(function () {
    function exportTableToCSV($table, filename) {
        var $rows = $table.find('tr:has(td)'),
            // Temporary delimiter characters unlikely to be typed by keyboard
            // This is to avoid accidentally splitting the actual contents
            tmpColDelim = String.fromCharCode(11), // vertical tab character
            tmpRowDelim = String.fromCharCode(0), // null character
            // actual delimiter characters for CSV format
            colDelim = '","',
            rowDelim = '"\r\n"',
            // Grab text from table into CSV formatted string
            csv = '"' + $rows.map(function (i, row) {
                var $row = $(row),
                    $cols = $row.find('td');
                return $cols.map(function (j, col) {
                    var $col = $(col),
                        text = $col.text();
                    return text.replace(/"/g, '""'); // escape double quotes
                .split(tmpColDelim).join(colDelim) + '"',
            // Data URI
            csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
            'download': filename,
                'href': csvData,
                'target': '_blank'
    // This must be a hyperlink
    $(".exportcsv").on('click', function (event) {
        // CSV
        exportTableToCSV.apply(this, [$('#dvData>table'), 'export.csv']);
        // IF CSV, don't do event.preventDefault() or return false
        // We actually need this to be a typical hyperlink

Give me the codes!

I am definitely no pro at any sort of development, but I'm SO thankful that I've had HTML/CSS experience before. It made today seem like a walk in the park.

I was never really taught. It started back when we needed a new website for the summer camp I was directing. The old site started looking outdated just after two years and it was crucial for our marketing strategy.

I started with a few tutorials from YouTube, but they didn't help too much. Then I turned to website creators, which didn't have enough function for what our site needed. So then I turned to Codecademy.

It was pretty intimidating at first. They offer courses in so many different languages. What about Ruby? What's does Javascript do? Is CSS used only to make things pretty? I knew I needed to start at HTML, so I that's where I blindly dove in.

And.. that's all I can tell you about that weekend. It's like I completely blacked out for a weekend and suddenly it was Monday. I went in with the hopes of learning something. I came out having done crash courses in HTML, CSS, PHP, and SQL. Definitely one of those "I know Kung-Fu" moments.

Since then, the site I worked on has been in production and while it could use a few tweaks, it seems to have aged quite gracefully. It's not a huge site, but for a few months of the year, it can see over 20,000 views in a day. So, I'm pretty proud of it!

I'm going to try to push myself even harder this week and learn a few things from the awesome instructors here at GA. Jesse's coming in tomorrow to teach the class CSS and I'm going to see if he can spend some time teaching me a few CSS tricks.


USA Today Presentations

It's been a while since I last updated on the project. Today, we had our presentations to the GA staff and USA Today.

It's funny. Everyone in the class keeps saying how I look so comfortable in front of people when giving presentations. They talk about how I never seem nervous, how excited I am to be talking about all these things, how I always seem like I'm having a good time.

Where Wallet Logo used for the GA x USA Today project.

Where Wallet Logo used for the GA x USA Today project.

Let me tell you. I'm a mess on the inside.

Today was that was even more true than normal. It's the waiting part that really gets to me. We were in the middle of today's stack of presentations and there were three others before we presented. I remember feeling my heart pounding during the third one. We have a good project. Why was I so nervous? Was it because USA Today was in the room? Or was it because it was the first time we presented in front of the (massive) web development instructor team?

In any case. Our presentation went well! We got some great comments afterwards and people loved the graphics I made for the app.




Today was the first Truckeroo of 2015. It's a food truck festival held next to Nationals Stadium where there are (obviously) lots of food trucks, live music, and people that just love eating. We had just come from GA's weekly happy hour, so we weren't terribly hungry, but definitely just had to try as many as we could. It was an awesome way to unwind after an intense week and you can bet that I'm going to be at the next one.

Smooth Sailing

This morning’s lecture talked about branding. Mostly consisted of defining what our brand for project 3 communicated to its audience. We did an exercise which asked us to come up with words that defined what our brand was and also put a limit on it. Of course our group got a little ridiculous and came up with “Responsible, but not Mother Theresa.”

The rest of today went by pretty quickly and was mostly uneventful. Our group checked in throughout the rest of the day, developers went headfirst into coding, and us designers went off to do more user research/validation. Can’t really say much else. Things are going well!

Tonight’s going to be filled with lots and lots of playing around in Prezi. We definitely have an idea that we know we can’t produce for the final coded product because of technical reasons, so I’m trying to find a way to at least present our vision for what we’d like to do. This should be fun. :)

Working with Developers

Of course I didn't know what to expect today. Do we ever know?

But let's go back to the beginning. Today started out with leaving the house late, getting to metro late, waiting for a metro for almost 20 minutes, being on the metro for almost an hour, and missing the first 30 minutes of the USA Today presentation for our next project. heh. oops?

The rest of today was pretty crazy. One day for almost the whole UX process: user research, creating personas, design studio, more sketching, user flows, wireframing, paper prototyping, user testing, prototype iterations, more user testing, and digital mockup.

The crazy thing is.. I'm still alive. If you asked me to do this a week ago, I would've wanted to flip a table and walk away (or something like that, but less drastic.. haha). I didn't feel like my group was hard to work with. I felt like the whole process was relatively smooth.

That's not to say thing were perfect, but better than a lot of the other groups I heard from throughout the day. Some groups didn't have an idea until the afternoon. Some groups had developers that just didn't have the skills they needed to do what the designers wanted (or group was definitely in that boat, but our devs told me they'd be willing to learn how to do most of this stuff!). Some groups just had a difficult time comprehending the UX process and how developers could be a part of it.

So I'm pretty happy with how things are going so far. Yes, it's crazy. But work hard, play hard, right? I can't wait to see what the developers in our group are going to put out by Friday. It's an eye opening experience, but being able to work directly with developers halfway through UXDI is going to be super helpful for when I start real work. I'm getting so pumped!