# Preview vs Explorer

Compare the static `tbl_preview()` with the interactive `tbl_explorer()` side by side.


# Static Preview


<table class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_title gt_font_normal"><div style="padding-top: 0; padding-bottom: 7px;">
<span class="gd-tbl-badge" style="background-color: #F0F0F0; color: #333333; border: 1px solid #F0F0F0; margin-right: 8px;">Table</span>Rows12Columns5
</div></th>
</tr>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_subtitle gt_font_normal">Static preview</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"></th>
<th id="city" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

city

<em>str</em>

</div></th>
<th id="country" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

country

<em>str</em>

</div></th>
<th id="population" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

population

<em>i64</em>

</div></th>
<th id="latitude" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

latitude

<em>f64</em>

</div></th>
<th id="longitude" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

longitude

<em>f64</em>

</div></th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_right gd-tbl-rownum">0</td>
<td class="gt_row gt_left" style="max-width: 98px">Tokyo</td>
<td class="gt_row gt_left" style="max-width: 98px">Japan</td>
<td class="gt_row gt_right" style="max-width: 97px">13960000</td>
<td class="gt_row gt_right" style="max-width: 81px">35.6762</td>
<td class="gt_row gt_right" style="max-width: 89px">139.6503</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">1</td>
<td class="gt_row gt_left" style="max-width: 98px">Paris</td>
<td class="gt_row gt_left" style="max-width: 98px">France</td>
<td class="gt_row gt_right" style="max-width: 97px">2161000</td>
<td class="gt_row gt_right" style="max-width: 81px">48.8566</td>
<td class="gt_row gt_right" style="max-width: 89px">2.3522</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">2</td>
<td class="gt_row gt_left" style="max-width: 98px">New York</td>
<td class="gt_row gt_left" style="max-width: 98px">USA</td>
<td class="gt_row gt_right" style="max-width: 97px">8336000</td>
<td class="gt_row gt_right" style="max-width: 81px">40.7128</td>
<td class="gt_row gt_right" style="max-width: 89px">-74.006</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">3</td>
<td class="gt_row gt_left" style="max-width: 98px">London</td>
<td class="gt_row gt_left" style="max-width: 98px">UK</td>
<td class="gt_row gt_right" style="max-width: 97px">8982000</td>
<td class="gt_row gt_right" style="max-width: 81px">51.5074</td>
<td class="gt_row gt_right" style="max-width: 89px">-0.1278</td>
</tr>
<tr class="gd-tbl-divider">
<td class="gt_row gt_right gd-tbl-rownum">4</td>
<td class="gt_row gt_left" style="max-width: 98px">Sydney</td>
<td class="gt_row gt_left" style="max-width: 98px">Australia</td>
<td class="gt_row gt_right" style="max-width: 97px">5312000</td>
<td class="gt_row gt_right" style="max-width: 81px">-33.8688</td>
<td class="gt_row gt_right" style="max-width: 89px">151.2093</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">7</td>
<td class="gt_row gt_left" style="max-width: 98px">São Paulo</td>
<td class="gt_row gt_left" style="max-width: 98px">Brazil</td>
<td class="gt_row gt_right" style="max-width: 97px">12330000</td>
<td class="gt_row gt_right" style="max-width: 81px">-23.5505</td>
<td class="gt_row gt_right" style="max-width: 89px">-46.6333</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">8</td>
<td class="gt_row gt_left" style="max-width: 98px">Cairo</td>
<td class="gt_row gt_left" style="max-width: 98px">Egypt</td>
<td class="gt_row gt_right" style="max-width: 97px">10230000</td>
<td class="gt_row gt_right" style="max-width: 81px">30.0444</td>
<td class="gt_row gt_right" style="max-width: 89px">31.2357</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">9</td>
<td class="gt_row gt_left" style="max-width: 98px">Toronto</td>
<td class="gt_row gt_left" style="max-width: 98px">Canada</td>
<td class="gt_row gt_right" style="max-width: 97px">2930000</td>
<td class="gt_row gt_right" style="max-width: 81px">43.6532</td>
<td class="gt_row gt_right" style="max-width: 89px">-79.3832</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">10</td>
<td class="gt_row gt_left" style="max-width: 98px">Seoul</td>
<td class="gt_row gt_left" style="max-width: 98px">South Korea</td>
<td class="gt_row gt_right" style="max-width: 97px">9776000</td>
<td class="gt_row gt_right" style="max-width: 81px">37.5665</td>
<td class="gt_row gt_right" style="max-width: 89px">126.978</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">11</td>
<td class="gt_row gt_left" style="max-width: 98px">Mexico City</td>
<td class="gt_row gt_left" style="max-width: 98px">Mexico</td>
<td class="gt_row gt_right" style="max-width: 97px">9210000</td>
<td class="gt_row gt_right" style="max-width: 81px">19.4326</td>
<td class="gt_row gt_right" style="max-width: 89px">-99.1332</td>
</tr>
</tbody>
</table>


# Interactive Explorer


