From 61263dc23b0202e5b8dd50d30d78983880ee25f5 Mon Sep 17 00:00:00 2001
From: Viktor Bersch <viktor.bersch@sap.com>
Date: Mon, 5 Aug 2019 12:28:52 +0200
Subject: [PATCH 1/5] WIP: transform FilterBar to FC

---
 .../src/components/FilterBar/FilterBar.jss.ts | 15 +++-
 .../main/src/components/FilterBar/index.tsx   | 77 +++++++++++--------
 2 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/packages/main/src/components/FilterBar/FilterBar.jss.ts b/packages/main/src/components/FilterBar/FilterBar.jss.ts
index 85b0e56211f..d015ebb3ad0 100644
--- a/packages/main/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/main/src/components/FilterBar/FilterBar.jss.ts
@@ -28,7 +28,20 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
       flexWrap: 'wrap',
       paddingTop: '1rem',
       paddingBottom: '1rem',
-      background: parameters.sapUiObjectHeaderBackground
+      background: parameters.sapUiObjectHeaderBackground,
+      transition: 'max-height 0.2s, opacity 0.2s ease-in'
+      // overflow: 'hidden'
+      // '& > *': {
+      //   marginBottom: '10px'
+      // }
+    },
+    filterAreaClosed: {
+      maxHeight: '0',
+      opacity: 0
+    },
+    filterAreaOpen: {
+      maxHeight: '500px',
+      opacity: 1
     },
     '@media (max-width: 599px)': {
       filterArea: {
diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx
index d77fff8a866..fed11aaf9ba 100644
--- a/packages/main/src/components/FilterBar/index.tsx
+++ b/packages/main/src/components/FilterBar/index.tsx
@@ -1,10 +1,12 @@
-import { withStyles } from '@ui5/webcomponents-react-base';
-import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
+import React, { FC, forwardRef, ReactNode, ReactNodeArray, RefObject, useCallback, useState } from 'react';
 import { ClassProps } from '../../interfaces/ClassProps';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { Button } from '../../lib/Button';
 import { ButtonDesign } from '../../lib/ButtonDesign';
 import styles from './FilterBar.jss';
+import { createUseStyles } from 'react-jss';
+import { JSSTheme } from '../../interfaces/JSSTheme';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base';
 
 export interface FilterBarPropTypes extends CommonProps {
   renderVariants?: () => JSX.Element;
@@ -14,37 +16,44 @@ export interface FilterBarPropTypes extends CommonProps {
 
 interface FilterBarInternalProps extends FilterBarPropTypes, ClassProps {}
 
-@withStyles(styles)
-export class FilterBar extends PureComponent<FilterBarPropTypes> {
-  static defaultProps = {
-    children: '',
-    displayOnly: true
-  };
-
-  state = {
-    showFilters: true
-  };
-
-  handleHideFilterBar = () => {
-    this.setState({ showFilters: !this.state.showFilters });
-  };
-
-  render() {
-    const { children, classes, renderVariants, renderSearch, innerRef } = this.props as FilterBarInternalProps;
-
-    return (
-      <div ref={innerRef} className={classes.outerContainer}>
-        <div className={classes.filterBarHeader}>
-          {renderVariants && renderVariants()}
-          {renderSearch && <div className={classes.vLine}> {renderSearch()} </div>}
-          <div className={classes.headerRowRight}>
-            <Button onClick={this.handleHideFilterBar} design={ButtonDesign.Transparent}>
-              {this.state.showFilters ? 'Hide Filter Bar' : 'Show Filter Bar'}
-            </Button>
-          </div>
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'FilterBar' });
+
+const FilterBar: FC<FilterBarPropTypes> = forwardRef((props: FilterBarPropTypes, ref: RefObject<HTMLDivElement>) => {
+  const { children, renderVariants, renderSearch } = props as FilterBarInternalProps;
+  const [showFilters, setShowFilters] = useState(true);
+
+  const classes = useStyles();
+
+  const handleHideFilterBar = useCallback(() => {
+    setShowFilters(!showFilters);
+  }, [showFilters]);
+
+  const filterAreaClasses = StyleClassHelper.of(classes.filterArea);
+  if (showFilters) {
+    filterAreaClasses.put(classes.filterAreaOpen);
+  } else {
+    filterAreaClasses.put(classes.filterAreaClosed);
+  }
+
+  return (
+    <div ref={ref} className={classes.outerContainer}>
+      <div className={classes.filterBarHeader}>
+        {renderVariants && renderVariants()}
+        {renderSearch && <div className={classes.vLine}> {renderSearch()} </div>}
+        <div className={classes.headerRowRight}>
+          <Button onClick={handleHideFilterBar} design={ButtonDesign.Transparent}>
+            {showFilters ? 'Hide Filter Bar' : 'Show Filter Bar'}
+          </Button>
         </div>
-        {this.state.showFilters && <div className={classes.filterArea}>{children}</div>}
       </div>
-    );
-  }
-}
+      <div className={filterAreaClasses.valueOf()}>{children}</div>
+    </div>
+  );
+});
+
+FilterBar.defaultProps = {
+  children: ''
+};
+
+FilterBar.displayName = 'FilterBar';
+export { FilterBar };

From 04e761aebbd50c4caddd67528ec908cf8bed33f0 Mon Sep 17 00:00:00 2001
From: Viktor Bersch <viktor.bersch@sap.com>
Date: Mon, 5 Aug 2019 13:33:13 +0200
Subject: [PATCH 2/5] fix(FilterBar): add vertical margin between FilterItems

---
 .../src/components/FilterBar/FilterBar.jss.ts | 34 +------------------
 .../components/FilterItem/FilterItem.jss.ts   |  3 +-
 2 files changed, 3 insertions(+), 34 deletions(-)

diff --git a/packages/main/src/components/FilterBar/FilterBar.jss.ts b/packages/main/src/components/FilterBar/FilterBar.jss.ts
index d015ebb3ad0..dda5654e32a 100644
--- a/packages/main/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/main/src/components/FilterBar/FilterBar.jss.ts
@@ -29,11 +29,7 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
       paddingTop: '1rem',
       paddingBottom: '1rem',
       background: parameters.sapUiObjectHeaderBackground,
-      transition: 'max-height 0.2s, opacity 0.2s ease-in'
-      // overflow: 'hidden'
-      // '& > *': {
-      //   marginBottom: '10px'
-      // }
+      transition: 'max-height 0.2s ease-out, opacity 0.2s ease-in'
     },
     filterAreaClosed: {
       maxHeight: '0',
@@ -43,34 +39,6 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
       maxHeight: '500px',
       opacity: 1
     },
-    '@media (max-width: 599px)': {
-      filterArea: {
-        columnCount: 3,
-        columnGap: '0.5rem',
-        rowGap: '0.5rem'
-      }
-    },
-    '@media (min-width: 600px) and (max-width: 1023px)': {
-      filterArea: {
-        columnCount: 8,
-        columnGap: '1rem',
-        rowGap: '1rem'
-      }
-    },
-    '@media (min-width: 1024px) and (max-width: 1439px)': {
-      filterArea: {
-        columnCount: 12,
-        columnGap: '1rem',
-        rowGap: '1rem'
-      }
-    },
-    '@media (min-width: 1440px)': {
-      filterArea: {
-        columnCount: 16,
-        columnGap: '1rem',
-        rowGap: '1rem'
-      }
-    },
     headerRowRight: {
       display: 'flex',
       justifyContent: 'flex-end',
diff --git a/packages/main/src/components/FilterItem/FilterItem.jss.ts b/packages/main/src/components/FilterItem/FilterItem.jss.ts
index 8a8cd285123..54d6a0560b6 100644
--- a/packages/main/src/components/FilterItem/FilterItem.jss.ts
+++ b/packages/main/src/components/FilterItem/FilterItem.jss.ts
@@ -2,7 +2,8 @@ const styles = {
   filterItem: {
     minWidth: '10rem',
     height: 'fit-content',
-    marginRight: '0.5rem'
+    marginRight: '1rem',
+    marginBottom: '1rem'
   },
   innerFilterItemContainer: {
     display: 'flex',

From 10c59c11ed4590fa79f859ff1e538d5c0ebe8d7a Mon Sep 17 00:00:00 2001
From: Viktor Bersch <viktor.bersch@sap.com>
Date: Mon, 5 Aug 2019 13:36:20 +0200
Subject: [PATCH 3/5] WIP: update tests

---
 .../__karma_snapshots__/AnalyticalTable.md    | 572 ++++++---------
 .../main/__karma_snapshots__/FilterBar.md     | 654 +++++++++---------
 2 files changed, 540 insertions(+), 686 deletions(-)

diff --git a/packages/main/__karma_snapshots__/AnalyticalTable.md b/packages/main/__karma_snapshots__/AnalyticalTable.md
index 197685b5af7..6e386884e28 100644
--- a/packages/main/__karma_snapshots__/AnalyticalTable.md
+++ b/packages/main/__karma_snapshots__/AnalyticalTable.md
@@ -20,7 +20,7 @@
                 </div>
               </Component>
             </WithStyles(Component)>
-            <ReactTable data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className="" showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} PreviousComponent={[undefined]} NextComponent={[undefined]} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} filtered={{...}} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} onPageChange={[undefined]} onPageSizeChange={[undefined]} onSortedChange={[undefined]} onResizedChange={[undefined]} onExpandedChange={[undefined]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={{...}} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} PivotComponent={[undefined]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]}>
+            <ReactTable data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className="" showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} PreviousComponent={[undefined]} NextComponent={[undefined]} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} filtered={{...}} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} onPageChange={[undefined]} onPageSizeChange={[undefined]} onSortedChange={[undefined]} onResizedChange={[undefined]} onExpandedChange={[undefined]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={{...}} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} PivotComponent={[undefined]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]}>
               <div className="ReactTable" style={{...}}>
                 <TableComponent className="AnalyticalTable-table---" style={[undefined]}>
                   <div className="rt-table AnalyticalTable-table---" role="grid" style={[undefined]}>
