diff --git a/package-lock.json b/package-lock.json index 353cb9e8e64..919c6d4cf12 100644 --- a/package-lock.json +++ b/package-lock.json @@ -94,12 +94,12 @@ } }, "@storybook/addon-actions": { - "version": "3.2.17", - "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-3.2.17.tgz", - "integrity": "sha512-B4++4+p6zWTeTBzqe9lgzT8J0onaMfSZsBRJpa5URoDo3d4kTq+DTDs2qHhhTKJb2Drtu24/JlEgJG7lv0Fb0w==", + "version": "3.2.18", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-3.2.18.tgz", + "integrity": "sha512-jIbNxYXm3MyPECcPWZ9Vxuq31/rwq/oPXhfPpf4xD9sdQcfwm/5on2d75UJOXKio60xWagP4RpECz7d3uc6nJA==", "dev": true, "requires": { - "@storybook/addons": "3.2.17", + "@storybook/addons": "3.2.18", "deep-equal": "1.0.1", "json-stringify-safe": "5.0.1", "prop-types": "15.6.0", @@ -108,13 +108,13 @@ } }, "@storybook/addon-info": { - "version": "3.2.17", - "resolved": "https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.17.tgz", - "integrity": "sha512-MHZv/lam+NYyibOIRly+66GPSmlhrGMDlQaZFliXYILQuF6skN4KeC/A7IkhquAUVA2PrkBS8EJfTAV0Qw0pcQ==", + "version": "3.2.18", + "resolved": "https://registry.npmjs.org/@storybook/addon-info/-/addon-info-3.2.18.tgz", + "integrity": "sha512-InEJmMUgWHpP4O0Q+Wq74p/K28cNf6qcW6LriOkYvFqES6p1LdMJUvbRoblpQh6T5gI88weGVS50+wRDLBKCdw==", "dev": true, "requires": { - "@storybook/addons": "3.2.17", - "@storybook/components": "3.2.17", + "@storybook/addons": "3.2.18", + "@storybook/components": "3.2.18", "babel-runtime": "6.26.0", "global": "4.3.2", "marksy": "2.0.1", @@ -129,13 +129,13 @@ "integrity": "sha512-Xnd54kx47boM5Xl0sVMqblcki3Z8Z9hS8CIWz5CCJCfxQKx7mhFtcOmHrIqUH2oUZhhFSj+aFrRx1zPcFcPaZQ==", "dev": true, "requires": { - "@storybook/addons": "3.2.17", + "@storybook/addons": "3.2.18", "babel-runtime": "6.26.0", "deep-equal": "1.0.1", "global": "4.3.2", "insert-css": "1.1.0", "lodash.debounce": "4.0.8", - "moment": "2.19.4", + "moment": "2.20.0", "prop-types": "15.6.0", "react-color": "2.13.8", "react-datetime": "2.11.1", @@ -144,41 +144,41 @@ } }, "@storybook/addon-links": { - "version": "3.2.17", - "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-3.2.17.tgz", - "integrity": "sha512-AdCH9DsbOfiMDv42/l0Zfk2yhiBrlWuzHk7ubhSwqF3/61sXr+BWFv+SlOx2oFfSWAT7zfg2sC7Wr+us8gs7GQ==", + "version": "3.2.18", + "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-3.2.18.tgz", + "integrity": "sha512-X96TNRA0x0rWWVweIQCDM84GJdQpAXQutxnARvskV0RD6bf8Bhq7nw3FVzElNilnFyfhtFzYVqCUlEOAJcKEgg==", "dev": true, "requires": { - "@storybook/addons": "3.2.17" + "@storybook/addons": "3.2.18" } }, "@storybook/addons": { - "version": "3.2.17", - "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-3.2.17.tgz", - "integrity": "sha512-1/Ux++3hMfYqAgBwgWbGtGAM0CfSdAchf//wDLBUmX09+E5CjiQvW3YwVplNYzfRuAsSrE1GOYJRAsz639oTYQ==", + "version": "3.2.18", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-3.2.18.tgz", + "integrity": "sha512-I1oJhimBZiyrDa2UxorXhBBGapAIa+KxF8thtCUWmFgToeWhlHnRepQiRE+mCDM2yjSQpmTN+md/W8DPcLIHag==", "dev": true }, "@storybook/channel-postmessage": { - "version": "3.2.17", - "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.2.17.tgz", - "integrity": "sha512-sNlXcHTKM6aIxRsQMaMbowsAToYRlbeP/THqulVxoRRKNDPndNnZe/Lu3eSjBjAfNWBLRFfgX903adt82QAPCA==", + "version": "3.2.18", + "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.2.18.tgz", + "integrity": "sha512-a3SSLYlVf61BaAcM2pA/W4Rhdh/RCf1oise22TXfgC83ELUyRksKQX/Pm7FKn2NgffrZb5aRIUQRzfe3LH/www==", "dev": true, "requires": { - "@storybook/channels": "3.2.17", + "@storybook/channels": "3.2.18", "global": "4.3.2", "json-stringify-safe": "5.0.1" } }, "@storybook/channels": { - "version": "3.2.17", - "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.2.17.tgz", - "integrity": "sha512-HIdRmFTFVLcbrwYFf6+LyAlgcd57ki+6DDTmcvXQTHCWrOOCJKwfKjHgn6tbnHlGHiWByA8lAdO1bFcYhHxl4Q==", + "version": "3.2.18", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.2.18.tgz", + "integrity": "sha512-7+3Kic5FRWyojff/CA4wfhI24xxbXmQzdVLx0gUZm8r4+h/3JSt8hVfhJeXkS+GEvo852PRS/AOHnN4ENKw9uw==", "dev": true }, "@storybook/components": { - "version": "3.2.17", - "resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.2.17.tgz", - "integrity": "sha512-pXwNKLavYCu18B2EynFu9EKXlKi0LDo0B/KctbJvidxR5ubzqkZu9h2ti3hPPVomR2DQiRx61Vzqd7cbcyy14w==", + "version": "3.2.18", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.2.18.tgz", + "integrity": "sha512-jvwUewMiwG+svDqLxu6YyHQdBdvDQ5etA5dUplpx7aPW4bZog+DHkZ0RLgwHadxbeff1qs/RXlz23D3El6BDxA==", "dev": true, "requires": { "glamor": "2.20.40", @@ -203,11 +203,11 @@ "integrity": "sha512-/TWoVYHfoUnEAjcEj463zRIA7SJjB6RIzShFzI2HtJw+P2EdT8mFN2EYGdsuGHQqkbGSC3owHSy1Jxuy1GVuqQ==", "dev": true, "requires": { - "@storybook/addon-actions": "3.2.17", - "@storybook/addon-links": "3.2.17", - "@storybook/addons": "3.2.17", - "@storybook/channel-postmessage": "3.2.17", - "@storybook/ui": "3.2.17", + "@storybook/addon-actions": "3.2.18", + "@storybook/addon-links": "3.2.18", + "@storybook/addons": "3.2.18", + "@storybook/channel-postmessage": "3.2.18", + "@storybook/ui": "3.2.18", "airbnb-js-shims": "1.4.0", "autoprefixer": "7.2.3", "babel-core": "6.26.0", @@ -257,6 +257,16 @@ "webpack-hot-middleware": "2.21.0" }, "dependencies": { + "react-modal": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.4.1.tgz", + "integrity": "sha512-3WQCn3xqkbEUvxRUO3nkeqxMNgt1F4CyEU3BiUIrg7C71tnqjQIuSE7+JXp85yFl8X1iRTJouySNpwNqv4kiWg==", + "dev": true, + "requires": { + "exenv": "1.2.2", + "prop-types": "15.6.0" + } + }, "style-loader": { "version": "0.18.2", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.18.2.tgz", @@ -343,13 +353,13 @@ } }, "@storybook/ui": { - "version": "3.2.17", - "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.2.17.tgz", - "integrity": "sha512-At0oWWTALJrJhtdnP+0AMANBC5omIBnEg3Pin3M0+yzUy6Poelcvt8+81dQEKLBP6LiyFOVpiDjfqpiHR5l0ow==", + "version": "3.2.18", + "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.2.18.tgz", + "integrity": "sha512-n3j//YF5gbTRZHrdIREGK8C+weaCF/pu4iWKu4Pty8rbMjrghkgrhENga2XaFvEOfTsBUc2ldXCCjNw0tJOGWg==", "dev": true, "requires": { "@hypnosphi/fuse.js": "3.0.9", - "@storybook/components": "3.2.17", + "@storybook/components": "3.2.18", "@storybook/mantra-core": "1.7.2", "@storybook/react-fuzzy": "0.4.3", "@storybook/react-komposer": "2.0.3", @@ -371,19 +381,6 @@ "react-split-pane": "0.1.71", "react-treebeard": "2.1.0", "redux": "3.7.2" - }, - "dependencies": { - "react-modal": { - "version": "3.1.8", - "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.1.8.tgz", - "integrity": "sha512-cp5fSUBuwkyojclrxZuWXudK2kTBycbDG9Eg1t/bEPdUVBW6vDiGE+4eZg7bVwMyFtiwvyVJ2ugdCOFllNPReg==", - "dev": true, - "requires": { - "exenv": "1.2.2", - "prop-types": "15.6.0", - "warning": "3.0.0" - } - } } }, "@types/inline-style-prefixer": { @@ -393,9 +390,9 @@ "dev": true }, "@types/react": { - "version": "16.0.30", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.30.tgz", - "integrity": "sha512-BQHUN9veeQJsmIod4i7sphZPAp85KBsYNtL2YMScPosJ58mVyChcN2SIfItmMrxZYWy2gBj5H3oKasT72rbsjQ==", + "version": "16.0.31", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.31.tgz", + "integrity": "sha512-ft7OuDGUo39e+9LGwUewf2RyEaNBOjWbHUmD5bzjNuSuDabccE/1IuO7iR0dkzLjVUKxTMq69E+FmKfbgBcfbQ==", "dev": true }, "abab": { @@ -504,7 +501,7 @@ "array-includes": "3.0.3", "array.prototype.flatmap": "1.1.1", "array.prototype.flatten": "1.1.1", - "es5-shim": "4.5.9", + "es5-shim": "4.5.10", "es6-shim": "0.35.3", "function.prototype.name": "1.0.3", "object.entries": "1.0.4", @@ -516,9 +513,9 @@ } }, "ajv": { - "version": "5.5.1", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.1.tgz", - "integrity": "sha1-s4u4h22ehr7plJVqBOch6IskjrI=", + "version": "5.5.2", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", + "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", "dev": true, "requires": { "co": "4.6.0", @@ -4000,9 +3997,9 @@ } }, "es5-shim": { - "version": "4.5.9", - "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.9.tgz", - "integrity": "sha1-Kh4rnlg/9f7Qwgo+4svz91IwpcA=", + "version": "4.5.10", + "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.10.tgz", + "integrity": "sha512-vmryBdqKRO8Ei9LJ4yyEk/EOmAOGIagcHDYPpTAi6pot4IMHS1AC2q5cTKPmydpijg2iX8DVmCuqgrNxIWj8Yg==", "dev": true }, "es6-iterator": { @@ -4145,7 +4142,7 @@ "ignore": "3.3.7", "imurmurhash": "0.1.4", "inquirer": "0.12.0", - "is-my-json-valid": "2.16.1", + "is-my-json-valid": "2.17.1", "is-resolvable": "1.0.1", "js-yaml": "3.7.0", "json-stable-stringify": "1.0.1", @@ -4375,9 +4372,9 @@ } }, "eslint-plugin-prettier": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-2.3.1.tgz", - "integrity": "sha512-AV8shBlGN9tRZffj5v/f4uiQWlP3qiQ+lh+BhTqRLuKSyczx+HRWVkVZaf7dOmguxghAH1wftnou/JUEEChhGg==", + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-2.4.0.tgz", + "integrity": "sha512-P0EohHM1MwL36GX5l1TOEYyt/5d7hcxrX3CqCjibTN3dH7VCAy2kjsC/WB6dUHnpB4mFkZq1Ndfh2DYQ2QMEGQ==", "dev": true, "requires": { "fast-diff": "1.1.2", @@ -4542,8 +4539,7 @@ "exenv": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", - "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=", - "dev": true + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" }, "exit-hook": { "version": "1.1.1", @@ -5739,14 +5735,6 @@ } } }, - "string_decoder": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, "string-width": { "version": "1.0.2", "bundled": true, @@ -5757,6 +5745,14 @@ "strip-ansi": "3.0.1" } }, + "string_decoder": { + "version": "1.0.1", + "bundled": true, + "dev": true, + "requires": { + "safe-buffer": "5.0.1" + } + }, "stringstream": { "version": "0.0.5", "bundled": true, @@ -6232,7 +6228,7 @@ "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=", "dev": true, "requires": { - "ajv": "5.5.1", + "ajv": "5.5.2", "har-schema": "2.0.0" } }, @@ -6762,9 +6758,9 @@ } }, "is-my-json-valid": { - "version": "2.16.1", - "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.16.1.tgz", - "integrity": "sha512-ochPsqWS1WXj8ZnMIV0vnNXooaMhp7cyL4FMSIPKTtnV0Ha/T19G2b9kkhcNsabV9bxYkze7/aLZJb/bYuFduQ==", + "version": "2.17.1", + "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.1.tgz", + "integrity": "sha512-Q2khNw+oBlWuaYvEEHtKSw/pCxD2L5Rc1C+UQme9X6JdRDh7m5D7HkozA0qa3DUkQ6VzCnEm8mVIQPyIRkI5sQ==", "dev": true, "requires": { "generate-function": "2.0.0", @@ -8726,9 +8722,9 @@ } }, "moment": { - "version": "2.19.4", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.19.4.tgz", - "integrity": "sha512-1xFTAknSLfc47DIxHDUbnJWC+UwgWxATmymaxIPQpmMh7LBm7ZbwVEsuushqwL2GYZU0jie4xO+TK44hJPjNSQ==", + "version": "2.20.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.20.0.tgz", + "integrity": "sha512-r7aEpLB/mhMUiC5ksahDajF/Jr3wS/qLzUnwOJCZyKWF34ibdvW8saujBKfR7aQlov//JgFA38HXOoIt7lXzcA==", "dev": true }, "ms": { @@ -8994,7 +8990,7 @@ "requires": { "chalk": "1.1.3", "commander": "2.12.2", - "is-my-json-valid": "2.16.1", + "is-my-json-valid": "2.17.1", "pinkie-promise": "2.0.1" } }, @@ -9604,9 +9600,9 @@ } }, "patternfly": { - "version": "3.31.2", - "resolved": "https://registry.npmjs.org/patternfly/-/patternfly-3.31.2.tgz", - "integrity": "sha1-XqvBVjE/2plQhSuil8vnPdp/U2M=", + "version": "3.32.1", + "resolved": "https://registry.npmjs.org/patternfly/-/patternfly-3.32.1.tgz", + "integrity": "sha1-M3JdZSrJprf00/GKQYnbwxntWTo=", "requires": { "bootstrap": "3.3.7", "bootstrap-datepicker": "1.6.4", @@ -12179,6 +12175,17 @@ "warning": "3.0.0" } }, + "react-bootstrap-table": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/react-bootstrap-table/-/react-bootstrap-table-4.3.0.tgz", + "integrity": "sha1-6v/f7OlIYQ35vfGJ7cKQ8TbbjO0=", + "requires": { + "classnames": "2.2.5", + "prop-types": "15.6.0", + "react-modal": "3.1.8", + "react-s-alert": "1.3.2" + } + }, "react-c3js": { "version": "0.1.20", "resolved": "https://registry.npmjs.org/react-c3js/-/react-c3js-0.1.20.tgz", @@ -12298,13 +12305,13 @@ } }, "react-modal": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-2.4.1.tgz", - "integrity": "sha512-3WQCn3xqkbEUvxRUO3nkeqxMNgt1F4CyEU3BiUIrg7C71tnqjQIuSE7+JXp85yFl8X1iRTJouySNpwNqv4kiWg==", - "dev": true, + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.1.8.tgz", + "integrity": "sha512-cp5fSUBuwkyojclrxZuWXudK2kTBycbDG9Eg1t/bEPdUVBW6vDiGE+4eZg7bVwMyFtiwvyVJ2ugdCOFllNPReg==", "requires": { "exenv": "1.2.2", - "prop-types": "15.6.0" + "prop-types": "15.6.0", + "warning": "3.0.0" } }, "react-onclickoutside": { @@ -12325,6 +12332,14 @@ "warning": "3.0.0" } }, + "react-s-alert": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/react-s-alert/-/react-s-alert-1.3.2.tgz", + "integrity": "sha512-6Gz/s5Jw3LbuFR6liD3A4f7w0cDASo1Zas+HaUtUCEm6cVQhgHsUPOBMR9bP8mfiH6KWfRGhiX3t38FbFYrVOg==", + "requires": { + "babel-runtime": "6.26.0" + } + }, "react-split-pane": { "version": "0.1.71", "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.71.tgz", @@ -12332,7 +12347,7 @@ "dev": true, "requires": { "@types/inline-style-prefixer": "3.0.1", - "@types/react": "16.0.30", + "@types/react": "16.0.31", "inline-style-prefixer": "3.0.8", "prop-types": "15.6.0", "react-style-proptype": "3.1.0" @@ -13087,7 +13102,7 @@ "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=", "dev": true, "requires": { - "ajv": "5.5.1" + "ajv": "5.5.2" } }, "scss-tokenizer": { @@ -13502,15 +13517,6 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, - "string_decoder": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", - "dev": true, - "requires": { - "safe-buffer": "5.1.1" - } - }, "string-length": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz", @@ -13575,6 +13581,15 @@ "function-bind": "1.1.1" } }, + "string_decoder": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "dev": true, + "requires": { + "safe-buffer": "5.1.1" + } + }, "stringstream": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz", @@ -14017,7 +14032,7 @@ "requires": { "chalk": "1.1.3", "commander": "2.12.2", - "is-my-json-valid": "2.16.1", + "is-my-json-valid": "2.17.1", "pinkie-promise": "2.0.1" } }, @@ -14545,7 +14560,7 @@ "requires": { "acorn": "5.2.1", "acorn-dynamic-import": "2.0.2", - "ajv": "5.5.1", + "ajv": "5.5.2", "ajv-keywords": "2.1.1", "async": "2.6.0", "enhanced-resolve": "3.4.1", diff --git a/package.json b/package.json index d6796cf922b..83543c76e65 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "classnames": "^2.2.5", "patternfly": "^3.31.0", "react-bootstrap": "^0.31.5", + "react-bootstrap-table": "^4.1.5", "react-c3js": "^0.1.20", "react-fontawesome": "^1.6.1", "recompose": "^0.26.0" diff --git a/sass/patternfly-react/_patternfly-react.scss b/sass/patternfly-react/_patternfly-react.scss index 91f53ee3a07..38955891d15 100644 --- a/sass/patternfly-react/_patternfly-react.scss +++ b/sass/patternfly-react/_patternfly-react.scss @@ -1,4 +1,12 @@ - /** Patternfly React Partials */ +.react-bs-container-header table { + margin-bottom: 0; +} +.react-bs-container-body > table { + border-top: 0; + & tbody > tr > td { + border-top: 0; + } +} diff --git a/src/components/Table/Table.js b/src/components/Table/Table.js new file mode 100644 index 00000000000..376b85a13e3 --- /dev/null +++ b/src/components/Table/Table.js @@ -0,0 +1,80 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; +import { TABLE_CONFIG } from './constants'; + +class Table extends React.Component { + isEmpty() { + return this.props.data.length === 0; + } + + columnClassNameFormat(fieldValue, row, rowIdx, colIdx) { + return ''; + } + + customHeaderClass(fieldValue, row, rowIdx, colIdx) { + return 'sorting_asc'; + } + onSortChange = (sortName, sortOrder) => {}; + renderCaret = (direction, fieldName) => { + return null; + }; + + render() { + const { columns, data, striped, bordered, hover, dataSort } = this.props; + const tableHeaderClass = cx({ dataTable: dataSort }); + const tableBodyClass = cx({ dataTable: dataSort }); + const isEmpty = this.isEmpty(); + + let options = {}; + if (dataSort && !isEmpty) { + options = { + onSortChange: this.onSortChange, + defaultSortName: columns[0].accessor, + }; + } + + return isEmpty ? null : ( + + {columns.map(col => ( + + ))} + + ); + } +} + +Table.propTypes = { + columns: PropTypes.arrayOf( + PropTypes.shape({ + headerAlign: PropTypes.oneOf(TABLE_CONFIG.ALIGNMENTS), + dataAlign: PropTypes.oneOf(TABLE_CONFIG.ALIGNMENTS), + }), + ), +}; +export default Table; diff --git a/src/components/Table/Table.stories.js b/src/components/Table/Table.stories.js new file mode 100644 index 00000000000..142ba86013d --- /dev/null +++ b/src/components/Table/Table.stories.js @@ -0,0 +1,102 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { withKnobs, select, boolean } from '@storybook/addon-knobs'; + +import { defaultTemplate } from '../../../storybook/decorators/storyTemplates'; +import { Table } from './index'; + +import { mockTableItems } from './__mocks__/mockTableItems'; + +const stories = storiesOf('Table', module); + +stories.addDecorator(withKnobs); +stories.addDecorator( + defaultTemplate({ + title: 'Table', + documentationLink: + 'http://www.patternfly.org/pattern-library/widgets/#tables', + }), +); + +const columns = [ + { + header: 'Name', + accessor: 'name', + isKey: true, + width: '20%', + formatter: (cell, row) => { + return {row.name}; + }, + hidden: false, + }, + { + header: 'Height', + accessor: 'height', + dataAlign: 'right', + width: '10%', + hidden: false, + }, + { + header: 'Hair Color', + accessor: 'hair_color', + width: '15%', + hidden: false, + }, + { + header: 'Gender', + accessor: 'gender', + width: '15%', + hidden: false, + }, + { + header: 'Eye Color', + accessor: 'eye_color', + width: '15%', + hidden: false, + }, + { + header: 'Birth Year', + accessor: 'birth_year', + width: '15%', + hidden: false, + }, + { + header: 'Mass', + accessor: 'mass', + dataAlign: 'right', + width: '10%', + hidden: false, + }, +]; + +stories.addWithInfo('Basic Table', () => { + const striped = boolean('Striped', true); + const bordered = boolean('Bordered', true); + const hover = boolean('Hover', true); + return ( + + ); +}); + +stories.addWithInfo('Data Table', () => { + const striped = boolean('Striped', true); + const bordered = boolean('Bordered', true); + const hover = boolean('Hover', true); + const dataSort = boolean('Data Sorting', true); + return ( +
+ ); +}); diff --git a/src/components/Table/__mocks__/mockTableItems.js b/src/components/Table/__mocks__/mockTableItems.js new file mode 100644 index 00000000000..636e83784c8 --- /dev/null +++ b/src/components/Table/__mocks__/mockTableItems.js @@ -0,0 +1,205 @@ +/** + * mockTableItems made courtesy of https://swapi.co/ + */ +export const mockTableItems = [ + { + name: 'Luke Skywalker', + height: '172', + mass: '77', + hair_color: 'blond', + skin_color: 'fair', + eye_color: 'blue', + birth_year: '19BBY', + gender: 'male', + }, + { + name: 'C-3PO', + height: '167', + mass: '75', + hair_color: 'n/a', + skin_color: 'gold', + eye_color: 'yellow', + birth_year: '112BBY', + gender: 'n/a', + }, + { + name: 'R2-D2', + height: '96', + mass: '32', + hair_color: 'n/a', + skin_color: 'white, blue', + eye_color: 'red', + birth_year: '33BBY', + gender: 'n/a', + }, + { + name: 'Darth Vader', + height: '202', + mass: '136', + hair_color: 'none', + skin_color: 'white', + eye_color: 'yellow', + birth_year: '41.9BBY', + gender: 'male', + }, + { + name: 'Leia Organa', + height: '150', + mass: '49', + hair_color: 'brown', + skin_color: 'light', + eye_color: 'brown', + birth_year: '19BBY', + gender: 'female', + }, + { + name: 'Owen Lars', + height: '178', + mass: '120', + hair_color: 'brown, grey', + skin_color: 'light', + eye_color: 'blue', + birth_year: '52BBY', + gender: 'male', + }, + { + name: 'Beru Whitesun lars', + height: '165', + mass: '75', + hair_color: 'brown', + skin_color: 'light', + eye_color: 'blue', + birth_year: '47BBY', + gender: 'female', + }, + { + name: 'R5-D4', + height: '97', + mass: '32', + hair_color: 'n/a', + skin_color: 'white, red', + eye_color: 'red', + birth_year: 'unknown', + gender: 'n/a', + }, + { + name: 'Biggs Darklighter', + height: '183', + mass: '84', + hair_color: 'black', + skin_color: 'light', + eye_color: 'brown', + birth_year: '24BBY', + gender: 'male', + }, + { + name: 'Obi-Wan Kenobi', + height: '182', + mass: '77', + hair_color: 'auburn, white', + skin_color: 'fair', + eye_color: 'blue-gray', + birth_year: '57BBY', + gender: 'male', + }, + { + name: 'Anakin Skywalker', + height: '188', + mass: '84', + hair_color: 'blond', + skin_color: 'fair', + eye_color: 'blue', + birth_year: '41.9BBY', + gender: 'male', + }, + { + name: 'Wilhuff Tarkin', + height: '180', + mass: 'unknown', + hair_color: 'auburn, grey', + skin_color: 'fair', + eye_color: 'blue', + birth_year: '64BBY', + gender: 'male', + }, + { + name: 'Chewbacca', + height: '228', + mass: '112', + hair_color: 'brown', + skin_color: 'unknown', + eye_color: 'blue', + birth_year: '200BBY', + gender: 'male', + }, + { + name: 'Han Solo', + height: '180', + mass: '80', + hair_color: 'brown', + skin_color: 'fair', + eye_color: 'brown', + birth_year: '29BBY', + gender: 'male', + }, + { + name: 'Greedo', + height: '173', + mass: '74', + hair_color: 'n/a', + skin_color: 'green', + eye_color: 'black', + birth_year: '44BBY', + gender: 'male', + }, + { + name: 'Jabba Desilijic Tiure', + height: '175', + mass: '1,358', + hair_color: 'n/a', + skin_color: 'green-tan, brown', + eye_color: 'orange', + birth_year: '600BBY', + gender: 'hermaphrodite', + }, + { + name: 'Wedge Antilles', + height: '170', + mass: '77', + hair_color: 'brown', + skin_color: 'fair', + eye_color: 'hazel', + birth_year: '21BBY', + gender: 'male', + }, + { + name: 'Jek Tono Porkins', + height: '180', + mass: '110', + hair_color: 'brown', + skin_color: 'fair', + eye_color: 'blue', + birth_year: 'unknown', + gender: 'male', + }, + { + name: 'Yoda', + height: '66', + mass: '17', + hair_color: 'white', + skin_color: 'green', + eye_color: 'brown', + birth_year: '896BBY', + gender: 'male', + }, + { + name: 'Palpatine', + height: '170', + mass: '75', + hair_color: 'grey', + skin_color: 'pale', + eye_color: 'yellow', + birth_year: '82BBY', + gender: 'male', + }, +]; diff --git a/src/components/Table/constants.js b/src/components/Table/constants.js new file mode 100644 index 00000000000..1eae5f1c192 --- /dev/null +++ b/src/components/Table/constants.js @@ -0,0 +1,5 @@ +const TABLE_CONFIG = { + ALIGNMENTS: ['left', 'center', 'right', 'start', 'end'], +}; + +export { TABLE_CONFIG }; diff --git a/src/components/Table/index.js b/src/components/Table/index.js new file mode 100644 index 00000000000..56abcd12f47 --- /dev/null +++ b/src/components/Table/index.js @@ -0,0 +1 @@ +export { default as Table } from './Table'; diff --git a/src/index.js b/src/index.js index 580c8f2e907..2b73c2dabeb 100644 --- a/src/index.js +++ b/src/index.js @@ -15,6 +15,7 @@ export * from './components/Modal'; export * from './components/OverlayTrigger'; export * from './components/Popover'; export * from './components/Spinner'; +export * from './components/Table'; export * from './components/ToastNotification'; export * from './components/Tooltip'; export * from './components/Wizard';