adore-datatable 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2018 Frappe Technologies Pvt. Ltd. <developers@frappe.io>
+
+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,75 @@
+<div align="center" markdown="1">
+
+<img width="80" alt="datatable-logo" src="https://github.com/user-attachments/assets/8235f4b9-993a-4329-97de-9431dcf63aae" >
+
+<h1>Frappe DataTable</h1>
+
+**A modern datatable library for the web**
+
+[![Test and Release](https://github.com/frappe/datatable/workflows/Test%20and%20Release/badge.svg)](https://github.com/frappe/datatable/actions?query=workflow%3A%22Test+and+Release%22)
+[![npm version](https://badge.fury.io/js/frappe-datatable.svg)](https://badge.fury.io/js/frappe-datatable)
+![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/frappe-datatable.svg)
+
+
+![datatable-demo-2](https://user-images.githubusercontent.com/9355208/40740030-5412aa40-6465-11e8-8542-b0247ab1daac.gif)
+
+</div>
+
+## Frappe Datatable
+
+Frappe DataTable is a simple, modern and interactive datatable library for displaying tabular data. Originally built for [ERPNext](https://github.com/frappe/erpnext), it can be used to render large amount of rows without sacrificing performance and has the basic data grid features like inline editing and keyboard navigation. It does not require jQuery, unlike most data grids out there.
+
+### Motivation
+
+I was trying to remove all legacy UI components from the [frappe](https://github.com/frappe/frappe) codebase. We were using [SlickGrid](https://github.com/mleibman/SlickGrid) for rendering tables. It was unmaintained and UI was dated. Other datatable solutions either didn't have the features we needed or were closed source. So we built our own.
+
+
+### Key Features
+
+- **Cell**: Enable editing within individual cells and features like custom formatters, inline editing, and mouse selection. Users can easily copy cell content, navigate through cells using the keyboard, and take advantage of a custom cell editor for advanced functionality.
+- **Column**: Columns are highly flexible, allowing users to reorder, resize, and sort them with ease. Additional features include hiding/removing columns and adding custom actions.
+- **Row**: Rows support advanced interactions, including row selection, tree-structured organization, and inline filters for precise control. They handle large datasets efficiently with dynamic row heights.
+
+
+## Usage
+
+```bash
+yarn add frappe-datatable
+# or
+npm install frappe-datatable
+```
+
+> Note: [`sortablejs`](https://github.com/RubaXa/Sortable) is required to be installed as well.
+
+
+```js
+const datatable = new DataTable('#datatable', {
+  columns: [ 'First Name', 'Last Name', 'Position' ],
+  data: [
+    [ 'Don', 'Joe', 'Designer' ],
+    [ 'Mary', 'Jane', 'Software Developer' ]
+  ]
+});
+```
+
+## Development Setup
+
+* `yarn start` - Start dev server
+* Open `index.html` located in the root folder, and start development.
+* Run `yarn lint` before committing changes
+* This project uses [commitizen](https://github.com/commitizen/cz-cli) for conventional commit messages, use `yarn commit` command instead of `git commit`
+
+## Links
+
+- [Making a new datatable for the web](https://medium.com/frapp%C3%A9-thoughts/things-i-learned-building-a-library-for-the-web-6846a588bf53)
+
+<br>
+<br>
+<div align="center" style="padding-top: 0.75rem;">
+	<a href="https://frappe.io" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
+			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
+		</picture>
+	</a>
+</div>

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "adore-datatable",
+  "version": "2.0.0",
+  "description": "A modern datatable library for the web",
+  "main": "dist/adore-datatable.cjs.js",
+  "unpkg": "dist/adore-datatable.min.js",
+  "jsdelivr": "dist/adore-datatable.min.js",
+  "scripts": {
+    "start": "yarn run dev",
+    "build": "rollup -c && NODE_ENV=production rollup -c",
+    "dev": "rollup -c -w",
+    "cy:server": "http-server -p 8989",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run",
+    "test": "start-server-and-test cy:server http://localhost:8989 cy:run",
+    "test-local": "start-server-and-test cy:server http://localhost:8989 cy:open",
+    "travis-deploy-once": "travis-deploy-once",
+    "semantic-release": "semantic-release",
+    "lint": "eslint src",
+    "lint-and-build": "yarn lint && yarn build",
+    "commit": "npx git-cz"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "autoprefixer": "^9.0.0",
+    "chai": "3.5.0",
+    "cypress": "^9.2.0",
+    "cz-conventional-changelog": "^2.1.0",
+    "deepmerge": "^2.0.1",
+    "eslint": "^5.0.1",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "^2.11.0",
+    "http-server": "^0.11.1",
+    "mocha": "3.3.0",
+    "postcss-custom-properties": "^7.0.0",
+    "postcss-nested": "^3.0.0",
+    "rollup": "^0.59.4",
+    "rollup-plugin-commonjs": "^8.3.0",
+    "rollup-plugin-eslint": "^4.0.0",
+    "rollup-plugin-json": "^2.3.0",
+    "rollup-plugin-node-resolve": "^3.0.3",
+    "rollup-plugin-postcss": "^1.2.8",
+    "rollup-plugin-uglify-es": "^0.0.1",
+    "semantic-release": "^17.1.1",
+    "start-server-and-test": "^1.4.1",
+    "travis-deploy-once": "^5.0.1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/frappe/datatable.git"
+  },
+  "keywords": [
+    "datatable",
+    "data",
+    "grid",
+    "table"
+  ],
+  "author": "Faris Ansari",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/frappe/datatable/issues"
+  },
+  "homepage": "https://frappe.io/datatable",
+  "dependencies": {
+    "hyperlist": "^1.0.0-beta",
+    "lodash": "^4.17.5",
+    "sortablejs": "^1.7.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  }
+}

package/src/body-renderer.js

@@ -0,0 +1,163 @@
+import HyperList from 'hyperlist';
+
+export default class BodyRenderer {
+    constructor(instance) {
+        this.instance = instance;
+        this.options = instance.options;
+        this.datamanager = instance.datamanager;
+        this.rowmanager = instance.rowmanager;
+        this.cellmanager = instance.cellmanager;
+        this.bodyScrollable = instance.bodyScrollable;
+        this.footer = this.instance.footer;
+        this.log = instance.log;
+    }
+
+    renderRows(rows) {
+        this.visibleRows = rows;
+        this.visibleRowIndices = rows.map(row => row.meta.rowIndex);
+        this.instance.noData = false;
+        if (rows.length === 0) {
+            this.bodyScrollable.innerHTML = this.getNoDataHTML();
+            this.instance.noData = true;
+            this.footer.innerHTML = '';
+            return;
+        }
+
+        // Create a temporary set for faster lookups.
+        // We can't change this.visibleRowIndices as it would be breaking for users.
+        let visibleRowIndicesSet = new Set(this.visibleRowIndices);
+        const rowViewOrder = this.datamanager.rowViewOrder.map(index => {
+            if (visibleRowIndicesSet.has(index)) {
+                return index;
+            }
+            return null;
+        }).filter(index => index !== null);
+
+        const computedStyle = getComputedStyle(this.bodyScrollable);
+
+        let config = {
+            width: computedStyle.width,
+            height: computedStyle.height,
+            itemHeight: this.options.cellHeight,
+            total: rows.length,
+            generate: (index) => {
+                const el = document.createElement('div');
+                const rowIndex = rowViewOrder[index];
+                const row = this.datamanager.getRow(rowIndex);
+                const rowHTML = this.rowmanager.getRowHTML(row, row.meta);
+                el.innerHTML = rowHTML;
+                return el.children[0];
+            },
+            afterRender: () => {
+                this.restoreState();
+            }
+        };
+
+        if (!this.hyperlist) {
+            this.hyperlist = new HyperList(this.bodyScrollable, config);
+        } else {
+            this.hyperlist.refresh(this.bodyScrollable, config);
+        }
+
+        this.renderFooter();
+    }
+
+    render() {
+        const rows = this.datamanager.getRowsForView();
+        this.renderRows(rows);
+        // setDimensions requires atleast 1 row to exist in dom
+        this.instance.setDimensions();
+    }
+
+    renderFooter() {
+        if (!this.options.showTotalRow) return;
+
+        const totalRow = this.getTotalRow();
+        let html = this.rowmanager.getRowHTML(totalRow, { isTotalRow: 1, rowIndex: 'totalRow' });
+
+        this.footer.innerHTML = html;
+    }
+
+    getTotalRow() {
+        const columns = this.datamanager.getColumns();
+        const totalRowTemplate = columns.map(col => {
+            let content = null;
+            if (['_rowIndex', '_checkbox'].includes(col.id)) {
+                content = '';
+            }
+            return {
+                content,
+                isTotalRow: 1,
+                colIndex: col.colIndex,
+                column: col
+            };
+        });
+
+        const totalRow = totalRowTemplate.map((cell, i) => {
+            if (cell.content === '') return cell;
+
+            if (this.options.hooks.columnTotal) {
+                const columnValues = this.visibleRows.map(row => row[i].content);
+                const result = this.options.hooks.columnTotal.call(this.instance, columnValues, cell);
+                if (result != null) {
+                    cell.content = result;
+                    return cell;
+                }
+            }
+
+            cell.content = this.visibleRows.reduce((acc, prevRow) => {
+                const prevCell = prevRow[i];
+                if (typeof prevCell.content === 'number') {
+                    if (acc == null) acc = 0;
+                    return acc + prevCell.content;
+                }
+                return acc;
+            }, cell.content);
+
+            return cell;
+        });
+
+        return totalRow;
+    }
+
+    restoreState() {
+        this.rowmanager.highlightCheckedRows();
+        this.cellmanager.selectAreaOnClusterChanged();
+        this.cellmanager.focusCellOnClusterChanged();
+    }
+
+    showToastMessage(message, hideAfter) {
+        this.instance.toastMessage.innerHTML = this.getToastMessageHTML(message);
+
+        if (hideAfter) {
+            setTimeout(() => {
+                this.clearToastMessage();
+            }, hideAfter * 1000);
+        }
+    }
+
+    clearToastMessage() {
+        this.instance.toastMessage.innerHTML = '';
+    }
+
+    getNoDataHTML() {
+        const style = window.getComputedStyle(this.instance.header);
+        const matrix = new DOMMatrixReadOnly(style.transform);
+        const width = (-matrix.m41) + this.instance.header.clientWidth;
+        const height = this.bodyScrollable.clientHeight;
+        return `
+            <div 
+                class="dt-scrollable__no-data" 
+                style="width: ${width}px; height: ${height}px"
+            >
+                <div class="dt-scrollable__no-data no-data-message">
+                    ${this.options.noDataMessage}
+                </div>
+            </div>
+        `;
+    }
+
+    getToastMessageHTML(message) {
+        return `<span class="dt-toast__message">${message}</span>`;
+    }
+}