@@ -153,11 +153,9 @@
                                       <div style={{...}} onClick={[Function]}>
                                         <div className="rt-th ColumnHeader-header--- ColumnHeader-header----">
                                           <div className="rt-resizable-header-content">
-                                            <Header data={{...}} column={{...}}>
-                                              <span>
-                                                Friend Age
-                                              </span>
-                                            </Header>
+                                            <span>
+                                              Friend Age
+                                            </span>
                                           </div>
                                           <Resizer onMouseDown={[Function: onMouseDown]} onTouchStart={[Function: onTouchStart]}>
                                             <div className="rt-resizer" onMouseDown={[Function: onMouseDown]} onTouchStart={[Function: onTouchStart]} onClick={[Function]} />
@@ -256,38 +254,30 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -300,38 +290,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -344,38 +326,30 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -388,38 +362,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -432,38 +398,30 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -476,38 +434,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -520,38 +470,30 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -564,38 +506,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -607,8 +541,8 @@
                   </div>
                 </TableComponent>
                 <div className="pagination-bottom">
-                  <WithStyles(Pagination) page={0} pageSize={10} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={1} canPrevious={false} canNext={false} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} isTop={false} numItems={2}>
-                    <Pagination page={0} pageSize={10} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={1} canPrevious={false} canNext={false} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} isTop={false} numItems={2} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <WithStyles(Pagination) page={0} pageSize={10} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={1} canPrevious={false} canNext={false} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} numItems={2}>
+                    <Pagination page={0} pageSize={10} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={1} canPrevious={false} canNext={false} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} numItems={2} innerRef={{...}} classes={{...}} theme={{...}}>
                       <div className="Pagination-container---">
                         <div className="Pagination-total---">
                           <Label for="">
@@ -673,7 +607,7 @@
                 </div>
               </Component>
             </WithStyles(Component)>
-            <ReactTable data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className="" showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} PreviousComponent={[undefined]} NextComponent={[undefined]} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} filtered={{...}} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} onPageChange={[undefined]} onPageSizeChange={[undefined]} onSortedChange={[undefined]} onResizedChange={[undefined]} onExpandedChange={[undefined]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={{...}} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} PivotComponent={[undefined]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]}>
+            <ReactTable data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className="" showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} PreviousComponent={[undefined]} NextComponent={[undefined]} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} filtered={{...}} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} onPageChange={[undefined]} onPageSizeChange={[undefined]} onSortedChange={[undefined]} onResizedChange={[undefined]} onExpandedChange={[undefined]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={{...}} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} PivotComponent={[undefined]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]}>
               <div className="ReactTable" style={{...}}>
                 <TableComponent className="AnalyticalTable-table---" style={[undefined]}>
                   <div className="rt-table AnalyticalTable-table---" role="grid" style={[undefined]}>
