cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>TableFilter starter</h1>

<table id="demo">
    <thead>
        <tr>
            <th>country</th>
            <th>isocode</th>
            <th>year</th>
            <th>POP</th>
            <th>XRAT</th>
            <th>PPP</th>
            <th>cgdp</th>
            <th>cc</th>
            <th>ci</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Benin</td>
            <td>BEN</td>
            <td>1998</td>
            <td>5950.33</td>
            <td>589.9517822</td>
            <td>190.95</td>
            <td>1178.46</td>
            <td>90.98</td>
            <td>7.55</td>
        </tr>
        <tr>
            <td>Benin</td>
            <td>BEN</td>
            <td>1999</td>
            <td>6109.53</td>
            <td>615.6990967</td>
            <td>200.19</td>
            <td>1174.90</td>
            <td>92.61</td>
            <td>7.86</td>
        </tr>
        <tr>
            <td>Benin</td>
            <td>BEN</td>
            <td>2000</td>
            <td>6272.00</td>
            <td>711.9763184</td>
            <td>200.61</td>
            <td>1224.74</td>
            <td>92.27</td>
            <td>8.25</td>
        </tr>
        <tr>
            <td>Burkina Faso</td>
            <td>BFA</td>
            <td>1994</td>
            <td>9755.03</td>
            <td>555.2047119</td>
            <td>125.76</td>
            <td>838.76</td>
            <td>79.81</td>
            <td>6.57</td>
        </tr>
        <tr>
            <td>Burkina Faso</td>
            <td>BFA</td>
            <td>1995</td>
            <td>9988.00</td>
            <td>499.148407</td>
            <td>136.65</td>
            <td>860.89</td>
            <td>80.41</td>
            <td>9.29</td>
        </tr>
        <tr>
            <td>Burkina Faso</td>
            <td>BFA</td>
            <td>1996</td>
            <td>10225.00</td>
            <td>511.5523987</td>
            <td>144.18</td>
            <td>881.11</td>
            <td>80.40</td>
            <td>12.12</td>
        </tr>
        <tr>
            <td>Burkina Faso</td>
            <td>BFA</td>
            <td>1997</td>
            <td>10473.53</td>
            <td>583.6693726</td>
            <td>141.78</td>
            <td>899.01</td>
            <td>76.94</td>
            <td>14.94</td>
        </tr>
        <tr>
            <td>Russia</td>
            <td>RUS</td>
            <td>1998</td>
            <td>146899.01</td>
            <td>9.705082893</td>
            <td>2.64</td>
            <td>7086.39</td>
            <td>67.73</td>
            <td>9.20</td>
        </tr>
        <tr>
            <td>Russia</td>
            <td>RUS</td>
            <td>1999</td>
            <td>146308.99</td>
            <td>24.6199398</td>
            <td>4.03</td>
            <td>8074.70</td>
            <td>57.35</td>
            <td>8.81</td>
        </tr>
        <tr>
            <td>Russia</td>
            <td>RUS</td>
            <td>2000</td>
            <td>145555.01</td>
            <td>28.12916946</td>
            <td>4.85</td>
            <td>9995.91</td>
            <td>54.74</td>
            <td>8.79</td>
        </tr>
        <tr>
            <td>Rwanda</td>
            <td>RWA</td>
            <td>1994</td>
            <td>6230.00</td>
            <td>194.517</td>
            <td>50.39</td>
            <td>529.48</td>
            <td>132.16</td>
            <td>4.48</td>
        </tr>
        <tr>
            <td>Rwanda</td>
            <td>RWA</td>
            <td>1995</td>
            <td>6400.00</td>
            <td>262.1975098</td>
            <td>70.67</td>
            <td>746.34</td>
            <td>92.77</td>
            <td>3.08</td>
        </tr>
        <tr>
            <td>Rwanda</td>
            <td>RWA</td>
            <td>1996</td>
            <td>6727.00</td>
            <td>306.8200073</td>
            <td>77.90</td>
            <td>823.25</td>
            <td>89.71</td>
            <td>3.21</td>
        </tr>
        <tr>
            <td>Rwanda</td>
            <td>RWA</td>
            <td>1997</td>
            <td>7895.18</td>
            <td>301.5297852</td>
            <td>84.13</td>
            <td>847.79</td>
            <td>91.44</td>
            <td>3.72</td>
        </tr>
        <tr>
            <td>Rwanda</td>
            <td>RWA</td>
            <td>1998</td>
            <td>8105.00</td>
            <td>312.3140869</td>
            <td>85.32</td>
            <td>914.22</td>
            <td>89.34</td>
            <td>4.22</td>
        </tr>
        <tr>
            <td>El Salvador</td>
            <td>SLV</td>
            <td>1995</td>
            <td>5669.00</td>
            <td>8.754583359</td>
            <td>3.54</td>
            <td>4143.59</td>
            <td>89.31</td>
            <td>10.35</td>
        </tr>
        <tr>
            <td>El Salvador</td>
            <td>SLV</td>
            <td>1996</td>
            <td>5798.00</td>
            <td>8.755000114</td>
            <td>3.69</td>
            <td>4235.79</td>
            <td>88.77</td>
            <td>7.79</td>
        </tr>
        <tr>
            <td>El Salvador</td>
            <td>SLV</td>
            <td>1997</td>
            <td>5911.00</td>
            <td>8.756250381</td>
            <td>3.74</td>
            <td>4408.41</td>
            <td>87.05</td>
            <td>7.90</td>
        </tr>
        <tr>
            <td>Slovak Republic</td>
            <td>SVK</td>
            <td>2000</td>
            <td>5401.00</td>
            <td>46.0352</td>
            <td>13.02</td>
            <td>12618.53</td>
            <td>52.22</td>
            <td>24.78</td>
        </tr>
        <tr>
            <td>Slovenia</td>
            <td>SVN</td>
            <td>1994</td>
            <td>1988.90</td>
            <td>128.8085938</td>
            <td>79.97</td>
            <td>11662.12</td>
            <td>53.21</td>
            <td>19.87</td>
        </tr>
        <tr>
            <td>Slovenia</td>
            <td>SVN</td>
            <td>1995</td>
            <td>1990.00</td>
            <td>118.5185013</td>
            <td>89.03</td>
            <td>12574.96</td>
            <td>54.46</td>
            <td>23.11</td>
        </tr>
        <tr>
            <td>Slovenia</td>
            <td>SVN</td>
            <td>1996</td>
            <td>1991.00</td>
            <td>135.3643036</td>
            <td>97.27</td>
            <td>13151.51</td>
            <td>54.32</td>
            <td>23.23</td>
        </tr>
        <tr>
            <td>Slovenia</td>
            <td>SVN</td>
            <td>1997</td>
            <td>1985.96</td>
            <td>159.6882935</td>
            <td>103.96</td>
            <td>14143.02</td>
            <td>53.24</td>
            <td>24.14</td>
        </tr>
        <tr>
            <td>Slovenia</td>
            <td>SVN</td>
            <td>1998</td>
            <td>1982.60</td>
            <td>166.134201</td>
            <td>108.93</td>
            <td>15067.34</td>
            <td>52.82</td>
            <td>25.35</td>
        </tr>
        <tr>
            <td>Zambia</td>
            <td>ZMB</td>
            <td>1994</td>
            <td>8740.72</td>
            <td>669.3706055</td>
            <td>307.48</td>
            <td>834.19</td>
            <td>75.43</td>
            <td>9.86</td>
        </tr>
        <tr>
            <td>Zambia</td>
            <td>ZMB</td>
            <td>1995</td>
            <td>8980.00</td>
            <td>864.1192017</td>
            <td>402.40</td>
            <td>829.37</td>
            <td>76.55</td>
            <td>10.31</td>
        </tr>
        <tr>
            <td>Zambia</td>
            <td>ZMB</td>
            <td>1996</td>
            <td>9214.40</td>
            <td>1207.900024</td>
            <td>515.01</td>
            <td>838.05</td>
            <td>78.74</td>
            <td>10.99</td>
        </tr>
        <tr>
            <td>Zambia</td>
            <td>ZMB</td>
            <td>1997</td>
            <td>9443.21</td>
            <td>1314.498047</td>
            <td>596.97</td>
            <td>851.47</td>
            <td>77.59</td>
            <td>12.15</td>
        </tr>
        <tr>
            <td>Zambia</td>
            <td>ZMB</td>
            <td>1998</td>
            <td>9665.71</td>
            <td>1862.06897</td>
            <td>744.91</td>
            <td>800.69</td>
            <td>85.12</td>
            <td>13.75</td>
        </tr>
        <tr>
            <td>Zambia</td>
            <td>ZMB</td>
            <td>1999</td>
            <td>9881.21</td>
            <td>2388.019043</td>
            <td>941.87</td>
            <td>765.24</td>
            <td>91.82</td>
            <td>15.30</td>
        </tr>
        <tr>
            <td>Zambia</td>
            <td>ZMB</td>
            <td>2000</td>
            <td>10089.00</td>
            <td>3110.843994</td>
            <td>1157.63</td>
            <td>840.97</td>
            <td>86.33</td>
            <td>15.38</td>
        </tr>
        <tr>
            <td>Zimbabwe</td>
            <td>ZWE</td>
            <td>1994</td>
            <td>10775.35</td>
            <td>8.151538849</td>
            <td>2.01</td>
            <td>2586.84</td>
            <td>60.10</td>
            <td>18.53</td>
        </tr>
        <tr>
            <td>Zimbabwe</td>
            <td>ZWE</td>
            <td>1995</td>
            <td>11011.00</td>
            <td>8.66537571</td>
            <td>2.15</td>
            <td>2603.37</td>
            <td>66.89</td>
            <td>15.03</td>
        </tr>
        <tr>
            <td>Zimbabwe</td>
            <td>ZWE</td>
            <td>1996</td>
            <td>11242.16</td>
            <td>10.00234985</td>
            <td>2.64</td>
            <td>2860.23</td>
            <td>72.06</td>
            <td>11.32</td>
        </tr>
        <tr>
            <td>Zimbabwe</td>
            <td>ZWE</td>
            <td>1997</td>
            <td>11923.52</td>
            <td>12.11128998</td>
            <td>3.17</td>
            <td>2727.06</td>
            <td>82.82</td>
            <td>11.01</td>
        </tr>
        <tr>
            <td>Zimbabwe</td>
            <td>ZWE</td>
            <td>1998</td>
            <td>12153.85</td>
            <td>23.67910957</td>
            <td>4.06</td>
            <td>2799.85</td>
            <td>77.66</td>
            <td>10.75</td>
        </tr>
        <tr>
            <td>Zimbabwe</td>
            <td>ZWE</td>
            <td>1999</td>
            <td>12388.32</td>
            <td>38.30120087</td>
            <td>6.12</td>
            <td>2770.48</td>
            <td>76.89</td>
            <td>10.73</td>
        </tr>
        <tr>
            <td>Zimbabwe</td>
            <td>ZWE</td>
            <td>2000</td>
            <td>12627.00</td>
            <td>44.41791916</td>
            <td>9.48</td>
            <td>2607.03</td>
            <td>69.23</td>
            <td>8.62</td>
        </tr>
    </tbody>
