@danielgindi/dgtable.js 2.0.0

package/eslint.config.mjs

@@ -0,0 +1,133 @@
+import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all,
+});
+
+export default [
+    {
+        ignores: [
+            "tests/**/*",
+            "test/**/*",
+            "!tests/**/*tests.js",
+            "!test/**/*tests.js",
+            "!tests/**/*_test.js",
+            "!test/**/*_test.js",
+            "!tests/**/*_helpers.js",
+            "!test/**/*_helpers.js",
+            "dist/**/*",
+            "example/**/*",
+        ],
+    },
+    ...compat.extends("eslint:recommended"),
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+
+            ecmaVersion: 2020,
+            sourceType: "module",
+        },
+
+        rules: {
+            semi: ["warn", "always"],
+            "comma-dangle": ["warn", "always-multiline"],
+            "comma-style": ["warn", "last"],
+            "no-var": ["warn"],
+
+            "arrow-spacing": ["warn", {
+                before: true,
+                after: true,
+            }],
+
+            "space-infix-ops": ["warn", {
+                int32Hint: true,
+            }],
+
+            "keyword-spacing": ["warn", {
+                before: true,
+                after: true,
+            }],
+
+            "space-unary-ops": ["warn", {
+                words: true,
+                nonwords: false,
+            }],
+
+            "comma-spacing": ["warn", {
+                before: false,
+                after: true,
+            }],
+
+            "object-curly-spacing": ["warn", "always"],
+
+            "no-unused-vars": ["warn", {
+                vars: "all",
+                args: "after-used",
+                varsIgnorePattern: "[iIgnored]|^_",
+                ignoreRestSiblings: false,
+                argsIgnorePattern: "^_",
+                caughtErrors: "all",
+                caughtErrorsIgnorePattern: "^ignore",
+            }],
+
+            "no-console": "warn",
+            "no-extra-semi": "warn",
+            "no-unreachable": "warn",
+
+            "no-fallthrough": ["error", {
+                commentPattern: "break[\\s\\w]*omitted|fallthrough",
+            }],
+
+            "no-useless-escape": "warn",
+            "no-constant-condition": "warn",
+            "no-return-await": "warn",
+            "no-async-promise-executor": "warn",
+        },
+    }, {
+        files: [
+            "tests/**/*tests.js",
+            "test/**/*tests.js",
+            "tests/**/*_test.js",
+            "test/**/*_test.js",
+        ],
+
+        languageOptions: {
+            globals: {
+                ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, "off"])),
+                ...globals.node,
+                ...globals.mocha,
+                ...globals.jest,
+            },
+        },
+
+        rules: {
+            "no-console": "off",
+        },
+    }, {
+        files: ["*db*/**/migrations/**/*.js"],
+
+        rules: {
+            "no-console": "off",
+        },
+    }, {
+        files: ["scripts/**/*.js", "**/.eslintrc.js"],
+
+        languageOptions: {
+            globals: {
+                ...Object.fromEntries(Object.entries(globals.browser).map(([key]) => [key, "off"])),
+                ...globals.node,
+            },
+        },
+    },
+];

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@danielgindi/dgtable.js",
+  "description": "High-performance table View for vanilla JS",
+  "version": "2.0.0",
+  "main": "dist/lib.cjs.min.js",
+  "module": "dist/lib.es6.min.js",
+  "broswer": "dist/lib.umd.min.js",
+  "type": "module",
+  "author": {
+    "name": "Daniel Cohen Gindi",
+    "email": "danielgindi@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/danielgindi/dgtable.js.git"
+  },
+  "scripts": {
+    "build": "npm run lint && node ./scripts/build.js",
+    "lint": "node -e \"process.env.NODE_ENV != 'production' && process.exit(1)\" || eslint -f codeframe ./",
+    "lint-fix": "node -e \"process.env.NODE_ENV != 'production' && process.exit(1)\" || eslint -f codeframe --fix ./",
+    "prepare": "node -e \"process.env.NODE_ENV != 'production' && process.exit(1)\" || husky",
+    "prepublishOnly": "node -e \"process.env.NODE_ENV != 'production' && process.exit(1)\" || npm run build"
+  },
+  "bugs": {
+    "url": "https://github.com/danielgindi/dgtable.js/issues"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/danielgindi/dgtable.js/blob/master/LICENSE"
+    }
+  ],
+  "dependencies": {
+    "@danielgindi/dom-utils": "^1.0.11",
+    "@danielgindi/virtual-list-helper": "^1.0.17",
+    "mitt": "^3.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^28.0.9",
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "core-js": "^3.47.0",
+    "eslint": "^9.39.1",
+    "eslint-formatter-codeframe": "^7.32.2",
+    "fs-extra": "^11.3.2",
+    "globals": "^15",
+    "husky": "^9.1.7",
+    "pinst": "^3.0.0",
+    "rollup": "^4.53.3"
+  }
+}