@@ -806,11 +740,9 @@
                                       <div style={{...}} onClick={[Function]}>
                                         <div className="rt-th ColumnHeader-header--- ColumnHeader-header----">
                                           <div className="rt-resizable-header-content">
-                                            <Header data={{...}} column={{...}}>
-                                              <span>
-                                                Friend Age
-                                              </span>
-                                            </Header>
+                                            <span>
+                                              Friend Age
+                                            </span>
                                           </div>
                                           <Resizer onMouseDown={[Function: onMouseDown]} onTouchStart={[Function: onTouchStart]}>
                                             <div className="rt-resizer" onMouseDown={[Function: onMouseDown]} onTouchStart={[Function: onTouchStart]} onClick={[Function]} />
@@ -881,38 +813,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -925,38 +849,30 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -969,38 +885,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1013,38 +921,30 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1057,38 +957,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1101,38 +993,30 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1145,38 +1029,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1189,38 +1065,30 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1233,38 +1101,30 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <PadRowComponent>
-                                      <span>
-                                         
-                                      </span>
-                                    </PadRowComponent>
+                                    <span>
+                                       
+                                    </span>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1276,8 +1136,8 @@
                   </div>
                 </TableComponent>
                 <div className="pagination-bottom">
-                  <WithStyles(Pagination) page={0} pageSize={1} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={2} canPrevious={false} canNext={true} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} isTop={false} numItems={2}>
-                    <Pagination page={0} pageSize={1} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={2} canPrevious={false} canNext={true} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} isTop={false} numItems={2} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <WithStyles(Pagination) page={0} pageSize={1} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={2} canPrevious={false} canNext={true} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} numItems={2}>
+                    <Pagination page={0} pageSize={1} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={2} canPrevious={false} canNext={true} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} numItems={2} innerRef={{...}} classes={{...}} theme={{...}}>
                       <div className="Pagination-container---">
                         <div className="Pagination-total---">
                           <Label for="">
diff --git a/packages/main/__karma_snapshots__/FilterBar.md b/packages/main/__karma_snapshots__/FilterBar.md
index ba427027516..6816a2dd67e 100644
--- a/packages/main/__karma_snapshots__/FilterBar.md
+++ b/packages/main/__karma_snapshots__/FilterBar.md
@@ -6,110 +6,108 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(FilterBar) renderSearch={[Function: renderSearch]} renderVariants={[Function: renderVariants]} displayOnly={true}>
-        <FilterBar renderSearch={[Function: renderSearch]} renderVariants={[Function: renderVariants]} displayOnly={true} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div className="FilterBar-outerContainer---">
-            <div className="FilterBar-filterBarHeader---">
-              <Variant Management variantItems={{...}} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4" disabled={false}>
-                <Popover open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" openBy={{...}} footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
-                  <div style={{...}} onClick={[Function]}>
-                    <div className="Variant-Management--VariantManagement---">
-                      <Title level="H4" className="Variant-Management--VariantManagementText---">
-                        <ui5-title level="H4" class="Variant-Management--VariantManagementText---">
-                          Variant 1
-                        </ui5-title>
-                      </Title>
-                      <Button design="Transparent" icon="navigation-down-arrow" disabled={false}>
-                        <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
-                      </Button>
-                    </div>
+      <FilterBar renderSearch={[Function: renderSearch]} renderVariants={[Function: renderVariants]}>
+        <div className="FilterBar--outerContainer---">
+          <div className="FilterBar--filterBarHeader---">
+            <Variant Management variantItems={{...}} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4" disabled={false}>
+              <Popover open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" openBy={{...}} footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
+                <div style={{...}} onClick={[Function]}>
+                  <div className="Variant-Management--VariantManagement---">
+                    <Title level="H4" className="Variant-Management--VariantManagementText---">
+                      <ui5-title level="H4" class="Variant-Management--VariantManagementText---">
+                        Variant 1
+                      </ui5-title>
+                    </Title>
+                    <Button design="Transparent" icon="navigation-down-arrow" disabled={false}>
+                      <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
+                    </Button>
                   </div>
