Tailwind CSS Datatables - Flowbite
Use the datatable component to search, sort, filter, export and paginate table data of rows and columns for your web application coded with the utility classes from Tailwind CSS
The datatable component examples from Flowbite are open-source under the MIT License and they are based on the simple-datatables repository from GitHub which you need to install via NPM or CDN.
This page provides multiple examples of datatable components where you can search, sort, filter, paginate and export table data up to thousands of entries coded with Tailwind CSS and leveraging JavaScript code provided by the parent library.
All examples are responsive, dark mode and RTL support included and by installing the Flowbite plugin the custom styles will automatically be applied to the datatable components using Tailwind CSS.
Getting started #
Before continuing make sure that you have Tailwind CSS, Flowbite, and Simple Datables in your project.
- Install Tailwind CSS and follow our quickstart guide to install Flowbite and the official plugin
- Set the field
datatablesto the valuetrueinside thetailwind.config.jsfile:
plugins: [
require('flowbite/plugin')({
datatables: true,
}),
// ... other plugins
]
- Install the
simple-datatableslibrary using NPM:
npm install simple-datatables --save
Alternatively, you can also include it in your project using CDN:
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>
Now that you have installed all libraries you can start copy-pasting the datatable components from Flowbite.
Make sure that in addition to the HTML markup you also copy the JavaScript code to initialize the component.
Default datatable #
Use this example to show table data with default sorting and pagination functionalities.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
| Name | Release Date | NPM Downloads | Growth |
|---|---|---|---|
| Flowbite | 2021/25/09 | 269000 | 49% |
| React | 2013/24/05 | 4500000 | 24% |
| Angular | 2010/20/09 | 2800000 | 17% |
| Vue | 2014/12/02 | 3600000 | 30% |
| Svelte | 2016/26/11 | 1200000 | 57% |
| Ember | 2011/08/12 | 500000 | 44% |
| Backbone | 2010/13/10 | 300000 | 9% |
| jQuery | 2006/28/01 | 6000000 | 5% |
| Bootstrap | 2011/19/08 | 1800000 | 12% |
| Foundation | 2011/23/09 | 700000 | 8% |
| Bulma | 2016/24/10 | 500000 | 7% |
| Next.js | 2016/25/10 | 2300000 | 45% |
| Nuxt.js | 2016/16/10 | 900000 | 50% |
| Meteor | 2012/17/01 | 1000000 | 10% |
| Aurelia | 2015/08/07 | 200000 | 20% |
| Inferno | 2016/27/09 | 100000 | 35% |
| Preact | 2015/16/08 | 600000 | 28% |
| Lit | 2018/28/05 | 400000 | 60% |
| Alpine.js | 2019/02/11 | 300000 | 70% |
| Stimulus | 2018/06/03 | 150000 | 25% |
| Solid | 2021/05/07 | 250000 | 80% |
<table id="default-table">
<thead>
<tr>
<th>
<span class="flex items-center">
Name
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th data-type="date" data-format="YYYY/DD/MM">
<span class="flex items-center">
Release Date
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
NPM Downloads
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Growth
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Flowbite</td>
<td>2021/25/09</td>
<td>269000</td>
<td>49%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">React</td>
<td>2013/24/05</td>
<td>4500000</td>
<td>24%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Angular</td>
<td>2010/20/09</td>
<td>2800000</td>
<td>17%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Vue</td>
<td>2014/12/02</td>
<td>3600000</td>
<td>30%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Svelte</td>
<td>2016/26/11</td>
<td>1200000</td>
<td>57%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Ember</td>
<td>2011/08/12</td>
<td>500000</td>
<td>44%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Backbone</td>
<td>2010/13/10</td>
<td>300000</td>
<td>9%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">jQuery</td>
<td>2006/28/01</td>
<td>6000000</td>
<td>5%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Bootstrap</td>
<td>2011/19/08</td>
<td>1800000</td>
<td>12%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Foundation</td>
<td>2011/23/09</td>
<td>700000</td>
<td>8%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Bulma</td>
<td>2016/24/10</td>
<td>500000</td>
<td>7%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Next.js</td>
<td>2016/25/10</td>
<td>2300000</td>
<td>45%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Nuxt.js</td>
<td>2016/16/10</td>
<td>900000</td>
<td>50%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Meteor</td>
<td>2012/17/01</td>
<td>1000000</td>
<td>10%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Aurelia</td>
<td>2015/08/07</td>
<td>200000</td>
<td>20%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Inferno</td>
<td>2016/27/09</td>
<td>100000</td>
<td>35%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Preact</td>
<td>2015/16/08</td>
<td>600000</td>
<td>28%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Lit</td>
<td>2018/28/05</td>
<td>400000</td>
<td>60%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Alpine.js</td>
<td>2019/02/11</td>
<td>300000</td>
<td>70%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Stimulus</td>
<td>2018/06/03</td>
<td>150000</td>
<td>25%</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Solid</td>
<td>2021/05/07</td>
<td>250000</td>
<td>80%</td>
</tr>
</tbody>
</table>if (document.getElementById("default-table") && typeof simpleDatatables.DataTable !== 'undefined') {
const dataTable = new simpleDatatables.DataTable("#default-table", {
searchable: false,
perPageSelect: false
});
}
Table search #
Set the searchable option to true to enable the search functionality for all table data.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
| Company Name | Ticker | Stock Price | Market Capitalization |
|---|---|---|---|
| Apple Inc. | AAPL | $192.58 | $3.04T |
| Microsoft Corporation | MSFT | $340.54 | $2.56T |
| Alphabet Inc. | GOOGL | $134.12 | $1.72T |
| Amazon.com Inc. | AMZN | $138.01 | $1.42T |
| NVIDIA Corporation | NVDA | $466.19 | $1.16T |
| Tesla Inc. | TSLA | $255.98 | $811.00B |
| Meta Platforms Inc. | META | $311.71 | $816.00B |
| Berkshire Hathaway Inc. | BRK.B | $354.08 | $783.00B |
| TSMC | TSM | $103.51 | $538.00B |
| UnitedHealth Group Incorporated | UNH | $501.96 | $466.00B |
| Johnson & Johnson | JNJ | $172.85 | $452.00B |
| JPMorgan Chase & Co. | JPM | $150.23 | $431.00B |
| Visa Inc. | V | $246.39 | $519.00B |
| Eli Lilly and Company | LLY | $582.97 | $552.00B |
| Walmart Inc. | WMT | $159.67 | $429.00B |
| Samsung Electronics Co., Ltd. | 005930.KS | $70.22 | $429.00B |
| Procter & Gamble Co. | PG | $156.47 | $366.00B |
| Nestlé S.A. | NESN.SW | $120.51 | $338.00B |
| Roche Holding AG | ROG.SW | $296.00 | $317.00B |
| Chevron Corporation | CVX | $160.92 | $310.00B |
| LVMH Moët Hennessy Louis Vuitton | MC.PA | $956.60 | $478.00B |
| Pfizer Inc. | PFE | $35.95 | $200.00B |
| Novo Nordisk A/S | NVO | $189.15 | $443.00B |
| PepsiCo, Inc. | PEP | $182.56 | $311.00B |
| ASML Holding N.V. | ASML | $665.72 | $273.00B |
| The Coca-Cola Company | KO | $61.37 | $265.00B |
| Oracle Corporation | ORCL | $118.36 | $319.00B |
| Merck & Co., Inc. | MRK | $109.12 | $276.00B |
| Broadcom Inc. | AVGO | $861.80 | $356.00B |
| Mastercard Incorporated | MA | $421.44 | $396.00B |
<table id="search-table">
<thead>
<tr>
<th>
<span class="flex items-center">
Company Name
</span>
</th>
<th>
<span class="flex items-center">
Ticker
</span>
</th>
<th>
<span class="flex items-center">
Stock Price
</span>
</th>
<th>
<span class="flex items-center">
Market Capitalization
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Apple Inc.</td>
<td>AAPL</td>
<td>$192.58</td>
<td>$3.04T</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Microsoft Corporation</td>
<td>MSFT</td>
<td>$340.54</td>
<td>$2.56T</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Alphabet Inc.</td>
<td>GOOGL</td>
<td>$134.12</td>
<td>$1.72T</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Amazon.com Inc.</td>
<td>AMZN</td>
<td>$138.01</td>
<td>$1.42T</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">NVIDIA Corporation</td>
<td>NVDA</td>
<td>$466.19</td>
<td>$1.16T</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Tesla Inc.</td>
<td>TSLA</td>
<td>$255.98</td>
<td>$811.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Meta Platforms Inc.</td>
<td>META</td>
<td>$311.71</td>
<td>$816.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Berkshire Hathaway Inc.</td>
<td>BRK.B</td>
<td>$354.08</td>
<td>$783.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">TSMC</td>
<td>TSM</td>
<td>$103.51</td>
<td>$538.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">UnitedHealth Group Incorporated</td>
<td>UNH</td>
<td>$501.96</td>
<td>$466.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Johnson & Johnson</td>
<td>JNJ</td>
<td>$172.85</td>
<td>$452.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">JPMorgan Chase & Co.</td>
<td>JPM</td>
<td>$150.23</td>
<td>$431.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Visa Inc.</td>
<td>V</td>
<td>$246.39</td>
<td>$519.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Eli Lilly and Company</td>
<td>LLY</td>
<td>$582.97</td>
<td>$552.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Walmart Inc.</td>
<td>WMT</td>
<td>$159.67</td>
<td>$429.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Samsung Electronics Co., Ltd.</td>
<td>005930.KS</td>
<td>$70.22</td>
<td>$429.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Procter & Gamble Co.</td>
<td>PG</td>
<td>$156.47</td>
<td>$366.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Nestlé S.A.</td>
<td>NESN.SW</td>
<td>$120.51</td>
<td>$338.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Roche Holding AG</td>
<td>ROG.SW</td>
<td>$296.00</td>
<td>$317.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Chevron Corporation</td>
<td>CVX</td>
<td>$160.92</td>
<td>$310.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">LVMH Moët Hennessy Louis Vuitton</td>
<td>MC.PA</td>
<td>$956.60</td>
<td>$478.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Pfizer Inc.</td>
<td>PFE</td>
<td>$35.95</td>
<td>$200.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Novo Nordisk A/S</td>
<td>NVO</td>
<td>$189.15</td>
<td>$443.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">PepsiCo, Inc.</td>
<td>PEP</td>
<td>$182.56</td>
<td>$311.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">ASML Holding N.V.</td>
<td>ASML</td>
<td>$665.72</td>
<td>$273.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">The Coca-Cola Company</td>
<td>KO</td>
<td>$61.37</td>
<td>$265.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Oracle Corporation</td>
<td>ORCL</td>
<td>$118.36</td>
<td>$319.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Merck & Co., Inc.</td>
<td>MRK</td>
<td>$109.12</td>
<td>$276.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Broadcom Inc.</td>
<td>AVGO</td>
<td>$861.80</td>
<td>$356.00B</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Mastercard Incorporated</td>
<td>MA</td>
<td>$421.44</td>
<td>$396.00B</td>
</tr>
</tbody>
</table>if (document.getElementById("search-table") && typeof simpleDatatables.DataTable !== 'undefined') {
const dataTable = new simpleDatatables.DataTable("#search-table", {
searchable: true,
sortable: false
});
}
Filtering data #
To enable filtering data based on a search query for each column you need to copy the custom code from the JavaScript tab and the HTML structure of the table. Enabling search for each individual data column is an advanced way of letting users browse complex data.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
| Name | Category | Brand | Price | Stock | Total Sales | Status |
|---|---|---|---|---|---|---|
| Apple iMac | Computers | Apple | $1,299 | 50 | 200 | In Stock |
| Apple iPhone | Mobile Phones | Apple | $999 | 120 | 300 | In Stock |
| Samsung Galaxy | Mobile Phones | Samsung | $899 | 80 | 150 | In Stock |
| Dell XPS 13 | Computers | Dell | $1,099 | 30 | 120 | In Stock |
| HP Spectre x360 | Computers | HP | $1,299 | 25 | 80 | In Stock |
| Google Pixel 6 | Mobile Phones | $799 | 100 | 200 | In Stock | |
| Sony WH-1000XM4 | Headphones | Sony | $349 | 60 | 150 | In Stock |
| Apple AirPods Pro | Headphones | Apple | $249 | 200 | 300 | In Stock |
| Asus ROG Zephyrus | Computers | Asus | $1,899 | 15 | 50 | In Stock |
| Microsoft Surface Pro 7 | Computers | Microsoft | $899 | 40 | 100 | In Stock |
| Samsung QLED TV | Televisions | Samsung | $1,299 | 25 | 70 | In Stock |
| LG OLED TV | Televisions | LG | $1,499 | 20 | 50 | In Stock |
| Canon EOS R5 | Cameras | Canon | $3,899 | 10 | 30 | In Stock |
| Nikon Z7 II | Cameras | Nikon | $3,299 | 8 | 25 | In Stock |
| Apple Watch Series 7 | Wearables | Apple | $399 | 150 | 500 | In Stock |
| Fitbit Charge 5 | Wearables | Fitbit | $179 | 100 | 250 | In Stock |
| Dyson V11 Vacuum | Home Appliances | Dyson | $599 | 30 | 90 | In Stock |
| iRobot Roomba i7+ | Home Appliances | iRobot | $799 | 20 | 70 | In Stock |
| Bose SoundLink Revolve | Speakers | Bose | $199 | 80 | 200 | In Stock |
| Sonos One | Speakers | Sonos | $219 | 60 | 180 | In Stock |
| Apple iPad Pro | Tablets | Apple | $1,099 | 50 | 150 | In Stock |
| Samsung Galaxy Tab S7 | Tablets | Samsung | $649 | 70 | 130 | In Stock |
| Amazon Echo Dot | Smart Home | Amazon | $49 | 300 | 800 | In Stock |
| Google Nest Hub | Smart Home | $89 | 150 | 400 | In Stock | |
| PlayStation 5 | Gaming Consoles | Sony | $499 | 10 | 500 | Out of Stock |
| Xbox Series X | Gaming Consoles | Microsoft | $499 | 15 | 450 | Out of Stock |
| Nintendo Switch | Gaming Consoles | Nintendo | $299 | 40 | 600 | In Stock |
| Apple MacBook Pro | Computers | Apple | $1,299 | 20 | 100 | In Stock |
<table id="filter-table">
<thead>
<tr>
<th>
<span class="flex items-center">
Name
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Category
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Brand
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Price
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Stock
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Total Sales
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Status
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Apple iMac</td>
<td>Computers</td>
<td>Apple</td>
<td>$1,299</td>
<td>50</td>
<td>200</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Apple iPhone</td>
<td>Mobile Phones</td>
<td>Apple</td>
<td>$999</td>
<td>120</td>
<td>300</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Samsung Galaxy</td>
<td>Mobile Phones</td>
<td>Samsung</td>
<td>$899</td>
<td>80</td>
<td>150</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Dell XPS 13</td>
<td>Computers</td>
<td>Dell</td>
<td>$1,099</td>
<td>30</td>
<td>120</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">HP Spectre x360</td>
<td>Computers</td>
<td>HP</td>
<td>$1,299</td>
<td>25</td>
<td>80</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Google Pixel 6</td>
<td>Mobile Phones</td>
<td>Google</td>
<td>$799</td>
<td>100</td>
<td>200</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Sony WH-1000XM4</td>
<td>Headphones</td>
<td>Sony</td>
<td>$349</td>
<td>60</td>
<td>150</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Apple AirPods Pro</td>
<td>Headphones</td>
<td>Apple</td>
<td>$249</td>
<td>200</td>
<td>300</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Asus ROG Zephyrus</td>
<td>Computers</td>
<td>Asus</td>
<td>$1,899</td>
<td>15</td>
<td>50</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Microsoft Surface Pro 7</td>
<td>Computers</td>
<td>Microsoft</td>
<td>$899</td>
<td>40</td>
<td>100</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Samsung QLED TV</td>
<td>Televisions</td>
<td>Samsung</td>
<td>$1,299</td>
<td>25</td>
<td>70</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">LG OLED TV</td>
<td>Televisions</td>
<td>LG</td>
<td>$1,499</td>
<td>20</td>
<td>50</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Canon EOS R5</td>
<td>Cameras</td>
<td>Canon</td>
<td>$3,899</td>
<td>10</td>
<td>30</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Nikon Z7 II</td>
<td>Cameras</td>
<td>Nikon</td>
<td>$3,299</td>
<td>8</td>
<td>25</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Apple Watch Series 7</td>
<td>Wearables</td>
<td>Apple</td>
<td>$399</td>
<td>150</td>
<td>500</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Fitbit Charge 5</td>
<td>Wearables</td>
<td>Fitbit</td>
<td>$179</td>
<td>100</td>
<td>250</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Dyson V11 Vacuum</td>
<td>Home Appliances</td>
<td>Dyson</td>
<td>$599</td>
<td>30</td>
<td>90</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">iRobot Roomba i7+</td>
<td>Home Appliances</td>
<td>iRobot</td>
<td>$799</td>
<td>20</td>
<td>70</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Bose SoundLink Revolve</td>
<td>Speakers</td>
<td>Bose</td>
<td>$199</td>
<td>80</td>
<td>200</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Sonos One</td>
<td>Speakers</td>
<td>Sonos</td>
<td>$219</td>
<td>60</td>
<td>180</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Apple iPad Pro</td>
<td>Tablets</td>
<td>Apple</td>
<td>$1,099</td>
<td>50</td>
<td>150</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Samsung Galaxy Tab S7</td>
<td>Tablets</td>
<td>Samsung</td>
<td>$649</td>
<td>70</td>
<td>130</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Amazon Echo Dot</td>
<td>Smart Home</td>
<td>Amazon</td>
<td>$49</td>
<td>300</td>
<td>800</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Google Nest Hub</td>
<td>Smart Home</td>
<td>Google</td>
<td>$89</td>
<td>150</td>
<td>400</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">PlayStation 5</td>
<td>Gaming Consoles</td>
<td>Sony</td>
<td>$499</td>
<td>10</td>
<td>500</td>
<td>Out of Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Xbox Series X</td>
<td>Gaming Consoles</td>
<td>Microsoft</td>
<td>$499</td>
<td>15</td>
<td>450</td>
<td>Out of Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Nintendo Switch</td>
<td>Gaming Consoles</td>
<td>Nintendo</td>
<td>$299</td>
<td>40</td>
<td>600</td>
<td>In Stock</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Apple MacBook Pro</td>
<td>Computers</td>
<td>Apple</td>
<td>$1,299</td>
<td>20</td>
<td>100</td>
<td>In Stock</td>
</tr>
</tbody>
</table>if (document.getElementById("filter-table") && typeof simpleDatatables.DataTable !== 'undefined') {
const dataTable = new simpleDatatables.DataTable("#filter-table", {
tableRender: (_data, table, type) => {
if (type === "print") {
return table
}
const tHead = table.childNodes[0]
const filterHeaders = {
nodeName: "TR",
attributes: {
class: "search-filtering-row"
},
childNodes: tHead.childNodes[0].childNodes.map(
(_th, index) => ({nodeName: "TH",
childNodes: [
{
nodeName: "INPUT",
attributes: {
class: "datatable-input",
type: "search",
"data-columns": "[" + index + "]"
}
}
]})
)
}
tHead.childNodes.push(filterHeaders)
return table
}
});
}
Sorting data #
By setting the value sortable to true you’ll enable all data rows from the datatable to be sortable by clicking on the table column heading. You can also disable it by setting the same option to false.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
| Country | GDP | Population | GDP per Capita |
|---|---|---|---|
| United States | $21433 billion | 331 million | $64763 |
| China | $14342 billion | 1441 million | $9957 |
| Japan | $5082 billion | 126 million | $40335 |
| Germany | $3846 billion | 83 million | $46386 |
| India | $2875 billion | 1380 million | $2083 |
| United Kingdom | $2829 billion | 67 million | $42224 |
| France | $2716 billion | 65 million | $41723 |
| Italy | $2001 billion | 60 million | $33350 |
| Canada | $1643 billion | 38 million | $43237 |
| South Korea | $1631 billion | 52 million | $31365 |
| Russia | $1460 billion | 144 million | $10139 |
| Brazil | $1430 billion | 213 million | $6718 |
| Australia | $1393 billion | 25 million | $55720 |
| Spain | $1326 billion | 47 million | $28255 |
| Mexico | $1194 billion | 129 million | $9255 |
| Indonesia | $1158 billion | 273 million | $4241 |
| Netherlands | $1010 billion | 17 million | $59412 |
| Saudi Arabia | $804 billion | 35 million | $22914 |
| Turkey | $761 billion | 84 million | $9060 |
| Switzerland | $741 billion | 9 million | $82333 |
<table id="sorting-table">
<thead>
<tr>
<th>
<span class="flex items-center">
Country
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
GDP
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Population
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
GDP per Capita
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">United States</td>
<td>$21433 billion</td>
<td>331 million</td>
<td>$64763</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">China</td>
<td>$14342 billion</td>
<td>1441 million</td>
<td>$9957</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Japan</td>
<td>$5082 billion</td>
<td>126 million</td>
<td>$40335</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Germany</td>
<td>$3846 billion</td>
<td>83 million</td>
<td>$46386</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">India</td>
<td>$2875 billion</td>
<td>1380 million</td>
<td>$2083</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">United Kingdom</td>
<td>$2829 billion</td>
<td>67 million</td>
<td>$42224</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">France</td>
<td>$2716 billion</td>
<td>65 million</td>
<td>$41723</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Italy</td>
<td>$2001 billion</td>
<td>60 million</td>
<td>$33350</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Canada</td>
<td>$1643 billion</td>
<td>38 million</td>
<td>$43237</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">South Korea</td>
<td>$1631 billion</td>
<td>52 million</td>
<td>$31365</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Russia</td>
<td>$1460 billion</td>
<td>144 million</td>
<td>$10139</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Brazil</td>
<td>$1430 billion</td>
<td>213 million</td>
<td>$6718</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Australia</td>
<td>$1393 billion</td>
<td>25 million</td>
<td>$55720</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Spain</td>
<td>$1326 billion</td>
<td>47 million</td>
<td>$28255</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Mexico</td>
<td>$1194 billion</td>
<td>129 million</td>
<td>$9255</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Indonesia</td>
<td>$1158 billion</td>
<td>273 million</td>
<td>$4241</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Netherlands</td>
<td>$1010 billion</td>
<td>17 million</td>
<td>$59412</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Saudi Arabia</td>
<td>$804 billion</td>
<td>35 million</td>
<td>$22914</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Turkey</td>
<td>$761 billion</td>
<td>84 million</td>
<td>$9060</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Switzerland</td>
<td>$741 billion</td>
<td>9 million</td>
<td>$82333</td>
</tr>
</tbody>
</table>if (document.getElementById("sorting-table") && typeof simpleDatatables.DataTable !== 'undefined') {
const dataTable = new simpleDatatables.DataTable("#sorting-table", {
searchable: false,
perPageSelect: false,
sortable: true
});
}
Table pagination #
Pagination is enabled by default for all datatables from Flowbite, however, you can disable it by setting the option paging to false. Use the perPage option to specify how many data rows to show by default.
You can also set the perPageSelect option to set the selection options of the table.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
| Model Name | Developer | Release Date | Parameters | Primary Application |
|---|---|---|---|---|
| GPT-4 | OpenAI | March 2023 | 1 trillion | Natural Language Processing |
| BERT | October 2018 | 340 million | Natural Language Understanding | |
| DALL-E 2 | OpenAI | April 2022 | 3.5 billion | Image Generation |
| T5 | October 2019 | 11 billion | Text-to-Text Transfer | |
| GPT-3.5 | OpenAI | November 2022 | 175 billion | Natural Language Processing |
| Codex | OpenAI | August 2021 | 12 billion | Code Generation |
| PaLM 2 | May 2023 | 540 billion | Multilingual Understanding | |
| LaMDA | May 2021 | 137 billion | Conversational AI | |
| CLIP | OpenAI | January 2021 | 400 million | Image and Text Understanding |
| XLNet | June 2019 | 340 million | Natural Language Processing | |
| Meena | January 2020 | 2.6 billion | Conversational AI | |
| BigGAN | September 2018 | Unlimited | Image Generation | |
| Electra | March 2020 | 14 million | Natural Language Understanding | |
| Swin Transformer | Microsoft | April 2021 | 88 million | Vision Processing |
| GPT-NeoX-20B | EleutherAI | April 2022 | 20 billion | Natural Language Processing |
| Ernie 3.0 | Baidu | July 2021 | 10 billion | Natural Language Processing |
| Turing-NLG | Microsoft | February 2020 | 17 billion | Natural Language Processing |
| Wu Dao 2.0 | Beijing Academy of AI | June 2021 | 1.75 trillion | Multimodal Processing |
| Jukebox | OpenAI | April 2020 | 1.2 billion | Music Generation |
| StyleGAN2 | NVIDIA | February 2020 | Unlimited | Image Generation |
| FLAN | December 2021 | 137 billion | Few-shot Learning | |
| GShard | June 2020 | 600 billion | Multilingual Understanding | |
| AlphaFold | DeepMind | December 2020 | Unknown | Protein Folding |
| GPT-J | EleutherAI | June 2021 | 6 billion | Natural Language Processing |
| M6 | Alibaba | December 2020 | 10 billion | Multimodal Processing |
| Megatron-Turing NLG | NVIDIA & Microsoft | October 2021 | 530 billion | Natural Language Processing |
| DeepSpeed | Microsoft | February 2020 | Not disclosed | AI Training Optimization |
<table id="pagination-table">
<thead>
<tr>
<th>
<span class="flex items-center">
Model Name
</span>
</th>
<th>
<span class="flex items-center">
Developer
</span>
</th>
<th data-type="date" data-format="Month YYYY">
<span class="flex items-center">
Release Date
</span>
</th>
<th>
<span class="flex items-center">
Parameters
</span>
</th>
<th>
<span class="flex items-center">
Primary Application
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">GPT-4</td>
<td>OpenAI</td>
<td>March 2023</td>
<td>1 trillion</td>
<td>Natural Language Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">BERT</td>
<td>Google</td>
<td>October 2018</td>
<td>340 million</td>
<td>Natural Language Understanding</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">DALL-E 2</td>
<td>OpenAI</td>
<td>April 2022</td>
<td>3.5 billion</td>
<td>Image Generation</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">T5</td>
<td>Google</td>
<td>October 2019</td>
<td>11 billion</td>
<td>Text-to-Text Transfer</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">GPT-3.5</td>
<td>OpenAI</td>
<td>November 2022</td>
<td>175 billion</td>
<td>Natural Language Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Codex</td>
<td>OpenAI</td>
<td>August 2021</td>
<td>12 billion</td>
<td>Code Generation</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">PaLM 2</td>
<td>Google</td>
<td>May 2023</td>
<td>540 billion</td>
<td>Multilingual Understanding</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">LaMDA</td>
<td>Google</td>
<td>May 2021</td>
<td>137 billion</td>
<td>Conversational AI</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">CLIP</td>
<td>OpenAI</td>
<td>January 2021</td>
<td>400 million</td>
<td>Image and Text Understanding</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">XLNet</td>
<td>Google</td>
<td>June 2019</td>
<td>340 million</td>
<td>Natural Language Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Meena</td>
<td>Google</td>
<td>January 2020</td>
<td>2.6 billion</td>
<td>Conversational AI</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">BigGAN</td>
<td>Google</td>
<td>September 2018</td>
<td>Unlimited</td>
<td>Image Generation</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Electra</td>
<td>Google</td>
<td>March 2020</td>
<td>14 million</td>
<td>Natural Language Understanding</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Swin Transformer</td>
<td>Microsoft</td>
<td>April 2021</td>
<td>88 million</td>
<td>Vision Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">GPT-NeoX-20B</td>
<td>EleutherAI</td>
<td>April 2022</td>
<td>20 billion</td>
<td>Natural Language Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Ernie 3.0</td>
<td>Baidu</td>
<td>July 2021</td>
<td>10 billion</td>
<td>Natural Language Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Turing-NLG</td>
<td>Microsoft</td>
<td>February 2020</td>
<td>17 billion</td>
<td>Natural Language Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Wu Dao 2.0</td>
<td>Beijing Academy of AI</td>
<td>June 2021</td>
<td>1.75 trillion</td>
<td>Multimodal Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Jukebox</td>
<td>OpenAI</td>
<td>April 2020</td>
<td>1.2 billion</td>
<td>Music Generation</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">StyleGAN2</td>
<td>NVIDIA</td>
<td>February 2020</td>
<td>Unlimited</td>
<td>Image Generation</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">FLAN</td>
<td>Google</td>
<td>December 2021</td>
<td>137 billion</td>
<td>Few-shot Learning</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">GShard</td>
<td>Google</td>
<td>June 2020</td>
<td>600 billion</td>
<td>Multilingual Understanding</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">AlphaFold</td>
<td>DeepMind</td>
<td>December 2020</td>
<td>Unknown</td>
<td>Protein Folding</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">GPT-J</td>
<td>EleutherAI</td>
<td>June 2021</td>
<td>6 billion</td>
<td>Natural Language Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">M6</td>
<td>Alibaba</td>
<td>December 2020</td>
<td>10 billion</td>
<td>Multimodal Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Megatron-Turing NLG</td>
<td>NVIDIA & Microsoft</td>
<td>October 2021</td>
<td>530 billion</td>
<td>Natural Language Processing</td>
</tr>
<tr>
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">DeepSpeed</td>
<td>Microsoft</td>
<td>February 2020</td>
<td>Not disclosed</td>
<td>AI Training Optimization</td>
</tr>
</tbody>
</table>if (document.getElementById("pagination-table") && typeof simpleDatatables.DataTable !== 'undefined') {
const dataTable = new simpleDatatables.DataTable("#pagination-table", {
paging: true,
perPage: 5,
perPageSelect: [5, 10, 15, 20, 25],
sortable: false
});
}
Selecting rows #
Use this example to enable the selection of rows by clicking anywhere one of the table row elements by copying setting the multiselect option to true and copying the JavaScript configuration from Flowbite.
Use the datatable.selectrow event to write your own code and get the data from the selected table row.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
| Name | Release Date | NPM Downloads | Growth |
|---|---|---|---|
| Flowbite | 2021/25/09 | 269000 | 49% |
| React | 2013/24/05 | 4500000 | 24% |
| Angular | 2010/20/09 | 2800000 | 17% |
| Vue | 2014/12/02 | 3600000 | 30% |
| Svelte | 2016/26/11 | 1200000 | 57% |
| Ember | 2011/08/12 | 500000 | 44% |
| Backbone | 2010/13/10 | 300000 | 9% |
| jQuery | 2006/28/01 | 6000000 | 5% |
| Bootstrap | 2011/19/08 | 1800000 | 12% |
| Foundation | 2011/23/09 | 700000 | 8% |
| Bulma | 2016/24/10 | 500000 | 7% |
| Next.js | 2016/25/10 | 2300000 | 45% |
| Nuxt.js | 2016/16/10 | 900000 | 50% |
| Meteor | 2012/17/01 | 1000000 | 10% |
| Aurelia | 2015/08/07 | 200000 | 20% |
| Inferno | 2016/27/09 | 100000 | 35% |
| Preact | 2015/16/08 | 600000 | 28% |
| Lit | 2018/28/05 | 400000 | 60% |
| Alpine.js | 2019/02/11 | 300000 | 70% |
| Stimulus | 2018/06/03 | 150000 | 25% |
| Solid | 2021/05/07 | 250000 | 80% |
<table id="selection-table">
<thead>
<tr>
<th>
<span class="flex items-center">
Name
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th data-type="date" data-format="YYYY/DD/MM">
<span class="flex items-center">
Release Date
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
NPM Downloads
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Growth
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Flowbite</td>
<td>2021/25/09</td>
<td>269000</td>
<td>49%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">React</td>
<td>2013/24/05</td>
<td>4500000</td>
<td>24%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Angular</td>
<td>2010/20/09</td>
<td>2800000</td>
<td>17%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Vue</td>
<td>2014/12/02</td>
<td>3600000</td>
<td>30%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Svelte</td>
<td>2016/26/11</td>
<td>1200000</td>
<td>57%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Ember</td>
<td>2011/08/12</td>
<td>500000</td>
<td>44%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Backbone</td>
<td>2010/13/10</td>
<td>300000</td>
<td>9%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">jQuery</td>
<td>2006/28/01</td>
<td>6000000</td>
<td>5%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Bootstrap</td>
<td>2011/19/08</td>
<td>1800000</td>
<td>12%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Foundation</td>
<td>2011/23/09</td>
<td>700000</td>
<td>8%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Bulma</td>
<td>2016/24/10</td>
<td>500000</td>
<td>7%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Next.js</td>
<td>2016/25/10</td>
<td>2300000</td>
<td>45%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Nuxt.js</td>
<td>2016/16/10</td>
<td>900000</td>
<td>50%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Meteor</td>
<td>2012/17/01</td>
<td>1000000</td>
<td>10%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Aurelia</td>
<td>2015/08/07</td>
<td>200000</td>
<td>20%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Inferno</td>
<td>2016/27/09</td>
<td>100000</td>
<td>35%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Preact</td>
<td>2015/16/08</td>
<td>600000</td>
<td>28%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Lit</td>
<td>2018/28/05</td>
<td>400000</td>
<td>60%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Alpine.js</td>
<td>2019/02/11</td>
<td>300000</td>
<td>70%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Stimulus</td>
<td>2018/06/03</td>
<td>150000</td>
<td>25%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Solid</td>
<td>2021/05/07</td>
<td>250000</td>
<td>80%</td>
</tr>
</tbody>
</table>if (document.getElementById("selection-table") && typeof simpleDatatables.DataTable !== 'undefined') {
let multiSelect = true;
let rowNavigation = false;
let table = null;
const resetTable = function() {
if (table) {
table.destroy();
}
const options = {
rowRender: (row, tr, _index) => {
if (!tr.attributes) {
tr.attributes = {};
}
if (!tr.attributes.class) {
tr.attributes.class = "";
}
if (row.selected) {
tr.attributes.class += " selected";
} else {
tr.attributes.class = tr.attributes.class.replace(" selected", "");
}
return tr;
}
};
if (rowNavigation) {
options.rowNavigation = true;
options.tabIndex = 1;
}
table = new simpleDatatables.DataTable("#selection-table", options);
// Mark all rows as unselected
table.data.data.forEach(data => {
data.selected = false;
});
table.on("datatable.selectrow", (rowIndex, event) => {
event.preventDefault();
const row = table.data.data[rowIndex];
if (row.selected) {
row.selected = false;
} else {
if (!multiSelect) {
table.data.data.forEach(data => {
data.selected = false;
});
}
row.selected = true;
}
table.update();
});
};
// Row navigation makes no sense on mobile, so we deactivate it and hide the checkbox.
const isMobile = window.matchMedia("(any-pointer:coarse)").matches;
if (isMobile) {
rowNavigation = false;
}
resetTable();
}
Export files #
If you want to enable the export of the table data, you can use the simpleDatatables.exportCSV function to export the data as a CSV file. The option is also available for TXT, JSON, and SQL formats.
Toggle RTL mode
Toggle dark mode
Loading...
Copy to clipboard
| Name | Release Date | NPM Downloads | Growth |
|---|---|---|---|
| Flowbite | 2021/25/09 | 269000 | 49% |
| React | 2013/24/05 | 4500000 | 24% |
| Angular | 2010/20/09 | 2800000 | 17% |
| Vue | 2014/12/02 | 3600000 | 30% |
| Svelte | 2016/26/11 | 1200000 | 57% |
| Ember | 2011/08/12 | 500000 | 44% |
| Backbone | 2010/13/10 | 300000 | 9% |
| jQuery | 2006/28/01 | 6000000 | 5% |
| Bootstrap | 2011/19/08 | 1800000 | 12% |
| Foundation | 2011/23/09 | 700000 | 8% |
| Bulma | 2016/24/10 | 500000 | 7% |
| Next.js | 2016/25/10 | 2300000 | 45% |
| Nuxt.js | 2016/16/10 | 900000 | 50% |
| Meteor | 2012/17/01 | 1000000 | 10% |
| Aurelia | 2015/08/07 | 200000 | 20% |
| Inferno | 2016/27/09 | 100000 | 35% |
| Preact | 2015/16/08 | 600000 | 28% |
| Lit | 2018/28/05 | 400000 | 60% |
| Alpine.js | 2019/02/11 | 300000 | 70% |
| Stimulus | 2018/06/03 | 150000 | 25% |
| Solid | 2021/05/07 | 250000 | 80% |
<table id="export-table">
<thead>
<tr>
<th>
<span class="flex items-center">
Name
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th data-type="date" data-format="YYYY/DD/MM">
<span class="flex items-center">
Release Date
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
NPM Downloads
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
<th>
<span class="flex items-center">
Growth
<svg class="w-4 h-4 ms-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
</svg>
</span>
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Flowbite</td>
<td>2021/25/09</td>
<td>269000</td>
<td>49%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">React</td>
<td>2013/24/05</td>
<td>4500000</td>
<td>24%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Angular</td>
<td>2010/20/09</td>
<td>2800000</td>
<td>17%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Vue</td>
<td>2014/12/02</td>
<td>3600000</td>
<td>30%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Svelte</td>
<td>2016/26/11</td>
<td>1200000</td>
<td>57%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Ember</td>
<td>2011/08/12</td>
<td>500000</td>
<td>44%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Backbone</td>
<td>2010/13/10</td>
<td>300000</td>
<td>9%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">jQuery</td>
<td>2006/28/01</td>
<td>6000000</td>
<td>5%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Bootstrap</td>
<td>2011/19/08</td>
<td>1800000</td>
<td>12%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Foundation</td>
<td>2011/23/09</td>
<td>700000</td>
<td>8%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Bulma</td>
<td>2016/24/10</td>
<td>500000</td>
<td>7%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Next.js</td>
<td>2016/25/10</td>
<td>2300000</td>
<td>45%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Nuxt.js</td>
<td>2016/16/10</td>
<td>900000</td>
<td>50%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Meteor</td>
<td>2012/17/01</td>
<td>1000000</td>
<td>10%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Aurelia</td>
<td>2015/08/07</td>
<td>200000</td>
<td>20%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Inferno</td>
<td>2016/27/09</td>
<td>100000</td>
<td>35%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Preact</td>
<td>2015/16/08</td>
<td>600000</td>
<td>28%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Lit</td>
<td>2018/28/05</td>
<td>400000</td>
<td>60%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Alpine.js</td>
<td>2019/02/11</td>
<td>300000</td>
<td>70%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Stimulus</td>
<td>2018/06/03</td>
<td>150000</td>
<td>25%</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
<td class="font-medium text-gray-900 whitespace-nowrap dark:text-white">Solid</td>
<td>2021/05/07</td>
<td>250000</td>
<td>80%</td>
</tr>
</tbody>
</table>if (document.getElementById("export-table") && typeof simpleDatatables.DataTable !== 'undefined') {
const exportCustomCSV = function(dataTable, userOptions = {}) {
// A modified CSV export that includes a row of minuses at the start and end.
const clonedUserOptions = {
...userOptions
}
clonedUserOptions.download = false
const csv = simpleDatatables.exportCSV(dataTable, clonedUserOptions)
// If CSV didn't work, exit.
if (!csv) {
return false
}
const defaults = {
download: true,
lineDelimiter: "\n",
columnDelimiter: ";"
}
const options = {
...defaults,
...clonedUserOptions
}
const separatorRow = Array(dataTable.data.headings.filter((_heading, index) => !dataTable.columns.settings[index]?.hidden).length)
.fill("+")
.join("+"); // Use "+" as the delimiter
const str = separatorRow + options.lineDelimiter + csv + options.lineDelimiter + separatorRow;
if (userOptions.download) {
// Create a link to trigger the download
const link = document.createElement("a");
link.href = encodeURI("data:text/csv;charset=utf-8," + str);
link.download = (options.filename || "datatable_export") + ".txt";
// Append the link
document.body.appendChild(link);
// Trigger the download
link.click();
// Remove the link
document.body.removeChild(link);
}
return str
}
const table = new simpleDatatables.DataTable("#export-table", {
template: (options, dom) => "<div class='" + options.classes.top + "'>" +
"<div class='flex flex-col sm:flex-row sm:items-center space-y-4 sm:space-y-0 sm:space-x-3 rtl:space-x-reverse w-full sm:w-auto'>" +
(options.paging && options.perPageSelect ?
"<div class='" + options.classes.dropdown + "'>" +
"<label>" +
"<select class='" + options.classes.selector + "'></select> " + options.labels.perPage +
"</label>" +
"</div>" : ""
) + "<button id='exportDropdownButton' type='button' class='flex w-full items-center justify-center rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700 sm:w-auto'>" +
"Export as" +
"<svg class='-me-0.5 ms-1.5 h-4 w-4' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'>" +
"<path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m19 9-7 7-7-7' />" +
"</svg>" +
"</button>" +
"<div id='exportDropdown' class='z-10 hidden w-52 divide-y divide-gray-100 rounded-lg bg-white shadow dark:bg-gray-700' data-popper-placement='bottom'>" +
"<ul class='p-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400' aria-labelledby='exportDropdownButton'>" +
"<li>" +
"<button id='export-csv' class='group inline-flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white'>" +
"<svg class='me-1.5 h-4 w-4 text-gray-400 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>" +
"<path fill-rule='evenodd' d='M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2 2 2 0 0 0 2 2h12a2 2 0 0 0 2-2 2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2V4a2 2 0 0 0-2-2h-7Zm1.018 8.828a2.34 2.34 0 0 0-2.373 2.13v.008a2.32 2.32 0 0 0 2.06 2.497l.535.059a.993.993 0 0 0 .136.006.272.272 0 0 1 .263.367l-.008.02a.377.377 0 0 1-.018.044.49.49 0 0 1-.078.02 1.689 1.689 0 0 1-.297.021h-1.13a1 1 0 1 0 0 2h1.13c.417 0 .892-.05 1.324-.279.47-.248.78-.648.953-1.134a2.272 2.272 0 0 0-2.115-3.06l-.478-.052a.32.32 0 0 1-.285-.341.34.34 0 0 1 .344-.306l.94.02a1 1 0 1 0 .043-2l-.943-.02h-.003Zm7.933 1.482a1 1 0 1 0-1.902-.62l-.57 1.747-.522-1.726a1 1 0 0 0-1.914.578l1.443 4.773a1 1 0 0 0 1.908.021l1.557-4.773Zm-13.762.88a.647.647 0 0 1 .458-.19h1.018a1 1 0 1 0 0-2H6.647A2.647 2.647 0 0 0 4 13.647v1.706A2.647 2.647 0 0 0 6.647 18h1.018a1 1 0 1 0 0-2H6.647A.647.647 0 0 1 6 15.353v-1.706c0-.172.068-.336.19-.457Z' clip-rule='evenodd'/>" +
"</svg>" +
"<span>Export CSV</span>" +
"</button>" +
"</li>" +
"<li>" +
"<button id='export-json' class='group inline-flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white'>" +
"<svg class='me-1.5 h-4 w-4 text-gray-400 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>" +
"<path fill-rule='evenodd' d='M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-7Zm-.293 9.293a1 1 0 0 1 0 1.414L9.414 14l1.293 1.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 0Zm2.586 1.414a1 1 0 0 1 1.414-1.414l2 2a1 1 0 0 1 0 1.414l-2 2a1 1 0 0 1-1.414-1.414L14.586 14l-1.293-1.293Z' clip-rule='evenodd'/>" +
"</svg>" +
"<span>Export JSON</span>" +
"</button>" +
"</li>" +
"<li>" +
"<button id='export-txt' class='group inline-flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white'>" +
"<svg class='me-1.5 h-4 w-4 text-gray-400 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>" +
"<path fill-rule='evenodd' d='M9 2.221V7H4.221a2 2 0 0 1 .365-.5L8.5 2.586A2 2 0 0 1 9 2.22ZM11 2v5a2 2 0 0 1-2 2H4v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-7ZM8 16a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm1-5a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H9Z' clip-rule='evenodd'/>" +
"</svg>" +
"<span>Export TXT</span>" +
"</button>" +
"</li>" +
"<li>" +
"<button id='export-sql' class='group inline-flex w-full items-center rounded-md px-3 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white'>" +
"<svg class='me-1.5 h-4 w-4 text-gray-400 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white' aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'>" +
"<path d='M12 7.205c4.418 0 8-1.165 8-2.602C20 3.165 16.418 2 12 2S4 3.165 4 4.603c0 1.437 3.582 2.602 8 2.602ZM12 22c4.963 0 8-1.686 8-2.603v-4.404c-.052.032-.112.06-.165.09a7.75 7.75 0 0 1-.745.387c-.193.088-.394.173-.6.253-.063.024-.124.05-.189.073a18.934 18.934 0 0 1-6.3.998c-2.135.027-4.26-.31-6.3-.998-.065-.024-.126-.05-.189-.073a10.143 10.143 0 0 1-.852-.373 7.75 7.75 0 0 1-.493-.267c-.053-.03-.113-.058-.165-.09v4.404C4 20.315 7.037 22 12 22Zm7.09-13.928a9.91 9.91 0 0 1-.6.253c-.063.025-.124.05-.189.074a18.935 18.935 0 0 1-6.3.998c-2.135.027-4.26-.31-6.3-.998-.065-.024-.126-.05-.189-.074a10.163 10.163 0 0 1-.852-.372 7.816 7.816 0 0 1-.493-.268c-.055-.03-.115-.058-.167-.09V12c0 .917 3.037 2.603 8 2.603s8-1.686 8-2.603V7.596c-.052.031-.112.059-.165.09a7.816 7.816 0 0 1-.745.386Z'/>" +
"</svg>" +
"<span>Export SQL</span>" +
"</button>" +
"</li>" +
"</ul>" +
"</div>" + "</div>" +
(options.searchable ?
"<div class='" + options.classes.search + "'>" +
"<input class='" + options.classes.input + "' placeholder='" + options.labels.placeholder + "' type='search' title='" + options.labels.searchTitle + "'" + (dom.id ? " aria-controls='" + dom.id + "'" : "") + ">" +
"</div>" : ""
) +
"</div>" +
"<div class='" + options.classes.container + "'" + (options.scrollY.length ? " style='height: " + options.scrollY + "; overflow-Y: auto;'" : "") + "></div>" +
"<div class='" + options.classes.bottom + "'>" +
(options.paging ?
"<div class='" + options.classes.info + "'></div>" : ""
) +
"<nav class='" + options.classes.pagination + "'></nav>" +
"</div>"
})
const $exportButton = document.getElementById("exportDropdownButton");
const $exportDropdownEl = document.getElementById("exportDropdown");
const dropdown = new Dropdown($exportDropdownEl, $exportButton);
console.log(dropdown)
document.getElementById("export-csv").addEventListener("click", () => {
simpleDatatables.exportCSV(table, {
download: true,
lineDelimiter: "\n",
columnDelimiter: ";"
})
})
document.getElementById("export-sql").addEventListener("click", () => {
simpleDatatables.exportSQL(table, {
download: true,
tableName: "export_table"
})
})
document.getElementById("export-txt").addEventListener("click", () => {
simpleDatatables.exportTXT(table, {
download: true
})
})
document.getElementById("export-json").addEventListener("click", () => {
simpleDatatables.exportJSON(table, {
download: true,
space: 3
})
})
}
JavaScript behaviour #
Learn more about how you can customize the DataTables plugin such as changing the default options, customizing the table appearance, dynamically loading data, and more by checking the examples below.
After installing the DataTables plugin either via NPM or CDN you can initialize by calling the DataTable constructor and passing the table selector as the first argument.
// if you installed via CDN
const dataTable = new simpleDatatables.DataTable("#default-table");
// if you installed via NPM
import { DataTable } from "simple-datatables";
const dataTable = DataTable("#default-table");
You can pass an object of options as the second argument to customize the table appearance and behavior.
const dataTable = new simpleDatatables.DataTable("#default-table", options);
After initializing the DataTable, you can access the instance methods and properties.
Here’s a full list of the exposed methods and properties from the simple-datatables repository.
Options #
Check out some of the more commonly used options that you can pass to the DataTable instance.
Injecting data #
Use the data option to pass data from an array of arrays to the table using JavaScript.
const customData = {
"headings": [
"Name",
"Company",
"Date",
],
"data": [
[
"Flowbite",
"Bergside",
"05/23/2023",
],
[
"Next.js",
"Vercel",
"03/12/2024",
],
};
const dataTable = new DataTable("#default-table", { data: customData });
This is a useful feature where instead of a hard coded array you can pass data from an API or a JSON file.
Appearance #
Use the following options to customize the appearance of the table such as adding a caption, custom classes, footer, header, updating the HTML rendering template, and enabling vertical scrolling, and more.
const dataTable = new DataTable("#default-table", {
caption: "Flowbite is an open-source library",
classes: {
// add custom HTML classes, full list: https://fiduswriter.github.io/simple-datatables/documentation/classes
// we recommend keeping the default ones in addition to whatever you want to add because Flowbite hooks to the default classes for styles
},
footer: true, // enable or disable the footer
header: true, // enable or disable the header
labels: {
// add custom text for the labels, full list: https://fiduswriter.github.io/simple-datatables/documentation/labels
},
template: (options, dom) => {
// add custom HTML template for the table, full list: https://fiduswriter.github.io/simple-datatables/documentation/template
},
scrollY: "300px", // enable vertical scrolling
});
These options are useful if you want to add your own HTML elements inside the dynamically generated table header or footer as we used in the export a file example above.
Pagination #
Use these options to enable pagination, set the number of rows per page, and customize the appearance.
const dataTable = new DataTable("#default-table", {
paging: true, // enable or disable pagination
perPage: 10, // set the number of rows per page
perPageSelect: [5, 10, 20, 50], // set the number of rows per page options
firstLast: true, // enable or disable the first and last buttons
nextPrev: true, // enable or disable the next and previous buttons
});
Pagination is a useful feature when you have a large dataset and you want to split it into multiple pages.
Searching #
These options can be used to enable searching, set the search placeholder, and customize the appearance.
const dataTable = new DataTable("#default-table", {
searchable: true, // enable or disable searching
sensitivity: "base" // set the search sensitivity (base, accent, case, variant)
searchQuerySeparator: " ", // set the search query separator
});
The searching feature is great when you have a large dataset and you want to search for a specific row.
Sorting #
Use these options to enable sorting, set the default sort column, and customize the sort appearance.
const dataTable = new DataTable("#default-table", {
sortable: true, // enable or disable sorting
locale: "en-US", // set the locale for sorting
numeric: true, // enable or disable numeric sorting
caseFirst: "false", // set the case first for sorting (upper, lower)
ignorePunctuation: true // enable or disable punctuation sorting
});
The sorting feature is useful when you want to sort the table rows based on a specific column.
Methods #
Check out some of the common methods that you can use to interact with the DataTable instance.
// programatically search the table where the "term" variable is the query string
dataTable.search(term, columns);
// add a new table row data to the table (considering you have four columns)
dataTable.insert({
"Heading 1": "Cell 1",
"Heading 2": "Cell 2",
"Heading 3": "Cell 3",
"Heading 4": "Cell 4",
});
// updates the DOM of the table
dataTable.update();
Here’s a full list of the exposed methods and properties from the simple-datatables repository.
License #
All of the examples above built by Flowbite are open-source and licensed under the MIT license. The simple-datatables repository is also open-source and licensed under the GNU license.