tidy-table 4.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2012-2023 Marc S. Brooks (https://mbrooks.info)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,161 @@
+# tidy-table [![npm version](https://badge.fury.io/js/tidy-table.svg)](https://badge.fury.io/js/tidy-table) [![](https://img.shields.io/npm/dm/tidy-table)](https://www.npmjs.com/package/tidy-table)
+
+Create a HTML table that can be sorted, selected, and post-processed using a simple callback.
+
+![Preview](https://raw.githubusercontent.com/nuxy/tidy-table/master/package.gif)
+
+Checkout the [demo](https://nuxy.github.io/tidy-table) for examples of use.
+
+## Features
+
+- Extensible HTML/CSS interface.
+- Compatible with all modern desktop and mobile web browsers.
+- Fully responsive layout with touch event support.
+- Easy to set-up and customize.
+- Customizable callback functions for post-processing selected results.
+- Post-process options for manipulating table/column/menu elements.
+- Fast and lightweight (JavaScript plug-in *only 4 kB)
+
+## Dependencies
+
+- [Node.js](https://nodejs.org)
+
+## Installation
+
+Install the package into your project using [NPM](https://npmjs.com), or download the [sources](https://github.com/nuxy/tidy-table/archive/master.zip).
+
+    $ npm install tidy-table
+
+## Usage
+
+There are two ways you can use this package.  One is by including the JavaScript/CSS sources directly.  The other is by importing the module into your component.
+
+### Script include
+
+After you [build the distribution sources](#cli-options) the set-up is fairly simple..
+
+```html
+<script type="text/javascript" src="path/to/tidy-table.min.js"></script>
+<link rel="stylesheet" href="path/to/tidy-table.min.css" media="all" />
+
+<script type="text/javascript">
+  var tidyTable = tidyTable(container, settings, options);
+</script>
+```
+
+### Module import
+
+If your using a modern framework like [Aurelia](https://aurelia.io), [Angular](https://angular.io), [React](https://reactjs.org), or [Vue](https://vuejs.org)
+
+```javascript
+import TidyTable from 'tidy-table';
+import 'tidy-table/dist/tidy-table.css';
+
+const tidyTable = new TidyTable(container, settings, options);
+```
+
+## HTML markup
+
+```javascript
+const options = {
+  enableCheckbox: true,
+  enableMenu:     true,
+  reverseSortDir: true,
+  responsive:     true
+};
+
+const settings = {
+  columnTitles: ['Rank', 'Programming Language', 'Ratings Jan 2012', 'Delta Jan 2012', 'Status'],
+  columnValues: [
+    ['1', 'Java', '17.479%', '-0.29%', 'A'],
+    ['2', 'C', '16.976%', '+1.15%', 'A'],
+    ['3', 'C#', '8.781%', '+2.55%', 'A'],
+    ['4', 'C++', '8.063%', '-0.72%', 'A'],
+    ['5', 'Objective-C', '6.919%', '+3.91%','A']
+  ],
+
+  // Add menu options to bind result events.
+  menuOptions: [
+    ['- Action -', null],
+    ['Callback 1', {callback: (rows) => {}}],
+    ['Callback 2', {callback: (rows) => {}}]
+  ],
+
+  // Post-process rendered HTML output.
+  postProcess: {
+    table:  (HTMLTableElement)     => {},
+    column: (HTMLTableCellElement) => {},
+    menu:   (HTMLTableElement)     => {}
+  },
+
+  // Pre-process column values before sort.
+  sortByPattern: function(colNum, val) {
+    if (colNum !== 1) return val;
+
+    return val?.replace(/\$|%|#/g, '');
+  }
+};
+```
+
+## Table options
+
+Overriding defaults can be done using the following options:
+
+| Option         | Description                                    | Default |
+|----------------|------------------------------------------------|---------|
+| enableCheckbox | Add checkbox functionality to table output.    | false   |
+| enableMenu     | Add select menu options to alter table output. | false   |
+| reverseSortDir | Change the sorting arrow image direction.      | false   |
+| responsive     | Enable/disable responsive layout support.      | false   |
+
+## Design template
+
+The Illustrator [template](https://github.com/nuxy/tidy-table/blob/develop/images/arrow.ai) used to create the sort arrows has been provided with this package for reference.
+
+## Developers
+
+### CLI options
+
+Run [ESLint](https://eslint.org) on project sources:
+
+    $ npm run lint
+
+Transpile ES6 sources (using [Babel](https://babeljs.io)) and minify to a distribution:
+
+    $ npm run build
+
+Run [WebdriverIO](https://webdriver.io) E2E tests:
+
+    $ npm run test
+
+## Unsupported releases
+
+To install deprecated versions use [Bower](http://bower.io) or download the package [by tag](https://github.com/nuxy/tidy-table/tags).
+
+### v3 (no dependencies)
+
+    $ bower install tidy-table#3
+
+### v2 (requires [jQuery 1.8.3](http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js))
+
+Compatible with Firefox 3.6, Chrome, Safari 5, Opera, and Internet Explorer 7+ web browsers.
+
+    $ bower install tidy-table#2
+
+## Contributions
+
+If you fix a bug, or have a code you want to contribute, please send a pull-request with your changes. (Note: Before committing your code please ensure that you are following the [Node.js style guide](https://github.com/felixge/node-style-guide))
+
+## Versioning
+
+This package is maintained under the [Semantic Versioning](https://semver.org) guidelines.
+
+## License and Warranty
+
+This package is distributed in the hope that it will be useful, but without any warranty; without even the implied warranty of merchantability or fitness for a particular purpose.
+
+_tidy-table_ is provided under the terms of the [MIT license](http://www.opensource.org/licenses/mit-license.php)
+
+## Author
+
+[Marc S. Brooks](https://github.com/nuxy)

package/images/arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="8" xml:space="preserve"><path fill="#cccccc" d="m4.469 8 4.5-6H0z"/></svg>

package/images/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="8" xml:space="preserve"><path fill="#cccccc" d="M4.5 0 0 6h8.969z"/></svg>

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "tidy-table",
+  "version": "4.0.0",
+  "description": "Create a HTML table that can be sorted, selected, and post-processed using a simple callback.",
+  "main": "src/tidy-table.js",
+  "scripts": {
+    "build": "babel src -s -D -d dist && npm run sass && npm run minify-css && npm run minify-js",
+    "lint": "eslint --ignore-path .gitignore src test",
+    "sass": "sass src/tidy-table.scss dist/tidy-table.css",
+    "minify-css": "node-minify --compressor clean-css --input 'dist/tidy-table.css' --output 'dist/tidy-table.min.css'",
+    "minify-js": "node-minify --compressor uglify-js --input 'dist/tidy-table.js' --output 'dist/tidy-table.min.js'",
+    "test": "wdio wdio.conf.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nuxy/tidy-table.git"
+  },
+  "keywords": [
+    "javascript",
+    "browser",
+    "plugin",
+    "table",
+    "results"
+  ],
+  "bugs": {
+    "url": "https://github.com/nuxy/tidy-table/issues"
+  },
+  "homepage": "https://github.com/nuxy/tidy-table#readme",
+  "author": "Marc S. Brooks <devel@mbrooks.info> (https://mbrooks.info)",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.18.6",
+    "@babel/core": "^7.18.0",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-decorators": "^7.18.6",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/register": "^7.17.7",
+    "@node-minify/clean-css": "^4.0.5",
+    "@node-minify/cli": "^6.2.0",
+    "@node-minify/uglify-js": "^4.0.5",
+    "@wdio/cli": "^8.8.8",
+    "@wdio/local-runner": "^8.8.8",
+    "@wdio/mocha-framework": "^8.8.7",
+    "@wdio/selenium-standalone-service": "^8.8.7",
+    "@wdio/spec-reporter": "^8.8.7",
+    "eslint": "^8.18.0",
+    "sass": "^1.53.0"
+  }
+}

package/src/tidy-table.js

@@ -0,0 +1,402 @@
+/**
+ *  tidy-table
+ *  Create a HTML table that can be sorted, selected and
+ *  post-processed using a simple callback.
+ *
+ *  Copyright 2012-2023, Marc S. Brooks (https://mbrooks.info)
+ *  Licensed under the MIT license:
+ *  http://www.opensource.org/licenses/mit-license.php
+ */
+
+'use strict';
+
+/**
+ * @param {Element} container
+ *   Containing HTML element.
+ *
+ * @param {Object} settings
+ *   Table settings.
+ *
+ * @param {Object} options
+ *   Configuration overrides (optional).
+ */
+function TidyTable(container, settings, options = {}) {
+  const self = this;
+
+  const defaults = {
+    enableCheckbox: false,
+    enableMenu:     false,
+    reverseSortDir: false,
+    responsive:     false
+  };
+
+  (function() {
+    self.options = Object.assign(defaults, options);
+
+    const {columnTitles, columnValues} = settings;
+
+    if (columnTitles.length && columnValues.length) {
+      renderTable();
+    } else {
+      throw new Error('Failed to initialize (missing settings)');
+    }
+  })();
+
+  /**
+   * Render a new table instance.
+   */
+  function renderTable() {
+    const table = createTableElm();
+
+    // Post-process table results HTML object.
+    if (typeof settings.postProcess?.table === 'function') {
+      settings.postProcess.table(table);
+    }
+
+    // Replace the element, if already exists.
+    const block = container.querySelector('.tidy-table table');
+
+    if (block) {
+      block.parentNode.replaceChild(table, block);
+    } else {
+
+      // Generate select menu elements.
+      if (self.options.enableMenu) {
+        container.appendChild(createMenuElm('options'));
+      }
+
+      container.classList.add('tidy-table');
+      container.appendChild(table);
+    }
+
+    // Enable/disable responsive layout support.
+    if (defaults.responsive) {
+      container.classList.add('responsive');
+    }
+  }
+
+  /**
+   * Create table elements.
+   *
+   * @return {Element}
+   */
+  function createTableElm() {
+    const table = document.createElement('table');
+    table.appendChild(createTableHeaderElm());
+    table.appendChild(createTableBodyElm());
+
+    // Append check boxes to beginning each row.
+    if (self.options.enableCheckbox) {
+      const rows = table.querySelectorAll('tr');
+
+      for (let i = 0; i < rows.length; i++) {
+        const input = createCheckboxElm();
+
+        let col;
+
+        // First row is always the header.
+        if (i === 0) {
+          col = document.createElement('th');
+
+          // Attach event to check all boxes.
+          input.addEventListener('click', function() {
+            toggleSelRows(rows);
+          });
+        }
+        else {
+          col = document.createElement('td');
+
+          // Attach events to each checkbox.
+          input.addEventListener('click', function(index) {
+            toggleSelRows(rows, index);
+          }.bind(null, i), false);
+        }
+
+        col.appendChild(input);
+
+        // Insert before first cell.
+        rows[i].insertBefore(col, rows[i].firstChild);
+      }
+    }
+
+    return table;
+  }
+
+  /**
+   * Create table body elements.
+   *
+   * @return {Element}
+   */
+  function createTableBodyElm() {
+    const tbody = document.createElement('tbody');
+
+    const vals = settings.columnValues;
+
+    for (let i = 0; i < vals.length; i++) {
+      const row = document.createElement('tr');
+
+      for (let j = 0; j < vals[i].length; j++) {
+        const val = vals[i][j];
+
+        const col = document.createElement('td');
+        col.appendChild(document.createTextNode(val));
+        col.setAttribute('title', val);
+        row.appendChild(col);
+
+        // Post-process table column HTML object.
+        if (typeof settings.postProcess?.column === 'function') {
+          settings.postProcess.column(col);
+        }
+      }
+
+      tbody.appendChild(row);
+    }
+
+    return tbody;
+  }
+
+  /**
+   * Create table header elements.
+   *
+   * @return {Element}
+   */
+  function createTableHeaderElm() {
+    const thead = document.createElement('thead');
+    const row   = document.createElement('tr');
+
+    const titles = settings.columnTitles;
+
+    let sortOrder = self.sortOrder;
+
+    for (let i = 0; i < titles.length; i++) {
+      const title = titles[i];
+
+      const col = document.createElement('th');
+      col.appendChild(document.createTextNode(title));
+      col.setAttribute('title', title);
+
+      row.appendChild(col);
+
+      if (self.selected === i) {
+        let className;
+
+        // Determine column result order.
+        if (!self.options.reverseSortDir) {
+          if (sortOrder === 'asc' || !sortOrder) {
+            className = 'arrow-up';
+            sortOrder = 'desc';
+          }
+          else {
+            className = 'arrow-up';
+            sortOrder = 'asc';
+          }
+        }
+        else {
+          if (sortOrder === 'desc' || !sortOrder) {
+            className = 'arrow-down';
+            sortOrder = 'asc';
+          }
+          else {
+            className = 'arrow-up';
+            sortOrder = 'desc';
+          }
+        }
+
+        // Highlight selected column.
+        col.classList.add(className);
+      }
+
+      // Attach column sorting events.
+      col.addEventListener('click', function(index) {
+        self.sortOrder = (self.selected === i) ? sortOrder : 'asc';
+
+        sortByColumn(index, sortOrder);
+
+        self.selected = index;
+
+        renderTable();
+      }.bind(null, i), false);
+    }
+
+    thead.appendChild(row);
+
+    return thead;
+  }
+
+  /**
+   * Create checkbox element.
+   *
+   * @returns {Element}
+   */
+  function createCheckboxElm() {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'checkbox');
+
+    return input;
+  }
+
+  /**
+   * Create select menu element.
+   *
+   * @returns {Element}
+   */
+  function createMenuElm(name) {
+
+    // Create reusable elements.
+    const select = document.createElement('select');
+    select.classList.add(name);
+
+    // Listen for select menu events.
+    select.addEventListener('change', function() {
+
+      // Execute callback.
+      const callback = settings.menuOptions[this.value][1].callback;
+
+      if (typeof callback === 'function') {
+        callback(getCheckedAsObj());
+      }
+
+      this.value = 0;
+    });
+
+    // .. Options
+    for (let i = 0; i < settings.menuOptions.length; i++) {
+      const option = document.createElement('option');
+      option.text  = settings.menuOptions[i][0];
+      option.value = i;
+
+      select.appendChild(option);
+    }
+
+    // Post-process select menu HTML object.
+    if (typeof settings.postProcess?.menu === 'function') {
+      settings.postProcess.menu(select);
+    }
+
+    return select;
+  }
+
+  /**
+   * Return selected row values as array of objects.
+   *
+   * @returns {Array<Object>}
+   */
+  function getCheckedAsObj() {
+    const rows = container.querySelectorAll('tbody > tr');
+    const objs = [];
+
+    for (let i = 0; i < rows.length; i++) {
+      const cols = rows[i].childNodes;
+
+      // If the row checkbox is selected.
+      if (cols[0].firstChild.checked) {
+        const row = [];
+
+        // Simulate an associative array.
+        for (let j = 1; j < cols.length; j++) {
+          row[j - 1] = cols[j].textContent;
+        }
+
+        objs.push(row);
+      }
+    }
+
+    return objs;
+  }
+
+  /**
+   * Select/Deselect (input checkbox and row highlight).
+   */
+  function toggleSelRows(rows, num) {
+    let checked;
+
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i];
+
+      const input = row.querySelector('input[type=checkbox]');
+
+      // Update all rows.
+      if (!num) {
+        if (i === 0) {
+          checked = input.checked;
+          continue;
+        }
+
+        if (checked) {
+          row.classList.replace('check-off', 'check-on') || row.classList.add('check-on');
+          input.checked = true;
+        }
+        else {
+          row.classList.replace('check-on', 'check-off');
+          input.checked = false;
+        }
+      }
+
+      // Update selected row.
+      else {
+        if (i === 0) {
+          continue;
+        }
+
+        if (input.checked === true) {
+          row.classList.replace('check-off', 'check-on') || row.classList.add('check-on');
+          input.checked = true;
+        }
+        else {
+          row.classList.replace('check-on', 'check-off');
+          input.checked = false;
+        }
+      }
+    }
+  }
+
+  /**
+   * Display results ordered by selected column.
+   */
+  function sortByColumn(num, order) {
+    let sortByPattern = settings.sortByPattern;
+
+    if (typeof sortByPattern !== 'function') {
+      sortByPattern = function(val) {
+        return val?.replace(/\$|%|#/g, '');
+      };
+    }
+
+    const reverse = (order === 'desc') ? -1 : 1;
+
+    // Sort object by array index.
+    settings.columnValues.sort(function(a, b) {
+      const str1 = sortByPattern(a[num]);
+      const str2 = sortByPattern(b[num]);
+
+      if (isNaN(str1)) {
+        return [reverse * cmpAny(str1, str2)] >
+               [reverse * cmpAny(str2, str1)] ? -1 : 1;
+      }
+
+      return [reverse * cmpInt(str1, str2)];
+    });
+  }
+
+  /**
+   * Generic string comparison functions.
+   */
+  function cmpAny(a, b) {
+    return (a > b) ? 1 : (a < b) ? -1 : 0;
+  }
+
+  function cmpInt(a, b) {
+    return b - a;
+  }
+}
+
+/**
+ * Set global/exportable instance, where supported.
+ */
+window.tidyTable = function(container, settings, options) {
+  return new TidyTable(container, settings, options);
+};
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = TidyTable;
+}

package/src/tidy-table.scss

@@ -0,0 +1,143 @@
+/**
+ *  tidy-table
+ *  Create a HTML table that can be sorted, selected and
+ *  post-processed using a simple callback.
+ *
+ *  Copyright 2012-2023, Marc S. Brooks (https://mbrooks.info)
+ *  Licensed under the MIT license:
+ *  http://www.opensource.org/licenses/mit-license.php
+ */
+
+.tidy-table {
+  table {
+    background-color: #fff;
+    border-collapse: collapse;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    white-space: nowrap;
+
+    thead, tbody {
+      input[type='checkbox'] {
+        display: block;
+        margin: 0px auto;
+      }
+
+      td, th {
+        padding: 6px 20px;
+
+        &:nth-child(1) {
+          width: 10px;
+        }
+      }
+    }
+
+    thead {
+      border: none;
+
+      th {
+        background-color: #ddd;
+
+        &.arrow-down {
+          background: #eee url('../images/arrow-down.svg') no-repeat right center;
+        }
+
+        &.arrow-up {
+          background: #eee url('../images/arrow-up.svg') no-repeat right center;
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        &.check-on {
+          background-color: #f5f5f5;
+        }
+
+        &.check-off {
+          background-color: #fff;
+        }
+
+        td {
+          border-right: 1px solid #eee;
+          border-top: 1px solid #ccc;
+          padding: 7px 20px;
+
+          .label {
+            display: none;
+          }
+
+          &:nth-child(1) {
+            border-right: 1px solid #eee;
+          }
+
+          &:nth-last-child(1) {
+            border-right: none;
+          }
+        }
+      }
+    }
+  }
+
+  @media only screen and (min-device-width: 0px) and (max-device-width: 800px) {
+    &.responsive {
+      margin: 0px !important;
+      overflow: auto;
+      width: auto !important;
+
+      table {
+        border: 0px;
+        border-top: 1px solid #ddd;
+        width: 100%;
+
+        thead, tbody {
+          td, th {
+            border: 0px;
+            box-sizing: border-box;
+            clear: both;
+            float: left;
+            padding-left: 10px;
+
+            &:first-child {
+              background-color: transparent;
+              padding: 10px;
+              position: absolute;
+              right: 0px;
+              top: 2px;
+              width: auto;
+            }
+          }
+        }
+
+        thead {
+          th {
+            text-align: left;
+            width: 100%;
+
+            &:first-child {
+              top: -40px;
+            }
+          }
+        }
+
+        tbody {
+          tr {
+            border-bottom: 1px solid #ccc;
+            position: relative;
+
+            &:last-child {
+              border: none;
+            }
+          }
+
+          td {
+            background-color: transparent;
+
+            &:first-child {
+              border: none;
+            }
+          }
+        }
+      }
+    }
+  }
+}