Add custom Renderer

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,37 @@ 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
 

dist/dto/Dto.d.ts

@@ -5,5 +5,7 @@ interface D extends Cols {
 }
 declare class Dto<T> {
     getDataFormatted(data: Array<T>, columns: Array<D>): Array<any>;
+    addRenderer(name: string, renderer: any): void;
+    addDynamicRenderer(pattern: RegExp, handler: (match: RegExpMatchArray) => any): void;
 }
 export default Dto;

dist/dto/Renderer.d.ts

@@ -1,6 +1,8 @@
 import { LxConfigObject } from '../core/LyxeaDatatable';
 
+declare const CustomRenderers: Record<string, any>;
 declare class LxRenderer {
     constructor(config: LxConfigObject);
 }
 export default LxRenderer;
+export { CustomRenderers };