fix row count

Author: snowystinger

packages/@react-aria/table/src/useTable.ts

@@ -10,19 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-import {announce} from '@react-aria/live-announcer';
-import {GridAria, GridProps, useGrid} from '@react-aria/grid';
-import {gridIds} from './utils';
+import { announce } from '@react-aria/live-announcer';
+import { GridAria, GridProps, useGrid } from '@react-aria/grid';
+import { gridIds } from './utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {Layout} from '@react-stately/virtualizer';
-import {mergeProps, useDescription, useId, useUpdateEffect} from '@react-aria/utils';
-import {Node} from '@react-types/shared';
-import {RefObject, useMemo} from 'react';
-import {TableKeyboardDelegate} from './TableKeyboardDelegate';
-import {TableState} from '@react-stately/table';
-import {useCollator, useLocale} from '@react-aria/i18n';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import { Layout } from '@react-stately/virtualizer';
+import { mergeProps, useDescription, useId, useUpdateEffect } from '@react-aria/utils';
+import { Node } from '@react-types/shared';
+import { RefObject, useMemo } from 'react';
+import { TableKeyboardDelegate } from './TableKeyboardDelegate';
+import { TableState } from '@react-stately/table';
+import { useCollator, useLocale } from '@react-aria/i18n';
+import { useLocalizedStringFormatter } from '@react-aria/i18n';
 
 export interface AriaTableProps<T> extends GridProps {
   /** The layout object for the table. Computes what content is visible and how to position and style them. */
@@ -46,8 +46,8 @@ export function useTable<T>(props: AriaTableProps<T>, state: TableState<T>, ref:
 
   // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
   // When virtualized, the layout object will be passed in as a prop and override this.
-  let collator = useCollator({usage: 'search', sensitivity: 'base'});
-  let {direction} = useLocale();
+  let collator = useCollator({ usage: 'search', sensitivity: 'base' });
+  let { direction } = useLocale();
   let disabledBehavior = state.selectionManager.disabledBehavior;
   let delegate = useMemo(() => keyboardDelegate || new TableKeyboardDelegate({
     collection: state.collection,
@@ -60,7 +60,7 @@ export function useTable<T>(props: AriaTableProps<T>, state: TableState<T>, ref:
   let id = useId(props.id);
   gridIds.set(state, id);
 
-  let {gridProps} = useGrid({
+  let { gridProps } = useGrid({
     ...props,
     id,
     keyboardDelegate: delegate
@@ -69,15 +69,15 @@ export function useTable<T>(props: AriaTableProps<T>, state: TableState<T>, ref:
   // Override to include header rows
   if (isVirtualized) {
     // TODO Rob: fix headerRows
-    gridProps['aria-rowcount'] = state.collection.size; // + state.collection.headerRows.length;
+    gridProps['aria-rowcount'] = state.collection.size + (state.collection.getItem(state.collection.head.lastChildKey)?.index ?? 0) + 1;
   }
 
-  let {column, direction: sortDirection} = state.sortDescriptor || {};
+  let { column, direction: sortDirection } = state.sortDescriptor || {};
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let sortDescription = useMemo(() => {
     let columnName = state.collection.columns.find(c => c.key === column)?.textValue;
-    return sortDirection && column ? stringFormatter.format(`${sortDirection}Sort`, {columnName}) : undefined;
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    return sortDirection && column ? stringFormatter.format(`${sortDirection}Sort`, { columnName }) : undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sortDirection, column, state.collection.columns]);
 
   let descriptionProps = useDescription(sortDescription);

packages/@react-spectrum/table/test/Table.test.js

@@ -1,14 +1,14 @@
 /*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
+   * Copyright 2020 Adobe. All rights reserved.
+   * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+   * you may not use this file except in compliance with the License. You may obtain a copy
+   * of the License at http://www.apache.org/licenses/LICENSE-2.0
+   *
+   * Unless required by applicable law or agreed to in writing, software distributed under
+   * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+   * OF ANY KIND, either express or implied. See the License for the specific language
+   * governing permissions and limitations under the License.
+   */
 
 jest.mock('@react-aria/live-announcer');
 import { act, fireEvent, installPointerEvent, render as renderComponent, triggerPress, typeText, within } from '@react-spectrum/test-utils';
@@ -246,8 +246,8 @@ describe('TableView', function() {
 
     let rows = within(rowgroups[1]).getAllByRole('row');
     expect(rows).toHaveLength(2);
-    expect(rows[0]).toHaveAttribute('aria-rowindex', '1');
-    expect(rows[1]).toHaveAttribute('aria-rowindex', '2');
+    expect(rows[0]).toHaveAttribute('aria-rowindex', '2');
+    expect(rows[1]).toHaveAttribute('aria-rowindex', '3');
 
     let rowheader = within(rows[0]).getByRole('rowheader');
     expect(rowheader).toHaveTextContent('Foo 1');
@@ -300,7 +300,7 @@ describe('TableView', function() {
     expect(grid).toHaveAttribute('aria-label', 'Table');
     expect(grid).toHaveAttribute('data-testid', 'test');
     expect(grid).toHaveAttribute('aria-multiselectable', 'true');
-    expect(grid).toHaveAttribute('aria-rowcount', '3');
+    expect(grid).toHaveAttribute('aria-rowcount', '2');
     expect(grid).toHaveAttribute('aria-colcount', '4');
 
     let rowgroups = within(grid).getAllByRole('rowgroup');
@@ -3541,9 +3541,9 @@ describe('TableView', function() {
 
       rows = within(table).getAllByRole('row');
       expect(rows).toHaveLength(4);
-      expect(rows[1]).toHaveAttribute('aria-rowindex', '1');
-      expect(rows[2]).toHaveAttribute('aria-rowindex', '2');
-      expect(rows[3]).toHaveAttribute('aria-rowindex', '3');
+      expect(rows[1]).toHaveAttribute('aria-rowindex', '2');
+      expect(rows[2]).toHaveAttribute('aria-rowindex', '3');
+      expect(rows[3]).toHaveAttribute('aria-rowindex', '4');
 
 
       let rowHeaders = within(rows[1]).getAllByRole('rowheader');
@@ -3641,7 +3641,7 @@ describe('TableView', function() {
       let rowHeaders = within(rows[1]).getAllByRole('rowheader');
       expect(rowHeaders[0]).toHaveTextContent('Julia');
 
-      expect(rows[1]).toHaveAttribute('aria-rowindex', '1');
+      expect(rows[1]).toHaveAttribute('aria-rowindex', '2');
     });
 
     it('can bulk remove items', async function() {