package/src/SelectionHelper.js

@@ -0,0 +1,65 @@
+/* eslint-env browser */
+
+'use strict';
+
+// saveSelection/restoreSelection courtesy of Tim Down, with my improvements
+// https://stackoverflow.com/questions/13949059/persisting-the-changes-of-range-objects-after-selection-in-html/13950376#13950376
+
+function isChildOf(child, parent) {
+  while ((child = child.parentNode) && child !== parent);
+  return !!child;
+}
+
+class SelectionHelper {
+
+    static saveSelection(el) {
+        let range = window.getSelection().getRangeAt(0);
+
+        if (el !== range.commonAncestorContainer && !isChildOf(range.commonAncestorContainer, el))
+            return null;
+
+        let preSelectionRange = range.cloneRange();
+        preSelectionRange.selectNodeContents(el);
+        preSelectionRange.setEnd(range.startContainer, range.startOffset);
+        let start = preSelectionRange.toString().length;
+
+        return {
+            start: start,
+            end: start + range.toString().length,
+        };
+    }
+
+    static restoreSelection(el, savedSel) {
+        let charIndex = 0;
+        let nodeStack = [el], node, foundStart = false, stop = false;
+        let range = document.createRange();
+        range.setStart(el, 0);
+        range.collapse(true);
+
+        while (!stop && (node = nodeStack.pop())) {
+            if (node.nodeType === 3) {
+                let nextCharIndex = charIndex + node.length;
+                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
+                    range.setStart(node, savedSel.start - charIndex);
+                    foundStart = true;
+                }
+                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
+                    range.setEnd(node, savedSel.end - charIndex);
+                    stop = true;
+                }
+                charIndex = nextCharIndex;
+            } else {
+                let i = node.childNodes.length;
+                while (i--) {
+                    nodeStack.push(node.childNodes[i]);
+                }
+            }
+        }
+
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+}
+
+export default SelectionHelper;

package/src/by_column_filter.js

@@ -0,0 +1,25 @@
+'use strict';
+
+function ByColumnFilter (row, args) {
+    
+    let column = args.column;
+    let keyword = args.keyword == null ? '' : args.keyword.toString();
+    
+    if (!keyword || !column) return true;
+
+    let actualVal = row[column];
+    if (actualVal == null) {
+        return false;
+    }
+    
+    actualVal = actualVal.toString();
+    
+    if (!args.caseSensitive) {
+        actualVal = actualVal.toLowerCase();
+        keyword = keyword.toLowerCase();
+    }
+    
+    return actualVal.indexOf(keyword) !== -1;
+}
+
+export default ByColumnFilter;

package/src/column_collection.js

