Skip to content

Commit

Permalink
Merge pull request #353 from SandroHc/custom-row-attrs
Browse files Browse the repository at this point in the history 
Allow customizing row attributes
  • Loading branch information
@johanneswilm
johanneswilm authored Nov 26, 2023
2 parents e3d32b0 + 7ccc14c commit 9a032c2
Show file tree
Hide file tree
Showing 27 changed files with 16,570 additions and 14,197 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
node_modules/
tests/qunit.css
package-lock.json
pnpm-lock.yaml
yarn.lock
.DS_Store
.idea/
.python-version
Expand Down
2 changes: 1 addition & 1 deletion docs/demos/11-export/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg+xml" href="../../favicon.svg">
<title>Simple - simple-datatables</title>
<title>Export - simple-datatables</title>
<!-- DataTable Styles -->
<link rel="stylesheet" href="../dist/css/style.css">
<!-- Demo Styles -->
Expand Down
2 changes: 1 addition & 1 deletion docs/demos/13-hide-column/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ <h1>
</header>

<h2>Hide column</h2>
<p>Example on how to hide the column "Name".</p>
<p>The column "Name" has been hidden programmatically.</p>
<br>

<table id="demo-table">
Expand Down
8 changes: 4 additions & 4 deletions docs/demos/15-editing/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -773,25 +773,25 @@ <h2>Editing</h2>
editor = makeEditable(table, {
contextMenu: true,
hiddenColumns: true,
excludeColumns: [1],
excludeColumns: [1], // make the "Ext." column non-editable
inline,
menuItems: [
{
text: "<span class = 'mdi mdi-lead-pencil'> </span> Edit Cell",
text: "<span class='mdi mdi-lead-pencil'></span> Edit Cell",
action: (editor, _event) => {
const td = editor.event.target.closest("td")
return editor.editCell(td)
}
}, {
text: "<span class = 'mdi mdi-lead-pencil'> </span> Edit Row",
text: "<span class='mdi mdi-lead-pencil'></span> Edit Row",
action: (editor, _event) => {
const tr = editor.event.target.closest("tr")
return editor.editRow(tr)
}
}, {
separator: true
}, {
text: "<span class = 'mdi mdi-delete'> </span> Remove",
text: "<span class='mdi mdi-delete'></span> Remove",
action: (editor, _event) => {
if (confirm("Are you sure?")) {
const tr = editor.event.target.closest("tr")
Expand Down
5 changes: 3 additions & 2 deletions docs/demos/17-checkbox-column/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h2>Checkbox column</h2>
if (!tr.attributes) {
tr.attributes = {}
}
tr.attributes["data-name"] = rowValue[1].data
tr.attributes["data-name"] = rowValue.cells[1].data
return tr
},
columns: [
Expand All @@ -64,7 +64,8 @@ <h2>Checkbox column</h2>
event.stopPropagation()
const name = event.target.parentElement.parentElement.dataset.name
const index = parseInt(event.target.parentElement.parentElement.dataset.index, 10)
const cell = datatable.data.data[index][0]
const row = datatable.data.data[index]
const cell = row.cells[0]
const checked = cell.data
cell.data = !checked
datatable.update()
Expand Down
81 changes: 43 additions & 38 deletions docs/demos/25-cell-attributes/data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,45 +14,50 @@
"data": "Profit"
}],
"data": [
[{
"data": [{
"nodeName": "#text",
"data": "1"
}],
"text": "1",
"order": "1"
}, {
"data": [{
"nodeName": "#text",
"data": "latte"
}],
"text": "latte",
"order": "latte",
{
"attributes": {
"class": "red"
}
}, {
"data": [{
"nodeName": "#text",
"data": "false"
}],
"text": "false",
"order": "false"
}, {
"data": [{
"nodeName": "#text",
"data": "4"
}],
"text": "4",
"order": "4"
}, {
"data": [{
"nodeName": "#text",
"data": "0"
}],
"text": "0",
"order": "0"
}],
"class": "yellow"
},
"cells": [{
"data": [{
"nodeName": "#text",
"data": "1"
}],
"text": "1",
"order": "1"
}, {
"data": [{
"nodeName": "#text",
"data": "latte"
}],
"text": "latte",
"order": "latte",
"attributes": {
"class": "red"
}
}, {
"data": [{
"nodeName": "#text",
"data": "false"
}],
"text": "false",
"order": "false"
}, {
"data": [{
"nodeName": "#text",
"data": "4"
}],
"text": "4",
"order": "4"
}, {
"data": [{
"nodeName": "#text",
"data": "0"
}],
"text": "0",
"order": "0"
}]
},
[{
"data": [{
"nodeName": "#text",
Expand Down
14 changes: 11 additions & 3 deletions docs/demos/25-cell-attributes/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
.red {
background-color: #ffafba;
}
.yellow {
background-color: #fff8af;
}
</style>
</head>
<body>
Expand All @@ -36,11 +39,16 @@ <h2>Cell Attributes</h2>
.then(response => response.json())
.then(data => {
window.datatable1 = new window.simpleDatatables.DataTable("#demo-table1", {
data
data,
tableRender: (_data, table, _type) => {
table.attributes.class += " my-table"
table.attributes.style = "white-space: nowrap;"
}
})
})
</script>
<table id="demo-table2">

<table id="demo-table2" class="my-table" style="white-space: nowrap;">
<thead>
<tr>
<th>Name</th>
Expand All @@ -51,7 +59,7 @@ <h2>Cell Attributes</h2>
</tr>
</thead>
<tbody>
<tr>
<tr class="yellow">
<td>Unity Pugh</td>
<td class="red">9958</td>
<td>Curicó</td>
Expand Down
14 changes: 7 additions & 7 deletions docs/demos/4-render-column-cell/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,14 +151,14 @@ <h2>Custom cell renderer</h2>
new window.simpleDatatables.DataTable("#drinks", {
data,
rowRender: (row, tr, _index) => {
if ([true, false].includes(row[3].data)) {
if (!tr.attributes?.class) {
if (!tr.attributes) {
tr.attributes = {}
}
tr.attributes.class = row[3].data === true ? "yes" : "no"
if ([true, false].includes(row.cells[3].data)) {
if (!tr.attributes) {
tr.attributes = {}
}
if (!tr.attributes.class) {
tr.attributes.class = row.cells[3].data === true ? "yes" : "no"
} else {
tr.attributes.class += row[3].data === true ? "yes" : "no"
tr.attributes.class += row.cells[3].data === true ? "yes" : "no"
}

}
Expand Down
2 changes: 1 addition & 1 deletion docs/demos/5-column-manipulation/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ <h2>Column manipulation</h2>
datatable.dom.addEventListener("click", e => {
if (e.target.nodeName === "BUTTON" && e.target.hasAttribute("data-id")) {
const index = parseInt(e.target.getAttribute("data-id"), 10)
const row = datatable.data.data[index]
const row = datatable.data.data[index].cells
let message = [
"This is row ",
(e.target.closest("tr").rowIndex + 1), " of ",
Expand Down
Loading

0 comments on commit 9a032c2

Please sign in to comment.