Add async loading, infinite scrolling, sorting, and empty state to Table

packages/@react-aria/grid/src/useColumnHeader.ts

@@ -13,7 +13,9 @@
 import {getColumnHeaderId} from './utils';
 import {GridNode, GridState} from '@react-stately/grid';
 import {HTMLAttributes, RefObject} from 'react';
+import {mergeProps} from '@react-aria/utils';
 import {useGridCell} from './useGridCell';
+import {usePress} from '@react-aria/interactions';
 
 interface ColumnHeaderProps {
   node: GridNode<unknown>,
@@ -30,13 +32,25 @@ export function useColumnHeader<T>(props: ColumnHeaderProps, state: GridState<T>
   let {node, colspan} = props;
   let {gridCellProps} = useGridCell(props, state);
 
+  let {pressProps} = usePress({
+    isDisabled: !node.props.allowsSorting,
+    onPress() {
+      state.sort(node.key);
+    }
+  });
+
+  let ariaSort: HTMLAttributes<HTMLElement>['aria-sort'] = null;
+  if (node.props.allowsSorting) {
+    ariaSort = state.sortDescriptor?.column === node.key ? state.sortDescriptor.direction : 'none';
+  }
+
   return {
     columnHeaderProps: {
-      ...gridCellProps,
+      ...mergeProps(gridCellProps, pressProps),
       role: 'columnheader',
       id: getColumnHeaderId(state, node.key),
-      'aria-colspan': colspan && colspan > 1 ? colspan : null
-      // 'aria-sort'
+      'aria-colspan': colspan && colspan > 1 ? colspan : null,
+      'aria-sort': ariaSort
     }
   };
 }

packages/@react-spectrum/table/package.json

@@ -33,7 +33,9 @@
     "@react-spectrum/utils": "^3.0.0-alpha.1",
     "@react-stately/collections": "^3.0.0-alpha.1",
     "@react-stately/grid": "^3.0.0-alpha.1",
-    "@react-types/table": "^3.0.0-alpha.1"
+    "@react-spectrum/progress": "^3.0.0-rc.2",
+    "@react-types/table": "^3.0.0-alpha.1",
+    "@spectrum-icons/ui": "^3.0.0-rc.2"
   },
   "devDependencies": {
     "@adobe/spectrum-css-temp": "^3.0.0-alpha.1"

packages/@react-spectrum/table/src/Table.tsx

@@ -10,14 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
+import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {classNames, filterDOMProps, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {CollectionItem, layoutInfoToStyle, ScrollView, setScrollLeft, useCollectionView} from '@react-aria/collections';
 import {DOMRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {GridState, useGridState} from '@react-stately/grid';
 import {mergeProps} from '@react-aria/utils';
-import {Node, ReusableView, useCollectionState} from '@react-stately/collections';
+import {Node, Rect, ReusableView, useCollectionState} from '@react-stately/collections';
+import {ProgressCircle} from '@react-spectrum/progress';
 import React, {ReactElement, useCallback, useContext, useMemo, useRef} from 'react';
 import {SpectrumColumnProps, SpectrumTableProps} from '@react-types/table';
 import styles from '@adobe/spectrum-css-temp/components/table/vars.css';
@@ -137,6 +139,26 @@ function Table<T>(props: SpectrumTableProps<T>, ref: DOMRef<HTMLDivElement>) {
         );
       case 'column':
         return <TableColumnHeader column={item} />;
+      case 'loader':
+        return (
+          <CenteredWrapper>
+            <ProgressCircle 
+              isIndeterminate 
+              aria-label={state.collection.size > 0 ? 'Loading more...' : 'Loading...'} />
+          </CenteredWrapper>
+        );
+      case 'empty': {
+        let emptyState = props.renderEmptyState ? props.renderEmptyState() : null;
+        if (emptyState == null) {
+          return null;
+        }
+
+        return (
+          <CenteredWrapper>
+            {emptyState}
+          </CenteredWrapper>
+        );
+      }
     }
   };
 
@@ -182,6 +204,17 @@ function TableCollectionView({layout, collection, focusedKey, renderView, render
     headerRef.current.scrollLeft = domRef.current.scrollLeft;
   }, [domRef]);
 
+  let onVisibleRectChange = useCallback((rect: Rect) => {
+    collectionState.setVisibleRect(rect);
+
+    if (!collection.body.props.isLoading && collection.body.props.onLoadMore && collectionState.collectionManager.contentSize.height > rect.height * 2) {
+      let scrollOffset = collectionState.collectionManager.contentSize.height - rect.height * 2;
+      if (rect.y > scrollOffset) {
+        collection.body.props.onLoadMore();
+      }
+    }
+  }, [collection.body.props, collectionState]);
+
   return (
     <div
       {...mergeProps(otherProps, collectionViewProps)}
@@ -217,7 +250,7 @@ function TableCollectionView({layout, collection, focusedKey, renderView, render
         innerStyle={{overflow: 'visible', transition: collectionState.isAnimating ? `none ${collectionState.collectionManager.transitionDuration}ms` : undefined}}
         ref={domRef}
         contentSize={collectionState.contentSize}
-        onVisibleRectChange={collectionState.setVisibleRect}
+        onVisibleRectChange={onVisibleRectChange}
         onScrollStart={collectionState.startScrolling}
         onScrollEnd={collectionState.endScrolling}
         onScroll={onScroll}>
@@ -264,7 +297,10 @@ function TableColumnHeader({column}) {
             {
               'spectrum-Table-checkboxCell': isCheckboxCell,
               'spectrum-Table-cell--alignCenter': columnProps.align === 'center' || column.colspan > 1,
-              'spectrum-Table-cell--alignEnd': columnProps.align === 'end'
+              'spectrum-Table-cell--alignEnd': columnProps.align === 'end',
+              'is-sortable': columnProps.allowsSorting,
+              'is-sorted-desc': state.sortDescriptor?.column === column.key && state.sortDescriptor?.direction === 'descending',
+              'is-sorted-asc': state.sortDescriptor?.column === column.key && state.sortDescriptor?.direction === 'ascending'
             }
           )
         }>
@@ -274,6 +310,9 @@ function TableColumnHeader({column}) {
             {...checkboxProps}
             UNSAFE_className={classNames(styles, 'spectrum-Table-checkbox')} />
         }
+        {columnProps.allowsSorting &&
+          <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />
+        }
       </div>
     </FocusRing>
   );
@@ -435,5 +474,19 @@ function TableRowHeader({cell}) {
   );
 }
 
+function CenteredWrapper({children}) {
+  let state = useTableContext();
+  return (
+    <div 
+      role="row"
+      aria-rowindex={state.collection.headerRows.length + state.collection.size + 1}
+      className={classNames(stylesOverrides, 'react-spectrum-Table-centeredWrapper')}>
+      <div role="rowheader" aria-colspan={state.collection.columns.length}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
 const _Table = React.forwardRef(Table);
 export {_Table as Table};

packages/@react-spectrum/table/src/TableLayout.ts

@@ -24,6 +24,7 @@ export class TableLayout<T> extends ListLayout<T> {
     this.buildColumnWidths();
     let header = this.buildHeader();
     let body = this.buildBody(0);
+    body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
     this.contentSize = new Size(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
     return [
       header,
@@ -144,14 +145,35 @@ export class TableLayout<T> extends ListLayout<T> {
     let startY = y;
     let width = 0;
     let children: LayoutNode[] = [];
-    for (let node of this.collection) {
+    for (let node of this.collection.body.childNodes) {
       let layoutNode = this.buildChild(node, 0, y);
       layoutNode.layoutInfo.parentKey = 'body';
       y = layoutNode.layoutInfo.rect.maxY;
       width = Math.max(width, layoutNode.layoutInfo.rect.width);
       children.push(layoutNode);
     }
 
+    // TODO: not show the spinner at the bottom when sorting?
+    if (this.collection.body.props.isLoading) {
+      let rect = new Rect(0, y, width || this.collectionManager.visibleRect.width, children.length === 0 ? this.collectionManager.visibleRect.height : 60);
+      let loader = new LayoutInfo('loader', 'loader', rect);
+      loader.parentKey = 'body';
+      loader.isSticky = children.length === 0;
+      this.layoutInfos.set('loader', loader);
+      children.push({layoutInfo: loader});
+      y = loader.rect.maxY;
+      width = Math.max(width, rect.width);
+    } else if (children.length === 0) {
+      let rect = new Rect(0, y, this.collectionManager.visibleRect.width, this.collectionManager.visibleRect.height);
+      let empty = new LayoutInfo('empty', 'empty', rect);
+      empty.parentKey = 'body';
+      empty.isSticky = true;
+      this.layoutInfos.set('empty', empty);
+      children.push({layoutInfo: empty});
+      y = empty.rect.maxY;
+      width = Math.max(width, rect.width);
+    }
+
     rect.width = width;
     rect.height = y - startY;
 
@@ -230,7 +252,7 @@ export class TableLayout<T> extends ListLayout<T> {
   }
 
   addVisibleLayoutInfos(res: LayoutInfo[], node: LayoutNode, rect: Rect) {
-    if (node.children.length === 0) {
+    if (!node.children || node.children.length === 0) {
       return;
     }
 

packages/@react-spectrum/table/src/table.css

@@ -28,3 +28,11 @@
 .react-spectrum-Table-cell--alignEnd {
   justify-content: flex-end;
 }
+
+.react-spectrum-Table-centeredWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}