feat(AnalyticalTable): add infiniteScroll and keyboard navigation for cells (#397)

BREAKING CHANGE: column option `groupable` replaced by `disableGroupBy: boolean`
BREAKING CHANGE: column option `sortable` replaced by `disableSortBy: boolean`
BREAKING CHANGE: column option `filterable` replaced by `disableFilters: boolean`
BREAKING CHANGE: Enabling grouping, sorting or filtering on column level by e.g `disableGroupBy: false` will not overwrite the table overall setting in case e.g. `groupable={false}`

Author: MarcusNotheis

packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

@@ -96,7 +96,11 @@ const styles = {
     position: 'relative',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    alignItems: 'center'
+    alignItems: 'center',
+    '&:focus': {
+      outlineOffset: '-2px',
+      outline: `1px dotted ${ThemingParameters.sapContent_FocusColor}`
+    }
   },
   noDataContainer: {
     display: 'flex',

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

@@ -16,9 +16,6 @@ import { ColumnType } from '../types/ColumnType';
 
 export interface ColumnHeaderModalProperties {
   openBy: ReactNode;
-  showSort?: boolean;
-  showFilter?: boolean;
-  showGroup?: boolean;
   column: ColumnType;
   style: CSSProperties;
   onSort?: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void;
@@ -28,7 +25,10 @@ export interface ColumnHeaderModalProperties {
 const staticStyle = { fontWeight: 'normal' };
 
 export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: ColumnHeaderModalProperties) => {
-  const { showGroup, showSort, showFilter, column, style, openBy, onSort, onGroupBy } = props;
+  const { column, style, openBy, onSort, onGroupBy } = props;
+  const showFilter = column.canFilter;
+  const showGroup = column.canGroupBy;
+  const showSort = column.canSort;
 
   const { Filter } = column;
 
@@ -143,9 +143,3 @@ export const ColumnHeaderModal: FC<ColumnHeaderModalProperties> = (props: Column
     </Popover>
   );
 };
-
-ColumnHeaderModal.defaultProps = {
-  showSort: true,
-  showFilter: false,
-  showGroup: false
-};

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -3,8 +3,8 @@ import '@ui5/webcomponents-icons/dist/icons/group-2';
 import '@ui5/webcomponents-icons/dist/icons/sort-ascending';
 import '@ui5/webcomponents-icons/dist/icons/sort-descending';
 import { createComponentStyles } from '@ui5/webcomponents-react-base/lib/createComponentStyles';
-import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { StyleClassHelper } from '@ui5/webcomponents-react-base/lib/StyleClassHelper';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { Icon } from '@ui5/webcomponents-react/lib/Icon';
 import React, { CSSProperties, DragEventHandler, FC, ReactNode, ReactNodeArray, useMemo } from 'react';
 import { ColumnType } from '../types/ColumnType';
@@ -18,12 +18,9 @@ export interface ColumnHeaderProps {
   className: string;
   column: ColumnType;
   style: CSSProperties;
-  groupable: boolean;
-  sortable: boolean;
-  filterable: boolean;
   isLastColumn?: boolean;
-  onSort?: (e: CustomEvent<{column: unknown; sortDirection: string}>) => void;
-  onGroupBy?: (e: CustomEvent<{column: unknown; isGrouped: boolean}>) => void;
+  onSort?: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void;
+  onGroupBy?: (e: CustomEvent<{ column: unknown; isGrouped: boolean }>) => void;
   onDragStart: DragEventHandler<HTMLDivElement>;
   onDragOver: DragEventHandler<HTMLDivElement>;
   onDrop: DragEventHandler<HTMLDivElement>;
@@ -32,6 +29,7 @@ export interface ColumnHeaderProps {
   dragOver: boolean;
   isResizing: boolean;
   isDraggable: boolean;
+  role: string;
 }
 
 const styles = {
@@ -91,9 +89,6 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     column,
     className,
     style,
-    groupable,
-    sortable,
-    filterable,
     isLastColumn,
     onSort,
     onGroupBy,
@@ -103,7 +98,8 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     onDrop,
     onDragEnd,
     isDraggable,
-    dragOver
+    dragOver,
+    role
   } = props;
 
   const openBy = useMemo(() => {
@@ -179,18 +175,9 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
   if (!column) return null;
 
   return (
-    <div id={id} className={className} style={style} role="columnheader">
-      {groupable || sortable || filterable ? (
-        <ColumnHeaderModal
-          openBy={openBy}
-          showFilter={filterable}
-          showGroup={groupable && column.disableGrouping !== true}
-          showSort={sortable}
-          column={column}
-          style={innerStyle}
-          onSort={onSort}
-          onGroupBy={onGroupBy}
-        />
+    <div id={id} className={className} style={style} role={role}>
+      {column.canGroupBy || column.canSort || column.canFilter ? (
+        <ColumnHeaderModal openBy={openBy} column={column} style={innerStyle} onSort={onSort} onGroupBy={onGroupBy} />
       ) : (
         <div style={{ ...innerStyle, display: 'inline-block', cursor: 'auto' }}>{openBy}</div>
       )}