Skip to content

Commit

Permalink
Allow customizing row attributes
Browse files Browse the repository at this point in the history 
Store the source row attributes, if available, to be used when rendering the table rows.

This introduces a breaking change in `rowRender`, as the signature of the `row` argument changed from `cellType[]` to `{ cells: cellType[], attributes: object }`. I have updated `Upgrading.md` with the relevant entry for the next major version.

Tested all the demos and did not find regressions. Both DOM and programmatic insertion are supported; please see demo 25 for how that looks like.

```html
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr class="my-special-row">
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>
<script>
    new window.simpleDatatables.DataTable("table")
</script>
```
  • Loading branch information
@SandroHc
SandroHc committed Nov 24, 2023
1 parent 7f18d33 commit 7ccc14c
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 7ccc14c

Please sign in to comment.