feat: EpicTable component.

[MrHus]

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

[jvhoven]

	Warnings
⚠️	Changes were made to package.json, but not to yarn.lock. Perhaps you need to run yarn install?

	Messages
📖	👍 Jest tests passed: 356/356 (0 skipped)

New dependencies added: overlayscrollbars, overlayscrollbars-react, react-is and @types/overlayscrollbars.

overlayscrollbars

Author: KingSora | Rene Haas

Description: A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.

Homepage: https://kingsora.github.io/OverlayScrollbars

Created	almost 2 years ago
Last Updated	27 days ago
License	MIT
Maintainers	1
Releases	28
Keywords	overlayscrollbars, custom, scrollbar, scrollbars, scroll and frontend

This README is too long to show.

overlayscrollbars-react

Author: KingSora | Rene Haas

Description: OverlayScrollbars wrapper for React.

Homepage: https://kingsora.github.io/OverlayScrollbars

Created	3 months ago
Last Updated	27 days ago
License	MIT
Maintainers	1
Releases	2
Keywords	overlayscrollbars and react

README

Example   •   Documentation   •   FAQ

The official OverlayScrollbars wrapper for React.

Installation

npm install overlayscrollbars-react

Peer Dependencies

OverlayScrollbars for React has the following peer dependencies:

• The vanilla JavaScript library: overlayscrollbars

npm install overlayscrollbars

• The React framework: react

npm install react

TypeScript

• In case you are using TypeScript, you have to install the OverlayScrollbars typings:

npm install @types/overlayscrollbars

Since this wrapper is written in TypeScript it comes with its generated typings.

Check out the recommended tsconfig.json options.

Usage

CSS

You have to import the OverlayScrollbars.css by yourself.

The component doesn't do it for you as the styles are global styles!

There are different ways to achieve this, in React the most simple way for me was to add this line in the index file:

import 'overlayscrollbars/css/OverlayScrollbars.css';

Import

Simply import the component into your file(s):

import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';

Template

After the import you can use it in JSX:

<OverlayScrollbarsComponent>
  example content
</OverlayScrollbarsComponent>

Properties

Two properties are accepted: options and extensions.

• The options property accepts a object and can be changed at any point in time, and the plugin will adapt.
• The extensions property accepts a string, string array or object and is only taken into account if the component gets mounted.

<OverlayScrollbarsComponent
  options={{ scrollbars: { autoHide: 'scroll' } }} 
  extensions={['extensionA', 'extensionB']}
>
</OverlayScrollbarsComponent>

You can read more about the options object here, extensions are documented here and here.

Instance

If you get the component reference, it provides two methods: osInstance() and osTarget().

• The osInstance() method returns the OverlayScrollbars instance of the component, or null if the instance isn't initialized yet or already destroyed.
• The osTarget() method returns the native html element to which the plugin was initialized, or null if the the component isn't mounted yet or already unmounted.

Example App

In case you need a example app for reference, you can use the example app in this repo(example folder):

• Live example
• Source code

If you wanna build the example app, run these commands:

npm run setup
npm run build
npm run example

License

MIT

react-is

Author: Unknown

Description: Brand checking of React Elements.

Homepage: https://reactjs.org/

Created	about 2 years ago
Last Updated	14 days ago
License	MIT
Maintainers	9
Releases	98
Keywords	react

@types/overlayscrollbars

Author: Unknown

Description: TypeScript definitions for OverlayScrollbars

Homepage: http://npmjs.com/package/@types/overlayscrollbars

Created	10 months ago
Last Updated	1 day ago
License	MIT
Maintainers	1
Releases	4
Direct Dependencies

README

Installation

npm install --save @types/overlayscrollbars

Summary

This package contains type definitions for OverlayScrollbars (https://kingsora.github.io/OverlayScrollbars).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/overlayscrollbars

Additional Details

• Last updated: Mon, 29 Jul 2019 21:34:42 GMT
• Dependencies: none
• Global values: OverlayScrollbars

Credits

These definitions were written by KingSora https://github.com/KingSora.

Generated by 🚫 dangerJS against 5bc722b

[codecov]

Codecov Report

Merging #189 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #189   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          49     62   +13     
  Lines        1239   1337   +98     
  Branches      227    237   +10     
=====================================
+ Hits         1239   1337   +98

Impacted Files	Coverage Δ
src/core/ContentState/ContentState.tsx	100% <ø> (ø)	⬆️
...ble/EpicTable/rows/EpicDetailRow/EpicDetailRow.tsx	100% <100%> (ø)
...le/EpicTable/widgets/EpicExpander/EpicExpander.tsx	100% <100%> (ø)
.../table/EpicTable/widgets/EpicDetail/EpicDetail.tsx	100% <100%> (ø)
src/table/EpicTable/rows/EpicRow/EpicRow.tsx	100% <100%> (ø)
src/table/EpicTable/widgets/EpicSort/EpicSort.tsx	100% <100%> (ø)
src/table/EpicTable/cells/EpicCell/EpicCell.tsx	100% <100%> (ø)
...icTable/cells/EpicHeader/EpicResize/EpicResize.tsx	100% <100%> (ø)
...EpicTable/rows/EpicExpanderRow/EpicExpanderRow.tsx	100% <100%> (ø)
.../EpicTable/cells/EpicCellLayout/EpicCellLayout.tsx	100% <100%> (ø)
... and 17 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 50f970a...5bc722b. Read the comment docs.