feat: EpicTable component.

The EpicTable is a table based on Andrew Colyle's article
"Design better data tables" which can be found here:
https://uxdesign.cc/design-better-data-tables-4ecc99d23356

The features the EpicTable supports:

  1. Fixed headers which follow the user.
  2. A fixed left column which follows the user.
  3. Optionally a fixed right column which follows the user.
  4. Expanding rows which can contain extra data.
  5. Click to go to details inside of the table.
  6. Selection of rows, and a select all.
  7. Filtering per column.
  8. Resizing of columns.
  9. Multiple headers

docs/translations.md

@@ -133,6 +133,11 @@ Here is a JSON notation containing all keys and default translations:
   "Pager": {
     "NEXT": "Next",
     "PREVIOUS": "Previous"
+  },
+  "EpicTable": {
+    "EpicDetail": {
+      "CLOSE": "Close"
+    }
   }
 }
 ```

package.json

@@ -36,12 +36,15 @@
     "bootstrap": "4.3.1",
     "material-design-icons": "3.0.1",
     "moment": "2.24.0",
+    "overlayscrollbars": "1.9.1",
+    "overlayscrollbars-react": "0.1.0",
     "pica": "5.1.0",
     "react-avatar-editor": "11.0.7",
     "react-bootstrap-typeahead": "4.0.0-alpha.6",
     "react-datetime": "2.16.3",
     "react-display-name": "0.2.4",
     "react-final-form": "6.3.0",
+    "react-is": "16.10.2",
     "react-quill": "1.3.3",
     "react-text-mask": "5.4.3",
     "react-textarea-autosize": "7.1.0"
@@ -78,6 +81,7 @@
     "@types/react": "16.9.9",
     "@types/lodash": "4.14.144",
     "@types/react-avatar-editor": "10.3.4",
+    "@types/overlayscrollbars": "1.9.0",
     "@types/react-bootstrap-typeahead": "3.4.5",
     "@types/react-dom": "16.9.2",
     "@types/react-router-dom": "5.1.0",

src/core/ContentState/ContentState.tsx

@@ -4,6 +4,8 @@ import classNames from 'classnames';
 import Icon from '../Icon/Icon';
 import Spinner from '../Spinner/Spinner';
 
+export type ContentStateMode = 'empty' | 'no-results' | 'error' | 'loading';
+
 interface Props {
   /**
    * The mode of the ContentState:
@@ -19,7 +21,7 @@ interface Props {
    * Use `loading` for when something is still loading.
    *
    */
-  mode: 'empty' | 'no-results' | 'error' | 'loading';
+  mode: ContentStateMode;
 
   /**
    * Optional custom content you want to render below the titles.

src/core/Icon/Icon.scss

@@ -17,6 +17,10 @@
   }
 }
 
+i.material-icons {
+  user-select: none;
+}
+
 .nav-link {
   i.material-icons {
     vertical-align: middle;

src/form/CheckboxMultipleSelect/CheckboxMultipleSelect.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState} from 'react';
 import { storiesOf } from '@storybook/react';
 import { range } from 'lodash';
 
@@ -8,7 +8,6 @@ import CheckboxMultipleSelect, {
 import { FinalForm, Form } from '../story-utils';
 import { pageOfUsers } from '../../test/fixtures';
 import { User } from '../../test/types';
-import { useState } from '@storybook/addons';
 
 interface SubjectOption {
   value: string;

src/index.ts

@@ -4,7 +4,7 @@ export { default as AvatarStack } from './core/Avatar/AvatarStack';
 export { default as Button } from './core/Button/Button';
 export { default as useShowSpinner } from './core/Button/useShowSpinner';
 export { default as ConfirmButton } from './core/ConfirmButton/ConfirmButton';
-export { default as ContentState } from './core/ContentState/ContentState';
+export { default as ContentState, ContentStateMode } from './core/ContentState/ContentState';
 export { default as FlashMessage } from './core/FlashMessage/FlashMessage';
 export { Icon, IconType } from './core/Icon/index';
 export { default as InfoBadge } from './core/InfoBadge/InfoBadge';
@@ -81,6 +81,24 @@ export {
   JarbValuePicker,
 } from './form/ValuePicker/ValuePicker';
 
+// Table
+export { EpicTable } from './table/EpicTable/EpicTable';
+
+export { EpicCell } from './table/EpicTable/cells/EpicCell/EpicCell';
+export { EpicHeader } from './table/EpicTable/cells/EpicHeader/EpicHeader';
+export { EpicCellLayout } from './table/EpicTable/cells/EpicCellLayout/EpicCellLayout';
+
+export { EpicRow } from './table/EpicTable/rows/EpicRow/EpicRow';
+export { EpicDetailRow } from './table/EpicTable/rows/EpicDetailRow/EpicDetailRow';
+export { EpicExpanderRow } from './table/EpicTable/rows/EpicExpanderRow/EpicExpanderRow';
+
+export { EpicDetail } from './table/EpicTable/widgets/EpicDetail/EpicDetail';
+export { EpicExpander } from './table/EpicTable/widgets/EpicExpander/EpicExpander';
+export { EpicSelection } from './table/EpicTable/widgets/EpicSelection/EpicSelection';
+export { EpicSort } from './table/EpicTable/widgets/EpicSort/EpicSort';
+
+export { Direction } from './table/EpicTable/types';
+
 // Utilities
 export { t } from './utilities/translation/translation';
 export { setTranslator } from './utilities/translation/translator';