Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(AnalyticalTable): horizontal scrolling #199

Merged
merged 5 commits into from
Oct 21, 2019
Merged

feat(AnalyticalTable): horizontal scrolling #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
365ce6b
feat(AnalyticalTable): Added support for horizontal scrolling
Lukas742 Oct 21, 2019
a99aa44
Merge branch 'master' into feature/AnalyticalTableHeader
Lukas742 Oct 21, 2019
aa5ffdc
feat(AnalyticalTable): horizontal scrolling is now also supported aft…
Lukas742 Oct 21, 2019
9f45519
Merge branch 'master' into feature/AnalyticalTableHeader
MarcusNotheis Oct 21, 2019
a2ab7c2
feat(AnalyticalTable): requested changes
Lukas742 Oct 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const styles = ({ parameters }: JSSTheme) => ({
tbody: {
position: 'relative',
zIndex: 0,
overflowX: 'auto',
backgroundColor: parameters.sapUiListBackground,
'&$selectable $tr:hover': {
backgroundColor: parameters.sapUiListHoverBackground
Expand Down
28 changes: 14 additions & 14 deletions packages/main/src/components/AnalyticalTable/__snapshots__/AnalyticalTable.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
>
<header
class="AnalyticalTable--tableHeaderRow-"
style="grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--th-"
Expand Down Expand Up @@ -343,15 +343,15 @@ exports[`AnalyticalTable Tree Table 1`] = `
</div>
</header>
<div
style="position: relative; height: 220px; overflow: auto; will-change: transform; direction: ltr;"
style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
>
<div
class="AnalyticalTable--tbody- AnalyticalTable--selectable-"
style="height: 220px; width: 100%;"
>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand All @@ -372,7 +372,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
</div>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand Down Expand Up @@ -417,7 +417,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
</div>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand All @@ -434,7 +434,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
</div>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand All @@ -451,7 +451,7 @@ exports[`AnalyticalTable Tree Table 1`] = `
</div>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand Down Expand Up @@ -493,7 +493,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
>
<header
class="AnalyticalTable--tableHeaderRow-"
style="grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--th-"
Expand Down Expand Up @@ -732,15 +732,15 @@ exports[`AnalyticalTable test Asc desc 1`] = `
</div>
</header>
<div
style="position: relative; height: 220px; overflow: auto; will-change: transform; direction: ltr;"
style="position: relative; height: 220px; width: 240px; overflow: auto; will-change: transform; direction: ltr;"
>
<div
class="AnalyticalTable--tbody-"
style="height: 220px; width: 100%;"
>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 0px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand Down Expand Up @@ -785,7 +785,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
</div>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 44px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand Down Expand Up @@ -830,7 +830,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
</div>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 88px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand All @@ -847,7 +847,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
</div>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 132px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand All @@ -864,7 +864,7 @@ exports[`AnalyticalTable test Asc desc 1`] = `
</div>
<div
class="AnalyticalTable--tr-"
style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 1fr);"
style="position: absolute; left: 0px; top: 176px; height: 44px; width: 100%; grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);"
>
<div
class="AnalyticalTable--tableCell-"
Expand Down
39 changes: 34 additions & 5 deletions packages/main/src/components/AnalyticalTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import React, {
Ref,
useCallback,
useEffect,
useMemo
useMemo,
useRef,
useState
} from 'react';
import { createUseStyles, useTheme } from 'react-jss';
import { useExpanded, useFilters, useGroupBy, useSortBy, useTable } from 'react-table';
Expand All @@ -29,12 +31,13 @@ import { useTableCellStyling } from './hooks/useTableCellStyling';
import { useTableHeaderGroupStyling } from './hooks/useTableHeaderGroupStyling';
import { useTableHeaderStyling } from './hooks/useTableHeaderStyling';
import { useTableRowStyling } from './hooks/useTableRowStyling';
import { useTableScrollHandles } from './hooks/useTableScrollHandles';
import { useTableStyling } from './hooks/useTableStyling';
import { makeTemplateColumns } from './hooks/utils';
import { LoadingComponent } from './LoadingComponent';
import { TitleBar } from './TitleBar';
import { VirtualTableBody } from './virtualization/VirtualTableBody';
import { useTableScrollHandles } from './hooks/useTableScrollHandles';
import { Device } from '@ui5/webcomponents-react-base/lib/Device';

export interface ColumnConfiguration {
accessor?: string;
Expand Down Expand Up @@ -107,10 +110,12 @@ const defaultFilterMethod = (filter, row) => {
return new RegExp(filter.value, 'gi').test(String(row[filter.id]));
};

const DEFAULT_COLUMN_WIDTH = 60;

const defaultColumn: any = {
Filter: DefaultFilterComponent,
canResize: true,
minWidth: 30,
minWidth: DEFAULT_COLUMN_WIDTH,
width: '1fr',
vAlign: VerticalAlign.Middle,
Aggregated: () => null,
Expand Down Expand Up @@ -143,6 +148,7 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
} = props;
const theme = useTheme() as JSSTheme;
const classes = useStyles({ ...props, ...theme });
const [tableWidth, setTableWidth] = useState(null);

const [selectedRowPath, onRowClicked] = useRowSelection(onRowSelected, selectedRowKey);
const [resizedColumns, onColumnSizeChanged] = useResizeColumns();
Expand Down Expand Up @@ -204,7 +210,6 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
const onGroupByChanged = useCallback(
(e) => {
const { column, isGrouped } = e.getParameters();

let groupedColumns = [];
if (isGrouped) {
groupedColumns = [...tableState.groupBy, column.id];
Expand All @@ -227,11 +232,31 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
[tableState.groupBy, onGroup]
);

const headerRef = useRef(null);
const onWindowResize = useCallback(() => {
if (headerRef.current) {
setTableWidth(headerRef.current.scrollWidth);
}
}, [setTableWidth, headerRef.current]);

useEffect(() => {
Device.resize.attachHandler(onWindowResize, null);
return () => {
Device.resize.detachHandler(onWindowResize, null);
};
}, [onWindowResize]);

useEffect(() => {
if (headerRef.current) {
setTableWidth(headerRef.current.scrollWidth);
}
}, [headerRef, setTableWidth, resizedColumns]);

return (
<div className={className} style={style} title={tooltip} ref={analyticalTableRef}>
{title && <TitleBar>{title}</TitleBar>}
{typeof renderExtension === 'function' && <div>{renderExtension()}</div>}
<div className={tableContainerClasses.valueOf()}>
<div className={tableContainerClasses.valueOf()} ref={headerRef}>
<div {...getTableProps()}>
{headerGroups.map((headerGroup) => {
let headerProps = {};
Expand All @@ -258,6 +283,10 @@ const AnalyticalTable: FC<TableProps> = forwardRef((props: TableProps, ref: Ref<
})}
<VirtualTableBody
{...props}
isTreeTable={isTreeTable}
defaultColumnWidth={DEFAULT_COLUMN_WIDTH}
resizedColumns={resizedColumns}
tableWidth={tableWidth}
tableBodyClasses={tableBodyClasses}
rowContainerStyling={rowContainerStyling}
prepareRow={prepareRow}
Expand Down
16 changes: 16 additions & 0 deletions packages/main/src/components/AnalyticalTable/virtualization/VirtualTableBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ export const VirtualTableBody = (props) => {
selectedRow,
selectable,
reactWindowRef,
tableWidth,
defaultColumnWidth,
resizedColumns,
isTreeTable
} = props;

Expand Down Expand Up @@ -99,10 +102,23 @@ export const VirtualTableBody = (props) => {
};
}, [rows, visibleRows, minRows, props.rowHeight]);

const columnsWidth = useMemo(() => {
const aggregatedWidth = columns
.map((item) => {
if (resizedColumns.hasOwnProperty(item.accessor)) {
return resizedColumns[item.accessor];
}
return item.minWidth ? item.minWidth : defaultColumnWidth;
})
.reduce((el, acc) => el + acc);
return tableWidth > aggregatedWidth ? null : aggregatedWidth;
}, [columns, tableWidth, resizedColumns]);

return (
<FixedSizeList
ref={reactWindowRef}
height={listHeight}
width={columnsWidth}
itemCount={itemCount}
itemSize={rowHeight}
innerRef={innerDivRef}
Expand Down