From ab446ee55f9035fe8d6a94904fe6397e0c6b4626 Mon Sep 17 00:00:00 2001 From: Jonathan DURAND Date: Wed, 23 Apr 2025 14:50:31 +0200 Subject: [PATCH 1/3] Commit lx_dt dist ! --- dist/lx_dt.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/dist/lx_dt.js b/dist/lx_dt.js index ba5f6d6..772b42e 100644 --- a/dist/lx_dt.js +++ b/dist/lx_dt.js @@ -53853,7 +53853,9 @@ class K1 { for (const w of g.columns) { if (!w.renderer) continue; - Array.isArray(w.renderer) && (console.warn("Multiple renderers are not supported yet. Please use a single renderer."), w.renderer = w.renderer[0]); + Array.isArray(w.renderer) && (console.warn( + "Multiple renderers are not supported yet. Please use a single renderer." + ), w.renderer = w.renderer[0]); const L = Y1(w.renderer); L.render && (w.render = L.render), L.createdCell && (w.createdCell = L.createdCell), L.checkboxes && (w.checkboxes = L.checkboxes); } @@ -53940,14 +53942,18 @@ class $1 extends B1 { console.error(i.message); } } - return this.config.buttons || (this.config.buttons = un(this, bi).getDefaults()), un(this, bi).parse(this.config.buttons), Wn(`${this._ref}`).on("init.dt", (t, i) => { + return this.config.buttons || (this.config.buttons = un(this, bi).getDefaults()), un(this, bi).parse( + this.config.buttons + ), Wn(`${this._ref}`).on("init.dt", (t, i) => { var o, h; if (t.namespace !== "dt") return; const r = i.oInstance.api(); if (B && B.filters) if ((o = this.filterColumn) == null || o.init(r, "input"), (h = this.config) != null && h.scrollX) { - Wn(`${this._ref}_wrapper .dt-scroll-foot tfoot tr th`).removeAttr("data-dt-column"); + Wn(`${this._ref}_wrapper .dt-scroll-foot tfoot tr th`).removeAttr( + "data-dt-column" + ); var n = Wn(`${this._ref}_wrapper .dt-scroll-foot tfoot tr`); Wn(`${this._ref}_wrapper .dt-scroll-head thead`).append(n); } else { @@ -53956,7 +53962,9 @@ class $1 extends B1 { Wn(`${this._ref} thead`).append(n); } if (B != null && B.scrollYFitToScreen) { - const u = this._convertToScrollYFitToScreenConfig(B.scrollYFitToScreen); + const u = this._convertToScrollYFitToScreenConfig( + B.scrollYFitToScreen + ); this._scrollYFitToScreen(u), r.draw(); } }), this.instance = new de(`${this._ref}`, this.config), this.refElement.dispatchEvent(this.initEvent(this.instance)), B && B.handleBootrapTabChange && this.handleBootrapTabChange(this.instance), B != null && B.keepFixedHeaderInDT && this._ref && this.__keepFixedHeaderInDT(), this; From 630ae7a3b9cf61cc8eb575cfba9551d56a19dc54 Mon Sep 17 00:00:00 2001 From: Jonathan DURAND Date: Wed, 23 Apr 2025 17:08:31 +0200 Subject: [PATCH 2/3] feat(renderer): Allow to add custom Renderer ! --- README.md | 37 +- dist/dto/Dto.d.ts | 2 + dist/dto/Renderer.d.ts | 2 + dist/lx_dt.js | 6458 ++++++++++++++++++++-------------------- lib/dto/Dto.ts | 18 + lib/dto/Renderer.ts | 3 +- 6 files changed, 3291 insertions(+), 3229 deletions(-) diff --git a/README.md b/README.md index 3d11767..585b113 100644 --- a/README.md +++ b/README.md @@ -150,8 +150,8 @@ To do it, simply add the key `actions` on the LyxaDatatable specific config obje ### Renderer | name | description | example | -| ------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------- | --- | --- | -| DATE*TO_FORMAT* | parse date to defined format | {render: 'DATE_TO_FORMAT_YYYY'} => '2024' | +| ------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------- | +| DATE_TO_FORMAT_* | parse date to defined format | {render: 'DATE_TO_FORMAT_YYYY'} => '2024' | | DATE | parse date to predefined date format | '23/04/2024 12:23' | | DATE_DAY | parse date with year, month and day only | '23/04/2024' | | DATE_WITH_SECOND | parse date to predefined date format | '23/04/2024 12:23:34' | @@ -162,7 +162,38 @@ To do it, simply add the key `actions` on the LyxaDatatable specific config obje | CUT_LONG_TEXT | In case of a long text, prevent the overflow by cutting the text and replace it with '...' | "a very long text" => "a very ..." | | PARSE_INT | parse a string to integer | "3" => 3 | | CHECKBOX | add a checkbox at the first columns of the table | | -| UPPERCASE | convert a string to uppercase | "this must be uppercase" => "THIS MUST BE UPPERCASE" | | | +| UPPERCASE | convert a string to uppercase | "this must be uppercase" => "THIS MUST BE UPPERCASE" | + +The lib exposes an `addRenderer()` method to dynamically inject your own rendering behaviors with a render or createdCell function: + +```ts +const table = new LyxeaDatatable({ + /* config */ + columns: [ + { data: 'uuid', name: 'uuid', title: 'uuid', }, + { data: 'status', name: 'status', title: 'Date', renderer: 'BOLD_RED' } + ] + // ... + +}); + +table.dto.addRenderer('BOLD_RED', { + createdCell: (td, data) => { + td.style.color = 'red'; + td.style.fontWeight = 'bold'; + td.innerText = data; + } +}); + +table.dto.addRenderer('MY_CUSTOM_RENDER', { + render: (data, type) => (type === 'display' ? `🌟 ${data}` : data), + createdCell: (td, cellData) => { + td.style.color = 'blue'; + }, +}); + +table.init(); +``` ## Architecture diff --git a/dist/dto/Dto.d.ts b/dist/dto/Dto.d.ts index c6727d4..208fb0d 100644 --- a/dist/dto/Dto.d.ts +++ b/dist/dto/Dto.d.ts @@ -5,5 +5,7 @@ interface D extends Cols { } declare class Dto { getDataFormatted(data: Array, columns: Array): Array; + addRenderer(name: string, renderer: any): void; + addDynamicRenderer(pattern: RegExp, handler: (match: RegExpMatchArray) => any): void; } export default Dto; diff --git a/dist/dto/Renderer.d.ts b/dist/dto/Renderer.d.ts index d7c7a0f..e0de4a9 100644 --- a/dist/dto/Renderer.d.ts +++ b/dist/dto/Renderer.d.ts @@ -1,6 +1,8 @@ import { LxConfigObject } from '../core/LyxeaDatatable'; +declare const CustomRenderers: Record; declare class LxRenderer { constructor(config: LxConfigObject); } export default LxRenderer; +export { CustomRenderers }; diff --git a/dist/lx_dt.js b/dist/lx_dt.js index 772b42e..ebb7a06 100644 --- a/dist/lx_dt.js +++ b/dist/lx_dt.js @@ -1,25 +1,25 @@ var Td = Object.defineProperty; var vf = Object.getOwnPropertySymbols; var Fd = Object.prototype.hasOwnProperty, Id = Object.prototype.propertyIsEnumerable; -var Is = (a, p, g) => p in a ? Td(a, p, { enumerable: !0, configurable: !0, writable: !0, value: g }) : a[p] = g, Vi = (a, p) => { - for (var g in p || (p = {})) - Fd.call(p, g) && Is(a, g, p[g]); +var Ds = (a, v, g) => v in a ? Td(a, v, { enumerable: !0, configurable: !0, writable: !0, value: g }) : a[v] = g, Xi = (a, v) => { + for (var g in v || (v = {})) + Fd.call(v, g) && Ds(a, g, v[g]); if (vf) - for (var g of vf(p)) - Id.call(p, g) && Is(a, g, p[g]); + for (var g of vf(v)) + Id.call(v, g) && Ds(a, g, v[g]); return a; }; -var mr = (a, p, g) => (Is(a, typeof p != "symbol" ? p + "" : p, g), g), Ds = (a, p, g) => { - if (!p.has(a)) +var mr = (a, v, g) => (Ds(a, typeof v != "symbol" ? v + "" : v, g), g), Ps = (a, v, g) => { + if (!v.has(a)) throw TypeError("Cannot " + g); }; -var un = (a, p, g) => (Ds(a, p, "read from private field"), g ? g.call(a) : p.get(a)), ta = (a, p, g) => { - if (p.has(a)) +var un = (a, v, g) => (Ps(a, v, "read from private field"), g ? g.call(a) : v.get(a)), ta = (a, v, g) => { + if (v.has(a)) throw TypeError("Cannot add the same private member more than once"); - p instanceof WeakSet ? p.add(a) : p.set(a, g); -}, Rn = (a, p, g, w) => (Ds(a, p, "write to private field"), w ? w.call(a, g) : p.set(a, g), g); -var Lo = (a, p, g) => (Ds(a, p, "access private method"), g); -var ea = (a, p, g) => new Promise((w, L) => { + v instanceof WeakSet ? v.add(a) : v.set(a, g); +}, Rn = (a, v, g, w) => (Ps(a, v, "write to private field"), w ? w.call(a, g) : v.set(a, g), g); +var No = (a, v, g) => (Ps(a, v, "access private method"), g); +var ea = (a, v, g) => new Promise((w, L) => { var B = (t) => { try { d(g.next(t)); @@ -33,26 +33,26 @@ var ea = (a, p, g) => new Promise((w, L) => { L(i); } }, d = (t) => t.done ? w(t.value) : Promise.resolve(t.value).then(B, f); - d((g = g.apply(a, p)).next()); + d((g = g.apply(a, v)).next()); }); import Wn from "jquery"; /*! DataTables 2.2.2 * © SpryMedia Ltd - datatables.net/license */ -var Xt = Wn, de = function(a, p) { - if (de.factory(a, p)) +var Xt = Wn, de = function(a, v) { + if (de.factory(a, v)) return de; if (this instanceof de) - return Xt(a).DataTable(p); - p = a; - var g = this, w = p === void 0, L = this.length; - return w && (p = {}), this.api = function() { + return Xt(a).DataTable(v); + v = a; + var g = this, w = v === void 0, L = this.length; + return w && (v = {}), this.api = function() { return new Fr(this); }, this.each(function() { var B = {}, f = L > 1 ? ( // optimisation for single table case - Cf(B, p, !0) - ) : p, d = 0, t, i = this.getAttribute("id"), r = de.defaults, n = Xt(this); + Cf(B, v, !0) + ) : v, d = 0, t, i = this.getAttribute("id"), r = de.defaults, n = Xt(this); if (this.nodeName.toLowerCase() != "table") { ca(null, 0, "Non-table node initialisation (" + this.nodeName + ")", 2); return; @@ -131,14 +131,14 @@ var Xt = Wn, de = function(a, p) { ["sScrollXInner", "sXInner"], ["sScrollY", "sY"], ["bScrollCollapse", "bCollapse"] - ]), Ha(c.oLanguage, f, "fnInfoCallback"), ua(c, "aoDrawCallback", f.fnDrawCallback), ua(c, "aoStateSaveParams", f.fnStateSaveParams), ua(c, "aoStateLoadParams", f.fnStateLoadParams), ua(c, "aoStateLoaded", f.fnStateLoaded), ua(c, "aoRowCallback", f.fnRowCallback), ua(c, "aoRowCreatedCallback", f.fnCreatedRow), ua(c, "aoHeaderCallback", f.fnHeaderCallback), ua(c, "aoFooterCallback", f.fnFooterCallback), ua(c, "aoInitComplete", f.fnInitComplete), ua(c, "aoPreDrawCallback", f.fnPreDrawCallback), c.rowIdFn = wi(f.rowId), Ld(c); + ]), Ha(c.oLanguage, f, "fnInfoCallback"), ua(c, "aoDrawCallback", f.fnDrawCallback), ua(c, "aoStateSaveParams", f.fnStateSaveParams), ua(c, "aoStateLoadParams", f.fnStateLoadParams), ua(c, "aoStateLoaded", f.fnStateLoaded), ua(c, "aoRowCallback", f.fnRowCallback), ua(c, "aoRowCreatedCallback", f.fnCreatedRow), ua(c, "aoHeaderCallback", f.fnHeaderCallback), ua(c, "aoFooterCallback", f.fnFooterCallback), ua(c, "aoInitComplete", f.fnInitComplete), ua(c, "aoPreDrawCallback", f.fnPreDrawCallback), c.rowIdFn = Ai(f.rowId), Ld(c); var s = c.oClasses; Xt.extend(s, de.ext.classes, f.oClasses), n.addClass(s.table), c.oFeatures.bPaginate || (f.iDisplayStart = 0), c.iInitDisplayStart === void 0 && (c.iInitDisplayStart = f.iDisplayStart, c._iDisplayStart = f.iDisplayStart); - var v = f.iDeferLoading; - if (v !== null) { + var p = f.iDeferLoading; + if (p !== null) { c.deferLoading = !0; - var y = Array.isArray(v); - c._iRecordsDisplay = y ? v[0] : v, c._iRecordsTotal = y ? v[1] : v; + var y = Array.isArray(p); + c._iRecordsDisplay = y ? p[0] : p, c._iRecordsTotal = y ? p[1] : p; } var x = [], e = this.getElementsByTagName("thead"), b = Yf(c, e[0]); if (f.aoColumns) @@ -169,7 +169,7 @@ var Xt = Wn, de = function(a, p) { } }); } - ua(c, "aoDrawCallback", is); + ua(c, "aoDrawCallback", os); var D = c.oFeatures; if (f.bStateSave && (D.bStateSave = !0), f.aaSorting === void 0) { var E = c.aaSorting; @@ -190,12 +190,12 @@ var Xt = Wn, de = function(a, p) { dataType: "json", url: m.sUrl, success: function(I) { - za(r.oLanguage, I), Xt.extend(!0, m, I, c.oInit.oLanguage), zr(c, null, "i18n", [c], !0), Ho(c); + za(r.oLanguage, I), Xt.extend(!0, m, I, c.oInit.oLanguage), zr(c, null, "i18n", [c], !0), jo(c); }, error: function() { - ca(c, 0, "i18n file loading error", 21), Ho(c); + ca(c, 0, "i18n file loading error", 21), jo(c); } - }) : (zr(c, null, "i18n", [c], !0), Ho(c)); + }) : (zr(c, null, "i18n", [c], !0), jo(c)); }), g = null, this; }; de.ext = En = { @@ -711,104 +711,104 @@ Xt.extend(de.ext.classes, { nav: "" } }); -var En, Fr, Qe, Qr, Ps = {}, Dd = /[\r\n\u2028]/g, Js = /<([^>]*>)/g, Pd = Math.pow(2, 28), pf = /^\d{2,4}[./-]\d{1,2}[./-]\d{1,2}([T ]{1}\d{1,2}[:.]\d{2}([.:]\d{2})?)?$/, Od = new RegExp("(\\" + ["/", ".", "*", "+", "?", "|", "(", ")", "[", "]", "{", "}", "\\", "$", "^", "-"].join("|\\") + ")", "g"), Qs = /['\u00A0,$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfkɃΞ]/gi, ia = function(a) { +var En, Fr, Qe, Qr, Os = {}, Dd = /[\r\n\u2028]/g, Js = /<([^>]*>)/g, Pd = Math.pow(2, 28), pf = /^\d{2,4}[./-]\d{1,2}[./-]\d{1,2}([T ]{1}\d{1,2}[:.]\d{2}([.:]\d{2})?)?$/, Od = new RegExp("(\\" + ["/", ".", "*", "+", "?", "|", "(", ")", "[", "]", "{", "}", "\\", "$", "^", "-"].join("|\\") + ")", "g"), Qs = /['\u00A0,$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfkɃΞ]/gi, ia = function(a) { return !a || a === !0 || a === "-"; }, kf = function(a) { - var p = parseInt(a, 10); - return !isNaN(p) && isFinite(a) ? p : null; -}, Uf = function(a, p) { - return Ps[p] || (Ps[p] = new RegExp(Hs(p), "g")), typeof a == "string" && p !== "." ? a.replace(/\./g, "").replace(Ps[p], ".") : a; -}, Qi = function(a, p, g, w) { + var v = parseInt(a, 10); + return !isNaN(v) && isFinite(a) ? v : null; +}, Uf = function(a, v) { + return Os[v] || (Os[v] = new RegExp(Hs(v), "g")), typeof a == "string" && v !== "." ? a.replace(/\./g, "").replace(Os[v], ".") : a; +}, $i = function(a, v, g, w) { var L = typeof a, B = L === "string"; - return L === "number" || L === "bigint" || w && ia(a) ? !0 : (p && B && (a = Uf(a, p)), g && B && (a = a.replace(Qs, "")), !isNaN(parseFloat(a)) && isFinite(a)); + return L === "number" || L === "bigint" || w && ia(a) ? !0 : (v && B && (a = Uf(a, v)), g && B && (a = a.replace(Qs, "")), !isNaN(parseFloat(a)) && isFinite(a)); }, Bd = function(a) { return ia(a) || typeof a == "string"; -}, Go = function(a, p, g, w) { +}, Vo = function(a, v, g, w) { if (w && ia(a)) return !0; if (typeof a == "string" && a.match(/<(input|select)/i)) return null; var L = Bd(a); - return L && Qi(Pa(a), p, g, w) ? !0 : null; -}, Ln = function(a, p, g) { + return L && $i(Pa(a), v, g, w) ? !0 : null; +}, Ln = function(a, v, g) { var w = [], L = 0, B = a.length; if (g !== void 0) for (; L < B; L++) - a[L] && a[L][p] && w.push(a[L][p][g]); + a[L] && a[L][v] && w.push(a[L][v][g]); else for (; L < B; L++) - a[L] && w.push(a[L][p]); + a[L] && w.push(a[L][v]); return w; -}, eo = function(a, p, g, w) { - var L = [], B = 0, f = p.length; +}, ro = function(a, v, g, w) { + var L = [], B = 0, f = v.length; if (w !== void 0) for (; B < f; B++) - a[p[B]] && a[p[B]][g] && L.push(a[p[B]][g][w]); + a[v[B]] && a[v[B]][g] && L.push(a[v[B]][g][w]); else for (; B < f; B++) - a[p[B]] && L.push(a[p[B]][g]); + a[v[B]] && L.push(a[v[B]][g]); return L; -}, Ua = function(a, p) { +}, Ua = function(a, v) { var g = [], w; - p === void 0 ? (p = 0, w = a) : (w = p, p = a); - for (var L = p; L < w; L++) + v === void 0 ? (v = 0, w = a) : (w = v, v = a); + for (var L = v; L < w; L++) g.push(L); return g; }, zf = function(a) { - for (var p = [], g = 0, w = a.length; g < w; g++) - a[g] && p.push(a[g]); - return p; + for (var v = [], g = 0, w = a.length; g < w; g++) + a[g] && v.push(a[g]); + return v; }, Pa = function(a) { if (!a || typeof a != "string") return a; if (a.length > Pd) throw new Error("Exceeded max str len"); - var p; + var v; a = a.replace(Js, ""); do - p = a, a = a.replace(/