[PROPOSAL] Adding classes to header cells and row cells through options passed to the constructor

[notwarp]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

🔺️🔺️🔺️ My necessities were relative to the missing functionality of having the possibility of adding classes to the row cells (cellClass) and the header cells (headerClass) through the options passed to the constructor 🔺️🔺️🔺️

new DataTable(".table", {
    labels: labelData,
    columns:[{
        select: 0,
        cellClass: 'text-left bg-pink-600',
        headerClass: 'bg-pink-500',
        name: 'id'
    },{
        select: 1,
        cellClass: 'text-right',
    },
    ]
});

🔺️🔺️🔺️ My solution works with name or select and it can handle the possibility of the missing column configuration. I know that this line

const current_params = this.options.columns.find(o => o.name === data.headings[index] || o.select === index)

is not optimized since forEach rows and forEach columns it iterate over this columns configuration, maybe with your help we can find a better solution. 🔺️🔺️🔺️ Here is the diff that solved my problem:

diff --git a/node_modules/simple-datatables/src/table.js b/node_modules/simple-datatables/src/table.js
index d4edfe8..1eb9cc6 100644
--- a/node_modules/simple-datatables/src/table.js
+++ b/node_modules/simple-datatables/src/table.js
@@ -12,9 +12,11 @@ export const dataToTable = function (data) {
     if (data.headings) {
         thead = createElement("thead")
         const tr = createElement("tr")
-        data.headings.forEach(col => {
+        data.headings.forEach((col, index) => {
+            const current_params = this.options.columns.find(o => o.name === data.headings[index] || o.select === index)
             const td = createElement("th", {
-                html: col
+                html: col,
+                class: (current_params!=undefined) ? current_params.headerClass : ''
             })
             tr.appendChild(td)
         })
@@ -33,9 +35,11 @@ export const dataToTable = function (data) {
                 }
             }
             const tr = createElement("tr")
-            rows.forEach(value => {
+            rows.forEach((value, index) => {
+                const current_params = this.options.columns.find(o => o.name === data.headings[index] || o.select === index)
                 const td = createElement("td", {
-                    html: value
+                    html: value,
+                    class: (current_params!=undefined) ? current_params.cellClass : ''
                 })
                 tr.appendChild(td)
             })

🔺️🔺️🔺️ Thanks in advance. 🔺️🔺️🔺️

This issue body was partially generated by patch-package.

[LebCit]

Hello,

First of all, thanks a lot for this real vanilla JS Table.

@notwarp proposal would be an excellent addition.

Thanks again for your time and efforts 👍

[johanneswilm]

Yeah, can we get a PR for this @notwarp ?

[notwarp]

unfortunately my local version is edited with a bunch of changes, i made a PR https://github.com/fiduswriter/Simple-DataTables/pull/147#issue-1056785978 i hope that this can be usefull, any suggestions are welcome.

Thanks in advance

[RauchenwaldC]

@notwarp thanks for the diff, unfortunately, that change only works when the table gets initiated but the classes are dropped when new data is added to the table and on some other actions as well.

[notwarp]

@notwarp thanks for the diff, unfortunately, that change only works when the table gets initiated but the classes are dropped when new data is added to the table and on some other actions as well.

Yes we know, i've a PR but i need time for terminate it #147

[johanneswilm]

Hey, yeah generally this sounds good. Unfortunately, it's not on my own priority list right now. So I can review and accept a PR, but I don't have time to finish it myself - unless someone wants to pay me working on that.

[notwarp]

Hey, yeah generally this sounds good. Unfortunately, it's not on my own priority list right now. So I can review and accept a PR, but I don't have time to finish it myself - unless someone wants to pay me working on that.

you cannot merge it as I set it as Draft ;) so don't worry, when i'll have time i'll terminate it my self

[johanneswilm]

you cannot merge it as I set it as Draft ;)

@notwarp Yes, I know. That's why I said the stuff about not being able to finish it myself right now.

when i'll have time i'll terminate it my self

Great!

[notwarp]

ok, thank you anyway for your work on this package

[RauchenwaldC]

Hey, yeah generally this sounds good. Unfortunately, it's not on my own priority list right now. So I can review and accept a PR, but I don't have time to finish it myself - unless someone wants to pay me working on that.

I recall that there is a platform to "crowdfund" feature requests but I can't recall the name. Considering that this would be nice to have I'd be willing to chip in with $50 towards this feature.

[notwarp]

for 50$ i will make it without problems in a couple of days

[RauchenwaldC]

for 50$ i will make it without problems in a couple of days

That's a deal. Please just shoot me an email at, christian (at) convertain (dot) com to clarify the payment details.

[johanneswilm]

Super @notwarp !

[johanneswilm]

Hey @notwarp , if you are interested still, please create a new PR. Version 6 is a significant overhaul and it should be much easier to read the code.

[notwarp]

ok i will work on it next days, i will send you a new PR, thank you for your work

[johanneswilm]

Hey @notwarp , class names are now configurable. However, if you need multiple class names, then you need to do it in different ways, but it can already be done for <tr> and <td> elements, with this configuration setting:

new DataTable("table", {
    rowRender: (_row, tr, _index) => {
        if (!tr.attributes) {
            tr.attributes = {}
        }
        tr.attributes.class = tr.attributes.class ? `${tr.attributes.class} CUSTOM-ROW-CLASS` : 'CUSTOM-ROW-CLASS'
        if (tr.childNodes) {
            tr.childNodes.forEach(td => {
                if (!td.attributes) {
                    td.attributes = {}
                }
                td.attributes.class = td.attributes.class ? `${td.attributes.class} CUSTOM-CELL-CLASS` : 'CUSTOM-CELL-CLASS'
            })
        }
    }
})

We currently don't have anything equivalent for headers and header cells. So if that is needed, there may be an interest in creating a headerRender option that works the same way but for headers.

See also https://github.com/fiduswriter/simple-datatables/issues/232 and https://github.com/fiduswriter/simple-datatables/issues/231 where similar things were requested.

[johanneswilm]

or maybe even tableRender()