@@ -0,0 +1,153 @@
+'use strict';
+
+// Define class RowCollection
+function ColumnCollection () {
+
+    // Instantiate an Array. Seems like the `.length = ` of an inherited Array does not work well.
+    // I will not use the IFRAME solution either in fear of memory leaks, and we're supporting large datasets...
+    let collection = [];
+
+    // Synthetically set the 'prototype'
+    Object.assign(collection, ColumnCollection.prototype);
+
+    // Call initializer
+    collection.initialize.apply(collection, arguments);
+
+    return collection;
+}
+
+// Inherit Array
+ColumnCollection.prototype = [];
+
+ColumnCollection.prototype.initialize = function () {
+
+};
+
+/**
+ * Get the column by this name
+ * @param {string} column column name
+ * @returns {Object} the column object
+ */
+ColumnCollection.prototype.get = function (column) {
+    for (let i = 0, len = this.length; i < len; i++) {
+        if (this[i].name === column) {
+            return this[i];
+        }
+    }
+    return null;
+};
+
+/**
+ * Get the index of the column by this name
+ * @param {string} column column name
+ * @returns {int} the index of this column
+ */
+ColumnCollection.prototype.indexOf = function (column) {
+    for (let i = 0, len = this.length; i < len; i++) {
+        if (this[i].name === column) {
+            return i;
+        }
+    }
+    return -1;
+};
+
+/**
+ * Get the column by the specified order
+ * @param {number} order the column's order
+ * @returns {Object} the column object
+ */
+ColumnCollection.prototype.getByOrder = function (order) {
+    for (let i = 0, len = this.length; i < len; i++) {
+        if (this[i].order === order) {
+            return this[i];
+        }
+    }
+    return null;
+};
+
+/**
+ * Normalize order
+ * @returns {ColumnCollection} self
+ */
+ColumnCollection.prototype.normalizeOrder = function () {
+    let ordered = [], i;
+    for (i = 0; i < this.length; i++) {
+        ordered.push(this[i]);
+    }
+    ordered.sort(function(col1, col2){ return col1.order < col2.order ? -1 : (col1.order > col2.order ? 1 : 0); });
+    for (i = 0; i < ordered.length; i++) {
+        ordered[i].order = i;
+    }
+    return this;
+};
+
+/**
+ * Get the array of columns, order by the order property
+ * @returns {Array<Object>} ordered array of columns
+ */
+ColumnCollection.prototype.getColumns = function () {
+    let cols = [];
+    for (let i = 0, column; i < this.length; i++) {
+        column = this[i];
+        cols.push(column);
+    }
+    cols.sort((col1, col2) => col1.order < col2.order ? -1 : (col1.order > col2.order ? 1 : 0));
+    return cols;
+};
+
+/**
+ * Get the array of visible columns, order by the order property
+ * @returns {Array<Object>} ordered array of visible columns
+ */
+ColumnCollection.prototype.getVisibleColumns = function () {
+    let cols = [];
+    for (let i = 0, column; i < this.length; i++) {
+        column = this[i];
+        if (column.visible) {
+            cols.push(column);
+        }
+    }
+    cols.sort((col1, col2) => col1.order < col2.order ? -1 : (col1.order > col2.order ? 1 : 0));
+    return cols;
+};
+
+/**
+ * @returns {int} maximum order currently in the array
+ */
+ColumnCollection.prototype.getMaxOrder = function () {
+    let order = 0;
+    for (let i = 0, column; i < this.length; i++) {
+        column = this[i];
+        if (column.order > order) {
+            order = column.order;
+        }
+    }
+    return order;
+};
+
+/**
+ * Move a column to a new spot in the collection
+ * @param {Object} src the column to move
+ * @param {Object} dest the destination column
+ * @returns {ColumnCollection} self
+ */
+ColumnCollection.prototype.moveColumn = function (src, dest) {
+    if (src && dest) {
+        let srcOrder = src.order, destOrder = dest.order, i, col;
+        if (srcOrder < destOrder) {
+            for (i = srcOrder + 1; i <= destOrder; i++) {
+                col = this.getByOrder(i);
+                col.order--;
+            }
+        } else {
+            for (i = srcOrder - 1; i >= destOrder; i--) {
+                col = this.getByOrder(i);
+                col.order++;
+            }
+        }
+        src.order = destOrder;
+    }
+    return this;
+};
+
+export default ColumnCollection;