3.0 to multi sort or not

@Types/modules.d.ts

@@ -0,0 +1,4 @@
+declare module 'sheetclip' {
+    const value: any;
+    export default value;
+}

CHANGELOG.md

@@ -1 +1,6 @@
 # Changelog
+
+## RC6 - Sorting props
+
+- Additional sorting_type prop that can take value 'multi' or 'single'
+    This prop defines whether the user can sort based on multiple columns or can only sort by one column at a time. The default value is 'single'.

dash_table/metadata.json

@@ -1,5 +1,5 @@
 {
-  "src/dash-table/components/Table.js": {
+  "src/dash-table/Table.js": {
     "description": "",
     "displayName": "Table",
     "methods": [],
@@ -134,6 +134,10 @@
             {
               "value": "'multi'",
               "computed": false
+            },
+            {
+              "value": "false",
+              "computed": false
             }
           ]
         },
@@ -236,7 +240,11 @@
               "computed": false
             },
             {
-              "value": "'none'",
+              "value": "true",
+              "computed": false
+            },
+            {
+              "value": "false",
               "computed": false
             }
           ]
@@ -532,6 +540,27 @@
           "computed": false
         }
       },
+      "sorting_type": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'single'",
+              "computed": false
+            },
+            {
+              "value": "'multi'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "'single'",
+          "computed": false
+        }
+      },
       "sorting_settings": {
         "type": {
           "name": "arrayOf",
@@ -639,7 +668,7 @@
       },
       "base_styles": {
         "defaultValue": {
-          "value": "{\n    numeric: {\n        'text-align': 'right',\n        'font-family': \"'Droid Sans Mono', Courier, monospace\",\n    },\n\n    string: {\n        'text-align': 'left',\n    },\n\n    input: {\n        padding: 0,\n        margin: 0,\n        width: '80px',\n        border: 'none',\n        'font-size': '1rem',\n    },\n\n    'input-active': {\n        outline: '#7FDBFF auto 3px',\n    },\n\n    table: {},\n\n    thead: {},\n\n    th: {},\n\n    td: {},\n}",
+          "value": "{\n    numeric: {\n        'text-align': 'right',\n        'font-family': `'Droid Sans Mono', Courier, monospace`\n    },\n\n    string: {\n        'text-align': 'left'\n    },\n\n    input: {\n        padding: 0,\n        margin: 0,\n        width: '80px',\n        border: 'none',\n        'font-size': '1rem'\n    },\n\n    'input-active': {\n        outline: '#7FDBFF auto 3px'\n    },\n\n    table: {},\n\n    thead: {},\n\n    th: {},\n\n    td: {}\n}",
           "computed": false
         },
         "required": false

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc5",
+  "version": "3.0.0rc6",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
@@ -16,14 +16,15 @@
     "private::lint.js": "eslint src",
     "private::lint.ts": "tslint --project . src/**/*.ts",
     "private::opentests": "cypress open",
-    "private::runtests": "cypress run",
-    "private::snapshots": "build-storybook && percy-storybook",
+    "private::runtests": "cypress run --browser chrome",
+    "private::test-e2e": "run-p --race private::host* private::runtests",
+    "private::test-visual": "build-storybook && percy-storybook",
     "build.watch": "webpack-dev-server --content-base dash_table --mode development",
     "build:js-dev": "run-s \"private::build -- --mode development\"",
     "build:js": "run-s \"private::build -- --mode production\"",
-    "build:py": "./extract-meta src/dash-table/components/Table.js > dash_table/metadata.json && cp package.json dash_table",
+    "build:py": "./extract-meta src/dash-table/Table.js > dash_table/metadata.json && cp package.json dash_table",
     "lint": "run-s private::lint.js private::lint.ts",
-    "test": "run-p --race private::host* private::runtests private::snapshots",
+    "test": "run-s private::test-*",
     "test.watch": "run-p --race \"private::build -- --mode development --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <chris@plot.ly",
@@ -42,13 +43,14 @@
     "@storybook/cli": "^4.0.0-alpha.16",
     "@storybook/react": "^4.0.0-alpha.16",
     "@types/ramda": "^0.25.36",
+    "@types/react-select": "^1.2.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.11",
-    "cypress": "^3.0.3",
+    "cypress": "^3.1.0",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.12.0",

demo/App.js

@@ -2,12 +2,13 @@
 import * as R from 'ramda';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {Table} from 'dash-table';
+import { Table } from 'dash-table';
 import {mockData} from './data';
 import { memoizeOne } from 'core/memoizer';
 
 const clone = o => JSON.parse(JSON.stringify(o));
 
+
 class App extends Component {
     constructor() {
         super();
@@ -27,9 +28,9 @@ class App extends Component {
                 editable: true,
                 filtering: true,
                 sorting: true,
-                // n_fixed_rows: 3,
-                // n_fixed_columns: 2,
-                merge_duplicate_headers: true,
+                n_fixed_rows: 3,
+                n_fixed_columns: 2,
+                merge_duplicate_headers: false,
                 row_deletable: true,
                 row_selectable: 'single',
                 column_static_dropdown: [
@@ -41,6 +42,9 @@ class App extends Component {
                         }))
                     }
                 ],
+                table_style: [
+                    { selector: '.dash-spreadsheet.freeze-left', rule: 'width: 1000px' }
+                ]
             }
         };
 