-                  <WithWebComponent(Popover) onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
-                    <ui5-popover header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" class="">
-                      <Button className="Variant-Management--footer---" onClick={[Function]} design="Emphasized" slot="footer">
-                        <ui5-button design="Emphasized" slot="footer" class="Variant-Management--footer---">
-                          Cancel
-                        </ui5-button>
-                      </Button>
-                      <WithWebComponent(List) onItemClick={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
-                        <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
-                          <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
-                            <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
-                              Variant 1
-                            </ui5-li>
-                          </StandardListItem>
-                          <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
-                            <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
-                              Variant 2
-                            </ui5-li>
-                          </StandardListItem>
-                        </ui5-list>
-                      </WithWebComponent(List)>
-                    </ui5-popover>
-                  </WithWebComponent(Popover)>
-                </Popover>
-              </Variant Management>
-              <div className="FilterBar-vLine---">
-                 
-                <Input placeholder="Search" type="Text" value="" valueState="None">
-                  <ui5-input placeholder="Search" type="Text" value="" value-state="None" class="" />
-                </Input>
-                 
-              </div>
-              <div className="FilterBar-headerRowRight---">
-                <Button onClick={[Function]} design="Transparent">
-                  <ui5-button design="Transparent" class="">
-                    Hide Filter Bar
-                  </ui5-button>
-                </Button>
-              </div>
+                </div>
+                <WithWebComponent(Popover) onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
+                  <ui5-popover header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" class="">
+                    <Button className="Variant-Management--footer---" onClick={[Function]} design="Emphasized" slot="footer">
+                      <ui5-button design="Emphasized" slot="footer" class="Variant-Management--footer---">
+                        Cancel
+                      </ui5-button>
+                    </Button>
+                    <WithWebComponent(List) onItemClick={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
+                      <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
+                        <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                          <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
+                            Variant 1
+                          </ui5-li>
+                        </StandardListItem>
+                        <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                          <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
+                            Variant 2
+                          </ui5-li>
+                        </StandardListItem>
+                      </ui5-list>
+                    </WithWebComponent(List)>
+                  </ui5-popover>
+                </WithWebComponent(Popover)>
+              </Popover>
+            </Variant Management>
+            <div className="FilterBar--vLine---">
+               
+              <Input placeholder="Search" type="Text" value="" valueState="None">
+                <ui5-input placeholder="Search" type="Text" value="" value-state="None" class="" />
+              </Input>
+               
             </div>
-            <div className="FilterBar-filterArea---">
-              <FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Classification
-                      </ui5-label>
-                    </Label>
-                    <Select onChange={[Function: onSelect]} style={{...}} valueState="None">
-                      <ui5-select style={{...}} value-state="None" class="">
-                        <Option data-key="1" icon={{...}}>
-                          <ui5-option data-key="1" icon={{...}} class="">
-                            Text 1
-                          </ui5-option>
-                        </Option>
-                        <Option data-key="2" icon={{...}}>
-                          <ui5-option data-key="2" icon={{...}} class="">
-                            Text 2
-                          </ui5-option>
-                        </Option>
-                      </ui5-select>
-                    </Select>
-                  </div>
+            <div className="FilterBar--headerRowRight---">
+              <Button onClick={[Function]} design="Transparent">
+                <ui5-button design="Transparent" class="">
+                  Hide Filter Bar
+                </ui5-button>
+              </Button>
+            </div>
+          </div>
+          <div className="FilterBar--filterArea--- FilterBar--filterAreaOpen---">
+            <FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Classification
+                    </ui5-label>
+                  </Label>
+                  <Select onChange={[Function: onSelect]} style={{...}} valueState="None">
+                    <ui5-select style={{...}} value-state="None" class="">
+                      <Option data-key="1" icon={{...}}>
+                        <ui5-option data-key="1" icon={{...}} class="">
+                          Text 1
+                        </ui5-option>
+                      </Option>
+                      <Option data-key="2" icon={{...}}>
+                        <ui5-option data-key="2" icon={{...}} class="">
+                          Text 2
+                        </ui5-option>
+                      </Option>
+                    </ui5-select>
+                  </Select>
                 </div>
-              </FilterItem>
-              <FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Custom Filter 1
-                      </ui5-label>
-                    </Label>
-                    <div>
-                      <Switch onClick={[Function: onClick]} valueParameter="state" style={{...}}>
-                        <ui5-switch on-click={[Function: onClick]} value-parameter="state" style={{...}} class="" />
-                      </Switch>
-                    </div>
+              </div>
+            </FilterItem>
+            <FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Custom Filter 1
+                    </ui5-label>
+                  </Label>
+                  <div>
+                    <Switch onClick={[Function: onClick]} valueParameter="state" style={{...}}>
+                      <ui5-switch on-click={[Function: onClick]} value-parameter="state" style={{...}} class="" />
+                    </Switch>
                   </div>
                 </div>
-              </FilterItem>
-            </div>
+              </div>
+            </FilterItem>
           </div>
-        </FilterBar>
-      </WithStyles(FilterBar)>
+        </div>
+      </FilterBar>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -121,119 +119,117 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(FilterBar) renderVariants={[Function: renderVariants]} displayOnly={true}>
-        <FilterBar renderVariants={[Function: renderVariants]} displayOnly={true} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div className="FilterBar-outerContainer---">
-            <div className="FilterBar-filterBarHeader---">
-              <Variant Management variantItems={{...}} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4" disabled={false}>
-                <Popover open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" openBy={{...}} footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
-                  <div style={{...}} onClick={[Function]}>
-                    <div className="Variant-Management--VariantManagement---">
-                      <Title level="H4" className="Variant-Management--VariantManagementText---">
-                        <ui5-title level="H4" class="Variant-Management--VariantManagementText---">
-                          Variant 1
-                        </ui5-title>
-                      </Title>
-                      <Button design="Transparent" icon="navigation-down-arrow" disabled={false}>
-                        <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
-                      </Button>
-                    </div>
+      <FilterBar renderVariants={[Function: renderVariants]}>
+        <div className="FilterBar--outerContainer---">
+          <div className="FilterBar--filterBarHeader---">
+            <Variant Management variantItems={{...}} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4" disabled={false}>
+              <Popover open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" openBy={{...}} footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
+                <div style={{...}} onClick={[Function]}>
+                  <div className="Variant-Management--VariantManagement---">
+                    <Title level="H4" className="Variant-Management--VariantManagementText---">
+                      <ui5-title level="H4" class="Variant-Management--VariantManagementText---">
+                        Variant 1
+                      </ui5-title>
+                    </Title>
+                    <Button design="Transparent" icon="navigation-down-arrow" disabled={false}>
+                      <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
+                    </Button>
                   </div>
-                  <WithWebComponent(Popover) onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
-                    <ui5-popover header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" class="">
-                      <Button className="Variant-Management--footer---" onClick={[Function]} design="Emphasized" slot="footer">
-                        <ui5-button design="Emphasized" slot="footer" class="Variant-Management--footer---">
-                          Cancel
-                        </ui5-button>
-                      </Button>
-                      <WithWebComponent(List) onItemClick={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
-                        <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
-                          <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
-                            <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
-                              Variant 1
-                            </ui5-li>
-                          </StandardListItem>
-                          <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
-                            <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
-                              Variant 2
-                            </ui5-li>
-                          </StandardListItem>
-                        </ui5-list>
-                      </WithWebComponent(List)>
-                    </ui5-popover>
-                  </WithWebComponent(Popover)>
-                </Popover>
-              </Variant Management>
-              <div className="FilterBar-headerRowRight---">
-                <Button onClick={[Function]} design="Transparent">
-                  <ui5-button design="Transparent" class="">
-                    Hide Filter Bar
-                  </ui5-button>
-                </Button>
-              </div>
+                </div>
+                <WithWebComponent(Popover) onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
+                  <ui5-popover header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" class="">
+                    <Button className="Variant-Management--footer---" onClick={[Function]} design="Emphasized" slot="footer">
+                      <ui5-button design="Emphasized" slot="footer" class="Variant-Management--footer---">
+                        Cancel
+                      </ui5-button>
+                    </Button>
+                    <WithWebComponent(List) onItemClick={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
+                      <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
+                        <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                          <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
+                            Variant 1
+                          </ui5-li>
+                        </StandardListItem>
+                        <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                          <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
+                            Variant 2
+                          </ui5-li>
+                        </StandardListItem>
+                      </ui5-list>
+                    </WithWebComponent(List)>
+                  </ui5-popover>
+                </WithWebComponent(Popover)>
+              </Popover>
+            </Variant Management>
+            <div className="FilterBar--headerRowRight---">
+              <Button onClick={[Function]} design="Transparent">
+                <ui5-button design="Transparent" class="">
+                  Hide Filter Bar
+                </ui5-button>
+              </Button>
             </div>
-            <div className="FilterBar-filterArea---">
-              <FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Classification
-                      </ui5-label>
-                    </Label>
-                    <Select onChange={[Function: onSelect]} style={{...}} valueState="None">
-                      <ui5-select style={{...}} value-state="None" class="">
-                        <Option data-key="1" icon={{...}}>
-                          <ui5-option data-key="1" icon={{...}} class="">
-                            Text 1
-                          </ui5-option>
-                        </Option>
-                        <Option data-key="2" icon={{...}}>
-                          <ui5-option data-key="2" icon={{...}} class="">
-                            Text 2
-                          </ui5-option>
-                        </Option>
-                      </ui5-select>
-                    </Select>
-                  </div>
+          </div>
+          <div className="FilterBar--filterArea--- FilterBar--filterAreaOpen---">
+            <FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Classification
+                    </ui5-label>
+                  </Label>
+                  <Select onChange={[Function: onSelect]} style={{...}} valueState="None">
+                    <ui5-select style={{...}} value-state="None" class="">
+                      <Option data-key="1" icon={{...}}>
+                        <ui5-option data-key="1" icon={{...}} class="">
+                          Text 1
+                        </ui5-option>
+                      </Option>
+                      <Option data-key="2" icon={{...}}>
+                        <ui5-option data-key="2" icon={{...}} class="">
+                          Text 2
+                        </ui5-option>
+                      </Option>
+                    </ui5-select>
+                  </Select>
                 </div>
-              </FilterItem>
-              <FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Custom Filter 1
-                      </ui5-label>
-                    </Label>
-                    <div>
-                      <Switch onClick={[Function: onClick]} valueParameter="state" style={{...}}>
-                        <ui5-switch on-click={[Function: onClick]} value-parameter="state" style={{...}} class="" />
-                      </Switch>
-                    </div>
+              </div>
+            </FilterItem>
+            <FilterItem type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Custom Filter 1
+                    </ui5-label>
+                  </Label>
+                  <div>
+                    <Switch onClick={[Function: onClick]} valueParameter="state" style={{...}}>
+                      <ui5-switch on-click={[Function: onClick]} value-parameter="state" style={{...}} class="" />
+                    </Switch>
                   </div>
                 </div>
-              </FilterItem>
-              <FilterItem loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Custom Filter 1
-                      </ui5-label>
-                    </Label>
-                    <div className="FilterItem--loadingContainer---">
-                      <BusyIndicator active={true} size="Medium" style={{...}}>
-                        <ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
-                      </BusyIndicator>
-                    </div>
+              </div>
+            </FilterItem>
+            <FilterItem loading={true} type="Custom" label="Custom Filter 1" changeEventName="onClick" valueParamName="state" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Custom Filter 1
+                    </ui5-label>
+                  </Label>
+                  <div className="FilterItem--loadingContainer---">
+                    <BusyIndicator active={true} size="Medium" style={{...}}>
+                      <ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
+                    </BusyIndicator>
                   </div>
                 </div>
-              </FilterItem>
-            </div>
+              </div>
+            </FilterItem>
           </div>
-        </FilterBar>
-      </WithStyles(FilterBar)>
+        </div>
+      </FilterBar>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -245,142 +241,140 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(FilterBar) renderVariants={[Function: renderVariants]} displayOnly={true}>
-        <FilterBar renderVariants={[Function: renderVariants]} displayOnly={true} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div className="FilterBar-outerContainer---">
-            <div className="FilterBar-filterBarHeader---">
-              <Variant Management variantItems={{...}} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4" disabled={false}>
-                <Popover open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" openBy={{...}} footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
-                  <div style={{...}} onClick={[Function]}>
-                    <div className="Variant-Management--VariantManagement---">
-                      <Title level="H4" className="Variant-Management--VariantManagementText---">
-                        <ui5-title level="H4" class="Variant-Management--VariantManagementText---">
-                          Variant 1
-                        </ui5-title>
-                      </Title>
-                      <Button design="Transparent" icon="navigation-down-arrow" disabled={false}>
-                        <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
-                      </Button>
-                    </div>
-                  </div>
-                  <WithWebComponent(Popover) onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
-                    <ui5-popover header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" class="">
-                      <Button className="Variant-Management--footer---" onClick={[Function]} design="Emphasized" slot="footer">
-                        <ui5-button design="Emphasized" slot="footer" class="Variant-Management--footer---">
-                          Cancel
-                        </ui5-button>
-                      </Button>
-                      <WithWebComponent(List) onItemClick={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
-                        <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
-                          <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
-                            <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
-                              Variant 1
-                            </ui5-li>
-                          </StandardListItem>
-                          <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
-                            <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
-                              Variant 2
-                            </ui5-li>
-                          </StandardListItem>
-                        </ui5-list>
-                      </WithWebComponent(List)>
-                    </ui5-popover>
-                  </WithWebComponent(Popover)>
-                </Popover>
-              </Variant Management>
-              <div className="FilterBar-headerRowRight---">
-                <Button onClick={[Function]} design="Transparent">
-                  <ui5-button design="Transparent" class="">
-                    Hide Filter Bar
-                  </ui5-button>
-                </Button>
-              </div>
-            </div>
-            <div className="FilterBar-filterArea---">
-              <FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Classification
-                      </ui5-label>
-                    </Label>
-                    <Select onChange={[Function: onSelect]} style={{...}} valueState="None">
-                      <ui5-select style={{...}} value-state="None" class="">
-                        <Option data-key="1" icon={{...}}>
-                          <ui5-option data-key="1" icon={{...}} class="">
-                            Text 1
-                          </ui5-option>
-                        </Option>
-                        <Option data-key="2" icon={{...}}>
-                          <ui5-option data-key="2" icon={{...}} class="">
-                            Text 2
-                          </ui5-option>
-                        </Option>
-                      </ui5-select>
-                    </Select>
-                  </div>
-                </div>
-              </FilterItem>
-              <FilterItem loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Classification
-                      </ui5-label>
-                    </Label>
-                    <div className="FilterItem--loadingContainer---">
-                      <BusyIndicator active={true} size="Medium" style={{...}}>
-                        <ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
-                      </BusyIndicator>
-                    </div>
-                  </div>
-                </div>
-              </FilterItem>
-              <FilterItem label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Classification
-                      </ui5-label>
-                    </Label>
-                    <Input placeholder="" onChange={[Function: onSelect]} style={{...}} type="Text" value="" valueState="None">
-                      <ui5-input placeholder="" style={{...}} type="Text" value="" value-state="None" class="" />
-                    </Input>
+      <FilterBar renderVariants={[Function: renderVariants]}>
+        <div className="FilterBar--outerContainer---">
+          <div className="FilterBar--filterBarHeader---">
+            <Variant Management variantItems={{...}} popupTitle="Variants" initialSelectedKey={{...}} onSelect={[Function: onSelect]} closeOnItemSelect={true} placement="Bottom" level="H4" disabled={false}>
+              <Popover open={false} onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" openBy={{...}} footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
+                <div style={{...}} onClick={[Function]}>
+                  <div className="Variant-Management--VariantManagement---">
+                    <Title level="H4" className="Variant-Management--VariantManagementText---">
+                      <ui5-title level="H4" class="Variant-Management--VariantManagementText---">
+                        Variant 1
+                      </ui5-title>
+                    </Title>
+                    <Button design="Transparent" icon="navigation-down-arrow" disabled={false}>
+                      <ui5-button design="Transparent" icon="navigation-down-arrow" class="" />
+                    </Button>
                   </div>
                 </div>
-              </FilterItem>
-              <FilterItem filterItems={{...}} label="Classification" type="MultiSelect" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
-                <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
-                  <div className="FilterItem--innerFilterItemContainer---">
-                    <Label for="">
-                      <ui5-label for="" class="">
-                        Classification
-                      </ui5-label>
-                    </Label>
-                    <MultiComboBox onSelectionChange={[Function: onMultiCbChange]} value="" placeholder="" valueState="None">
-                      <ui5-multi-combobox value="" placeholder="" value-state="None" class="">
-                        <StandardListItem data-key="1" type="Active" infoState="None">
-                          <ui5-li data-key="1" type="Active" info-state="None" class="">
-                            Text 1
+                <WithWebComponent(Popover) onAfterOpen={[Function]} headerText="Variants" placementType="Bottom" footer={{...}} className={[undefined]} innerStyles={[undefined]} tooltip={[undefined]} initialFocus={{...}} horizontalAlign="Center" verticalAlign="Center">
+                  <ui5-popover header-text="Variants" placement-type="Bottom" tooltip={[undefined]} initial-focus={{...}} horizontal-align="Center" vertical-align="Center" class="">
+                    <Button className="Variant-Management--footer---" onClick={[Function]} design="Emphasized" slot="footer">
+                      <ui5-button design="Emphasized" slot="footer" class="Variant-Management--footer---">
+                        Cancel
+                      </ui5-button>
+                    </Button>
+                    <WithWebComponent(List) onItemClick={[Function]} mode="SingleSelect" headerText="" footerText="" noDataText="" separators="All">
+                      <ui5-list mode="SingleSelect" header-text="" footer-text="" no-data-text="" separators="All" class="">
+                        <StandardListItem style={{...}} data-key="1" type="Active" selected={true} infoState="None">
+                          <ui5-li selected={true} style={{...}} data-key="1" type="Active" info-state="None" class="">
+                            Variant 1
                           </ui5-li>
                         </StandardListItem>
-                        <StandardListItem data-key="2" type="Active" infoState="None">
-                          <ui5-li data-key="2" type="Active" info-state="None" class="">
-                            Text 2
+                        <StandardListItem style={{...}} data-key="2" type="Active" selected={false} infoState="None">
+                          <ui5-li style={{...}} data-key="2" type="Active" info-state="None" class="">
+                            Variant 2
                           </ui5-li>
                         </StandardListItem>
-                      </ui5-multi-combobox>
-                    </MultiComboBox>
+                      </ui5-list>
+                    </WithWebComponent(List)>
+                  </ui5-popover>
+                </WithWebComponent(Popover)>
+              </Popover>
+            </Variant Management>
+            <div className="FilterBar--headerRowRight---">
+              <Button onClick={[Function]} design="Transparent">
+                <ui5-button design="Transparent" class="">
+                  Hide Filter Bar
+                </ui5-button>
+              </Button>
+            </div>
+          </div>
+          <div className="FilterBar--filterArea--- FilterBar--filterAreaOpen---">
+            <FilterItem filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Classification
+                    </ui5-label>
+                  </Label>
+                  <Select onChange={[Function: onSelect]} style={{...}} valueState="None">
+                    <ui5-select style={{...}} value-state="None" class="">
+                      <Option data-key="1" icon={{...}}>
+                        <ui5-option data-key="1" icon={{...}} class="">
+                          Text 1
+                        </ui5-option>
+                      </Option>
+                      <Option data-key="2" icon={{...}}>
+                        <ui5-option data-key="2" icon={{...}} class="">
+                          Text 2
+                        </ui5-option>
+                      </Option>
+                    </ui5-select>
+                  </Select>
+                </div>
+              </div>
+            </FilterItem>
+            <FilterItem loading={true} filterItems={{...}} label="Classification" type="Select" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Classification
+                    </ui5-label>
+                  </Label>
+                  <div className="FilterItem--loadingContainer---">
+                    <BusyIndicator active={true} size="Medium" style={{...}}>
+                      <ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
+                    </BusyIndicator>
                   </div>
                 </div>
-              </FilterItem>
-            </div>
+              </div>
+            </FilterItem>
+            <FilterItem label="Classification" type="Default" placeholder="" renderText={[Function: renderText]} filterItems={{...}} onChange={[Function: onChange]} loading={false}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Classification
+                    </ui5-label>
+                  </Label>
+                  <Input placeholder="" onChange={[Function: onSelect]} style={{...}} type="Text" value="" valueState="None">
+                    <ui5-input placeholder="" style={{...}} type="Text" value="" value-state="None" class="" />
+                  </Input>
+                </div>
+              </div>
+            </FilterItem>
+            <FilterItem filterItems={{...}} label="Classification" type="MultiSelect" placeholder="" renderText={[Function: renderText]} onChange={[Function: onChange]} loading={false}>
+              <div className="FilterItem--filterItem---" style={[undefined]} title={[undefined]}>
+                <div className="FilterItem--innerFilterItemContainer---">
+                  <Label for="">
+                    <ui5-label for="" class="">
+                      Classification
+                    </ui5-label>
+                  </Label>
+                  <MultiComboBox onSelectionChange={[Function: onMultiCbChange]} value="" placeholder="" valueState="None">
+                    <ui5-multi-combobox value="" placeholder="" value-state="None" class="">
+                      <StandardListItem data-key="1" type="Active" infoState="None">
+                        <ui5-li data-key="1" type="Active" info-state="None" class="">
+                          Text 1
+                        </ui5-li>
+                      </StandardListItem>
+                      <StandardListItem data-key="2" type="Active" infoState="None">
+                        <ui5-li data-key="2" type="Active" info-state="None" class="">
+                          Text 2
+                        </ui5-li>
+                      </StandardListItem>
+                    </ui5-multi-combobox>
+                  </MultiComboBox>
+                </div>
+              </div>
+            </FilterItem>
           </div>
-        </FilterBar>
-      </WithStyles(FilterBar)>
+        </div>
+      </FilterBar>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>

From 1e7ba026c1b4e075ab54f77523c43f6bb0893287 Mon Sep 17 00:00:00 2001
From: Viktor Bersch <viktor.bersch@sap.com>
Date: Mon, 5 Aug 2019 14:04:09 +0200
Subject: [PATCH 4/5] WIP: update tests

---
 .../__karma_snapshots__/AnalyticalTable.md    | 572 +++++++++++-------
 1 file changed, 356 insertions(+), 216 deletions(-)

diff --git a/packages/main/__karma_snapshots__/AnalyticalTable.md b/packages/main/__karma_snapshots__/AnalyticalTable.md
index 6e386884e28..197685b5af7 100644
--- a/packages/main/__karma_snapshots__/AnalyticalTable.md
+++ b/packages/main/__karma_snapshots__/AnalyticalTable.md
@@ -20,7 +20,7 @@
                 </div>
               </Component>
             </WithStyles(Component)>
-            <ReactTable data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className="" showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} PreviousComponent={[undefined]} NextComponent={[undefined]} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} filtered={{...}} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} onPageChange={[undefined]} onPageSizeChange={[undefined]} onSortedChange={[undefined]} onResizedChange={[undefined]} onExpandedChange={[undefined]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={{...}} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} PivotComponent={[undefined]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]}>
+            <ReactTable data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className="" showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} PreviousComponent={[undefined]} NextComponent={[undefined]} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} filtered={{...}} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} onPageChange={[undefined]} onPageSizeChange={[undefined]} onSortedChange={[undefined]} onResizedChange={[undefined]} onExpandedChange={[undefined]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={{...}} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} PivotComponent={[undefined]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]}>
               <div className="ReactTable" style={{...}}>
                 <TableComponent className="AnalyticalTable-table---" style={[undefined]}>
                   <div className="rt-table AnalyticalTable-table---" role="grid" style={[undefined]}>
