How to show a pandas dataframe as a flask-boostrap table?
<p>I would like to show a pandas dataframe as a boostrap-html table with flask, thus I tried the following:</p>

<p>The data (.csv table):</p>

<pre><code>Name    Birth Month Origin  Age Gender
Carly   Jan Uk  10  F
Rachel  Sep UK  20  F
Nicky   Sep MEX 30  F
Wendy   Oct UK  40  F
Judith  Nov MEX 39  F
</code></pre>

<p>The python code (<code>python_script.py</code>):</p>

<pre><code>from flask import *
import pandas as pd
app = Flask(__name__)

@app.route("/tables")
def show_tables():
    data = pd.read_csv('table.csv')
    data.set_index(['Name'], inplace=True)
    data.index.name=None
    females = data.loc[data.Gender=='f']
    return render_template('view.html',tables=[females.to_html(classes='female')],

    titles = ['na', 'Female surfers'])


if __name__ == "__main__":
    app.run(debug=True)
</code></pre>

<p>The <code>templates</code> directory (<code>view.html</code>):</p>

<pre><code>&lt;!doctype html&gt;
&lt;title&gt;Simple tables&lt;/title&gt;
&lt;link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}"&gt;
&lt;div class=page&gt;
  &lt;h1&gt;Surfer groups&lt;/h1&gt;
  {% for table in tables %}
    &lt;h2&gt;{{titles[loop.index]}}&lt;/h2&gt;
    {{ table|safe }}
  {% endfor %}
&lt;/div&gt;
</code></pre>

<p>The boostrap <code>style.css</code>:</p>

<pre><code>body            { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
a, h1, h2       { color: #377ba8; }
h1, h2          { margin: 0; }
h1              { border-bottom: 2px solid #eee; }
h2              { font-size: 1.2em; }

table.dataframe, .dataframe th, .dataframe td {
  border: none;
  border-bottom: 1px solid #C8C8C8;
  border-collapse: collapse;
  text-align:left;
  padding: 10px;
  margin-bottom: 40px;
  font-size: 0.9em;
}

.male th {
    background-color: #add8e6;
    color: white;
}

.female th {
    background-color: #77dd77;
    color: white;
}

tr:nth-child(odd)       { background-color:#eee; }
tr:nth-child(even)  { background-color:#fff; }

tr:hover            { background-color: #ffff99;}
</code></pre>

<p>So far, when I run my <code>python_script.py</code>:</p>

<pre><code> * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger pin code: 123-221-151
</code></pre>

<p>I got two issues: a Not Found error and when I go to <code>http://127.0.0.1:5000/tables</code> I got an <code>builtins.KeyError KeyError: 'Name'</code>. Any idea of how to show a pandas dataframe as a table with pandas and flask?.</p>

<p>The problem here is with the <code>data.csv</code> file. When you do <code>read_csv()</code> on it:</p>

<pre><code>In [45]: pd.read_csv("/tmp/a.csv")
Out[45]: 
  Name    Birth Month Origin  Age Gender
0                  Carly   Jan Uk  10  F
1                  Rachel  Sep UK  20  F
2                  Nicky   Sep MEX 30  F
3                  Wendy   Oct UK  40  F
4                  Judith  Nov MEX 39  F

In [46]: df = pd.read_csv("/tmp/a.csv")

In [47]: df.columns
Out[47]: Index([u'Name    Birth Month Origin  Age Gender'], dtype='object')
</code></pre>

<p>As you can see, there is only one column, instead of four, because it can't understand that 'Birth Month' is supposed to be one column. To fix this, you can open the file and change the first line to:</p>

<pre><code>"Name" "Birth Month" "Origin"  "Age" "Gender"
</code></pre>

<p>And, then while reading the csv:</p>

<pre><code>In [62]: pd.read_csv("/tmp/a.csv", sep='\s+', quotechar='"')
Out[62]: 
     Name Birth Month Origin  Age Gender
0   Carly         Jan     Uk   10      F
1  Rachel         Sep     UK   20      F
2   Nicky         Sep    MEX   30      F
3   Wendy         Oct     UK   40      F
4  Judith         Nov    MEX   39      F
</code></pre>

<p>Or you could have also just changed <code>Birth Month</code> to <code>Birth_Month</code></p>

<p>For the '404 Not Found' error, the problem is that you have not defined any route for '/'. So, (after editing the header of the csv) I would do something like:</p>

<pre><code>from flask import *
import pandas as pd
app = Flask(__name__)

@app.route("/tables")
def show_tables():
    data = pd.read_csv("/tmp/a.csv", sep='\s+', quotechar='"')
    data.set_index(['Name'], inplace=True)
    data.index.name=None
    females = data.loc[data.Gender=='F']
    return render_template('view.html',tables=[females.to_html(classes='female')],

    titles = ['na', 'Female surfers'])

@app.route("/")
def show_home():
    return "Hello Guys! Visit: &lt;a href='/tables'&gt; this link &lt;/a&gt;"

if __name__ == "__main__":
    app.run(debug=True)
</code></pre>

python html python-3.x pandas flask