Skip to content

Commit

Permalink
Merge pull request #351 from SandroHc/docs
Browse files Browse the repository at this point in the history 
Cleanup demo pages
  • Loading branch information
@johanneswilm
johanneswilm authored Nov 21, 2023
2 parents 989c4d7 + 1a2b0fa commit 46efc3c
Show file tree
Hide file tree
Showing 33 changed files with 880 additions and 697 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
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
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
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", "[email protected]", "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
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
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", "[email protected]", "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
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

0 comments on commit 46efc3c

Please sign in to comment.