Merge branch 'preserve-attrs' of github.com:SandroHc/simple-datatable…

…s into SandroHc-respect-caption
fiduswriter · Nov 20, 2023 · 0445894 · 0445894
1 parent 3617807
commit 0445894
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 95 deletions.
diff --git a/docs/demos/1-simple/index.html b/docs/demos/1-simple/index.html
@@ -26,7 +26,7 @@ <h1>Simple</h1>
             <thead>
                 <tr>
                     <th>
-                        <b>N</b>ame
+                        <b>Name</b>
                     </th>
                     <th>Ext.</th>
                     <th>City</th>
@@ -757,8 +757,7 @@ <h1>Simple</h1>
                         headerClass: "red"
                     }
                 ]
-})
-
+            })
         </script>
     </body>
 </html>
diff --git a/docs/demos/dist/module.js b/docs/demos/dist/module.js
diff --git a/docs/demos/dist/module.js.map b/docs/demos/dist/module.js.map
diff --git a/docs/demos/dist/umd.js b/docs/demos/dist/umd.js
diff --git a/docs/demos/index.html b/docs/demos/index.html
@@ -22,7 +22,7 @@ <h1>Demos</h1>
             <a href="6-datetime-sorting/">Datetime sorting</a>
             <a href="7-init-destroy-import-export/">Init-destroy-import-export</a>
             <a href="8-add-1000-rows/">Add 1000 rows</a>
-            <a href="9-add-1000-rows-without-conversion/">Add-1000-rows-without-conversion (faster)</a>
+            <a href="9-add-1000-rows-without-conversion/">Add 1000 rows without conversion (faster)</a>
             <a href="10-filters/">Filters</a>
             <a href="11-export/">Export</a>
             <a href="12-updating/">Updating</a>

diff --git a/docs/documentation/pagerRender.md b/docs/documentation/pagerRender.md
@@ -1,4 +1,4 @@
-### `rowRender`
+### `pagerRender`
 #### Type: `boolean` \ `function(data, ul)`
 #### Default: `false`
 

diff --git a/src/datatable.ts b/src/datatable.ts
@@ -12,6 +12,7 @@ import {
     inputCellType,
     elementNodeType,
     renderOptions,
+    rowType,
     TableDataType
 } from "./types"
 import {DiffDOM, nodeToObj} from "diff-dom"
@@ -66,7 +67,7 @@ export class DataTable {
 
     _virtualPagerDOM: elementNodeType
 
-    pages: {row: cellType[], index: number}[][]
+    pages: rowType[][]
 
     _rect: {width: number, height: number}
 
@@ -287,16 +288,20 @@ export class DataTable {
         this.update(true)
     }
 
-    _renderTable(renderOptions: renderOptions ={}) {
+    _renderTable(renderOptions: renderOptions = {}) {
+        let rows: rowType[]
+        const isPaged = (this.options.paging || this._searchQueries.length || this.columns._state.filters.length) && this._currentPage && this.pages.length && !renderOptions.noPaging
+        if (isPaged) {
+            rows = this.pages[this._currentPage - 1]
+        } else {
+            rows = this.data.data.map((row, index) => ({row,
+                index}))
+        }
+
         let newVirtualDOM = dataToVirtualDOM(
             this._tableAttributes,
             this.data.headings,
-            (this.options.paging || this._searchQueries.length || this.columns._state.filters.length) && this._currentPage && this.pages.length && !renderOptions.noPaging ?
-                this.pages[this._currentPage - 1] :
-                this.data.data.map((row, index) => ({
-                    row,
-                    index
-                })),
+            rows,
             this.columns.settings,
             this.columns._state,
             this.rows.cursor,
@@ -702,7 +707,7 @@ export class DataTable {
     }
 
     _paginate() {
-        let rows = this.data.data.map((row, index) => ({
+        let rows: rowType[] = this.data.data.map((row, index) => ({
             row,
             index
         }))
@@ -730,7 +735,7 @@ export class DataTable {
         if (this.options.paging && this.options.perPage > 0) {
             // Check for hidden columns
             this.pages = rows
-                .map((row: {row: cellType[], index: number}, i: number) => i % this.options.perPage === 0 ? rows.slice(i, i + this.options.perPage) : null)
+                .map((_row, i: number) => i % this.options.perPage === 0 ? rows.slice(i, i + this.options.perPage) : null)
                 .filter((page: {row: cellType[], index: number}[]) => page)
         } else {
             this.pages = [rows]

diff --git a/src/read_data.ts b/src/read_data.ts
@@ -83,8 +83,8 @@ const readDOMDataCell = (cell: HTMLElement, columnSettings : columnSettingsType)
         const data = !["false", "0", "null", "undefined"].includes(cell.innerText.toLowerCase().trim())
         cellData = {
             data,
-            order: data ? 1 : 0,
-            text: data ? "1" : "0"
+            text: data ? "1" : "0",
+            order: data ? 1 : 0
         }
         break
     }
@@ -99,6 +99,14 @@ const readDOMDataCell = (cell: HTMLElement, columnSettings : columnSettingsType)
     }
     }
 
+    // Save cell attributes to reference when rendering
+    cellData.attributes = {}
+    if (cell.attributes) {
+        for (const attr of cell.attributes) {
+            cellData.attributes[attr.name] = attr.value
+        }
+    }
+
     return cellData
 }
 
@@ -136,7 +144,7 @@ export const readHeaderCell = (cell: inputHeaderCellType) : headerCellType => {
 
 export const readDOMHeaderCell = (cell: HTMLElement) : headerCellType => {
     const node = nodeToObj(cell, {valueDiffing: false})
-    let cellData
+    let cellData: headerCellType
     if (node.childNodes && (node.childNodes.length !== 1 || node.childNodes[0].nodeName !== "#text")) {
         cellData = {
             data: node.childNodes,
@@ -149,6 +157,10 @@ export const readDOMHeaderCell = (cell: HTMLElement) : headerCellType => {
             type: "string"
         }
     }
+
+    // Save header cell attributes to reference when rendering
+    cellData.attributes = node.attributes
+
     return cellData
 
 }

diff --git a/src/types.ts b/src/types.ts
@@ -24,6 +24,7 @@ interface cellType {
     data: string | number | boolean | elementNodeType[] | object;
     text?: string;
     order?: string | number;
+    attributes?: { [key: string]: string };
 }
 
 type inputCellType = cellType | string | number | boolean;
@@ -32,6 +33,7 @@ interface headerCellType {
     data: string | number | boolean | elementNodeType[] | object;
     type?: ("html" | "string");
     text?: string;
+    attributes?: { [key: string]: string };
 }
 
 type inputHeaderCellType = headerCellType | string | number | boolean;
@@ -49,6 +51,11 @@ interface TableDataType{
 
 type renderType = ((cellData: (string | number | boolean | object | elementNodeType[]), td: object, rowIndex: number, cellIndex: number) => elementNodeType | string | void);
 
+interface rowType {
+    row: cellType[];
+    index: number;
+}
+
 export type DeepPartial<T> = T extends Function ? T : (T extends object ? { [P in keyof T]?: DeepPartial<T[P]>; } : T); // eslint-disable-line @typescript-eslint/ban-types
 // Source https://gist.github.com/navix/6c25c15e0a2d3cd0e5bce999e0086fc9
 
@@ -479,6 +486,7 @@ export {
     renderOptions,
     renderType,
     rowRenderType,
+    rowType,
     columnSettingsType,
     TableDataType,
     textNodeType