Documentation with docsify 💃

dist/frappe-datatable.cjs.js

@@ -1606,6 +1606,22 @@ class CellManager {
                 this.instance.showToastMessage(message, 2);
             }
         });
+
+        if (this.options.pasteFromClipboard) {
+            this.keyboard.on('ctrl+v', (e) => {
+                // hack
+                // https://stackoverflow.com/a/2177059/5353542
+                this.instance.pasteTarget.focus();
+
+                setTimeout(() => {
+                    const data = this.instance.pasteTarget.value;
+                    this.instance.pasteTarget.value = '';
+                    this.pasteContentInCell(data);
+                }, 10);
+
+                return false;
+            });
+        }
     }
 
     bindMouseEvents() {
@@ -1994,6 +2010,30 @@ class CellManager {
         return rows.reduce((total, row) => total + row.length, 0);
     }
 
+    pasteContentInCell(data) {
+        if (!this.$focusedCell) return;
+
+        const matrix = data
+            .split('\n')
+            .map(row => row.split('\t'))
+            .filter(row => row.length && row.every(it => it));
+
+        let { colIndex, rowIndex } = $.data(this.$focusedCell);
+
+        let focusedCell = {
+            colIndex: +colIndex,
+            rowIndex: +rowIndex
+        };
+
+        matrix.forEach((row, i) => {
+            let rowIndex = i + focusedCell.rowIndex;
+            row.forEach((cell, j) => {
+                let colIndex = j + focusedCell.colIndex;
+                this.updateCell(colIndex, rowIndex, cell);
+            });
+        });
+    }
+
     activateFilter(colIndex) {
         this.columnmanager.toggleFilter();
         this.columnmanager.focusFilter(colIndex);
@@ -3299,7 +3339,8 @@ const KEYCODES = {
     9: 'tab',
     27: 'esc',
     67: 'c',
-    70: 'f'
+    70: 'f',
+    86: 'v'
 };
 
 class Keyboard {
@@ -3394,7 +3435,8 @@ var DEFAULT_OPTIONS = {
     inlineFilters: false,
     treeView: false,
     checkedRowStatus: true,
-    dynamicRowHeight: false
+    dynamicRowHeight: false,
+    pasteFromClipboard: false
 };
 
 class DataTable {
@@ -3464,6 +3506,7 @@ class DataTable {
                     </span>
                 </div>
                 <div class="dt-toast"></div>
+                <textarea class="dt-paste-target"></textarea>
             </div>
         `;
 
@@ -3472,6 +3515,7 @@ class DataTable {
         this.bodyScrollable = $('.dt-scrollable', this.wrapper);
         this.freezeContainer = $('.dt-freeze', this.wrapper);
         this.toastMessage = $('.dt-toast', this.wrapper);
+        this.pasteTarget = $('.dt-paste-target', this.wrapper);
     }
 
     refresh(data, columns) {
@@ -3589,7 +3633,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.4";
+var version = "0.0.5";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};

dist/frappe-datatable.css

@@ -247,6 +247,11 @@
 		        transform: translateY(-50%);
 	}
 
+.dt-paste-target {
+	position: fixed;
+	left: -999em;
+}
+
 body.dt-resize {
 	cursor: col-resize;
 }

dist/frappe-datatable.js

@@ -1605,6 +1605,22 @@ class CellManager {
                 this.instance.showToastMessage(message, 2);
             }
         });
+
+        if (this.options.pasteFromClipboard) {
+            this.keyboard.on('ctrl+v', (e) => {
+                // hack
+                // https://stackoverflow.com/a/2177059/5353542
+                this.instance.pasteTarget.focus();
+
+                setTimeout(() => {
+                    const data = this.instance.pasteTarget.value;
+                    this.instance.pasteTarget.value = '';
+                    this.pasteContentInCell(data);
+                }, 10);
+
+                return false;
+            });
+        }
     }
 
     bindMouseEvents() {
@@ -1993,6 +2009,30 @@ class CellManager {
         return rows.reduce((total, row) => total + row.length, 0);
     }
 
+    pasteContentInCell(data) {
+        if (!this.$focusedCell) return;
+
+        const matrix = data
+            .split('\n')
+            .map(row => row.split('\t'))
+            .filter(row => row.length && row.every(it => it));
+
+        let { colIndex, rowIndex } = $.data(this.$focusedCell);
+
+        let focusedCell = {
+            colIndex: +colIndex,
+            rowIndex: +rowIndex
+        };
+
+        matrix.forEach((row, i) => {
+            let rowIndex = i + focusedCell.rowIndex;
+            row.forEach((cell, j) => {
+                let colIndex = j + focusedCell.colIndex;
+                this.updateCell(colIndex, rowIndex, cell);
+            });
+        });
+    }
+
     activateFilter(colIndex) {
         this.columnmanager.toggleFilter();
         this.columnmanager.focusFilter(colIndex);
@@ -3298,7 +3338,8 @@ const KEYCODES = {
     9: 'tab',
     27: 'esc',
     67: 'c',
-    70: 'f'
+    70: 'f',
+    86: 'v'
 };
 
 class Keyboard {
@@ -3393,7 +3434,8 @@ var DEFAULT_OPTIONS = {
     inlineFilters: false,
     treeView: false,
     checkedRowStatus: true,
-    dynamicRowHeight: false
+    dynamicRowHeight: false,
+    pasteFromClipboard: false
 };
 
 class DataTable {
@@ -3463,6 +3505,7 @@ class DataTable {
                     </span>
                 </div>
                 <div class="dt-toast"></div>
+                <textarea class="dt-paste-target"></textarea>
             </div>
         `;
 
@@ -3471,6 +3514,7 @@ class DataTable {
         this.bodyScrollable = $('.dt-scrollable', this.wrapper);
         this.freezeContainer = $('.dt-freeze', this.wrapper);
         this.toastMessage = $('.dt-toast', this.wrapper);
+        this.pasteTarget = $('.dt-paste-target', this.wrapper);
     }
 
     refresh(data, columns) {
@@ -3588,7 +3632,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.4";
+var version = "0.0.5";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js"};

docs-wip/README.md

@@ -0,0 +1,30 @@
+# Frappe Datatable
+
+## Getting Started
+
+The easiest way to get started with Frappe DataTable is using this [JSFiddle Demo](https://jsfiddle.net/f4qe6phc/7/). Or you can copy the following template into a new index.html file.
+
+```html
+<!-- include styles -->
+<link href="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.css">
+
+<!-- create the container element -->
+<div id="datatable"></div>
+
+<!-- include the dependencies -->
+<script src="https://unpkg.com/sortablejs@1.7.0/Sortable.min.js"></script>
+<script src="https://unpkg.com/clusterize.js@0.18.0/clusterize.min.js"></script>
+<!-- include the lib -->
+<script src="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.js"></script>
+
+<!-- initialize DataTable -->
+<script>
+  const datatable = new DataTable('#datatable', {
+    columns: ['Name', 'Position', 'Salary'],
+    data: [
+      ['Faris', 'Software Developer', '$1200'],
+      ['Manas', 'Software Engineer', '$1400'],
+    ]
+  });
+</script>
+```

docs-wip/_navbar.md

@@ -0,0 +1,3 @@
+* Home
+* About
+* Contact

docs-wip/_sidebar.md

@@ -0,0 +1,5 @@
+* [Getting Started](/)
+* [Download](download.md)
+* [Configuration](configuration.md)
+* [Events](events.md)
+

docs-wip/configuration.md

@@ -0,0 +1,222 @@
+## Configuration
+
+Frappe DataTable has a lot of customizable features, this section is dedicated to enabling / disabling existing functionality.
+
+### Container
+
+The first parameter required by the `DataTable` constructor is the container element. You can pass in a CSS Selector or a DOM Object.
+
+```javascript
+const datatable = new DataTable('#datatable', options);
+// or
+const container = document.querySelector('#datatable');
+const datatable = new DataTable(container, options);
+```
+
+### Options
+
+The second parameter required by the `DataTable` constructor is the options object. The minimum required configuration is to pass `column` and `data` values.
+
+```javascript
+const options = {
+    columns: ['Name', 'Position', 'Salary'],
+    data: [
+        ['John Doe', 'DevOps Engineer', '$12300'],
+        ['Mary Jane', 'UX Design', '$14000'],
+    ]
+}
+
+const datatable = new DataTable(container, options);
+```
+
+The following options are configurable:
+
+#### getEditor
+ - Type: `Function`
+ - Default: `null`
+
+Customize the editor behaviour.
+
+---
+
+#### serialNoColumn
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to show serial number as the first column in datatable.
+
+---
+
+#### checkboxColumn
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to show checkbox column in the datatable.
+
+---
+
+#### clusterize
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to use clusterize to render the data.
+
+> If you don't want to show large number of rows. Then you can turn this off. In that case you don't need to load the `clusterize.js` lib
+
+---
+
+#### layout
+ - Type: `String`
+ - Default: `fixed`
+ - Options: `fixed | fluid | ratio`
+
+This option controls how width of each `column` is calculated in the DataTable.
+
+##### fixed
+
+The column width is calculated based on the content of the first row of the table. This layout can result in horizontal scroll.
+
+##### fluid
+
+The column width is adjusted based on the width of container. So the columns will be resized if the window is resized. This layout won't result in horizontal scroll. You will always see all the columns.
+
+##### ratio
+
+This layout works similar to the `flex` property in CSS. When column A has `width` set as `1` and column B as `2`, then column B's width  will be twice as much as column A.
+
+---
+
+#### noDataMessage
+ - Type: `String`
+ - Default: `No Data`
+
+The message shown when there are no rows to show in the DataTable.
+
+---
+
+#### dynamicRowHeight
+ - Type: `Boolean`
+ - Default: `false`
+
+The height of the row will be set according to the content of the cell with the maximum height in that row.
+
+---
+
+#### cellHeight
+ - Type: `Number`
+ - Default: `null`
+
+Set the height of each cell explicitly.
+
+> If this value is set, `dynamicRowHeight` won't have any effect.
+
+---
+
+#### inlineFilters
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to enable the inline filter feature. If the value is `true`, then you can activate the filter row by pressing `Ctrl/Cmd + F` after clicking on any cell in the DataTable.
+
+---
+
+#### treeView
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to render rows in a tree structure. For this to work, you must pass the `indent` value for each row.
+
+Example
+```javascript
+
+const data = [
+    {
+        'Department': 'IT Department',
+        'No of People': '10',
+        'indent': 0,
+    },
+    {
+        'Department': 'Javascript Team',
+        'No of People': '5',
+        'indent': 1,
+    },
+    {
+        'Department': 'Vue.js Team',
+        'No of People': '3',
+        'indent': 2,
+    },
+    {
+        'Department': 'React Team',
+        'No of People': '2',
+        'indent': 2,
+    },
+    {
+        'Department': 'Design Team',
+        'No of People': '5',
+        'indent': 1,
+    },
+]
+
+const datatable = new DataTable('#datatable', {
+    columns: ['Department', 'No of People'],
+    data: data
+});
+
+```
+
+---
+
+#### checkedRowStatus
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to show the number of rows checked in a toast message.
+
+---
+
+#### pasteFromClipboard
+ - _Experimental_
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to allow the user to paste copied content into selected cell(s).
+
+---
+
+#### dropdownButton
+ - Type: `String`
+ - Default: `▼`
+
+String to render as the dropdown button. You can pass a span with an icon class.
+
+Example
+
+```javascript
+{
+    dropdownButton: '<span class="fa fa-chevron-down"></span>'
+}
+
+```
+
+#### headerDropdown
+ - Type: `Array`
+
+When you hover over any column, you see the dropdown button which is used to perform certain actions for that column.
+This options allows you to pass an array of custom buttons with custom actions defined by you.
+
+```javascript
+options = {
+    headerDropdown: [
+        {
+            label: 'Copy column contents',
+            action: function (column) {
+                // code to copy the column contents
+            }
+        },
+}
+```
+
+#### events
+ - Type: `Object`
+
+ The events options is described in detailed in the [next section](events.md).

docs-wip/download.md

@@ -0,0 +1,29 @@
+## Download
+
+Frappe DataTable can be consumed in several different forms.
+
+### CDN
+
+Load it directly from the unpkg CDN.
+
+```html
+<script src="https://unpkg.com/frappe-datatable@0.0.5/dist/frappe-datatable.min.js"></script>
+```
+
+### Package managers
+
+Include it directly in your build workflow. You can find the compiled JS/CSS files in the `dist/` directory.
+
+```bash
+yarn add frappe-datatable
+# or
+npm install frappe-datatable
+```
+
+### Source
+
+The complete source code is always available on Github.
+
+```bash
+git clone https://github.com/frappe/datatable
+```

docs-wip/events.md

@@ -0,0 +1,48 @@
+## Events
+
+Hook custom actions on certain events occurred during the lifecycle of DataTable. You can define a function to be called on these events using the `events` key in `options`.
+
+Example
+```javascript
+
+{
+    events: {
+        onRemoveColumn(column) {
+            // your code
+        }
+    }
+}
+
+```
+
+### onRemoveColumn
+
+- params: `column`
+
+Called when a column is removed using the dropdown option or API.
+
+---
+
+### onSwitchColumn
+
+- params: `column1`, `column2`
+
+Called when a column position is switched using the drag behaviour.
+
+---
+
+### onSortColumn
+
+- params: `column`
+
+Called when a column's sorting is changed using the dropdown or API.
+
+---
+
+### onCheckRow
+
+- params: `row`
+
+Called when a row is checked using the checkbox or API.
+
+---

docs-wip/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>frappe-datatable - A modern datatable library for the web</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="A modern datatable library for the web">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    window.$docsify = {
+      repo: 'https://github.com/frappe/datatable',
+      themeColor: '#58b81d',
+      loadSidebar: true,
+      loadNavbar: true,
+      auto2top: true,
+      maxSubLevel: 3
+    }
+  </script>
+  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+</body>
+</html>

src/defaults.js

@@ -48,9 +48,9 @@ export default {
     layout: 'fixed', // fixed, fluid, ratio
     noDataMessage: 'No Data',
     cellHeight: null,
+    dynamicRowHeight: false,
     inlineFilters: false,
     treeView: false,
     checkedRowStatus: true,
-    dynamicRowHeight: false,
     pasteFromClipboard: false
 };