<table class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_title gt_font_normal"><div style="padding-top: 0; padding-bottom: 7px;">
<span class="gd-tbl-badge" style="background-color: #F0F0F0; color: #333333; border: 1px solid #F0F0F0; margin-right: 8px;">Table</span>Rows12Columns5
</div></th>
</tr>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_subtitle gt_font_normal">Interactive explorer</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"></th>
<th id="city" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

city

<em>str</em>

</div></th>
<th id="country" class="gt_col_heading gt_columns_bottom_border gt_left" scope="col"><div>

country

<em>str</em>

</div></th>
<th id="population" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

population

<em>i64</em>

</div></th>
<th id="latitude" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

latitude

<em>f64</em>

</div></th>
<th id="longitude" class="gt_col_heading gt_columns_bottom_border gt_right" scope="col"><div>

longitude

<em>f64</em>

</div></th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_right gd-tbl-rownum">0</td>
<td class="gt_row gt_left" style="max-width: 90px">Tokyo</td>
<td class="gt_row gt_left" style="max-width: 90px">Japan</td>
<td class="gt_row gt_right" style="max-width: 103px">13960000</td>
<td class="gt_row gt_right" style="max-width: 87px">35.6762</td>
<td class="gt_row gt_right" style="max-width: 95px">139.6503</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">1</td>
<td class="gt_row gt_left" style="max-width: 90px">Paris</td>
<td class="gt_row gt_left" style="max-width: 90px">France</td>
<td class="gt_row gt_right" style="max-width: 103px">2161000</td>
<td class="gt_row gt_right" style="max-width: 87px">48.8566</td>
<td class="gt_row gt_right" style="max-width: 95px">2.3522</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">2</td>
<td class="gt_row gt_left" style="max-width: 90px">New York</td>
<td class="gt_row gt_left" style="max-width: 90px">USA</td>
<td class="gt_row gt_right" style="max-width: 103px">8336000</td>
<td class="gt_row gt_right" style="max-width: 87px">40.7128</td>
<td class="gt_row gt_right" style="max-width: 95px">-74.006</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">3</td>
<td class="gt_row gt_left" style="max-width: 90px">London</td>
<td class="gt_row gt_left" style="max-width: 90px">UK</td>
<td class="gt_row gt_right" style="max-width: 103px">8982000</td>
<td class="gt_row gt_right" style="max-width: 87px">51.5074</td>
<td class="gt_row gt_right" style="max-width: 95px">-0.1278</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">4</td>
<td class="gt_row gt_left" style="max-width: 90px">Sydney</td>
<td class="gt_row gt_left" style="max-width: 90px">Australia</td>
<td class="gt_row gt_right" style="max-width: 103px">5312000</td>
<td class="gt_row gt_right" style="max-width: 87px">-33.8688</td>
<td class="gt_row gt_right" style="max-width: 95px">151.2093</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">5</td>
<td class="gt_row gt_left" style="max-width: 90px">Berlin</td>
<td class="gt_row gt_left" style="max-width: 90px">Germany</td>
<td class="gt_row gt_right" style="max-width: 103px">3645000</td>
<td class="gt_row gt_right" style="max-width: 87px">52.52</td>
<td class="gt_row gt_right" style="max-width: 95px">13.405</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">6</td>
<td class="gt_row gt_left" style="max-width: 90px">Mumbai</td>
<td class="gt_row gt_left" style="max-width: 90px">India</td>
<td class="gt_row gt_right" style="max-width: 103px">20411000</td>
<td class="gt_row gt_right" style="max-width: 87px">19.076</td>
<td class="gt_row gt_right" style="max-width: 95px">72.8777</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">7</td>
<td class="gt_row gt_left" style="max-width: 90px">São Paulo</td>
<td class="gt_row gt_left" style="max-width: 90px">Brazil</td>
<td class="gt_row gt_right" style="max-width: 103px">12330000</td>
<td class="gt_row gt_right" style="max-width: 87px">-23.5505</td>
<td class="gt_row gt_right" style="max-width: 95px">-46.6333</td>
</tr>
<tr>
<td class="gt_row gt_right gd-tbl-rownum">8</td>
<td class="gt_row gt_left" style="max-width: 90px">Cairo</td>
<td class="gt_row gt_left" style="max-width: 90px">Egypt</td>
<td class="gt_row gt_right" style="max-width: 103px">10230000</td>
<td class="gt_row gt_right" style="max-width: 87px">30.0444</td>
<td class="gt_row gt_right" style="max-width: 95px">31.2357</td>
</tr>
<tr class="gd-tbl-divider">
<td class="gt_row gt_right gd-tbl-rownum">9</td>
<td class="gt_row gt_left" style="max-width: 90px">Toronto</td>
<td class="gt_row gt_left" style="max-width: 90px">Canada</td>
<td class="gt_row gt_right" style="max-width: 103px">2930000</td>
<td class="gt_row gt_right" style="max-width: 87px">43.6532</td>
<td class="gt_row gt_right" style="max-width: 95px">-79.3832</td>
</tr>
</tbody>
</table>


The explorer adds a toolbar with filter, column toggle, copy, download, and reset controls. Column headers are sortable. The static preview is lighter and works without JavaScript.