@@ -153,9 +153,11 @@
                                       <div style={{...}} onClick={[Function]}>
                                         <div className="rt-th ColumnHeader-header--- ColumnHeader-header----">
                                           <div className="rt-resizable-header-content">
-                                            <span>
-                                              Friend Age
-                                            </span>
+                                            <Header data={{...}} column={{...}}>
+                                              <span>
+                                                Friend Age
+                                              </span>
+                                            </Header>
                                           </div>
                                           <Resizer onMouseDown={[Function: onMouseDown]} onTouchStart={[Function: onTouchStart]}>
                                             <div className="rt-resizer" onMouseDown={[Function: onMouseDown]} onTouchStart={[Function: onTouchStart]} onClick={[Function]} />
@@ -254,30 +256,38 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -290,30 +300,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -326,30 +344,38 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -362,30 +388,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -398,30 +432,38 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -434,30 +476,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -470,30 +520,38 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -506,30 +564,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -541,8 +607,8 @@
                   </div>
                 </TableComponent>
                 <div className="pagination-bottom">
-                  <WithStyles(Pagination) page={0} pageSize={10} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={1} canPrevious={false} canNext={false} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} numItems={2}>
-                    <Pagination page={0} pageSize={10} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={1} canPrevious={false} canNext={false} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} numItems={2} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <WithStyles(Pagination) page={0} pageSize={10} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={1} canPrevious={false} canNext={false} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} isTop={false} numItems={2}>
+                    <Pagination page={0} pageSize={10} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={10} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={1} canPrevious={false} canNext={false} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} isTop={false} numItems={2} innerRef={{...}} classes={{...}} theme={{...}}>
                       <div className="Pagination-container---">
                         <div className="Pagination-total---">
                           <Label for="">
