From 34a65237deee5de337e5717bf79e441ec840ca03 Mon Sep 17 00:00:00 2001 From: MarcusNotheis Date: Fri, 30 Aug 2019 15:51:26 +0200 Subject: [PATCH 01/14] WIP: Refactor table to react-table v7 --- packages/main/package.json | 2 +- .../AnalyticalTable/AnalyticalTable.test.tsx | 44 +- .../AnalyticalTable/AnayticalTable.jss.ts | 60 +- .../LoadingComponent/index.tsx | 30 +- .../AnalyticalTable.test.tsx.snap | 1387 ++--------------- .../columnHeader/ColumnHeaderModal.tsx | 177 +-- .../columnHeader/DefaultFilterComponent.tsx | 12 + .../AnalyticalTable/columnHeader/index.tsx | 171 +- .../AnalyticalTable/demo/demo.stories.tsx | 31 +- .../src/components/AnalyticalTable/index.tsx | 409 +++-- .../AnalyticalTable/pagination/index.tsx | 213 --- .../AnalyticalTable/types/ColumnType.ts | 15 +- yarn.lock | 10 +- 13 files changed, 503 insertions(+), 2058 deletions(-) create mode 100644 packages/main/src/components/AnalyticalTable/columnHeader/DefaultFilterComponent.tsx delete mode 100644 packages/main/src/components/AnalyticalTable/pagination/index.tsx diff --git a/packages/main/package.json b/packages/main/package.json index 6672ceca752..278d46e0a6a 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -22,7 +22,7 @@ "@ui5/webcomponents": "1.0.0-rc.2", "@ui5/webcomponents-react-base": "0.5.1-rc.6", "lodash.debounce": "^4.0.8", - "react-table": "6.10.0", + "react-table": "7.0.0-alpha.32", "react-toastify": "^5.0.1" }, "devDependencies": { diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx index 1d4e9c786c9..7ffb830a373 100644 --- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx +++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.test.tsx @@ -42,9 +42,7 @@ const data = [ describe('AnalyticalTable', () => { test('test Asc desc', () => { - const wrapper = mountThemedComponent( - - ); + const wrapper = mountThemedComponent(); // test asc function inside the popover element let component = wrapper @@ -62,46 +60,6 @@ describe('AnalyticalTable', () => { // @ts-ignore component.onclick({}); - expect(wrapper.render()).toMatchSnapshot(); - }); - test('pagination', () => { - const wrapper = mountThemedComponent( - - ); - - // test the right arrow of the pagination - - let component = wrapper - .find('ui5-link') - .at(3) - .instance(); - // @ts-ignore - component.fireEvent('click'); - - // test the right page number link of the pagination - component = wrapper - .find('ui5-link') - .at(2) - .instance(); - // @ts-ignore - component.fireEvent('click'); - - // test the left page number link of the pagination - component = wrapper - .find('ui5-link') - .at(1) - .instance(); - // @ts-ignore - component.fireEvent('click'); - - // test the left arrow of the pagination - component = wrapper - .find('ui5-link') - .at(0) - .instance(); - // @ts-ignore - component.fireEvent('click'); - expect(wrapper.render()).toMatchSnapshot(); }); }); diff --git a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts index 0934387916a..7cd194585a2 100644 --- a/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts +++ b/packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts @@ -5,41 +5,59 @@ import { ContentDensity } from '../../lib/ContentDensity'; const styles = ({ parameters, contentDensity }: JSSTheme) => ({ tHead: { boxShadow: 'none !important', - height: `${contentDensity === ContentDensity.Compact ? '2rem' : '3rem'}`, - borderBottom: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`, - borderTop: `1px solid ${parameters.sapUiListVerticalBorderColor} !important` + height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}` }, - tr: { - background: parameters.sapUiListBackground, - borderBottom: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`, - '& >:first-child': { - paddingLeft: '1rem !important' - }, - '& >:not(:first-child)': { - paddingLeft: '0.5rem' - } + th: { + backgroundColor: parameters.sapUiListHeaderBackground, + height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}`, + fontFamily: parameters.sapUiFontFamily, + fontSize: parameters.sapMFontMediumSize, + fontWeight: 'normal', + color: parameters.sapUiListHeaderTextColor, + borderBottom: `1px solid ${parameters.sapUiListBorderColor}`, + borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor}`, + textAlign: 'start', + width: '100%', + boxSizing: 'border-box' }, - trGroup: { - border: 'none!important' + + tableHeaderRow: {}, + + tbody: { + position: 'relative', + '& $tr': { + background: parameters.sapUiListBackground, + borderBottom: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`, + '&:hover': { + backgroundColor: parameters.sapUiListHoverBackground + }, + '&:active': { + backgroundColor: parameters.sapUiListActiveBackground, + color: parameters.sapUiListActiveTextColor + } + } }, + + tr: {}, + td: { - // borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor} !important`, - height: `${contentDensity === ContentDensity.Compact ? '2rem' : '3rem'}`, - display: 'flex', - alignItems: 'center', + height: `${contentDensity === ContentDensity.Compact ? '2rem' : '2.75rem'}`, fontFamily: fonts.sapUiFontFamily, fontSize: fonts.sapMFontMediumSize, fontWeight: 'normal', - // backgroundColor: parameters.sapUiListBackground, color: parameters.sapUiListTextColor, - paddingRight: '0.5rem !important' + borderBottom: `1px solid ${parameters.sapUiListBorderColor}`, + borderRight: `1px solid ${parameters.sapUiListVerticalBorderColor}`, + display: 'table-cell', + padding: '0 0.5rem' }, tBody: { boxShadow: 'none !important' }, table: { - // border: `1px solid ${parameters.sapList_BorderColor} !important` + borderSpacing: 0, + position: 'relative' } }); diff --git a/packages/main/src/components/AnalyticalTable/LoadingComponent/index.tsx b/packages/main/src/components/AnalyticalTable/LoadingComponent/index.tsx index c7a12763a3c..d52b60d0607 100644 --- a/packages/main/src/components/AnalyticalTable/LoadingComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/LoadingComponent/index.tsx @@ -1,16 +1,26 @@ -import { BusyIndicatorType } from '../../../lib/BusyIndicatorType'; -import { BusyIndicator } from '../../../lib/BusyIndicator'; import React from 'react'; +import { BusyIndicator } from '../../../lib/BusyIndicator'; +import { BusyIndicatorType } from '../../../lib/BusyIndicatorType'; -const LoadingComponent = (props) => { - if (!props.loading) { - return null; - } - let className = '-loading -active'; +const LoadingComponent = () => { return ( -
- -
+ + + + + ); }; diff --git a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap index a1dff0477cb..688581c90f9 100644 --- a/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap +++ b/packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap @@ -1,764 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`AnalyticalTable pagination 1`] = ` -
-
- - Test - -
-
-
-
-
-
-
-
- Name -
-
-
-
-
- - - - Sort Ascending - - - Sort Descending - - - -
-
-
- Age -
-
-
-
-
- - - - Sort Ascending - - - Sort Descending - - - -
-
-
- Friend Name -
-
-
-
-
- - - - Sort Ascending - - - Sort Descending - - - -
-
-
- - Friend Age - -
-
-
-
-
- - - - Sort Ascending - - - Sort Descending - - - -
-
-
-
-
-
- Fra -
-
- 40 -
-
- MAR -
-
- 28 -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
-
-
- - 2 Items - -
- - < - - - 1 - - - 2 - - - > - -
-
-
-
-`; - exports[`AnalyticalTable test Asc desc 1`] = `
-
-
-
-
+ Name
- Name -
-
-
@@ -811,6 +43,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` horizontal-align="Left" no-arrow="true" placement-type="Bottom" + style="font-weight: normal;" vertical-align="Center" > + +
+ Age
- Age -
-
-
@@ -866,6 +96,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` horizontal-align="Left" no-arrow="true" placement-type="Bottom" + style="font-weight: normal;" vertical-align="Center" > + +
+ Friend Name
- Friend Name -
-
-
@@ -921,6 +149,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` horizontal-align="Left" no-arrow="true" placement-type="Bottom" + style="font-weight: normal;" vertical-align="Center" > + +
+ + Friend Age +
- - Friend Age - -
-
-
@@ -978,6 +204,7 @@ exports[`AnalyticalTable test Asc desc 1`] = ` horizontal-align="Left" no-arrow="true" placement-type="Bottom" + style="font-weight: normal;" vertical-align="Center" > -
-
-
+ + + + -
-
-
- Fra -
-
- 40 -
-
- MAR -
-
- 28 -
-
-
-
-
-
- bla -
-
- 20 -
-
- Nei -
-
- 50 -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
+ -
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
+ -
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
+ -
-
- -   - -
-
- -   - -
-
- -   - -
-
- -   - -
-
-
-
-
-
-
+ + -
- - 2 Items - -
- + - < - - + - 1 - - + - > - -
-
-
+ 50 + + + +
`; diff --git a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx index 598daed43f4..91188e5ee18 100644 --- a/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/columnHeader/ColumnHeaderModal.tsx @@ -1,129 +1,96 @@ -import { Event, withStyles } from '@ui5/webcomponents-react-base'; -import React, { Component, FC, ReactNode, RefObject, CSSProperties } from 'react'; -import { ClassProps } from '../../../interfaces/ClassProps'; -import { JSSTheme } from '../../../interfaces/JSSTheme'; +import React, { CSSProperties, FC, ReactNode, RefObject, useCallback, useRef } from 'react'; +import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef'; import { CustomListItem } from '../../../lib/CustomListItem'; -import { Input } from '../../../lib/Input'; +import { FlexBox } from '../../../lib/FlexBox'; +import { FlexBoxAlignItems } from '../../../lib/FlexBoxAlignItems'; +import { Icon } from '../../../lib/Icon'; import { List } from '../../../lib/List'; import { ListItemTypes } from '../../../lib/ListItemTypes'; import { PlacementType } from '../../../lib/PlacementType'; import { Popover } from '../../../lib/Popover'; import { PopoverHorizontalAlign } from '../../../lib/PopoverHorizontalAlign'; import { StandardListItem } from '../../../lib/StandardListItem'; -import { Icon } from '../../../lib/Icon'; -import { FlexBox } from '../../../lib/FlexBox'; -import { FlexBoxAlignItems } from '../../../lib/FlexBoxAlignItems'; import { ColumnType } from '../types/ColumnType'; -import { Ui5PopoverDomRef } from '../../../interfaces/Ui5PopoverDomRef'; - -const styles = ({ parameters }: JSSTheme) => ({ - modalRoot: { - border: 'none', - borderRadius: '0.25rem', - boxShadow: parameters.sapUiShadowLevel1, - '&:focus': { - outline: 'none' - } - } -}); export interface ColumnHeaderModalProperties { openBy: ReactNode; showSort?: boolean; showFilter?: boolean; showGroup?: boolean; - grouping?: string; - sortAscending: (event: Event) => void; - sortDescending: (event: Event) => void; - FilterComponent: FC<{ filter: any; onChange: () => void; column: ColumnType }>; - filter: any; column: ColumnType; - onFilterChange: (e?: any) => void; - onGroupBy: (e?: any) => void; style: CSSProperties; } -interface ColumnHeaderModalInternalProperties extends ColumnHeaderModalProperties, ClassProps {} +export const ColumnHeaderModal: FC = (props) => { + const { showGroup, showSort, showFilter, column, style, openBy } = props; -const DEFAULT_FILTER_COMPONENT = ({ filter, onChange }) => { - const handleChange = (e) => { - onChange(Event.of(null, e.getOriginalEvent(), e.getParameters())); - }; - return {(filter && filter.value) || ''}; -}; + const { Filter } = column; -@withStyles(styles) -export class ColumnHeaderModal extends Component { - static defaultProps = { - showSort: true, - showFilter: false, - showGroup: false, - grouping: '', - filter: null, - FilterComponent: DEFAULT_FILTER_COMPONENT, - onFilterChange: () => {}, - onGroupBy: () => {} - }; + const popoverRef: RefObject = useRef(); - private popoverRef: RefObject = React.createRef(); + const handleSort = useCallback( + (e) => { + const sortType = e.getParameter('item').getAttribute('data-sort'); - private handleSort = (e) => { - const sortType = e.getParameter('item').getAttribute('data-sort'); - switch (sortType) { - case 'asc': - this.props.sortAscending(Event.of(this, e.getOriginalEvent())); - break; - case 'desc': - this.props.sortDescending(Event.of(this, e.getOriginalEvent())); - break; - case 'group': - this.props.onGroupBy(); - break; - default: - this.props.sortDescending(Event.of(this, e.getOriginalEvent())); - } - this.popoverRef.current && this.popoverRef.current.close(); - }; + switch (sortType) { + case 'asc': + column.toggleSortBy(false); + break; + case 'desc': + column.toggleSortBy(true); + break; + case 'group': + column.toggleGroupBy(!column.isGrouped); + break; + } + if (popoverRef.current) { + popoverRef.current.close(); + } + }, + [column, popoverRef] + ); - render() { - const { showGroup, grouping, showSort, showFilter, FilterComponent, onFilterChange, column, filter, style } = this - .props as ColumnHeaderModalInternalProperties; + return ( + + + {showSort && ( + + Sort Ascending + + )} + {showSort && ( + + Sort Descending + + )} + {showFilter && !column.isGrouped && ( + + + + + + + )} + {showGroup && ( + + {column.isGrouped ? 'Ungroup' : 'Group'} + + )} + + + ); +}; - return ( - - - {showSort && ( - - Sort Ascending - - )} - {showSort && ( - - Sort Descending - - )} - {showFilter && !grouping && ( - - - - - - - )} - {showGroup && ( - - {grouping !== column.id ? 'Group' : 'Ungroup'} - - )} - - - ); - } -} +ColumnHeaderModal.defaultProps = { + showSort: true, + showFilter: false, + showGroup: false +}; diff --git a/packages/main/src/components/AnalyticalTable/columnHeader/DefaultFilterComponent.tsx b/packages/main/src/components/AnalyticalTable/columnHeader/DefaultFilterComponent.tsx new file mode 100644 index 00000000000..59959b05094 --- /dev/null +++ b/packages/main/src/components/AnalyticalTable/columnHeader/DefaultFilterComponent.tsx @@ -0,0 +1,12 @@ +import { Input } from '@ui5/webcomponents-react/lib/Input'; +import React, { useCallback } from 'react'; + +export const DefaultFilterComponent = ({ column }) => { + const handleChange = useCallback( + (e) => { + column.setFilter(e.getParameter('value')); + }, + [column.setFilter] + ); + return {column.filterValue}; +}; diff --git a/packages/main/src/components/AnalyticalTable/columnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/columnHeader/index.tsx index 3283192af3f..1817afdb083 100644 --- a/packages/main/src/components/AnalyticalTable/columnHeader/index.tsx +++ b/packages/main/src/components/AnalyticalTable/columnHeader/index.tsx @@ -1,43 +1,29 @@ -import { Event, fonts, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base'; -import React, { Component, ReactNode, ReactNodeArray, CSSProperties } from 'react'; -import { ClassProps } from '../../../interfaces/ClassProps'; +import { Event, fonts, StyleClassHelper } from '@ui5/webcomponents-react-base'; +import React, { CSSProperties, FC, ReactNode, ReactNodeArray, useMemo } from 'react'; +import { createUseStyles } from 'react-jss'; import { JSSTheme } from '../../../interfaces/JSSTheme'; import { Icon } from '../../../lib/Icon'; import { ColumnType } from '../types/ColumnType'; import { ColumnHeaderModal } from './ColumnHeaderModal'; export interface ColumnHeaderProps { - firstColumn: boolean; defaultSortDesc: boolean; onFilteredChange: (event: Event) => void; onGroupBy: (strArr: String[]) => void; children: ReactNode | ReactNodeArray; grouping: string; -} - -interface ColumnHeaderPropsInternal extends ColumnHeaderProps, ClassProps { - style?: CSSProperties; - toggleSort: () => any; - sorted: any[]; + className: string; column: ColumnType; - filtered: any[]; + style: CSSProperties; + groupable: boolean; sortable: boolean; filterable: boolean; - groupable: boolean; } -interface ColumnHeaderState { - modalOpen: boolean; -} - -const calcPaddingLeft = (props) => { - return props.firstColumn ? '1rem' : '0.5rem'; -}; - const styles = ({ parameters }: JSSTheme) => ({ header: { borderRight: `1px solid ${parameters.sapUiListBorderColor} !important`, - padding: (props) => `0 ${calcPaddingLeft(props)} 0 0.5rem !important`, + padding: `0 0.5rem`, height: '100%', display: 'flex', justifyContent: 'begin', @@ -61,81 +47,24 @@ const styles = ({ parameters }: JSSTheme) => ({ } }); -@withStyles(styles) -export class ColumnHeader extends Component { - getCurrentSort() { - const { sorted, column } = this.props as ColumnHeaderPropsInternal; - const sort = sorted.find((c) => c.id === column.id); - return sort ? sort.desc : null; - } - - doSorting = (condition) => { - const { toggleSort } = this.props as ColumnHeaderPropsInternal; - if (condition) { - toggleSort(); - } else { - toggleSort(); - setTimeout(toggleSort, 0); - } - }; - - sortAscending = () => { - const { defaultSortDesc } = this.props; - const desc = this.getCurrentSort(); - if (desc !== null) { - if (!desc) { - return; - } - this.doSorting(desc); - } else { - this.doSorting(!defaultSortDesc); - } - }; - - sortDescending = () => { - const { defaultSortDesc } = this.props; - const desc = this.getCurrentSort(); - if (desc !== null) { - if (desc) { - return; - } - this.doSorting(!desc); - } else { - this.doSorting(defaultSortDesc); - } - }; +const useStyles = createUseStyles>(styles); - private onFilterChange = (e) => { - const { column, filtered } = this.props as ColumnHeaderPropsInternal; - const columnId = column.id; - const currentFilters = filtered.filter((item) => item.id !== columnId); - if (e) { - currentFilters.push({ - id: columnId, - value: e.getParameter('value') - }); - } - this.props.onFilteredChange(Event.of(this, e.getOriginalEvent(), { currentFilters, column })); - }; +export const ColumnHeader: FC = (props) => { + const classes = useStyles(props); - private get openBy() { - const { classes, children, sorted, column, filtered, grouping } = this.props as ColumnHeaderPropsInternal; + const { children, column, className, style, groupable, sortable, filterable } = props; + const openBy = useMemo(() => { if (!column) return null; - const sort = sorted.find((c) => c.id === column.id); - const filter = filtered.find((c) => c.id === column.id); - const desc = sort ? sort.desc : null; - - const classNames = StyleClassHelper.of('rt-th', classes.header); + const isFiltered = column.filterValue && column.filterValue.length > 0; + const desc = column.isSortedDesc; - if (!column.show) { - classNames.put('-hidden'); - } + const classNames = StyleClassHelper.of(classes.header, className); - const sortingIcon = sort ? : null; - const filterIcon = filter && filter.value ? : null; - const groupingIcon = column.id === grouping ? : null; + const sortingIcon = column.isSorted ? : null; + const filterIcon = isFiltered ? : null; + const groupingIcon = column.isGrouped ? : null; return (
@@ -147,42 +76,28 @@ export class ColumnHeader extends Component
); - } - - private onGroupBy = () => { - const { column } = this.props as ColumnHeaderPropsInternal; - this.props.grouping !== column.id ? this.props.onGroupBy([column.id]) : this.props.onGroupBy([]); - }; - - render() { - const { column, filtered, filterable, groupable, sortable, style } = this.props as ColumnHeaderPropsInternal; - - if (!column) return null; - - const filter = filtered.find((c) => c.id === column.id); - - return ( - <> - {filterable || sortable || groupable ? ( - - ) : ( - this.openBy - )} - - ); - } -} + }, [classes, column.filterValue, column.isSorted, column.isGrouped, column.isSortedDesc, children, className]); + + style.width = '100%'; + style.fontWeight = 'normal'; + style.cursor = 'pointer'; + + if (!column) return null; + + return ( + + {groupable || sortable || filterable ? ( + + ) : ( + openBy + )} + + ); +}; diff --git a/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx b/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx index a459466f511..c4d2749b912 100644 --- a/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx +++ b/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx @@ -1,8 +1,9 @@ import { boolean, number } from '@storybook/addon-knobs'; -import { storiesOf } from '@storybook/react'; import React from 'react'; import { AnalyticalTable } from '../../../lib/AnalyticalTable'; +import { TextAlign } from '../../../lib/TextAlign'; import { Title } from '../../../lib/Title'; +import { Button } from '../../../webComponents/Button'; import generateData from './generateData'; const columns = [ @@ -12,7 +13,8 @@ const columns = [ }, { Header: 'Age', - accessor: 'age' + accessor: 'age', + hAlign: TextAlign.End }, { Header: 'Friend Name', @@ -21,7 +23,8 @@ const columns = [ { Header: () => Friend Age, // Custom header components! accessor: 'friend.age', - filterMethod: (filter, row) => { + filter: (filter, row) => { + debugger; if (filter.value === 'all') { return true; } @@ -30,12 +33,12 @@ const columns = [ } return row[filter.id] < 21; }, - Filter: ({ filter, onChange }) => { + Filter: ({ column }) => { return (