Merge pull request #347 from SandroHc/respect-caption

Respect existing table footer and caption
fiduswriter · Nov 20, 2023 · 6d3d6da · 6d3d6da
2 parents 9943c24 + 9d7471c
commit 6d3d6da
Show file tree

Hide file tree

Showing 17 changed files with 200 additions and 23 deletions.
diff --git a/docs/demos/24-footer/index.html b/docs/demos/24-footer/index.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+        <title>Custom Footer</title>
+
+        <!-- DataTable Styles -->
+        <link rel="stylesheet" href="../dist/css/style.css">
+
+        <!-- Demo Styles -->
+        <link rel="stylesheet" href="../demo.css">
+    </head>
+    <body>
+        <h1>Custom Footer</h1>
+        <table class="table" id="custom-footer-table">
+            <thead>
+                <tr>
+                    <th>Athlete</th>
+                    <th>Nation</th>
+                    <th data-type="number" style="background-color: #ffd700;">Gold</th>
+                    <th data-type="number" style="background-color: #c0c0c0;">Silver</th>
+                    <th data-type="number" style="background-color: #cc9966;">Bronze</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Michael Phelps</td>
+                    <td>United States</td>
+                    <td>23</td>
+                    <td>3</td>
+                    <td>2</td>
+                </tr>
+                <tr>
+                    <td>Larisa Latynina</td>
+                    <td>Soviet Union</td>
+                    <td>9</td>
+                    <td>5</td>
+                    <td>4</td>
+                </tr>
+                <tr>
+                    <td>Paavo Nurmi</td>
+                    <td>Finland</td>
+                    <td>9</td>
+                    <td>3</td>
+                    <td>0</td>
+                </tr>
+                <tr>
+                    <td>Mark Spitz</td>
+                    <td>United States</td>
+                    <td>9</td>
+                    <td>1</td>
+                    <td>1</td>
+                </tr>
+                <tr>
+                    <td>Carl Lewis</td>
+                    <td>United States</td>
+                    <td>9</td>
+                    <td>1</td>
+                    <td>0</td>
+                </tr>
+                <tr>
+                    <td>Marit Bjørgen</td>
+                    <td>Norway</td>
+                    <td>8</td>
+                    <td>4</td>
+                    <td>3</td>
+                </tr>
+                <tr>
+                    <td>Ole Einar Bjørndalen</td>
+                    <td>Norway</td>
+                    <td>8</td>
+                    <td>4</td>
+                    <td>1</td>
+                </tr>
+                <tr>
+                    <td>Bjørn Dæhlie</td>
+                    <td>Norway</td>
+                    <td>8</td>
+                    <td>4</td>
+                    <td>0</td>
+                </tr>
+                <tr>
+                    <td>Birgit Fischer</td>
+                    <td>Germany</td>
+                    <td>8</td>
+                    <td>4</td>
+                    <td>0</td>
+                </tr>
+                <tr>
+                    <td>Sawao Kato</td>
+                    <td>Japan</td>
+                    <td>8</td>
+                    <td>3</td>
+                    <td>1</td>
+                </tr>
+            </tbody>
+            <tfoot>
+                <tr>
+                    <td colspan="2">This is a table footer.</td>
+                </tr>
+            </tfoot>
+            <tfoot style="font-weight: bold">
+                <tr>
+                    <td colspan="2">Total</td>
+                    <td>99</td>
+                    <td>32</td>
+                    <td>12</td>
+                </tr>
+            </tfoot>
+            <caption>This is a table caption.</caption>
+        </table>
+
+        <script type="module">
+            import {DataTable} from "../dist/module.js"
+            window.dt = new DataTable("table", {
+                perPage: 5,
+                perPageSelect: [5, 10, 15, ["All", -1]]
+                // A caption can also be specified this way:
+                // caption: 'This is another table caption.'
+            })
+        </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
@@ -37,6 +37,7 @@ <h1>Demos</h1>
             <a href="21-svg/">SVGs</a>
             <a href="22-and-search/">AND Search</a>
             <a href="23-column-filter-button/">Column filter button</a>
+            <a href="24-footer/">Custom footer</a>
         </nav>
     </body>
 </html>
