Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cleanup demo pages #351

Merged
merged 1 commit into from
Nov 21, 2023
Merged

Cleanup demo pages #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ A lightweight, extendable, JavaScript HTML table library written in TypeScript a

## Examples / Demos

See the demos [here](https://fiduswriter.github.io/simple-datatables/demos/).
See the demos [here](https://fiduswriter.github.io/simple-datatables/demos/) and the documentation [here](https://fiduswriter.github.io/simple-datatables/documentation/).

### Upgrading

Expand Down
30 changes: 18 additions & 12 deletions docs/demos/1-simple/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,37 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<title>Simple</title>

<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
<title>Simple - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">

<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
<style>
.red {
background-color: red;
background-color: #ffafba;
}
.green {
background-color: green;
background-color: #ebffc8;
}
</style>
</head>
<body>
<h1>Simple</h1>
<table class="table" id="simple">
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>

<h2>Simple</h2>

<table id="demo-table">
<thead>
<tr>
<th>
<b>N</b>ame
<b>Name</b>
</th>
<th>Ext.</th>
<th>City</th>
Expand Down Expand Up @@ -740,7 +747,7 @@ <h1>Simple</h1>

<script type="module">
import {DataTable} from "../dist/module.js"
window.dt = new DataTable("table", {
window.dt = new DataTable("#demo-table", {
perPageSelect: [5, 10, 15, ["All", -1]],
columns: [
{
Expand All @@ -757,8 +764,7 @@ <h1>Simple</h1>
headerClass: "red"
}
]
})

})
</script>
</body>
</html>
25 changes: 17 additions & 8 deletions docs/demos/10-filters/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,29 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<title>Filters</title>
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
<title>Filters - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
</head>
<body>
<h1>Filters</h1>
<!-- CDN -->
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>

<h2>Filters</h2>

<!-- The table in this demo is generated programmatically. See below for more details. -->

<script src="../dist/umd.js"></script>
<!-- Custom Code -->
<script>
const t = document.createElement("table")
const table = document.createElement("table")
const data = {
"headings": ["Name", "Job", "Company", "Ext.", "Start Date", "Email", "Phone No."],
"data": [
Expand All @@ -35,8 +44,8 @@ <h1>Filters</h1>
["Caleb X. Finch", "Assistant", "Elit Associates", "3629", "09/19/2016", "condimentum@eleifend.com", "056 1551 7431"]
]
}
document.body.appendChild(t)
window.dt = new window.simpleDatatables.DataTable(t, {
document.body.appendChild(table)
window.dt = new window.simpleDatatables.DataTable(table, {
data,
columns: [
{
Expand Down
46 changes: 29 additions & 17 deletions docs/demos/11-export/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,25 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<title>Simple</title>
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
<title>Simple - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
</head>
<body>
<h1>Export</h1>
<table class="table">
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>

<h2>Export</h2>

<table id="demo-table">
<thead>
<tr>
<th>Name</th>
Expand Down Expand Up @@ -725,11 +734,13 @@ <h1>Export</h1>
</tr>
</tbody>
</table>
<button class="csv">Export CSV</button>
<button class="sql">Export SQL</button>
<button class="txt">Export TXT</button>
<button class="json">Export JSON</button>
<button class="custom">Export Custom</button>

<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>

<script type="module">
import {
DataTable,
Expand Down Expand Up @@ -759,8 +770,9 @@ <h1>Export</h1>
...defaults,
...clonedUserOptions
}
const separatorRow = Array(dataTable.data.headings.filter((_heading, index) => !dataTable.columns.settings[index]?.hidden).length).fill("-")
.join(options.columnDelimiter)
const separatorRow = Array(dataTable.data.headings.filter((_heading, index) => !dataTable.columns.settings[index]?.hidden).length)
.fill("-")
.join(options.columnDelimiter)
const str = `${separatorRow}${options.lineDelimiter}${csv}${options.lineDelimiter}${separatorRow}`
if (userOptions.download) {
// Create a link to trigger the download
Expand All @@ -776,32 +788,32 @@ <h1>Export</h1>
}
return str
}
const table = new DataTable("table")
document.querySelector("button.csv").addEventListener("click", () => {
const table = new DataTable("#demo-table")
document.getElementById("export-csv").addEventListener("click", () => {
exportCSV(table, {
download: true,
lineDelimiter: "\n",
columnDelimiter: ";"
})
})
document.querySelector("button.sql").addEventListener("click", () => {
document.getElementById("export-sql").addEventListener("click", () => {
exportSQL(table, {
download: true,
tableName: "export_table"
})
})
document.querySelector("button.txt").addEventListener("click", () => {
document.getElementById("export-txt").addEventListener("click", () => {
exportTXT(table, {
download: true
})
})
document.querySelector("button.json").addEventListener("click", () => {
document.getElementById("export-json").addEventListener("click", () => {
exportJSON(table, {
download: true,
space: 3
})
})
document.querySelector("button.custom").addEventListener("click", () => {
document.getElementById("export-custom").addEventListener("click", () => {
exportCustomCSV(table, {
download: true
})
Expand Down
50 changes: 29 additions & 21 deletions docs/demos/12-updating/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,40 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<title>Updating</title>
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
<title>Updating - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
</head>
<body>
<h1>Updating</h1>
Replace <i>first</i>
match in a specified column. <br>
&nbsp; <div id="update-div">
<label for="columns">Column</label>
<select id="columns"></select>
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>

<h2>Updating</h2>
<p>
Replace <i>first</i> match in a specified column.
</p>
<div id="update-div">
<label for="column">Column</label>
<select id="column"></select>
<label for="find">Find</label>
<input id="find">
<label for="replace">Replace</label>
<input id="replace">
<button id="update">Update</button>
</div>
<br>
<!-- CDN -->

<script src="../dist/umd.js"></script>
<!-- Custom Code -->
<script>
const t = document.createElement("table")
const table = document.createElement("table")
const data = {
"headings": ["Name", "Job", "Company", "Ext.", "Start Date", "Email", "Phone No."],
"data": [
Expand All @@ -47,21 +55,21 @@ <h1>Updating</h1>
["Caleb X. Finch", "Assistant", "Elit Associates", "3629", "09/19/2016", "condimentum@eleifend.com", "056 1551 7431"]
]
}
document.body.appendChild(t)
window.dt = new window.simpleDatatables.DataTable(t, {
document.body.appendChild(table)
window.dt = new window.simpleDatatables.DataTable(table, {
data,
columns: [
{
{
select: 4,
type: "date",
format: "MM/DD/YYYY"
}
]
]
})
const sel = document.getElementById("columns")
const sel = document.getElementById("column")
data.headings.forEach((heading, index) => {
const opt = document.createElement("option")
opt.text = `${heading} - column[${index}]`
opt.text = `${index} - ${heading}`
opt.value = `${index}`
sel.options.add(opt)
})
Expand All @@ -71,19 +79,19 @@ <h1>Updating</h1>
alert("Nothing to find")
return
}
const col = document.getElementById("columns").selectedIndex
const colIndex = document.getElementById("column").selectedIndex
// find first row where string occurs in column
const rows = window.dt.rows
const {
index,
cols
} = rows.findRow(col, find)
} = rows.findRow(colIndex, find)
if (index < 0) {
alert(`Could not find "${find}" within column ${col}`)
alert(`Could not find "${find}" within column ${colIndex}`)
return
}
// replace row data
cols[col] = document.getElementById("replace").value.trim()
cols[colIndex] = document.getElementById("replace").value.trim()
// update row in data table
rows.updateRow(index, cols)
})
Expand Down
26 changes: 19 additions & 7 deletions docs/demos/13-hide-column/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,27 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<title>Simple</title>
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
<title>Hide column - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
<link rel="stylesheet" href="../demo.css">
</head>
<body>
<h1>Simple</h1>
<table class="table">
<header>
<h1>
<a href="../../">simple-datatables</a>
</h1>
<a href="../../documentation">Documentation</a>
<a href="../">Demos</a>
</header>

<h2>Hide column</h2>
<p>Example on how to hide the column "Name".</p>
<br>

<table id="demo-table">
<thead>
<tr>
<th>Name</th>
Expand Down Expand Up @@ -725,21 +736,22 @@ <h1>Simple</h1>
</tr>
</tbody>
</table>

<script type="module">
import {
DataTable
} from "../dist/module.js"
new DataTable("table", {
new DataTable("#demo-table", {
columns: [
{
{
select: 0,
hidden: true,
render: (data, cell, row) => {
row.dataset.name = data // Will add data to row instead.
return data // Will not be shown as column is hidden.
}
}
],
],
searchable: false,
fixedHeight: false,
layout: {
Expand Down
Loading