</table>

</body>
</html>

            
          
!
            
              var filtersConfig = {
  // instruct TableFilter location to import ressources from
  base_path: 'https://unpkg.com/tablefilter@latest/dist/tablefilter/',
  col_1: 'select',
  col_2: 'select',
  col_3: 'select',
  alternate_rows: true,
  rows_counter: true,
  btn_reset: true,
  loader: true,
  mark_active_columns: true,
  highlight_keywords: true,
  no_results_message: true,
  col_types: [
    'string', 'string', 'number',
    'number', 'number', 'number',
    'number', 'number', 'number'
  ],
  custom_options: {
    cols: [3],
    texts: [
      [
        '0 - 25 000',
        '100 000 - 1 500 000'
      ]
    ],
    values: [
      [
        '>0 && <=25000',
        '>100000 && <=1500000'
      ]
    ],
    sorts: [false]
  },
  col_widths: [
    '150px', '100px', '100px',
    '70px', '70px', '70px',
    '70px', '60px', '60px'
  ],
  extensions: [{
    name: 'sort',
    images_path: 'https://unpkg.com/tablefilter@latest/dist/tablefilter/style/themes/'
  }]
};

var tf = new TableFilter('demo', filtersConfig);
tf.init();
            
          
!
999px
Loading ..................

Console