tidy-table 4.0.1 → 4.0.2

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [4.0.0] - 2023-03-04
+
+### Changed
+
+The following items are **breaking changes** and not supported in prior releases.
+
+- Updated future releases to be installed via [NPM](https://npmjs.com) vs [Bower](https://bower.io) (legacy only).
+- Refactored instance arguments `new TidyTable(container, settings, options)`
+- Renamed TR className/CSS selector `sort-desc`, `sort-asc` to `arrow-up`, `arrow-down`
+- Replaced GIF images with SVG equivalent (renamed) `arrow-up.svg`, `arrow-down.svg`
+- Replaced [QUnit](https://qunitjs.com) testing with [WebdriverIO](https://webdriver.io) framework.
+- Integrated [Babel](https://babeljs.io) transpilation build process.

package/README.md

@@ -108,6 +108,61 @@ Overriding defaults can be done using the following options:
 | reverseSortDir | Change the sorting arrow image direction.      | false   |
 | responsive     | Enable/disable responsive layout support.      | false   |
 
+## Post-processing examples
+
+There are times where you may need to customize the table result behavior. This can be achieved using `postProcess` hooks.
+
+### Hide the second column of table results
+
+```javascript
+function callback(table) {
+  const cols = table.querySelectorAll('th:nth-child(2), td:nth-child(2)');
+
+  for (let i = 0; i < cols.length; i++) {
+    cols[i].style.display = 'none';
+  }
+}
+```
+
+### Create text field on column click event
+
+```javascript
+function callback(col) {
+  col.addEventListener('click', function() {
+    if (!this.querySelector('form')) {
+      const form = document.createElement('form');
+      form.addEventListener('submit', function() {
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/path/to/script');
+        xhr.send(null);
+      });
+
+      const field = document.createElement('input');
+      field.setAttribute('type', 'text');
+      field.setAttribute('value', this.textContent);
+
+      const button = document.createElement('input');
+      button.setAttribute('type', 'submit');
+
+      form.appendChild(field).appendChild(button);
+
+      this.removeChild(this.firstChild);
+      this.appendChild(form);
+    });
+  }
+}
+```
+
+### Hide select menu when cookie doesn't exist
+
+```javascript
+function callback(menu) {
+  if (!getCookie('session')) {
+    menu.style.display = 'none';
+  }
+}
+```
+
 ## 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tidy-table",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Create a HTML table that can be sorted, selected, and post-processed using a simple callback.",
   "main": "src/tidy-table.js",
   "scripts": {