= () => null;
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
index 36624fa5af4..effbc60e9f4 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
@@ -20,24 +20,24 @@ export const Expandable = (props) => {
const getPadding = (level) => {
switch (level) {
- case 1:
+ case 0:
return 0;
- case 2:
+ case 1:
return isCompact ? '1.5rem' : '1rem';
- case 3:
+ case 2:
return isCompact ? '2.25rem' : '1.5rem';
- case 4:
+ case 3:
return isCompact ? '2.75rem' : '2rem';
default:
- return `${(isCompact ? 2.75 : 2) + (level - 4) * 0.5}rem`;
+ return `${(isCompact ? 2.75 : 2) + (level - 3) * 0.5}rem`;
}
};
- let paddingLeft = null;
+ let paddingLeft = undefined;
if (row.canExpand) {
- paddingLeft = columnIndex === 0 ? getPadding(row.path.length) : 0;
+ paddingLeft = columnIndex === 0 ? getPadding(row.depth) : 0;
} else {
- paddingLeft = columnIndex === 0 ? `calc(${getPadding(row.path.length)} + 2rem)` : 0;
+ paddingLeft = columnIndex === 0 ? `calc(${getPadding(row.depth)} + 2rem)` : 0;
}
const style: CSSProperties = {
paddingLeft
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx
index 4cbc1160fe7..093716844d1 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/index.tsx
@@ -1,5 +1,6 @@
import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
import { DefaultFilterComponent } from '../FilterComponent';
+import { Aggregated } from './Aggregated';
import { Cell } from './Cell';
import { Expandable } from './Expandable';
import { Grouped } from './Grouped';
@@ -16,7 +17,7 @@ export const DefaultColumn = {
canResize: true,
minWidth: DEFAULT_COLUMN_WIDTH,
vAlign: VerticalAlign.Middle,
- Aggregated: () => null,
+ Aggregated: Aggregated,
defaultFilter: defaultFilterMethod,
Grouped: Grouped,
Cell: Cell,
diff --git a/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx b/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx
index f6721ae0b45..bd9d7e67454 100644
--- a/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx
+++ b/packages/main/src/components/AnalyticalTable/demo/demo.stories.tsx
@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
-import { array, boolean, number, text } from '@storybook/addon-knobs';
+import { array, boolean, number, text, object } from '@storybook/addon-knobs';
import { AnalyticalTable } from '@ui5/webcomponents-react/lib/AnalyticalTable';
import { Button } from '@ui5/webcomponents-react/lib/Button';
import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
@@ -78,7 +78,7 @@ export const defaultTable = () => {
onRowExpandChange={action('onRowExpandChange')}
groupBy={array('groupBy', [])}
rowHeight={number('rowHeight', 60)}
- selectedRowKey={text('selectedRowKey', `row_5`)}
+ selectedRowIds={object('selectedRowIds', { 3: true })}
onColumnsReordered={action('onColumnsReordered')}
/>
@@ -106,7 +106,7 @@ export const treeTable = () => {
onSort={action('onSort')}
onRowExpandChange={action('onRowExpandChange')}
subRowsKey={text('subRowsKey', 'subRows')}
- selectedRowKey={text('selectedRowKey', `row_5`)}
+ selectedRowIds={object('selectedRowIds', { 3: true })}
isTreeTable={boolean('isTreeTable', true)}
/>
);
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts
deleted file mode 100644
index 0260fb830ab..00000000000
--- a/packages/main/src/components/AnalyticalTable/hooks/useCellStyling.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { TextAlign } from '@ui5/webcomponents-react/lib/TextAlign';
-import { VerticalAlign } from '@ui5/webcomponents-react/lib/VerticalAlign';
-import { CSSProperties } from 'react';
-
-export const useCellStyling = ({ rowHeight }, classes) => ({ column }) => {
- const style: CSSProperties = {};
-
- if (rowHeight) {
- style.height = `${rowHeight}px`;
- }
- switch (column.hAlign) {
- case TextAlign.Begin:
- style.textAlign = 'start';
- break;
- case TextAlign.Center:
- style.textAlign = 'center';
- break;
- case TextAlign.End:
- style.textAlign = 'end';
- break;
- case TextAlign.Left:
- style.textAlign = 'left';
- break;
- case TextAlign.Right:
- style.textAlign = 'right';
- break;
- }
- switch (column.vAlign) {
- case VerticalAlign.Bottom:
- style.verticalAlign = 'bottom';
- break;
- case VerticalAlign.Middle:
- style.verticalAlign = 'middle';
- break;
- case VerticalAlign.Top:
- style.verticalAlign = 'top';
- break;
- }
-
- let className = classes.tableCell;
- if (column.className) {
- className += ` ${column.className}`;
- }
- return {
- className,
- style
- };
-};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useRowSelection.ts b/packages/main/src/components/AnalyticalTable/hooks/useRowSelection.ts
deleted file mode 100644
index 004f118ef0e..00000000000
--- a/packages/main/src/components/AnalyticalTable/hooks/useRowSelection.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-import { useCallback, useRef, useState } from 'react';
-
-const comparePaths = (path1, path2) => {
- return path1.length === path2.length && path1.every((item, i) => item === path2[i]);
-};
-
-export const useRowSelection = (onRowSelected, selectedRowKeyProp) => {
- const [selectedRowPath, setSelectedRowPath] = useState([]);
- const prevSelectedRowKeyProp = useRef(selectedRowKeyProp);
- const onRowClicked = useCallback(
- (row) => (e) => {
- if (row.isAggregated) return;
- const newKey = row.path;
- const pathsEqual = comparePaths(row.path, selectedRowPath);
-
- let newSelectedRow;
-
- let selectedIndexProp = null;
- if (typeof selectedRowKeyProp === 'string') {
- const [_, ...path] = selectedRowKeyProp.split('_');
- selectedIndexProp = path;
- }
-
- if (prevSelectedRowKeyProp.current !== selectedRowKeyProp && comparePaths(selectedIndexProp, newKey)) {
- newSelectedRow = [];
- prevSelectedRowKeyProp.current = selectedRowKeyProp;
- } else {
- newSelectedRow = pathsEqual ? [] : newKey;
- }
-
- setSelectedRowPath(newSelectedRow);
- if (typeof onRowSelected === 'function') {
- onRowSelected(Event.of(null, e, { row, isSelected: newSelectedRow.length > 0 }));
- }
- },
- [selectedRowPath, setSelectedRowPath, selectedRowKeyProp, prevSelectedRowKeyProp.current]
- );
- return [selectedRowPath, onRowClicked];
-};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
index 047761254a7..3378a46bbfd 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableCellStyling.ts
@@ -5,12 +5,13 @@ import { PluginHook } from 'react-table';
export const useTableCellStyling = (classes, rowHeight) => {
const hook: PluginHook<{}> = (instance) => {
- instance.getCellProps.push(({ column }) => {
+ instance.getCellProps.push((cellProps, instance, { column }) => {
const style: CSSProperties = {};
if (rowHeight) {
style.height = `${rowHeight}px`;
}
+
switch (column.hAlign) {
case TextAlign.Begin:
style.textAlign = 'start';
@@ -44,9 +45,14 @@ export const useTableCellStyling = (classes, rowHeight) => {
if (column.className) {
className += ` ${column.className}`;
}
+
return {
+ ...cellProps,
className,
- style
+ style: {
+ ...cellProps.style,
+ style
+ }
};
});
};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts
index 7916c4069f0..6632245fcd3 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderGroupStyling.ts
@@ -1,10 +1,10 @@
import { PluginHook } from 'react-table';
-import { makeTemplateColumns } from './utils';
export const useTableHeaderGroupStyling = (classes) => {
const hook: PluginHook<{}> = (instance) => {
- instance.getHeaderGroupProps.push(() => {
+ instance.getHeaderGroupProps.push((headerGroupProps) => {
return {
+ ...headerGroupProps,
className: classes.tableHeaderRow
};
});
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
index ed3620f20c1..ffada872ca8 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableHeaderStyling.ts
@@ -2,10 +2,15 @@ import { PluginHook } from 'react-table';
export const useTableHeaderStyling = (classes) => {
const hook: PluginHook<{}> = (instance) => {
- instance.getHeaderProps.push((column) => {
+ instance.getHeaderProps.push((columnProps, instance, column) => {
return {
+ ...columnProps,
className: classes.th,
- column
+ column,
+ style: {
+ ...columnProps.style,
+ position: 'absolute' // TODO should be removed at some point in time
+ }
};
});
return instance;
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
index a979e5adf25..6c73c97c35c 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableRowStyling.ts
@@ -1,74 +1,45 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { PluginHook } from 'react-table';
+import { Event } from '@ui5/webcomponents-react-base/lib/Event';
-export const useTableRowStyling = (
- classes,
- selectable,
- selectedRow,
- selectedRowKey,
- onRowClicked,
- alternateRowColor
-) => {
- const prevSelectedRow = useRef(null);
- const prevSelectedRowKey = useRef(null);
-
- const applySelectedRow = useMemo(() => {
- if (selectedRowKey !== prevSelectedRowKey.current) {
- return false;
- }
- if (selectedRow !== prevSelectedRow.current) {
- return true;
- }
- return false;
- }, [selectedRow, selectedRowKey]);
-
- useEffect(() => {
- prevSelectedRow.current = selectedRow;
- }, [selectedRow]);
-
- useEffect(() => {
- prevSelectedRowKey.current = selectedRowKey;
- }, [selectedRowKey]);
-
- const hook: PluginHook<{}> = (instance) => {
- instance.getRowProps.push((row) => {
- const rowKey = row.path.reduce((acc, val) => `${acc}_${val}`, 'row');
- let selected = false;
-
- if (!row.isAggregated && selectable) {
- if (applySelectedRow) {
- if (selectedRow.length && selectedRow.length > 0) {
- selected = row.path.length === selectedRow.length && row.path.every((item, i) => item === selectedRow[i]);
- }
- } else if (selectedRowKey && rowKey === selectedRowKey) {
- selected = true;
- }
- }
+const ROW_SELECTION_ATTRIBUTE = 'data-is-selected';
+export const useTableRowStyling = (classes, selectable, onRowSelected) => {
+ const hook = (instance) => {
+ instance.getRowProps.push((passedRowProps, instance, row) => {
let className = classes.tr;
- if (row.isAggregated) {
+ if (row.isGrouped) {
className += ` ${classes.tableGroupHeader}`;
}
- if (selected) {
- className += ` ${classes.selectedRow}`;
- }
- if (alternateRowColor) {
- if (row.index % 2 === 1) {
- className += ` ${classes.alternateRowColor}`;
- }
- }
+ const rowProps: any = {
+ ...passedRowProps,
+ className,
+ role: 'row'
+ };
if (selectable) {
- return {
- className,
- onClick: onRowClicked(row)
+ rowProps.onClick = (e) => {
+ if (row.isGrouped) {
+ return;
+ }
+
+ row.toggleRowSelected();
+ if (typeof onRowSelected === 'function') {
+ onRowSelected(Event.of(null, e, { row, isSelected: !row.isSelected }));
+ }
+ const clickedRow = e.currentTarget as HTMLDivElement;
+ if (clickedRow.hasAttribute(ROW_SELECTION_ATTRIBUTE)) {
+ clickedRow.removeAttribute(ROW_SELECTION_ATTRIBUTE);
+ } else {
+ clickedRow.setAttribute(ROW_SELECTION_ATTRIBUTE, '');
+ }
};
+ if (row.isSelected) {
+ rowProps['data-is-selected'] = '';
+ }
}
- return {
- className
- };
+ return rowProps;
});
+
return instance;
};
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts
index a1fe3ab94e8..c32572ad2b6 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useTableStyling.ts
@@ -2,8 +2,9 @@ import { PluginHook } from 'react-table';
export const useTableStyling = (classes) => {
const hook: PluginHook<{}> = (tableHooks) => {
- tableHooks.getTableProps.push(() => {
+ tableHooks.getTableProps.push((tableProps) => {
return {
+ ...tableProps,
className: classes.table
};
});
diff --git a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
index e57de276ddc..f9f8264154d 100644
--- a/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
+++ b/packages/main/src/components/AnalyticalTable/hooks/useToggleRowExpand.ts
@@ -3,9 +3,9 @@ import { PluginHook } from 'react-table';
export const useToggleRowExpand = (onRowExpandChange, isTreeTable) => {
const hook: PluginHook = (instance) => {
- // @ts-ignore
- instance.getExpandedToggleProps.push((row) => {
+ instance.getExpandedToggleProps.push((rowProps, instance, row) => {
return {
+ ...rowProps,
onClick: (e) => {
e.stopPropagation();
e.persist();
diff --git a/packages/main/src/components/AnalyticalTable/hooks/utils.ts b/packages/main/src/components/AnalyticalTable/hooks/utils.ts
deleted file mode 100644
index ca9eaa44075..00000000000
--- a/packages/main/src/components/AnalyticalTable/hooks/utils.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const makeTemplateColumns = (columns) => {
- return columns
- .map((column) => {
- let columnWidth = column.width;
- if (typeof columnWidth === 'number') {
- columnWidth = `${columnWidth}px`;
- }
- if (!columnWidth) {
- columnWidth = '1fr';
- }
- return `minmax(${column.minWidth}px, ${columnWidth})`;
- })
- .join(' ');
-};
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index 706a4d8c28e..41ba8f8e846 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -20,6 +20,7 @@ import React, {
} from 'react';
import { createUseStyles, useTheme } from 'react-jss';
import {
+ Column,
PluginHook,
useAbsoluteLayout,
useColumnOrder,
@@ -27,9 +28,9 @@ import {
useFilters,
useGroupBy,
useResizeColumns,
+ useRowSelect,
useSortBy,
- useTable,
- Column
+ useTable
} from 'react-table';
import { CommonProps } from '../../interfaces/CommonProps';
import { JSSTheme } from '../../interfaces/JSSTheme';
@@ -40,7 +41,6 @@ import { DefaultLoadingComponent } from './defaults/LoadingComponent';
import { TablePlaceholder } from './defaults/LoadingComponent/TablePlaceholder';
import { DefaultNoDataComponent } from './defaults/NoDataComponent';
import { useDragAndDrop } from './hooks/useDragAndDrop';
-import { useRowSelection } from './hooks/useRowSelection';
import { useTableCellStyling } from './hooks/useTableCellStyling';
import { useTableHeaderGroupStyling } from './hooks/useTableHeaderGroupStyling';
import { useTableHeaderStyling } from './hooks/useTableHeaderStyling';
@@ -114,7 +114,7 @@ export interface TableProps extends CommonProps {
reactTableOptions?: object;
tableHooks?: Array>;
subRowsKey?: string;
- selectedRowKey?: string;
+ selectedRowIds?: { [key: string]: boolean };
isTreeTable?: boolean;
overscanCount?: number;
@@ -147,7 +147,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
subRowsKey,
onGroup,
rowHeight,
- selectedRowKey,
+ selectedRowIds,
LoadingComponent,
onRowExpandChange,
noDataText,
@@ -161,7 +161,6 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
const theme = useTheme() as JSSTheme;
const classes = useStyles({ rowHeight: props.rowHeight });
- const [selectedRowPath, onRowClicked] = useRowSelection(onRowSelected, selectedRowKey);
const [analyticalTableRef, reactWindowRef] = useTableScrollHandles(ref);
const tableRef: RefObject = useRef();
@@ -187,7 +186,8 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
state: tableState,
setColumnOrder,
dispatch,
- totalColumnsWidth
+ totalColumnsWidth,
+ selectedFlatRows
} = useTable(
{
columns,
@@ -197,17 +197,18 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
stateReducer,
...reactTableOptions
},
+ useAbsoluteLayout,
useFilters,
useGroupBy,
useColumnOrder,
useSortBy,
useExpanded,
- useAbsoluteLayout,
+ useRowSelect,
useResizeColumns,
useTableStyling(classes),
useTableHeaderGroupStyling(classes),
useTableHeaderStyling(classes),
- useTableRowStyling(classes, selectable, selectedRowPath, selectedRowKey, onRowClicked, alternateRowColor),
+ useTableRowStyling(classes, selectable, onRowSelected),
useTableCellStyling(classes, rowHeight),
useToggleRowExpand(onRowExpandChange, isTreeTable),
...tableHooks
@@ -236,6 +237,10 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
dispatch({ type: 'SET_GROUP_BY', payload: groupBy });
}, [groupBy, dispatch]);
+ useEffect(() => {
+ dispatch({ type: 'SET_SELECTED_ROWS', selectedIds: selectedRowIds });
+ }, [selectedRowIds, dispatch]);
+
const tableContainerClasses = StyleClassHelper.of(classes.tableContainer);
if (theme.contentDensity === ContentDensity.Compact) {
@@ -349,8 +354,6 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
rows={rows}
minRows={minRows}
columns={columns}
- selectedRow={selectedRowKey}
- selectedRowPath={selectedRowPath}
selectable={selectable}
reactWindowRef={reactWindowRef}
isTreeTable={isTreeTable}
@@ -360,6 +363,7 @@ const AnalyticalTable: FC = forwardRef((props: TableProps, ref: Ref<
alternateRowColor={alternateRowColor}
overscanCount={overscanCount}
totalColumnsWidth={totalColumnsWidth}
+ selectedFlatRows={selectedFlatRows}
/>
)}