@@ -607,7 +673,7 @@
                 </div>
               </Component>
             </WithStyles(Component)>
-            <ReactTable data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className="" showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} PreviousComponent={[undefined]} NextComponent={[undefined]} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} filtered={{...}} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} onPageChange={[undefined]} onPageSizeChange={[undefined]} onSortedChange={[undefined]} onResizedChange={[undefined]} onExpandedChange={[undefined]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={{...}} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} PivotComponent={[undefined]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]}>
+            <ReactTable data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className="" showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} PreviousComponent={[undefined]} NextComponent={[undefined]} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} filtered={{...}} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} onPageChange={[undefined]} onPageSizeChange={[undefined]} onSortedChange={[undefined]} onResizedChange={[undefined]} onExpandedChange={[undefined]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={{...}} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} PivotComponent={[undefined]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]}>
               <div className="ReactTable" style={{...}}>
                 <TableComponent className="AnalyticalTable-table---" style={[undefined]}>
                   <div className="rt-table AnalyticalTable-table---" role="grid" style={[undefined]}>
@@ -740,9 +806,11 @@
                                       <div style={{...}} onClick={[Function]}>
                                         <div className="rt-th ColumnHeader-header--- ColumnHeader-header----">
                                           <div className="rt-resizable-header-content">
-                                            <span>
-                                              Friend Age
-                                            </span>
+                                            <Header data={{...}} column={{...}}>
+                                              <span>
+                                                Friend Age
+                                              </span>
+                                            </Header>
                                           </div>
                                           <Resizer onMouseDown={[Function: onMouseDown]} onTouchStart={[Function: onTouchStart]}>
                                             <div className="rt-resizer" onMouseDown={[Function: onMouseDown]} onTouchStart={[Function: onTouchStart]} onClick={[Function]} />
