Skip to content

Commit

Permalink
feat(datatables): add basic export files feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@zoltanszogyenyi
zoltanszogyenyi committed Aug 2, 2024
1 parent e56f601 commit f842793
Showing 1 changed file with 251 additions and 0 deletions.
251 changes: 251 additions & 0 deletions content/plugins/datatables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1707,6 +1707,257 @@ if (document.getElementById("selection-table") && typeof simpleDatatables.DataTa

## Export files

{{< example id="export-datatable-example" class="dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
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")
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
})
})
document.getElementById("export-custom").addEventListener("click", () => {
simpleDatatables.exportCustomCSV(table, {
download: true
})
})
}
` >}}
<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>
<div class="flex items-center space-x-2 rtl:space-x-reverse">
<button id="export-csv">Export CSV</button>
<button id="export-sql">Export SQL</button>
<button id="export-txt">Export TXT</button>
<button id="export-json">Export JSON</button>
<button id="export-custom">Export Custom</button>
</div>
{{< /example >}}

## Options

## JavaScript behaviour

0 comments on commit f842793

Please sign in to comment.