demo/index.js

@@ -4,7 +4,7 @@ import App from './App';
 
 import Logger, { DebugLevel, LogLevel } from 'core/Logger';
 
-Logger.setDebugLevel(DebugLevel.NONE);
+Logger.setDebugLevel(DebugLevel.DEBUG);
 Logger.setLogLevel(LogLevel.WARNING);
 
 ReactDOM.render(<App />, document.getElementById('root'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc5",
+  "version": "3.0.0rc6",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
@@ -16,14 +16,15 @@
     "private::lint.js": "eslint src",
     "private::lint.ts": "tslint --project . src/**/*.ts",
     "private::opentests": "cypress open",
-    "private::runtests": "cypress run",
-    "private::snapshots": "build-storybook && percy-storybook",
+    "private::runtests": "cypress run --browser chrome",
+    "private::test-e2e": "run-p --race private::host* private::runtests",
+    "private::test-visual": "build-storybook && percy-storybook",
     "build.watch": "webpack-dev-server --content-base dash_table --mode development",
     "build:js-dev": "run-s \"private::build -- --mode development\"",
     "build:js": "run-s \"private::build -- --mode production\"",
-    "build:py": "./extract-meta src/dash-table/components/Table.js > dash_table/metadata.json && cp package.json dash_table",
+    "build:py": "./extract-meta src/dash-table/Table.js > dash_table/metadata.json && cp package.json dash_table",
     "lint": "run-s private::lint.js private::lint.ts",
-    "test": "run-p --race private::host* private::runtests private::snapshots",
+    "test": "run-s private::test-*",
     "test.watch": "run-p --race \"private::build -- --mode development --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <chris@plot.ly",
@@ -42,13 +43,14 @@
     "@storybook/cli": "^4.0.0-alpha.16",
     "@storybook/react": "^4.0.0-alpha.16",
     "@types/ramda": "^0.25.36",
+    "@types/react-select": "^1.2.1",
     "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.3",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "css-loader": "^0.28.11",
-    "cypress": "^3.0.3",
+    "cypress": "^3.1.0",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.12.0",

src/core/Clipboard.ts

@@ -0,0 +1,42 @@
+export default class Clipboard {
+    public static set(value: string): void {
+        const el = document.createElement('textarea');
+        el.value = value;
+
+        // (Adapted from https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f)
+        // Make it readonly to be tamper-proof
+        el.setAttribute('readonly', '');
+        // el.style.position = 'absolute';
+        // Move outside the screen to make it invisible
+        // el.style.left = '-9999px';
+        // Append the <textarea> element to the HTML document
+        document.body.appendChild(el);
+
+        // Check if there is any content selected previously
+        let selected;
+        if (document.getSelection().rangeCount > 0) {
+            // Store selection if found
+            selected = document.getSelection().getRangeAt(0);
+        }
+
+        // Select the <textarea> content
+        el.select();
+        // Copy - only works as a result of a user action (e.g. click events)
+        document.execCommand('copy');
+        // Remove the <textarea> element
+        document.body.removeChild(el);
+        // If a selection existed before copying
+        if (selected) {
+            // Unselect everything on the HTML document
+            document.getSelection().removeAllRanges();
+            // Restore the original selection
+            document.getSelection().addRange(selected);
+        }
+    }
+
+    public static get(ev: ClipboardEvent) {
+        return ev.clipboardData ?
+            ev.clipboardData.getData('text/plain') :
+            undefined;
+    }
+}

src/core/Stylesheet.ts

@@ -1,3 +1,5 @@
+import Logger from 'core/Logger';
+
 interface IRule {
     cssText: string;
     selectorText: string;
@@ -84,13 +86,15 @@ export default class Stylesheet {
 
         const result = this.stylesheet.findRule(selector);
         if (result) {
-            if (result.rule.cssText === css) {
+
+            if (result.rule.cssText === css || result.rule.cssText === `${selector} { ${css} }`) {
                 return;
             } else {
                 this.stylesheet.deleteRule(result.index);
             }
         }
 
         this.stylesheet.addRule(selector, css);
+        Logger.debug('stylesheet', selector, css);
     }
 }

src/core/math/random.ts

@@ -0,0 +1,7 @@
+export default (seed: number | undefined = undefined) => {
+    let lcg = (a: number) => a * 48271 % 2147483647;
+
+    let safeSeed = seed !== undefined ? lcg(seed) : lcg(Math.random());
+
+    return () => (safeSeed = lcg(safeSeed)) / 2147483648;
+};

src/core/sorting/index.ts

@@ -1,5 +1,4 @@
 import * as R from 'ramda';
-import Logger from 'core/Logger';
 
 export interface ISortSetting {
     columnId: string | number;
@@ -14,33 +13,6 @@ export enum SortDirection {
 
 export type SortSettings = ISortSetting[];
 
-export function updateSettings(
-    settings: SortSettings,
-    setting: ISortSetting
-): SortSettings {
-    Logger.trace('updateSettings', settings, setting);
-
-    settings = R.clone(settings);
-
-    if (setting.direction === SortDirection.None) {
-        const currentIndex = R.findIndex(s => s.columnId === setting.columnId, settings);
-
-        if (currentIndex !== -1) {
-            settings.splice(currentIndex, 1);
-        }
-    } else {
-        const currentSetting = R.find(s => s.columnId === setting.columnId, settings);
-
-        if (currentSetting) {
-            currentSetting.direction = setting.direction;
-        } else {
-            settings.push(setting);
-        }
-    }
-
-    return settings;
-}
-
 export default (dataframe: any[], settings: SortSettings): any[] => {
     if (!settings.length) {
         return dataframe;

src/core/sorting/multi.ts

@@ -0,0 +1,31 @@
+import * as R from 'ramda';
+
+import Logger from 'core/Logger';
+import { SortSettings, ISortSetting, SortDirection } from 'core/sorting';
+
+export default (
+    settings: SortSettings,
+    setting: ISortSetting
+): SortSettings => {
+    Logger.trace('multi - updateSettings', settings, setting);
+
+    settings = R.clone(settings);
+
+    if (setting.direction === SortDirection.None) {
+        const currentIndex = R.findIndex(s => s.columnId === setting.columnId, settings);
+
+        if (currentIndex !== -1) {
+            settings.splice(currentIndex, 1);
+        }
+    } else {
+        const currentSetting = R.find(s => s.columnId === setting.columnId, settings);
+
+        if (currentSetting) {
+            currentSetting.direction = setting.direction;
+        } else {
+            settings.push(setting);
+        }
+    }
+
+    return settings;
+};