diff --git a/docs/documentation/Options.md b/docs/documentation/Options.md
@@ -15,6 +15,7 @@ let dataTable = new DataTable(myTable, options);
 * [type](columns#type)
 * [format](columns#format)
 ### Appearance
+* [caption](caption)
 * [classes](classes)
 * [columns](columns)
 * [fixedColumns](fixedColumns)

diff --git a/docs/documentation/caption.md b/docs/documentation/caption.md
@@ -0,0 +1,6 @@
+### `caption`
+#### Type: `string`
+#### Default: `undefined`
+
+Display a table caption with [<caption>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption). No caption
+is displayed by default.
diff --git a/docs/documentation/columns.md b/docs/documentation/columns.md
@@ -1,3 +1,4 @@
+### `columns`
 #### Type: `array`
 #### Default: `undefined`
 

diff --git a/docs/documentation/ellipsisText.md b/docs/documentation/ellipsisText.md
@@ -1,4 +1,4 @@
-### `firstText`
+### `ellipsisText`
 #### Type: `string`
 #### Default: `'…'`
 

diff --git a/docs/documentation/footer.md b/docs/documentation/footer.md
@@ -1,5 +1,5 @@
 ### `footer`
-#### Default: `false`
 #### Type: `boolean`
+#### Default: `false`
 
 Enable or disable the table footer.
diff --git a/docs/documentation/header.md b/docs/documentation/header.md
@@ -1,5 +1,5 @@
 ### `header`
-#### Default: `true`
 #### Type: `boolean`
+#### Default: `true`
 
 Enable or disable the table header.
diff --git a/docs/documentation/hiddenHeader.md b/docs/documentation/hiddenHeader.md
@@ -1,5 +1,5 @@
 ### `hiddenHeader`
-#### Default: `false`
 #### Type: `boolean`
+#### Default: `false`
 
 Whether to hide the table header.
diff --git a/docs/documentation/pagerRender.md b/docs/documentation/pagerRender.md
@@ -1,6 +1,6 @@
 ### `rowRender`
-#### Default: `false`
 #### Type: `boolean` \ `function(data, ul)`
+#### Default: `false`
 
 
 If specified, declares a callback to customise the rendering of all pagers. The function can take 2 parameters:

diff --git a/src/config.ts b/src/config.ts
@@ -47,6 +47,7 @@ export const defaultConfig: DataTableConfiguration = {
     footer: false,
     header: true,
     hiddenHeader: false,
+    caption: undefined,
 
     rowNavigation: false,
     tabIndex: false,

diff --git a/src/datatable.ts b/src/datatable.ts
@@ -76,7 +76,11 @@ export class DataTable {
 
     _searchQueries: {terms: string[], columns: (number[] | undefined)}[]
 
-    _tableAttributes: { [key: string]: string}
+    _tableAttributes: {[key: string]: string}
+
+    _tableFooters: elementNodeType[]
+
+    _tableCaptions: elementNodeType[]
 
     totalPages: number
 
@@ -88,7 +92,6 @@ export class DataTable {
 
     constructor(table: HTMLTableElement | string, options: DataTableOptions = {}) {
 
-
         const dom = typeof table === "string" ?
             document.querySelector(table) :
             table
@@ -161,6 +164,19 @@ export class DataTable {
         this._virtualDOM = nodeToObj(this.dom, this.options.diffDomOptions || {})
 
         this._tableAttributes = {...this._virtualDOM.attributes}
+        this._tableFooters = this._virtualDOM.childNodes?.filter(node => node.nodeName === "TFOOT") ?? []
+        this._tableCaptions = this._virtualDOM.childNodes?.filter(node => node.nodeName === "CAPTION") ?? []
+        if (this.options.caption !== undefined) {
+            this._tableCaptions.push({
+                nodeName: "CAPTION",
+                childNodes: [
+                    {
+                        nodeName: "#text",
+                        data: this.options.caption
+                    }
+                ]
+            })
+        }
 
         this.rows = new Rows(this)
         this.columns = new Columns(this)
@@ -234,10 +250,8 @@ export class DataTable {
         // Store the table dimensions
         this._rect = this.dom.getBoundingClientRect()
 
-        // // Fix height
+        // Fix height
         this._fixHeight()
-        //
-
 
         // Class names
         if (!this.options.header) {
@@ -287,7 +301,9 @@ export class DataTable {
             this.columns._state,
             this.rows.cursor,
             this.options,
-            renderOptions
+            renderOptions,
+            this._tableFooters,
+            this._tableCaptions
         )
 
         if (this.options.tableRender) {
@@ -957,7 +973,9 @@ export class DataTable {
             {
                 noColumnWidths: true,
                 unhideHeader: true
-            }
+            },
+            this._tableFooters,
+            this._tableCaptions
         )
 
         if (this.options.tableRender) {

diff --git a/src/types.ts b/src/types.ts
@@ -210,6 +210,13 @@ type tableRenderType = ((data: object, table: elementNodeType, type: string) =>
 
 
 interface DataTableConfiguration {
+    /**
+     * Display a table caption with [<caption>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption).
+     * No caption is displayed by default.
+     *
+     * Docs: https://fiduswriter.github.io/simple-datatables/documentation/caption
+     */
+    caption: string | undefined;
     classes: ClassConfiguration;
     columns: ColumnOption[];
     /**Controls various aspects of individual or groups of columns. Should be an array of objects with the following properties:
@@ -294,13 +301,13 @@ interface DataTableConfiguration {
             info: "Showing {start} to {end} of {rows} entries",
         }
      *
-     * Docs : https://fiduswriter.github.io/simple-datatables/documentation/labels
+     * Docs: https://fiduswriter.github.io/simple-datatables/documentation/labels
      */
     template: (DataTableConfiguration, HTMLTableElement) => string;
     /**
      * Allows for custom arranging of the DOM elements in the top and bottom containers. There are for 4 variables you can utilize:
      *
-     * Docs :https://fiduswriter.github.io/simple-datatables/documentation/layout
+     * Docs: https://fiduswriter.github.io/simple-datatables/documentation/layout
      */
     lastText: string;
     /**