@@ -813,30 +881,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -849,30 +925,38 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -885,30 +969,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -921,30 +1013,38 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -957,30 +1057,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -993,30 +1101,38 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1029,30 +1145,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1065,30 +1189,38 @@
                               <div className="rt-tr -padRow -odd AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1101,30 +1233,38 @@
                               <div className="rt-tr -padRow -even AnalyticalTable-tr---" role="row" style={{...}}>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                                 <TdComponent className="AnalyticalTable-td---" style={{...}}>
                                   <div className="rt-td AnalyticalTable-td---" role="gridcell" style={{...}}>
-                                    <span>
-                                       
-                                    </span>
+                                    <PadRowComponent>
+                                      <span>
+                                         
+                                      </span>
+                                    </PadRowComponent>
                                   </div>
                                 </TdComponent>
                               </div>
@@ -1136,8 +1276,8 @@
                   </div>
                 </TableComponent>
                 <div className="pagination-bottom">
-                  <WithStyles(Pagination) page={0} pageSize={1} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={2} canPrevious={false} canNext={true} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} numItems={2}>
-                    <Pagination page={0} pageSize={1} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={2} canPrevious={false} canNext={true} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} numItems={2} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <WithStyles(Pagination) page={0} pageSize={1} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={2} canPrevious={false} canNext={true} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} isTop={false} numItems={2}>
+                    <Pagination page={0} pageSize={1} sorted={{...}} expanded={{...}} filtered={{...}} resized={{...}} currentlyResizing={false} skipNextSort={false} data={{...}} loading={false} columns={{...}} minRows={10} defaultPageSize={1} className={[undefined]} showPagination={true} getTheadThProps={[Function]} getTheadProps={[Function]} getTableProps={[Function]} getTrProps={[Function]} getTrGroupProps={[Function]} getTdProps={[Function]} getTbodyProps={[Function]} getPaginationProps={[Function]} LoadingComponent={[Function: LoadingComponent]} PaginationComponent={{...}} ThComponent={{...}} ResizerComponent={[Function: Resizer]} multiSort={false} filterable={false} defaultFilterMethod={[Function: DEFAULT_FILTER_METHOD]} onFilteredChange={[Function]} sortable={true} pivotBy={{...}} groupable={false} resolveData={[Function: resolveData]} showPaginationTop={false} showPaginationBottom={true} showPageSizeOptions={true} pageSizeOptions={{...}} defaultPage={0} showPageJump={true} collapseOnSortingChange={true} collapseOnPageChange={true} collapseOnDataChange={true} freezeWhenExpanded={false} resizable={true} defaultSortDesc={false} defaultSorted={{...}} defaultFiltered={{...}} defaultResized={{...}} defaultExpanded={{...}} defaultSortMethod={[Function: defaultSortMethod]} pivotValKey="_pivotVal" pivotIDKey="_pivotID" subRowsKey="_subRows" aggregatedKey="_aggregated" nestingLevelKey="_nestingLevel" originalKey="_original" indexKey="_index" groupedByPivotKey="_groupedByPivot" onFetchData={[Function: onFetchData]} style={[undefined]} getProps={[Function: emptyObj]} getTheadGroupProps={[Function: emptyObj]} getTheadGroupTrProps={[Function: emptyObj]} getTheadGroupThProps={[Function: emptyObj]} getTheadTrProps={[Function: emptyObj]} getTheadFilterProps={[Function: emptyObj]} getTheadFilterTrProps={[Function: emptyObj]} getTheadFilterThProps={[Function: emptyObj]} getTfootProps={[Function: emptyObj]} getTfootTrProps={[Function: emptyObj]} getTfootTdProps={[Function: emptyObj]} getLoadingProps={[Function: emptyObj]} getNoDataProps={[Function: emptyObj]} getResizerProps={[Function: emptyObj]} column={{...}} expanderDefaults={{...}} pivotDefaults={{...}} previousText="Previous" nextText="Next" loadingText="Loading..." noDataText="No rows found" pageText="Page" ofText="of" rowsText="rows" pageJumpText="jump to page" rowsSelectorText="rows per page" TableComponent={[Function: TableComponent]} TheadComponent={[Function: cmp]} TbodyComponent={[Function: cmp]} TrGroupComponent={[Function: TrGroupComponent]} TrComponent={[Function: TrComponent]} TdComponent={[Function: TdComponent]} TfootComponent={[Function: cmp]} FilterComponent={[Function: FilterComponent]} ExpanderComponent={[Function: ExpanderComponent]} PivotValueComponent={[Function: PivotValueComponent]} AggregatedComponent={[Function: AggregatedComponent]} NoDataComponent={[Function: cmp]} PadRowComponent={[Function: PadRowComponent]} resolvedData={{...}} allVisibleColumns={{...}} headerGroups={{...}} allDecoratedColumns={{...}} hasHeaderGroups={false} frozen={false} sortedData={{...}} pages={2} canPrevious={false} canNext={true} onPageChange={[Function: bound onPageChange]} onPageSizeChange={[Function: bound onPageSizeChange]} isTop={false} numItems={2} innerRef={{...}} classes={{...}} theme={{...}}>
                       <div className="Pagination-container---">
                         <div className="Pagination-total---">
                           <Label for="">

From 4a730d0b90fcee59eb2c3edfd90d79178f4319c5 Mon Sep 17 00:00:00 2001
From: Viktor Bersch <viktor.bersch@sap.com>
Date: Mon, 5 Aug 2019 14:16:52 +0200
Subject: [PATCH 5/5] WIP: PR comments

---
 packages/main/src/components/FilterBar/FilterBar.jss.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/components/FilterBar/FilterBar.jss.ts b/packages/main/src/components/FilterBar/FilterBar.jss.ts
index dda5654e32a..f8baf39a8e4 100644
--- a/packages/main/src/components/FilterBar/FilterBar.jss.ts
+++ b/packages/main/src/components/FilterBar/FilterBar.jss.ts
@@ -33,7 +33,8 @@ const styles = ({ theme, contentDensity, parameters }: JSSTheme) => {
     },
     filterAreaClosed: {
       maxHeight: '0',
-      opacity: 0
+      opacity: 0,
+      padding: 0
     },
     filterAreaOpen: {
       maxHeight: '500px',