From 3a4c20ed505b3765a2df7e94492792902eaec0a9 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 10 May 2021 10:40:44 -0700
Subject: [PATCH 01/62] renaming table component to TableView

---
 .../@react-spectrum/icon/docs/IconTable.tsx   |   6 +-
 .../table/src/{Table.tsx => TableView.tsx}    |   6 +-
 packages/@react-spectrum/table/src/index.ts   |   2 +-
 .../table/stories/CRUDExample.tsx             |   6 +-
 .../table/stories/HidingColumns.tsx           |   6 +-
 .../table/stories/Table.stories.tsx           | 118 ++++++-------
 .../@react-spectrum/table/test/Table.test.js  | 156 +++++++++---------
 7 files changed, 150 insertions(+), 150 deletions(-)
 rename packages/@react-spectrum/table/src/{Table.tsx => TableView.tsx} (99%)

diff --git a/packages/@react-spectrum/icon/docs/IconTable.tsx b/packages/@react-spectrum/icon/docs/IconTable.tsx
index 5040245e12b..c6b5ad22365 100644
--- a/packages/@react-spectrum/icon/docs/IconTable.tsx
+++ b/packages/@react-spectrum/icon/docs/IconTable.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ActionButton} from '@react-spectrum/button';
-import {Cell, Column, Row, Table, TableBody, TableHeader} from '@react-spectrum/table';
+import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
 import Paste from '@spectrum-icons/workflow/Paste';
 import React, {useEffect, useState} from 'react';
 import {SearchField} from '@react-spectrum/searchfield';
@@ -77,7 +77,7 @@ export default function IconTable(props: {iconPackage: string}) {
         onClear={onSearchClear}
         onChange={onSearch}
         marginBottom="20px" />
-      <Table width="100%" height={500} selectionMode="none">
+      <TableView width="100%" height={500} selectionMode="none">
         <TableHeader>
           <Column key="icon" width={64}>Icon</Column>
           <Column key="name">Name</Column>
@@ -97,7 +97,7 @@ export default function IconTable(props: {iconPackage: string}) {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     </>
   );
 }
diff --git a/packages/@react-spectrum/table/src/Table.tsx b/packages/@react-spectrum/table/src/TableView.tsx
similarity index 99%
rename from packages/@react-spectrum/table/src/Table.tsx
rename to packages/@react-spectrum/table/src/TableView.tsx
index ab3203ce249..e5d6b521323 100644
--- a/packages/@react-spectrum/table/src/Table.tsx
+++ b/packages/@react-spectrum/table/src/TableView.tsx
@@ -68,7 +68,7 @@ function useTableContext() {
   return useContext(TableContext);
 }
 
-function Table<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<HTMLDivElement>) {
+function TableView<T extends object>(props: SpectrumTableProps<T>, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {isQuiet} = props;
   let {styleProps} = useStyleProps(props);
@@ -695,5 +695,5 @@ function CenteredWrapper({children}) {
   );
 }
 
-const _Table = React.forwardRef(Table);
-export {_Table as Table};
+const _TableView = React.forwardRef(TableView);
+export {_TableView as TableView};
diff --git a/packages/@react-spectrum/table/src/index.ts b/packages/@react-spectrum/table/src/index.ts
index 6b418762553..5c069763b11 100644
--- a/packages/@react-spectrum/table/src/index.ts
+++ b/packages/@react-spectrum/table/src/index.ts
@@ -12,7 +12,7 @@
 
 /// <reference types="css-module-types" />
 
-export * from './Table';
+export * from './TableView';
 import {Column} from '@react-stately/table';
 import {SpectrumColumnProps} from '@react-types/table';
 
diff --git a/packages/@react-spectrum/table/stories/CRUDExample.tsx b/packages/@react-spectrum/table/stories/CRUDExample.tsx
index d07c4d7c085..55d99815dc5 100644
--- a/packages/@react-spectrum/table/stories/CRUDExample.tsx
+++ b/packages/@react-spectrum/table/stories/CRUDExample.tsx
@@ -15,7 +15,7 @@ import {ActionGroup} from '@react-spectrum/actiongroup';
 import Add from '@spectrum-icons/workflow/Add';
 import {AlertDialog, Dialog, DialogContainer, useDialogContainer} from '@react-spectrum/dialog';
 import {ButtonGroup} from '@react-spectrum/buttongroup';
-import {Cell, Column, Row, Table, TableBody, TableHeader} from '../';
+import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
 import {Content} from '@react-spectrum/view';
 import Delete from '@spectrum-icons/workflow/Delete';
 import {Divider} from '@react-spectrum/divider';
@@ -51,7 +51,7 @@ export function CRUDExample() {
           <Item key="bulk-delete" aria-label="Delete selected items"><Delete /></Item>
         }
       </ActionGroup>
-      <Table aria-label="People" width={500} height={300} selectionMode="multiple" isQuiet selectedKeys={list.selectedKeys} onSelectionChange={list.setSelectedKeys}>
+      <TableView aria-label="People" width={500} height={300} selectionMode="multiple" isQuiet selectedKeys={list.selectedKeys} onSelectionChange={list.setSelectedKeys}>
         <TableHeader>
           <Column isRowHeader key="firstName">First Name</Column>
           <Column isRowHeader key="lastName">Last Name</Column>
@@ -78,7 +78,7 @@ export function CRUDExample() {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
       <DialogContainer onDismiss={() => setDialog(null)}>
         {dialog?.action === 'add' &&
           <EditDialog
diff --git a/packages/@react-spectrum/table/stories/HidingColumns.tsx b/packages/@react-spectrum/table/stories/HidingColumns.tsx
index d02c7e1e257..d19ad10dd57 100644
--- a/packages/@react-spectrum/table/stories/HidingColumns.tsx
+++ b/packages/@react-spectrum/table/stories/HidingColumns.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Cell, Column, Row, Table, TableBody, TableHeader} from '../';
+import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
 import {Checkbox} from '@react-spectrum/checkbox';
 import {Flex} from '@react-spectrum/layout';
 import {Form} from '@react-spectrum/form';
@@ -53,7 +53,7 @@ export function HidingColumns() {
           <Checkbox key={c.key} isSelected={visibleColumns.has(c.key)} onChange={() => toggleColumn(c.key)}>{c.title}</Checkbox>
         )}
       </Form>
-      <Table aria-label="Table with hideable columns" width={900} height={500} isQuiet selectionMode="single">
+      <TableView aria-label="Table with hideable columns" width={900} height={500} isQuiet selectionMode="single">
         <TableHeader columns={columns.filter(c => visibleColumns.has(c.key))}>
           {column => <Column>{column.title}</Column>}
         </TableHeader>
@@ -64,7 +64,7 @@ export function HidingColumns() {
             </Row>
           )}
         </TableBody>
-      </Table>
+      </TableView>
     </Flex>
   );
 }
diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 01ad421bdf9..279890531af 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -13,7 +13,7 @@
 import {action} from '@storybook/addon-actions';
 import {ActionButton} from '@react-spectrum/button';
 import Add from '@spectrum-icons/workflow/Add';
-import {Cell, Column, Row, Table, TableBody, TableHeader} from '../';
+import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
 import {Content} from '@react-spectrum/view';
 import {CRUDExample} from './CRUDExample';
 import Delete from '@spectrum-icons/workflow/Delete';
@@ -89,11 +89,11 @@ function renderEmptyState() {
 }
 
 let onSelectionChange = action('onSelectionChange');
-storiesOf('Table', module)
+storiesOf('TableView', module)
   .add(
     'static',
     () => (
-      <Table aria-label="Table with static contents" width={300} height={200}>
+      <TableView aria-label="TableView with static contents" width={300} height={200}>
         <TableHeader>
           <Column key="foo">Foo</Column>
           <Column key="bar">Bar</Column>
@@ -111,13 +111,13 @@ storiesOf('Table', module)
             <Cell>Three</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'static with selection',
     () => (
-      <Table aria-label="Table with static contents" selectionMode="multiple" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with static contents" selectionMode="multiple" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column key="foo">Foo</Column>
           <Column key="bar">Bar</Column>
@@ -135,13 +135,13 @@ storiesOf('Table', module)
             <Cell>Three</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'dynamic',
     () => (
-      <Table aria-label="Table with dynamic contents" width={300} height={200}>
+      <TableView aria-label="TableView with dynamic contents" width={300} height={200}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -152,13 +152,13 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'dynamic with selection',
     () => (
-      <Table aria-label="Table with dynamic contents" selectionMode="multiple" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with dynamic contents" selectionMode="multiple" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -169,13 +169,13 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'dynamic with single selection',
     () => (
-      <Table aria-label="Table with dynamic contents" selectionMode="single" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with dynamic contents" selectionMode="single" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -186,13 +186,13 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'dynamic with disabled, single selection',
     () => (
-      <Table disabledKeys={['Foo 1', 'Foo 3']} aria-label="Table with dynamic contents" selectionMode="single" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView disabledKeys={['Foo 1', 'Foo 3']} aria-label="TableView with dynamic contents" selectionMode="single" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -203,13 +203,13 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'dynamic with disabled, multiple selection',
     () => (
-      <Table disabledKeys={['Foo 1', 'Foo 3']} aria-label="Table with dynamic contents" selectionMode="multiple" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView disabledKeys={['Foo 1', 'Foo 3']} aria-label="TableView with dynamic contents" selectionMode="multiple" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -220,13 +220,13 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'dynamic with disabled, multiple selection, quiet',
     () => (
-      <Table isQuiet disabledKeys={['Foo 1', 'Foo 3']} aria-label="Table with dynamic contents" selectionMode="multiple" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView isQuiet disabledKeys={['Foo 1', 'Foo 3']} aria-label="TableView with dynamic contents" selectionMode="multiple" width={300} height={200} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -237,13 +237,13 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'static with nested columns',
     () => (
-      <Table aria-label="Table with nested columns" selectionMode="multiple" width={500} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with nested columns" selectionMode="multiple" width={500} height={200} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column key="test">Test</Column>
           <Column title="Group 1">
@@ -268,13 +268,13 @@ storiesOf('Table', module)
             <Cell>Three</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'dynamic with nested columns',
     () => (
-      <Table aria-label="Table with nested columns" selectionMode="multiple" width={700} height={300} overflowMode="wrap" onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with nested columns" selectionMode="multiple" width={700} height={300} overflowMode="wrap" onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader columns={nestedColumns}>
           {column =>
             <Column childColumns={column.children}>{column.name}</Column>
@@ -287,7 +287,7 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
@@ -295,7 +295,7 @@ storiesOf('Table', module)
     () => (
       <Flex direction="column">
         <input placeholder="Focusable before" />
-        <Table aria-label="Table with focusable cells" selectionMode="multiple" width={450} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+        <TableView aria-label="TableView with focusable cells" selectionMode="multiple" width={450} height={200} onSelectionChange={s => onSelectionChange([...s])}>
           <TableHeader>
             <Column key="foo">Foo</Column>
             <Column key="bar">Bar</Column>
@@ -318,7 +318,7 @@ storiesOf('Table', module)
               <Cell>Three</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
         <input placeholder="Focusable after" />
       </Flex>
     )
@@ -326,7 +326,7 @@ storiesOf('Table', module)
   .add(
     'many columns and rows',
     () => (
-      <Table aria-label="Table with many columns and rows" selectionMode="multiple" width={700} height={500} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with many columns and rows" selectionMode="multiple" width={700} height={500} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader columns={manyColunns}>
           {column =>
             <Column minWidth={100}>{column.name}</Column>
@@ -339,14 +339,14 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     ),
     {chromatic: {disable: true}}
   )
   .add(
     'isQuiet, many columns and rows',
     () => (
-      <Table aria-label="Quiet table with many columns and rows" selectionMode="multiple" width={700} height={500} isQuiet onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="Quiet TableView with many columns and rows" selectionMode="multiple" width={700} height={500} isQuiet onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader columns={manyColunns}>
           {column =>
             <Column minWidth={100}>{column.name}</Column>
@@ -359,14 +359,14 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     ),
     {chromatic: {disable: true}}
   )
   .add(
     'column widths and dividers',
     () => (
-      <Table aria-label="Table with column widths and dividers" selectionMode="multiple" width={500} height={200} onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with column widths and dividers" selectionMode="multiple" width={500} height={200} onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column width={250} showDivider>File Name</Column>
           <Column>Type</Column>
@@ -384,13 +384,13 @@ storiesOf('Table', module)
             <Cell>120 KB</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'isQuiet, column widths and dividers',
     () => (
-      <Table aria-label="Quiet table with column widths and dividers" selectionMode="multiple" width={500} height={200} isQuiet onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="Quiet TableView with column widths and dividers" selectionMode="multiple" width={500} height={200} isQuiet onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column width={250} showDivider>File Name</Column>
           <Column>Type</Column>
@@ -408,13 +408,13 @@ storiesOf('Table', module)
             <Cell>120 KB</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'density="compact"',
     () => (
-      <Table aria-label="Table with custom row height" selectionMode="multiple" width={500} height={200} isQuiet density="compact" onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with custom row height" selectionMode="multiple" width={500} height={200} isQuiet density="compact" onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column width={250} showDivider>File Name</Column>
           <Column>Type</Column>
@@ -432,13 +432,13 @@ storiesOf('Table', module)
             <Cell>120 KB</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'density="spacious"',
     () => (
-      <Table aria-label="Table with custom row height" selectionMode="multiple" width={500} height={200} isQuiet density="spacious" onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with custom row height" selectionMode="multiple" width={500} height={200} isQuiet density="spacious" onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column width={250} showDivider>File Name</Column>
           <Column>Type</Column>
@@ -456,13 +456,13 @@ storiesOf('Table', module)
             <Cell>120 KB</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'overflowMode="wrap"',
     () => (
-      <Table aria-label="Table with variable row heights" selectionMode="multiple" width={500} height={300} isQuiet overflowMode="wrap" onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with variable row heights" selectionMode="multiple" width={500} height={300} isQuiet overflowMode="wrap" onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column width={250} showDivider>File Name</Column>
           <Column>Type</Column>
@@ -480,13 +480,13 @@ storiesOf('Table', module)
             <Cell>120 KB</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'overflowMode="wrap", density="compact"',
     () => (
-      <Table aria-label="Table with variable row heights" selectionMode="multiple" width={500} height={300} isQuiet overflowMode="wrap" density="compact" onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with variable row heights" selectionMode="multiple" width={500} height={300} isQuiet overflowMode="wrap" density="compact" onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column width={250} showDivider>File Name</Column>
           <Column>Type</Column>
@@ -504,13 +504,13 @@ storiesOf('Table', module)
             <Cell>120 KB</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'overflowMode="wrap", density="spacious"',
     () => (
-      <Table aria-label="Table with variable row heights" selectionMode="multiple" width={500} height={300} isQuiet overflowMode="wrap" density="spacious" onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with variable row heights" selectionMode="multiple" width={500} height={300} isQuiet overflowMode="wrap" density="spacious" onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column width={250} showDivider>File Name</Column>
           <Column>Type</Column>
@@ -528,13 +528,13 @@ storiesOf('Table', module)
             <Cell>120 KB</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'custom isRowHeader labeling',
     () => (
-      <Table aria-label="Table with custom row header labeling" selectionMode="multiple" width={500} height={200} isQuiet onSelectionChange={s => onSelectionChange([...s])}>
+      <TableView aria-label="TableView with custom row header labeling" selectionMode="multiple" width={500} height={200} isQuiet onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
           <Column isRowHeader>First Name</Column>
           <Column isRowHeader>Last Name</Column>
@@ -552,7 +552,7 @@ storiesOf('Table', module)
             <Cell>February 10</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
@@ -570,7 +570,7 @@ storiesOf('Table', module)
   .add(
     'isLoading',
     () => (
-      <Table aria-label="Table loading" width={700} height={200}>
+      <TableView aria-label="TableView loading" width={700} height={200}>
         <TableHeader columns={manyColunns}>
           {column =>
             <Column minWidth={100}>{column.name}</Column>
@@ -583,13 +583,13 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'isLoading more',
     () => (
-      <Table aria-label="Table loading more" width={700} height={200}>
+      <TableView aria-label="TableView loading more" width={700} height={200}>
         <TableHeader columns={columns}>
           {column =>
             <Column minWidth={100}>{column.name}</Column>
@@ -602,13 +602,13 @@ storiesOf('Table', module)
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
     'renderEmptyState',
     () => (
-      <Table aria-label="Table with empty state" width={700} height={400} isQuiet renderEmptyState={renderEmptyState}>
+      <TableView aria-label="TableView with empty state" width={700} height={400} isQuiet renderEmptyState={renderEmptyState}>
         <TableHeader columns={manyColunns}>
           {column =>
             <Column minWidth={100}>{column.name}</Column>
@@ -617,7 +617,7 @@ storiesOf('Table', module)
         <TableBody>
           {[]}
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
@@ -628,8 +628,8 @@ storiesOf('Table', module)
   .add(
     'hideHeader',
     () => (
-      <Table
-        aria-label="Table with static contents"
+      <TableView
+        aria-label="TableView with static contents"
         width={350}
         height={200}>
         <TableHeader>
@@ -737,7 +737,7 @@ storiesOf('Table', module)
             <Cell>Three</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     )
   )
   .add(
@@ -793,7 +793,7 @@ function AsyncLoadingExample() {
   return (
     <div>
       <ActionButton marginBottom={10} onPress={() => list.remove(list.items[0].data.id)}>Remove first item</ActionButton>
-      <Table aria-label="Top news from Reddit" selectionMode="multiple" width={1000} height={400} isQuiet sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
+      <TableView aria-label="Top news from Reddit" selectionMode="multiple" width={1000} height={400} isQuiet sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
         <TableHeader>
           <Column key="score" width={100} allowsSorting>Score</Column>
           <Column key="title" isRowHeader allowsSorting>Title</Column>
@@ -811,7 +811,7 @@ function AsyncLoadingExample() {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     </div>
   );
 }
@@ -900,7 +900,7 @@ function ProjectListTable() {
         value={filterText}
         onChange={(onChange)} />
       <View flexGrow={1} height={700} overflow="hidden">
-        <Table
+        <TableView
           aria-label={'Project list'}
           height={'100%'}
           isQuiet
@@ -919,7 +919,7 @@ function ProjectListTable() {
               <Row key={item.id}>{(key) => <Cell>{item[key]}</Cell>}</Row>
             )}
           </TableBody>
-        </Table>
+        </TableView>
       </View>
     </>
   );
@@ -980,7 +980,7 @@ function AsyncServerFilterTable(props) {
         placeholder={'Search by name'}
         defaultValue={list.filterText}
         onChange={(onChange)} />
-      <Table
+      <TableView
         aria-label={'Star Wars Characters'}
         height={200}
         width={600}
@@ -1002,7 +1002,7 @@ function AsyncServerFilterTable(props) {
             <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
           )}
         </TableBody>
-      </Table>
+      </TableView>
     </div>
   );
 }
diff --git a/packages/@react-spectrum/table/test/Table.test.js b/packages/@react-spectrum/table/test/Table.test.js
index 5a49ae68393..9c2ea1f8173 100644
--- a/packages/@react-spectrum/table/test/Table.test.js
+++ b/packages/@react-spectrum/table/test/Table.test.js
@@ -13,7 +13,7 @@
 import {act, fireEvent, render as renderComponent, within} from '@testing-library/react';
 import {ActionButton} from '@react-spectrum/button';
 import Add from '@spectrum-icons/workflow/Add';
-import {Cell, Column, Row, Table, TableBody, TableHeader} from '../';
+import {Cell, Column, Row, TableBody, TableHeader, TableView} from '../';
 import {CRUDExample} from '../stories/CRUDExample';
 import {getFocusableTreeWalker} from '@react-aria/focus';
 import {HidingColumns} from '../stories/HidingColumns';
@@ -56,7 +56,7 @@ for (let i = 1; i <= 100; i++) {
   manyItems.push({id: i, foo: 'Foo ' + i, bar: 'Bar ' + i, baz: 'Baz ' + i});
 }
 
-describe('Table', function () {
+describe('TableView', function () {
   let offsetWidth, offsetHeight;
 
   beforeAll(function () {
@@ -100,7 +100,7 @@ describe('Table', function () {
 
   it('renders a static table', function () {
     let {getByRole} = render(
-      <Table aria-label="Table" data-testid="test">
+      <TableView aria-label="Table" data-testid="test">
         <TableHeader>
           <Column>Foo</Column>
           <Column>Bar</Column>
@@ -118,7 +118,7 @@ describe('Table', function () {
             <Cell>Baz 2</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let grid = getByRole('grid');
@@ -180,7 +180,7 @@ describe('Table', function () {
 
   it('renders a static table with selection', function () {
     let {getByRole} = render(
-      <Table aria-label="Table" data-testid="test" selectionMode="multiple">
+      <TableView aria-label="Table" data-testid="test" selectionMode="multiple">
         <TableHeader>
           <Column>Foo</Column>
           <Column>Bar</Column>
@@ -198,7 +198,7 @@ describe('Table', function () {
             <Cell>Baz 2</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let grid = getByRole('grid');
@@ -275,7 +275,7 @@ describe('Table', function () {
 
   it('renders a dynamic table', function () {
     let {getByRole} = render(
-      <Table aria-label="Table">
+      <TableView aria-label="Table">
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -286,7 +286,7 @@ describe('Table', function () {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let grid = getByRole('grid');
@@ -338,7 +338,7 @@ describe('Table', function () {
 
   it('renders a dynamic table with selection', function () {
     let {getByRole} = render(
-      <Table aria-label="Table" selectionMode="multiple">
+      <TableView aria-label="Table" selectionMode="multiple">
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -349,7 +349,7 @@ describe('Table', function () {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let grid = getByRole('grid');
@@ -418,7 +418,7 @@ describe('Table', function () {
 
   it('renders a static table with nested columns', function () {
     let {getByRole} = render(
-      <Table aria-label="Table" selectionMode="multiple">
+      <TableView aria-label="Table" selectionMode="multiple">
         <TableHeader>
           <Column key="test">Test</Column>
           <Column title="Group 1">
@@ -443,7 +443,7 @@ describe('Table', function () {
             <Cell>Baz 2</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let grid = getByRole('grid');
@@ -523,7 +523,7 @@ describe('Table', function () {
 
   it('renders a dynamic table with nested columns', function () {
     let {getByRole} = render(
-      <Table aria-label="Table" selectionMode="multiple">
+      <TableView aria-label="Table" selectionMode="multiple">
         <TableHeader columns={nestedColumns}>
           {column =>
             <Column childColumns={column.children}>{column.name}</Column>
@@ -536,7 +536,7 @@ describe('Table', function () {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let grid = getByRole('grid');
@@ -626,7 +626,7 @@ describe('Table', function () {
 
   it('renders a table with multiple row headers', function () {
     let {getByRole} = render(
-      <Table aria-label="Table" selectionMode="multiple">
+      <TableView aria-label="Table" selectionMode="multiple">
         <TableHeader>
           <Column isRowHeader>First Name</Column>
           <Column isRowHeader>Last Name</Column>
@@ -644,7 +644,7 @@ describe('Table', function () {
             <Cell>February 10</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let grid = getByRole('grid');
@@ -678,7 +678,7 @@ describe('Table', function () {
     // locale is being set here, since we can't nest them, use original render function
     let renderTable = (locale = 'en-US', props = {}) => renderComponent(
       <Provider locale={locale} theme={theme}>
-        <Table aria-label="Table" {...props}>
+        <TableView aria-label="Table" {...props}>
           <TableHeader columns={columns}>
             {column => <Column>{column.name}</Column>}
           </TableHeader>
@@ -689,14 +689,14 @@ describe('Table', function () {
               </Row>)
             }
           </TableBody>
-        </Table>
+        </TableView>
       </Provider>
     );
 
     // locale is being set here, since we can't nest them, use original render function
     let renderNested = (locale = 'en-US') => renderComponent(
       <Provider locale={locale} theme={theme}>
-        <Table aria-label="Table">
+        <TableView aria-label="Table">
           <TableHeader columns={nestedColumns}>
             {column =>
               <Column childColumns={column.children}>{column.name}</Column>
@@ -709,12 +709,12 @@ describe('Table', function () {
               </Row>)
             }
           </TableBody>
-        </Table>
+        </TableView>
       </Provider>
     );
 
     let renderMany = () => render(
-      <Table aria-label="Table">
+      <TableView aria-label="Table">
         <TableHeader columns={columns}>
           {column =>
             <Column>{column.name}</Column>
@@ -727,7 +727,7 @@ describe('Table', function () {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let focusCell = (tree, text) => act(() => getCell(tree, text).focus());
@@ -1109,7 +1109,7 @@ describe('Table', function () {
 
     describe('type to select', function () {
       let renderTypeSelect = () => render(
-        <Table aria-label="Table" selectionMode="none">
+        <TableView aria-label="Table" selectionMode="none">
           <TableHeader>
             <Column isRowHeader>First Name</Column>
             <Column isRowHeader>Last Name</Column>
@@ -1132,7 +1132,7 @@ describe('Table', function () {
               <Cell>December 12</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       it('focuses cell by typing letters in rapid succession', function () {
@@ -1240,7 +1240,7 @@ describe('Table', function () {
       let renderFocusable = () => render(
         <>
           <input data-testid="before" />
-          <Table aria-label="Table" selectionMode="multiple">
+          <TableView aria-label="Table" selectionMode="multiple">
             <TableHeader>
               <Column>Foo</Column>
               <Column>Bar</Column>
@@ -1258,7 +1258,7 @@ describe('Table', function () {
                 <Cell>Baz 2</Cell>
               </Row>
             </TableBody>
-          </Table>
+          </TableView>
           <input data-testid="after" />
         </>
       );
@@ -1501,7 +1501,7 @@ describe('Table', function () {
 
   describe('selection', function () {
     let renderJSX = (props, items = manyItems) => (
-      <Table aria-label="Table" selectionMode="multiple" {...props}>
+      <TableView aria-label="Table" selectionMode="multiple" {...props}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -1512,7 +1512,7 @@ describe('Table', function () {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let renderTable = (props, items = manyItems) => render(renderJSX(props, items));
@@ -2155,7 +2155,7 @@ describe('Table', function () {
 
   describe('single selection', function () {
     let renderJSX = (props, items = manyItems) => (
-      <Table aria-label="Table" selectionMode="single" {...props}>
+      <TableView aria-label="Table" selectionMode="single" {...props}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -2166,7 +2166,7 @@ describe('Table', function () {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     let renderTable = (props, items = manyItems) => render(renderJSX(props, items));
@@ -2376,7 +2376,7 @@ describe('Table', function () {
 
   describe('press/hover interactions and selection mode', function () {
     let TableExample = (props) => (
-      <Table aria-label="Table" {...props}>
+      <TableView aria-label="Table" {...props}>
         <TableHeader columns={columns}>
           {column => <Column>{column.name}</Column>}
         </TableHeader>
@@ -2387,7 +2387,7 @@ describe('Table', function () {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     it('displays pressed/hover styles when row is pressed/hovered and selection mode is not "none"', function () {
@@ -2704,7 +2704,7 @@ describe('Table', function () {
 
   describe('async loading', function () {
     let defaultTable = (
-      <Table aria-label="Table">
+      <TableView aria-label="Table">
         <TableHeader>
           <Column key="foo">Foo</Column>
           <Column key="bar">Bar</Column>
@@ -2719,12 +2719,12 @@ describe('Table', function () {
             <Cell>Bar 2</Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
     );
 
     it('should display a spinner when loading', function () {
       let tree = render(
-        <Table aria-label="Table" selectionMode="multiple">
+        <TableView aria-label="Table" selectionMode="multiple">
           <TableHeader>
             <Column key="foo">Foo</Column>
             <Column key="bar">Bar</Column>
@@ -2732,7 +2732,7 @@ describe('Table', function () {
           <TableBody isLoading>
             {[]}
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -2758,7 +2758,7 @@ describe('Table', function () {
 
     it('should display a spinner at the bottom when loading more', function () {
       let tree = render(
-        <Table aria-label="Table">
+        <TableView aria-label="Table">
           <TableHeader>
             <Column key="foo">Foo</Column>
             <Column key="bar">Bar</Column>
@@ -2773,7 +2773,7 @@ describe('Table', function () {
               <Cell>Bar 2</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -2805,7 +2805,7 @@ describe('Table', function () {
 
       let onLoadMore = jest.fn();
       let tree = render(
-        <Table aria-label="Table">
+        <TableView aria-label="Table">
           <TableHeader>
             <Column key="foo">Foo</Column>
             <Column key="bar">Bar</Column>
@@ -2817,7 +2817,7 @@ describe('Table', function () {
               </Row>
             )}
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let body = tree.getAllByRole('rowgroup')[1];
@@ -2843,7 +2843,7 @@ describe('Table', function () {
       let onLoadMoreSpy = jest.fn();
 
       let TableMock = (props) => (
-        <Table aria-label="Table">
+        <TableView aria-label="Table">
           <TableHeader>
             <Column key="foo">Foo</Column>
             <Column key="bar">Bar</Column>
@@ -2855,7 +2855,7 @@ describe('Table', function () {
               </Row>
             )}
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       render(<TableMock items={items} />);
@@ -2866,7 +2866,7 @@ describe('Table', function () {
 
     it('should display an empty state when there are no items', function () {
       let tree = render(
-        <Table aria-label="Table" renderEmptyState={() => <h3>No results</h3>}>
+        <TableView aria-label="Table" renderEmptyState={() => <h3>No results</h3>}>
           <TableHeader>
             <Column key="foo">Foo</Column>
             <Column key="bar">Bar</Column>
@@ -2874,7 +2874,7 @@ describe('Table', function () {
           <TableBody>
             {[]}
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -2901,7 +2901,7 @@ describe('Table', function () {
   describe('sorting', function () {
     it('should set aria-sort="none" on sortable column headers', function () {
       let tree = render(
-        <Table aria-label="Table">
+        <TableView aria-label="Table">
           <TableHeader>
             <Column key="foo" allowsSorting>Foo</Column>
             <Column key="bar" allowsSorting>Bar</Column>
@@ -2914,7 +2914,7 @@ describe('Table', function () {
               <Cell>Baz 1</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -2927,7 +2927,7 @@ describe('Table', function () {
 
     it('should set aria-sort="ascending" on sorted column header', function () {
       let tree = render(
-        <Table aria-label="Table" sortDescriptor={{column: 'bar', direction: 'ascending'}}>
+        <TableView aria-label="Table" sortDescriptor={{column: 'bar', direction: 'ascending'}}>
           <TableHeader>
             <Column key="foo" allowsSorting>Foo</Column>
             <Column key="bar" allowsSorting>Bar</Column>
@@ -2940,7 +2940,7 @@ describe('Table', function () {
               <Cell>Baz 1</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -2953,7 +2953,7 @@ describe('Table', function () {
 
     it('should set aria-sort="descending" on sorted column header', function () {
       let tree = render(
-        <Table aria-label="Table" sortDescriptor={{column: 'bar', direction: 'descending'}}>
+        <TableView aria-label="Table" sortDescriptor={{column: 'bar', direction: 'descending'}}>
           <TableHeader>
             <Column key="foo" allowsSorting>Foo</Column>
             <Column key="bar" allowsSorting>Bar</Column>
@@ -2966,7 +2966,7 @@ describe('Table', function () {
               <Cell>Baz 1</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -2980,7 +2980,7 @@ describe('Table', function () {
     it('should fire onSortChange when there is no existing sortDescriptor', function () {
       let onSortChange = jest.fn();
       let tree = render(
-        <Table aria-label="Table" onSortChange={onSortChange}>
+        <TableView aria-label="Table" onSortChange={onSortChange}>
           <TableHeader>
             <Column key="foo" allowsSorting>Foo</Column>
             <Column key="bar" allowsSorting>Bar</Column>
@@ -2993,7 +2993,7 @@ describe('Table', function () {
               <Cell>Baz 1</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -3012,7 +3012,7 @@ describe('Table', function () {
     it('should toggle the sort direction from ascending to descending', function () {
       let onSortChange = jest.fn();
       let tree = render(
-        <Table aria-label="Table" sortDescriptor={{column: 'foo', direction: 'ascending'}} onSortChange={onSortChange}>
+        <TableView aria-label="Table" sortDescriptor={{column: 'foo', direction: 'ascending'}} onSortChange={onSortChange}>
           <TableHeader>
             <Column key="foo" allowsSorting>Foo</Column>
             <Column key="bar" allowsSorting>Bar</Column>
@@ -3025,7 +3025,7 @@ describe('Table', function () {
               <Cell>Baz 1</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -3044,7 +3044,7 @@ describe('Table', function () {
     it('should toggle the sort direction from descending to ascending', function () {
       let onSortChange = jest.fn();
       let tree = render(
-        <Table aria-label="Table" sortDescriptor={{column: 'foo', direction: 'descending'}} onSortChange={onSortChange}>
+        <TableView aria-label="Table" sortDescriptor={{column: 'foo', direction: 'descending'}} onSortChange={onSortChange}>
           <TableHeader>
             <Column key="foo" allowsSorting>Foo</Column>
             <Column key="bar" allowsSorting>Bar</Column>
@@ -3057,7 +3057,7 @@ describe('Table', function () {
               <Cell>Baz 1</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -3076,7 +3076,7 @@ describe('Table', function () {
     it('should trigger sorting on a different column', function () {
       let onSortChange = jest.fn();
       let tree = render(
-        <Table aria-label="Table" sortDescriptor={{column: 'foo', direction: 'ascending'}} onSortChange={onSortChange}>
+        <TableView aria-label="Table" sortDescriptor={{column: 'foo', direction: 'ascending'}} onSortChange={onSortChange}>
           <TableHeader>
             <Column key="foo" allowsSorting>Foo</Column>
             <Column key="bar" allowsSorting>Bar</Column>
@@ -3089,7 +3089,7 @@ describe('Table', function () {
               <Cell>Baz 1</Cell>
             </Row>
           </TableBody>
-        </Table>
+        </TableView>
       );
 
       let table = tree.getByRole('grid');
@@ -3109,7 +3109,7 @@ describe('Table', function () {
   describe('layout', function () {
     describe('row heights', function () {
       let renderTable = (props, scale) => render(
-        <Table aria-label="Table" {...props}>
+        <TableView aria-label="Table" {...props}>
           <TableHeader columns={columns}>
             {column => <Column>{column.name}</Column>}
           </TableHeader>
@@ -3120,7 +3120,7 @@ describe('Table', function () {
               </Row>)
             }
           </TableBody>
-        </Table>
+        </TableView>
       , scale);
 
       it('should layout rows with default height', function () {
@@ -3266,7 +3266,7 @@ describe('Table', function () {
           });
 
         let tree = render(
-          <Table aria-label="Table" overflowMode="wrap">
+          <TableView aria-label="Table" overflowMode="wrap">
             <TableHeader columns={nestedColumns}>
               {column => <Column childColumns={column.children}>{column.name}</Column>}
             </TableHeader>
@@ -3277,7 +3277,7 @@ describe('Table', function () {
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
         );
         let rows = tree.getAllByRole('row');
         expect(rows).toHaveLength(5);
@@ -3311,7 +3311,7 @@ describe('Table', function () {
     describe('column widths', function () {
       it('should divide the available width by default', function () {
         let tree = render(
-          <Table aria-label="Table" selectionMode="multiple">
+          <TableView aria-label="Table" selectionMode="multiple">
             <TableHeader columns={columns}>
               {column => <Column>{column.name}</Column>}
             </TableHeader>
@@ -3322,7 +3322,7 @@ describe('Table', function () {
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
         );
 
         let rows = tree.getAllByRole('row');
@@ -3337,7 +3337,7 @@ describe('Table', function () {
 
       it('should support explicitly sized columns', function () {
         let tree = render(
-          <Table aria-label="Table">
+          <TableView aria-label="Table">
             <TableHeader>
               <Column key="foo" width={200}>Foo</Column>
               <Column key="bar" width={500}>Bar</Column>
@@ -3350,7 +3350,7 @@ describe('Table', function () {
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
         );
 
         let rows = tree.getAllByRole('row');
@@ -3364,7 +3364,7 @@ describe('Table', function () {
 
       it('should divide remaining width amoung remaining columns', function () {
         let tree = render(
-          <Table aria-label="Table" selectionMode="multiple">
+          <TableView aria-label="Table" selectionMode="multiple">
             <TableHeader>
               <Column key="foo" width={200}>Foo</Column>
               <Column key="bar">Bar</Column>
@@ -3377,7 +3377,7 @@ describe('Table', function () {
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
         );
 
         let rows = tree.getAllByRole('row');
@@ -3392,7 +3392,7 @@ describe('Table', function () {
 
       it('should support percentage widths', function () {
         let tree = render(
-          <Table aria-label="Table">
+          <TableView aria-label="Table">
             <TableHeader>
               <Column key="foo" width="10%">Foo</Column>
               <Column key="bar" width={500}>Bar</Column>
@@ -3405,7 +3405,7 @@ describe('Table', function () {
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
         );
 
         let rows = tree.getAllByRole('row');
@@ -3419,7 +3419,7 @@ describe('Table', function () {
 
       it('should support minWidth', function () {
         let tree = render(
-          <Table aria-label="Table" selectionMode="multiple">
+          <TableView aria-label="Table" selectionMode="multiple">
             <TableHeader>
               <Column key="foo" width={200}>Foo</Column>
               <Column key="bar" minWidth={500}>Bar</Column>
@@ -3432,7 +3432,7 @@ describe('Table', function () {
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
         );
 
         let rows = tree.getAllByRole('row');
@@ -3447,7 +3447,7 @@ describe('Table', function () {
 
       it('should support maxWidth', function () {
         let tree = render(
-          <Table aria-label="Table">
+          <TableView aria-label="Table">
             <TableHeader>
               <Column key="foo" width={200}>Foo</Column>
               <Column key="bar" maxWidth={300}>Bar</Column>
@@ -3460,7 +3460,7 @@ describe('Table', function () {
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
         );
 
         let rows = tree.getAllByRole('row');
@@ -3475,7 +3475,7 @@ describe('Table', function () {
 
       it('should compute the correct widths for tiered headings with selection', function () {
         let tree = render(
-          <Table aria-label="Table" selectionMode="multiple">
+          <TableView aria-label="Table" selectionMode="multiple">
             <TableHeader columns={nestedColumns}>
               {column => <Column childColumns={column.children}>{column.name}</Column>}
             </TableHeader>
@@ -3486,7 +3486,7 @@ describe('Table', function () {
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
         );
 
         let rows = tree.getAllByRole('row');
@@ -3588,7 +3588,7 @@ describe('Table', function () {
   describe('headerless columns', function () {
 
     let renderTable = (props, scale, showDivider = false) => render(
-      <Table aria-label="Table" data-testid="test" {...props}>
+      <TableView aria-label="Table" data-testid="test" {...props}>
         <TableHeader>
           <Column key="foo">Foo</Column>
           <Column key="addAction" hideHeader showDivider={showDivider}>
@@ -3605,7 +3605,7 @@ describe('Table', function () {
             </Cell>
           </Row>
         </TableBody>
-      </Table>
+      </TableView>
       , scale);
 
     it('renders  table with headerless column with default scale', function () {

From 270158dcb24243554c6e975f6ce5216661cca014 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 10 May 2021 11:01:17 -0700
Subject: [PATCH 02/62] fixing lint

---
 .../actionbar/stories/ActionBar.stories.tsx                | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/actionbar/stories/ActionBar.stories.tsx b/packages/@react-spectrum/actionbar/stories/ActionBar.stories.tsx
index f5352b8e8f0..17e5b99dd90 100644
--- a/packages/@react-spectrum/actionbar/stories/ActionBar.stories.tsx
+++ b/packages/@react-spectrum/actionbar/stories/ActionBar.stories.tsx
@@ -11,7 +11,7 @@
  */
 
 import {ActionBar, ActionBarContainer, Item} from '../';
-import {Cell, Column, Row, Table, TableBody, TableHeader} from '@react-spectrum/table';
+import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
 import React, {useState} from 'react';
 import {Selection} from '@react-types/shared';
 import {storiesOf} from '@storybook/react';
@@ -40,7 +40,7 @@ storiesOf('ActionBar', module)
       const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set());
       return (
         <ActionBarContainer height={300}>
-          <Table
+          <TableView
             selectedKeys={selectedKeys}
             selectionMode="multiple"
             onSelectionChange={(keys) => setSelectedKeys(keys)}>
@@ -54,7 +54,7 @@ storiesOf('ActionBar', module)
                 </Row>)
               }
             </TableBody>
-          </Table>
+          </TableView>
           <ActionBar
             selectedItemCount={selectedKeys === 'all' ? selectedKeys : selectedKeys.size}
             onClearSelection={() => {
@@ -68,4 +68,3 @@ storiesOf('ActionBar', module)
       );
     }
   );
-

From 26abdda63e8b0943a3d80364404f6c72974df809 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Thu, 8 Apr 2021 16:01:19 -0700
Subject: [PATCH 03/62] Table spectrum docs wip

---
 packages/@react-spectrum/table/docs/Table.mdx | 619 ++++++++++++++++++
 .../@react-spectrum/table/src/TableView.tsx   |   3 +
 packages/@react-types/table/src/index.d.ts    |  55 +-
 3 files changed, 674 insertions(+), 3 deletions(-)
 create mode 100644 packages/@react-spectrum/table/docs/Table.mdx

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
new file mode 100644
index 00000000000..4f85287c55a
--- /dev/null
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -0,0 +1,619 @@
+<!-- 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. -->
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/table';
+import tableTypes from 'docs:@react-types/table/src/index.d.ts';
+import {HeaderInfo, PropTable} from '@react-spectrum/docs';
+import packageData from '@react-spectrum/table/package.json';
+
+```jsx import
+import {ActionButton} from '@react-spectrum/button';
+import Add from '@spectrum-icons/workflow/Add';
+import {Cell, Column, Row, Table, TableBody, TableHeader} from '@react-spectrum/table';
+import {Flex} from '@react-spectrum/layout';
+```
+
+---
+category: Table
+keywords: [table, grid]
+---
+
+# Table
+
+<p>{docs.exports.Table.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['Cell', 'Column', 'Row', 'Table', 'TableBody', 'TableHeader']}
+  sourceData={[
+    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/table/'}
+  ]} />
+
+## Example
+```tsx example
+<Flex height="size-2000" width="size-6000">
+  <Table aria-label="Example table with static contents" width="100%" height="100%">
+    <TableHeader>
+      <Column>Name</Column>
+      <Column>Date Modified</Column>
+      <Column>Type</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>Games</Cell>
+        <Cell>6/7/2020</Cell>
+        <Cell>File folder</Cell>
+      </Row>
+      <Row>
+        <Cell>Program Files</Cell>
+        <Cell>4/7/2021</Cell>
+        <Cell>File folder</Cell>
+      </Row>
+      <Row>
+        <Cell>bootmgr</Cell>
+        <Cell>11/20/2010</Cell>
+        <Cell>System file</Cell>
+      </Row>
+      <Row>
+        <Cell>log.txt</Cell>
+        <Cell>1/18/2016</Cell>
+        <Cell>Text Document</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+## Content
+Table expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API, accepting both static and dynamic collections.
+The TableHeader accepts either static Columns or a `columns` prop with a renderer function for dynamic rendering. Similarly, TableBody accepts either static Rows or a `items` prop with a renderer function.
+Row follows the same pattern, accepting Cells as children instead.
+
+Basic usage of Table, seen in the example above, shows multiple Columns and Rows populated with strings and Cells respectively. Static collections, as in this example, can be used when the contents of the Table is known ahead of time.
+
+Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows Table to automatically cache the rendering of each item,
+which dramatically improves performance. Be sure to match each Column's key with an identical property in the Row object.
+
+```tsx example
+function Example() {
+  let columns = [
+    {name: 'Name', uid: 'name'},
+    {name: 'Date Modified', uid: 'date'},
+    {name: 'Type', uid: 'type'}
+  ];
+
+  let rows = [
+    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
+    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
+    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
+    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
+  ];
+
+  return (
+    <Flex height="size-2000" width="size-6000">
+      <Table aria-label="Example table with dynamic content" width="100%" height="100%">
+        <TableHeader columns={columns}>
+          {column => (
+            <Column key={column.uid}>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={rows}>
+          {item => (
+            <Row key={item.id}>
+              {/* Note this key is equal to the key of the the column,
+              not the key set on the Row prior */}
+              {key => <Cell>{item[key]}</Cell>}
+            </Row>
+          )}
+        </TableBody>
+      </Table>
+    </Flex>
+  );
+}
+```
+
+### Internationalization
+To internationalize a Table, all text content within the Table should be replaced with localized strings. This includes all `aria-labels` provided to the Table, Columns, Rows, and Cells.
+For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of Table is automatically flipped.
+
+## Labeling
+### Accessibility
+An `aria-label` must be provided to the Table for accessibility. If the Table is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
+
+## Asynchronous loading
+Table supports loading data asynchronously, and will display a progress circle reflecting the current load state,
+set by the `isLoading` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
+
+This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle loading the data.
+See the docs for more information.
+
+```tsx example
+import {useAsyncList} from '@react-stately/data';
+
+function AsyncTable() {
+  let columns = [
+    {name: 'Name', key: 'name'},
+    {name: 'Height', key: 'height'},
+    {name: 'Mass', key: 'mass'}
+  ];
+
+  let list = useAsyncList({
+    getKey: (item) => item.name,
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+
+      let res = await fetch(cursor || `https://swapi.dev/api/people/?search=`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+
+  return (
+    <Flex height="size-2000" width="size-6000">
+      <Table aria-label="example async loading table" height="100%" width="100%">
+        <TableHeader columns={columns}>
+          {(column) => (
+            <Column>{column.name}</Column>
+          )}
+        </TableHeader>
+        <TableBody
+          items={list.items}
+          isLoading={list.isLoading}
+          onLoadMore={list.loadMore}>
+          {(item) => (
+            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
+          )}
+        </TableBody>
+      </Table>
+    </Flex>
+  );
+}
+```
+
+## Events
+
+### Selection
+Table supports multiple selection modes. By default, selection is disabled, however this can be changed using the `selectionMode` prop.
+Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the  value of the selected keys must match the `key` prop of the Row.
+
+The example below demonstrates how one would use `defaultSelectedKeys`.
+
+```tsx example
+<Flex height="size-2000" width="size-6000">
+  <Table aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
+    <TableHeader>
+      <Column>Name</Column>
+      <Column>Type</Column>
+      <Column>Level</Column>
+    </TableHeader>
+    <TableBody>
+      <Row key="1">
+        <Cell>Charizard</Cell>
+        <Cell>Fire, Flying</Cell>
+        <Cell>67</Cell>
+      </Row>
+      <Row key="2">
+        <Cell>Blastoise</Cell>
+        <Cell>Water</Cell>
+        <Cell>56</Cell>
+      </Row>
+      <Row key="3">
+        <Cell>Venusaur</Cell>
+        <Cell>Grass, Poison</Cell>
+        <Cell>83</Cell>
+      </Row>
+      <Row key="4">
+        <Cell>Pikachu</Cell>
+        <Cell>Electric</Cell>
+        <Cell>100</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
+be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
+
+Here is how you would control selection for the above example.
+
+```tsx example export=true
+function PokemonTable(props) {
+  let columns = [
+    {name: 'Name', uid: 'name'},
+    {name: 'Type', uid: 'type'},
+    {name: 'Level', uid: 'level'}
+  ];
+
+  let rows = [
+    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
+    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
+    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
+  ];
+
+  let [selected, setSelected] = React.useState(new Set(['2']));
+
+  return (
+    <Flex height="size-2000" width="size-6000">
+      <Table aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
+        <TableHeader columns={columns}>
+          {column => (
+            <Column key={column.uid}>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={rows}>
+          {item => (
+            <Row key={item.id}>
+              {key => <Cell>{item[key]}</Cell>}
+            </Row>
+          )}
+        </TableBody>
+      </Table>
+    </Flex>
+  );
+}
+```
+
+Multiple selection can be enabled by setting `selectionMode` to `multiple`.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="multiple" />
+```
+
+Table also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the Table selected at all times.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="single" disallowEmptySelection />
+```
+
+### Sorting
+Table supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
+the `allowsSorting` prop. The Table accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
+When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
+the `SortDescriptor` appropriately.
+
+This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
+See the docs for more information.
+
+```tsx example
+function AsyncSortTable() {
+  let columns = [
+    {name: 'Name', key: 'name'},
+    {name: 'Height', key: 'height'},
+    {name: 'Mass', key: 'mass'}
+  ];
+
+  let list = useAsyncList({
+    getKey: (item) => item.name,
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+
+      let res = await fetch(cursor || `https://swapi.dev/api/people/?search`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    },
+    async sort({items, sortDescriptor}) {
+      return {
+        items: items.slice().sort((a, b) => {
+          let cmp = a[sortDescriptor.column] < b[sortDescriptor.column] ? -1 : 1;
+          if (sortDescriptor.direction === 'descending') {
+            cmp *= -1;
+          }
+          return cmp;
+        })
+      };
+    }
+  });
+
+  return (
+    <Flex height="size-2000" width="size-6000">
+      <Table aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
+        <TableHeader columns={columns}>
+          {(column) => (
+            <Column allowsSorting>{column.name}</Column>
+          )}
+        </TableHeader>
+        <TableBody
+          items={list.items}
+          isLoading={list.isLoading}
+          onLoadMore={list.loadMore}>
+          {(item) => (
+            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
+          )}
+        </TableBody>
+      </Table>
+    </Flex>
+  );
+}
+```
+
+## Props
+
+### Table props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.SpectrumTableProps.properties))
+  }
+}} links={tableTypes.links} />
+
+### Table header props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.TableHeaderProps.properties))
+  }
+}} links={tableTypes.links} />
+
+// TODO maybe don't need this, explain through examples?
+
+### Column props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.SpectrumColumnProps.properties))
+  }
+}} links={tableTypes.links} />
+
+// TODO maybe don't need this, explain through examples? Also might need to comment out some of the column types if they aren't supported yet
+
+### Table body props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.TableBodyProps.properties))
+  }
+}} links={tableTypes.links} />
+
+// TODO maybe don't need this, explain through examples?
+
+### Row props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.RowProps.properties))
+  }
+}} links={tableTypes.links} />
+
+// TODO maybe don't need this, explain through examples?
+
+### Cell props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.CellProps.properties))
+  }
+}} links={tableTypes.links} />
+
+// TODO maybe don't need this, explain through examples?
+
+
+## Visual options
+
+### Hide header
+Individual column headers can be hidden by providing the `hideHeader` prop to the Column. A tooltip is rendered when the column header is focused
+to compensate for the lack of a visual title.
+
+```tsx example export=true
+function TableExample(props) {
+  let columns = [
+    {name: 'First Name', key: 'firstName'},
+    {name: 'Last Name', key: 'lastName'},
+    {name: 'Add Info', key: 'addInfo'},
+    {name: 'Age', key: 'age'}
+  ];
+
+  let rows = [
+    {id: '1', firstName: 'John', lastName: 'Doe', age: '45'},
+    {id: '2', firstName: 'Jane', lastName: 'Doe', age: '37'},
+    {id: '3', firstName: 'Joe', lastName: 'Schmoe', age: '67'},
+    {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'},
+    {id: '5', firstName: 'Longgggg Wrapping', lastName: 'Name', age: '56'}
+  ];
+
+  return (
+    <Flex height="size-2000" width="size-6000">
+      <Table aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
+        <TableHeader columns={columns}>
+          {column => (
+            <Column
+              hideHeader={column.key === 'addInfo'}
+              align={column.key === 'age' ? 'end' : 'start'}
+              showDivider={column.key === 'addInfo'}>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={rows}>
+          {item =>
+            (<Row key={item.id}>
+              {key =>
+                key === 'addInfo'
+                ? <Cell><ActionButton isQuiet><Add /></ActionButton></Cell>
+                : <Cell>{item[key]}</Cell>
+              }
+            </Row>)
+          }
+        </TableBody>
+      </Table>
+    </Flex>
+  );
+}
+```
+
+### Quiet
+[View guidelines](https://spectrum.adobe.com/page/table/#Standard-or-quiet)
+
+```tsx example
+// Using same setup as hide header example
+<TableExample isQuiet />
+```
+
+### Disabled
+Use the `disabledKeys` prop to specify which rows to disable in the Table.
+
+```tsx example
+// Using same setup as hide header example
+<TableExample disabledKeys={['2', '3']} />
+```
+
+### Density
+The amount of vertical padding that each row contains can be modified by providing the `density` prop.
+
+```tsx example
+// Using same setup as hide header example
+<Flex direction="column" gap="size-300">
+  <TableExample density="compact" />
+  <TableExample density="spacious" />
+</Flex>
+```
+
+### Overflow mode
+By default, text content that overflows its table cell will be truncated. You can have it wrap instead by passing `overflowMode="wrap"`
+to the Table.
+
+```tsx example
+// Using same setup as hide header example
+<TableExample overflowMode="wrap" />
+```
+
+### Column alignment
+[View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
+
+```tsx example
+<Flex height="size-2000" width="size-6000">
+  <Table aria-label="Example table for column alignment" width="100%" height="100%">
+    <TableHeader>
+      <Column align="start">Name</Column>
+      <Column align="center">Type</Column>
+      <Column align="end">Size</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+### Empty state
+Use the `renderEmptyState` prop to customize what the Table will display if there are no rows provided.
+
+```tsx example
+import {Content} from '@react-spectrum/view';
+import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
+import {Heading} from '@react-spectrum/text';
+
+function renderEmptyState() {
+  return (
+    <IllustratedMessage>
+      <svg width="150" height="103" viewBox="0 0 150 103">
+        <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" />
+      </svg>
+      <Heading>No results</Heading>
+      <Content>No results found</Content>
+    </IllustratedMessage>
+  );
+}
+
+<Flex height="size-6000" width="size-6000">
+  <Table aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
+    <TableHeader>
+      <Column>Name</Column>
+      <Column>Type</Column>
+      <Column>Size</Column>
+    </TableHeader>
+    <TableBody>
+      {[]}
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+### Nested columns
+// TODO add description here
+
+```tsx example
+<Flex height="size-2000" width="size-6000">
+  <Table aria-label="Example table for column alignment" width="100%" height="100%">
+    <TableHeader>
+      <Column title="OS (C:)">
+        <Column align="start">Name</Column>
+        <Column align="center">Type</Column>
+        <Column align="end">Size</Column>
+      </Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+### Focusable cells
+// TODO add description here
+
+### Column widths
+// TODO add description here
+
+### Column dividers
+[View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
+
+
+TODO: // Other column specific props like isRowHeader labeling
+TODO: // Modify all numeric columns to align end properly
diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx
index e5d6b521323..399981af0cd 100644
--- a/packages/@react-spectrum/table/src/TableView.tsx
+++ b/packages/@react-spectrum/table/src/TableView.tsx
@@ -695,5 +695,8 @@ function CenteredWrapper({children}) {
   );
 }
 
+/**
+ * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
+ */
 const _TableView = React.forwardRef(TableView);
 export {_TableView as TableView};
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index 636a6f2767d..b1a7e0a30a9 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -15,64 +15,113 @@ import {GridCollection, GridNode} from '@react-types/grid';
 import {Key, ReactElement, ReactNode} from 'react';
 
 export interface TableProps<T> extends MultipleSelection, Sortable {
-  children: ReactElement<TableHeaderProps<T> | TableBodyProps<T> | SectionProps<T> | RowProps<T>>[],
+  /** The elements that make up the Table. Includes the TableHeader, TableBody, Columns, and Rows. TODO: I think this shouldn't have Section and row? Also need to fix prop table rendering for this */
+  children: ReactElement<TableHeaderProps<T> | TableBodyProps<T>>[],
+  /** A list of row keys to disable. */
   disabledKeys?: Iterable<Key>
 }
 
 export interface SpectrumTableProps<T> extends TableProps<T>, DOMProps, AriaLabelingProps, StyleProps {
+  /**
+   * Sets the amount of vertical padding within each Table cell.
+   * @default 'regular'
+   */
   density?: 'compact' | 'regular' | 'spacious',
+  /**
+   * Sets the overflow behavior for the Table cell contents.
+   * @default 'truncate'
+   */
   overflowMode?: 'wrap' | 'truncate',
+  /** Whether the Table should be displayed with a quiet style. */
   isQuiet?: boolean,
+  /** Sets what the Table should render when there is no content to display. */
   renderEmptyState?: () => JSX.Element
 }
 
 export interface TableHeaderProps<T> {
+  /** A list of Table columns. */
   columns?: T[],
+  /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop.` */
   children: ColumnElement<T> | ColumnElement<T>[] | ColumnRenderer<T>
 }
 
 type ColumnElement<T> = ReactElement<ColumnProps<T>>;
 type ColumnRenderer<T> = (item: T) => ColumnElement<T>;
 export interface ColumnProps<T> {
+  /** Rendered contents of the column if `children` contains child columns. */
   title?: ReactNode,
+  /** Static child columns or content to render as the column header. */
   children: ReactNode | ColumnElement<T> | ColumnElement<T>[],
+  /** A list of child columns used when dynamically rendering nested child columns. */
   childColumns?: T[],
+  // TODO Not sure if this is a thing, doesn't seem to get passed through?
+  /** An accessibility label for the column. */
   'aria-label'?: string,
+  /** The width of the column. */
   width?: number | string,
+  /** The minimum width of the column. */
   minWidth?: number | string,
+  /** The maximum width of the column. */
   maxWidth?: number | string,
+  /** The default width of the column. TODO: is this even a thing? If so, why? */
   defaultWidth?: number | string
 }
 
 // TODO: how to support these in CollectionBuilder...
 export interface SpectrumColumnProps<T> extends ColumnProps<T> {
+  /**
+   * The alignment of the column's contents relative to its allotted width.
+   * @default 'start'
+   */
   align?: 'start' | 'center' | 'end',
-  allowsResizing?: boolean,
-  allowsReordering?: boolean,
+  // /** TODO: Don't think this is implemented yet */
+  // allowsResizing?: boolean,
+  // /** TODO: Don't think this is implemented yet */
+  // allowsReordering?: boolean,
+  /** Whether the column allows sorting. */
   allowsSorting?: boolean,
+  /** Whether the column should stick to the viewport when scrolling. TODO check this */
   isSticky?: boolean, // shouldStick??
+  /** Whether the column is a row header and should be announced. TODO check this  */
   isRowHeader?: boolean,
+  /** Whether the column should render a divider between it and the next column. */
   showDivider?: boolean,
+  /**
+   * Whether the column should hide its header text. A tooltip with the column's header text
+   * will be displayed when the column header is focused instead.
+   */
   hideHeader?: boolean
 }
 
 export interface TableBodyProps<T> extends AsyncLoadable {
+  /** The contents of the table body. Supports static items or a function for dynamic rendering. */
   children: CollectionChildren<T>,
+  /** A list of row objects in the table body used when dynamically rendering rows. */
   items?: Iterable<T>
 }
 
 export interface RowProps<T> {
   // treeble case?
+  /** A list of child item objects used when dynamically rendering row children. */
   childItems?: Iterable<T>,
+  /** Whether this row has children, even if not loaded yet. */
   hasChildItems?: boolean,
+  /** Rendered contents of the row or row child items. */
   children: CellElement | CellElement[] | CellRenderer,
+  /** A string representation of the row's contents, used for features like typeahead. */
   textValue?: string, // ???
+  // TODO Not sure if this is a thing, doesn't seem to get passed through?
+  /** An accessibility label for the row. */
   'aria-label'?: string // ???
 }
 
 export interface CellProps {
+  /** The contents of the cell. */
   children: ReactNode,
+  /** A string representation of the cell's contents, used for features like typeahead. */
   textValue?: string,
+  // TODO Not sure if this is a thing, doesn't seem to get passed through?
+  /** An accessibility label for the cell. */
   'aria-label'?: string
 }
 

From 6e8c34d61beee2b9d622aad318bbd22ebbc07577 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Thu, 8 Apr 2021 17:12:10 -0700
Subject: [PATCH 04/62] fixing alignment and ordering

---
 packages/@react-spectrum/table/docs/Table.mdx | 321 +++++++++++++-----
 1 file changed, 231 insertions(+), 90 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index 4f85287c55a..f4ecff7078e 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -44,29 +44,29 @@ keywords: [table, grid]
   <Table aria-label="Example table with static contents" width="100%" height="100%">
     <TableHeader>
       <Column>Name</Column>
-      <Column>Date Modified</Column>
       <Column>Type</Column>
+      <Column align="end">Date Modified</Column>
     </TableHeader>
     <TableBody>
       <Row>
         <Cell>Games</Cell>
-        <Cell>6/7/2020</Cell>
         <Cell>File folder</Cell>
+        <Cell>6/7/2020</Cell>
       </Row>
       <Row>
         <Cell>Program Files</Cell>
-        <Cell>4/7/2021</Cell>
         <Cell>File folder</Cell>
+        <Cell>4/7/2021</Cell>
       </Row>
       <Row>
         <Cell>bootmgr</Cell>
-        <Cell>11/20/2010</Cell>
         <Cell>System file</Cell>
+        <Cell>11/20/2010</Cell>
       </Row>
       <Row>
         <Cell>log.txt</Cell>
-        <Cell>1/18/2016</Cell>
         <Cell>Text Document</Cell>
+        <Cell>1/18/2016</Cell>
       </Row>
     </TableBody>
   </Table>
@@ -87,8 +87,8 @@ which dramatically improves performance. Be sure to match each Column's key with
 function Example() {
   let columns = [
     {name: 'Name', uid: 'name'},
-    {name: 'Date Modified', uid: 'date'},
-    {name: 'Type', uid: 'type'}
+    {name: 'Type', uid: 'type'},
+    {name: 'Date Modified', uid: 'date'}
   ];
 
   let rows = [
@@ -103,7 +103,7 @@ function Example() {
       <Table aria-label="Example table with dynamic content" width="100%" height="100%">
         <TableHeader columns={columns}>
           {column => (
-            <Column key={column.uid}>
+            <Column key={column.uid} align={column.uid === 'date' ? 'end' : 'start'}>
               {column.name}
             </Column>
           )}
@@ -170,7 +170,9 @@ function AsyncTable() {
       <Table aria-label="example async loading table" height="100%" width="100%">
         <TableHeader columns={columns}>
           {(column) => (
-            <Column>{column.name}</Column>
+            <Column align={column.key !== 'name' ? 'end' : 'start'}>
+              {column.name}
+            </Column>
           )}
         </TableHeader>
         <TableBody
@@ -201,7 +203,7 @@ The example below demonstrates how one would use `defaultSelectedKeys`.
     <TableHeader>
       <Column>Name</Column>
       <Column>Type</Column>
-      <Column>Level</Column>
+      <Column align="end">Level</Column>
     </TableHeader>
     <TableBody>
       <Row key="1">
@@ -256,7 +258,7 @@ function PokemonTable(props) {
       <Table aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
         <TableHeader columns={columns}>
           {column => (
-            <Column key={column.uid}>
+            <Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
               {column.name}
             </Column>
           )}
@@ -338,7 +340,9 @@ function AsyncSortTable() {
       <Table aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
         <TableHeader columns={columns}>
           {(column) => (
-            <Column allowsSorting>{column.name}</Column>
+            <Column allowsSorting align={column.key !== 'name' ? 'end' : 'start'}>
+              {column.name}
+            </Column>
           )}
         </TableHeader>
         <TableBody
@@ -417,6 +421,220 @@ function AsyncSortTable() {
 
 
 ## Visual options
+### Focusable cells
+```tsx example
+import Edit from '@spectrum-icons/workflow/Edit';
+import Delete from '@spectrum-icons/workflow/Delete';
+
+<Flex height="size-2000" width="size-3000">
+  <Table aria-label="Example table for focusable cells" width="100%" height="100%">
+    <TableHeader>
+      <Column>Name</Column>
+      <Column hideHeader>Add</Column>
+      <Column hideHeader>Delete</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>Red Panda</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+      <Row>
+        <Cell>Harbor Seal</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+      <Row>
+        <Cell>Groundhog</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+      <Row>
+        <Cell>Otter</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+### Column widths
+Columns support three different width props: `minWidth`, `width`, and `maxWidth`.
+
+```tsx example
+<Flex height="size-2000" width="size-6000">
+  <Table aria-label="Example table for column widths" width="100%" height="100%">
+    <TableHeader>
+      <Column maxWidth={300} align="start">Name</Column>
+      <Column width={80}>Type</Column>
+      <Column minWidth={100} align="end">Size</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Welcome</Cell>
+        <Cell>TXT</Cell>
+        <Cell>24 KB</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+### Column dividers
+[View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
+
+```tsx examples
+<Flex height="size-2000" width="size-6000">
+  <Table aria-label="Example table for column dividers" width="100%" height="100%">
+    <TableHeader>
+      <Column align="start" showDivider>Name</Column>
+      <Column>Type</Column>
+      <Column align="end">Size</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Welcome</Cell>
+        <Cell>TXT</Cell>
+        <Cell>24 KB</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+### Column alignment
+[View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
+
+```tsx example
+<Flex height="size-2000" width="size-6000">
+  <Table aria-label="Example table for column alignment" width="100%" height="100%">
+    <TableHeader>
+      <Column align="start">Name</Column>
+      <Column align="center">Type</Column>
+      <Column align="end">Size</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Welcome</Cell>
+        <Cell>TXT</Cell>
+        <Cell>24 KB</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
+### Nested columns
+Table supports nesting columns, allowing you to render "tiered" column headers.
+
+```tsx example
+<Flex height="size-2000" width="size-6000">
+  <Table aria-label="Example table for nested columns" width="100%" height="100%">
+    <TableHeader>
+      <Column title="OS (C:)">
+        <Column align="start">Name</Column>
+        <Column>Type</Column>
+        <Column align="end">Size</Column>
+      </Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
 
 ### Hide header
 Individual column headers can be hidden by providing the `hideHeader` prop to the Column. A tooltip is rendered when the column header is focused
@@ -505,38 +723,6 @@ to the Table.
 <TableExample overflowMode="wrap" />
 ```
 
-### Column alignment
-[View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
-
-```tsx example
-<Flex height="size-2000" width="size-6000">
-  <Table aria-label="Example table for column alignment" width="100%" height="100%">
-    <TableHeader>
-      <Column align="start">Name</Column>
-      <Column align="center">Type</Column>
-      <Column align="end">Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-    </TableBody>
-  </Table>
-</Flex>
-```
-
 ### Empty state
 Use the `renderEmptyState` prop to customize what the Table will display if there are no rows provided.
 
@@ -571,49 +757,4 @@ function renderEmptyState() {
 </Flex>
 ```
 
-### Nested columns
-// TODO add description here
-
-```tsx example
-<Flex height="size-2000" width="size-6000">
-  <Table aria-label="Example table for column alignment" width="100%" height="100%">
-    <TableHeader>
-      <Column title="OS (C:)">
-        <Column align="start">Name</Column>
-        <Column align="center">Type</Column>
-        <Column align="end">Size</Column>
-      </Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-    </TableBody>
-  </Table>
-</Flex>
-```
-
-### Focusable cells
-// TODO add description here
-
-### Column widths
-// TODO add description here
-
-### Column dividers
-[View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
-
-
-TODO: // Other column specific props like isRowHeader labeling
-TODO: // Modify all numeric columns to align end properly
+TODO: // Other column specific props like isRowHeader labeling, perhaps accessibility

From 54d7c6ceb124e1679b2faf090b343c8fc4c15e35 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Fri, 9 Apr 2021 11:27:27 -0700
Subject: [PATCH 05/62] adding isRowHeader example, removing props that are't
 implemented

---
 packages/@react-spectrum/table/docs/Table.mdx | 64 ++++++++++++++-----
 packages/@react-types/table/src/index.d.ts    | 23 +++----
 2 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index f4ecff7078e..fdb0631133e 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -40,7 +40,7 @@ keywords: [table, grid]
 
 ## Example
 ```tsx example
-<Flex height="size-2000" width="size-6000">
+<Flex width="size-6000">
   <Table aria-label="Example table with static contents" width="100%" height="100%">
     <TableHeader>
       <Column>Name</Column>
@@ -99,7 +99,7 @@ function Example() {
   ];
 
   return (
-    <Flex height="size-2000" width="size-6000">
+    <Flex width="size-6000">
       <Table aria-label="Example table with dynamic content" width="100%" height="100%">
         <TableHeader columns={columns}>
           {column => (
@@ -124,13 +124,47 @@ function Example() {
 ```
 
 ### Internationalization
-To internationalize a Table, all text content within the Table should be replaced with localized strings. This includes all `aria-labels` provided to the Table, Columns, Rows, and Cells.
+To internationalize a Table, all text content within the Table should be replaced with localized strings. This includes the `aria-label` provided to the Table if any.
 For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of Table is automatically flipped.
 
 ## Labeling
 ### Accessibility
 An `aria-label` must be provided to the Table for accessibility. If the Table is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
 
+By default, the first column of the Table is used as the row header and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
+to one or more Columns, allowing you to customize which columns should label the rows of the Table.
+
+The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").
+
+```tsx example
+<Flex width="size-6000">
+  <Table aria-label="Example table with static contents" width="100%" height="100%">
+    <TableHeader>
+      <Column isRowHeader>First Name</Column>
+      <Column isRowHeader>Last Name</Column>
+      <Column align="end">Age</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>John</Cell>
+        <Cell>Doe</Cell>
+        <Cell>45</Cell>
+      </Row>
+      <Row>
+        <Cell>Jane</Cell>
+        <Cell>Doe</Cell>
+        <Cell>37</Cell>
+      </Row>
+      <Row>
+        <Cell>Joe</Cell>
+        <Cell>Schmoe</Cell>
+        <Cell>67</Cell>
+      </Row>
+    </TableBody>
+  </Table>
+</Flex>
+```
+
 ## Asynchronous loading
 Table supports loading data asynchronously, and will display a progress circle reflecting the current load state,
 set by the `isLoading` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
@@ -166,7 +200,7 @@ function AsyncTable() {
   });
 
   return (
-    <Flex height="size-2000" width="size-6000">
+    <Flex width="size-6000">
       <Table aria-label="example async loading table" height="100%" width="100%">
         <TableHeader columns={columns}>
           {(column) => (
@@ -198,7 +232,7 @@ Use `defaultSelectedKeys` to provide a default set of selected rows. Note that t
 The example below demonstrates how one would use `defaultSelectedKeys`.
 
 ```tsx example
-<Flex height="size-2000" width="size-6000">
+<Flex width="size-6000">
   <Table aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
     <TableHeader>
       <Column>Name</Column>
@@ -254,7 +288,7 @@ function PokemonTable(props) {
   let [selected, setSelected] = React.useState(new Set(['2']));
 
   return (
-    <Flex height="size-2000" width="size-6000">
+    <Flex width="size-6000">
       <Table aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
         <TableHeader columns={columns}>
           {column => (
@@ -336,7 +370,7 @@ function AsyncSortTable() {
   });
 
   return (
-    <Flex height="size-2000" width="size-6000">
+    <Flex width="size-6000">
       <Table aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
         <TableHeader columns={columns}>
           {(column) => (
@@ -426,7 +460,7 @@ function AsyncSortTable() {
 import Edit from '@spectrum-icons/workflow/Edit';
 import Delete from '@spectrum-icons/workflow/Delete';
 
-<Flex height="size-2000" width="size-3000">
+<Flex width="size-3000">
   <Table aria-label="Example table for focusable cells" width="100%" height="100%">
     <TableHeader>
       <Column>Name</Column>
@@ -495,7 +529,7 @@ import Delete from '@spectrum-icons/workflow/Delete';
 Columns support three different width props: `minWidth`, `width`, and `maxWidth`.
 
 ```tsx example
-<Flex height="size-2000" width="size-6000">
+<Flex width="size-6000">
   <Table aria-label="Example table for column widths" width="100%" height="100%">
     <TableHeader>
       <Column maxWidth={300} align="start">Name</Column>
@@ -532,7 +566,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 [View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
 
 ```tsx examples
-<Flex height="size-2000" width="size-6000">
+<Flex width="size-6000">
   <Table aria-label="Example table for column dividers" width="100%" height="100%">
     <TableHeader>
       <Column align="start" showDivider>Name</Column>
@@ -569,7 +603,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 [View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
 
 ```tsx example
-<Flex height="size-2000" width="size-6000">
+<Flex width="size-6000">
   <Table aria-label="Example table for column alignment" width="100%" height="100%">
     <TableHeader>
       <Column align="start">Name</Column>
@@ -606,7 +640,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 Table supports nesting columns, allowing you to render "tiered" column headers.
 
 ```tsx example
-<Flex height="size-2000" width="size-6000">
+<Flex width="size-6000">
   <Table aria-label="Example table for nested columns" width="100%" height="100%">
     <TableHeader>
       <Column title="OS (C:)">
@@ -658,7 +692,7 @@ function TableExample(props) {
   ];
 
   return (
-    <Flex height="size-2000" width="size-6000">
+    <Flex width="size-6000">
       <Table aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
         <TableHeader columns={columns}>
           {column => (
@@ -743,7 +777,7 @@ function renderEmptyState() {
   );
 }
 
-<Flex height="size-6000" width="size-6000">
+<Flex width="size-6000">
   <Table aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
     <TableHeader>
       <Column>Name</Column>
@@ -756,5 +790,3 @@ function renderEmptyState() {
   </Table>
 </Flex>
 ```
-
-TODO: // Other column specific props like isRowHeader labeling, perhaps accessibility
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index b1a7e0a30a9..09d38c6f783 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -10,12 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, AsyncLoadable, CollectionChildren, DOMProps, MultipleSelection, SectionProps, Sortable, StyleProps} from '@react-types/shared';
+import {AriaLabelingProps, AsyncLoadable, CollectionChildren, DOMProps, MultipleSelection, Sortable, StyleProps} from '@react-types/shared';
 import {GridCollection, GridNode} from '@react-types/grid';
 import {Key, ReactElement, ReactNode} from 'react';
 
 export interface TableProps<T> extends MultipleSelection, Sortable {
-  /** The elements that make up the Table. Includes the TableHeader, TableBody, Columns, and Rows. TODO: I think this shouldn't have Section and row? Also need to fix prop table rendering for this */
+  // TODO: I think this shouldn't have Section and row? Also need to fix prop table rendering for this
+  /** The elements that make up the Table. Includes the TableHeader, TableBody, Columns, and Rows. */
   children: ReactElement<TableHeaderProps<T> | TableBodyProps<T>>[],
   /** A list of row keys to disable. */
   disabledKeys?: Iterable<Key>
@@ -41,7 +42,7 @@ export interface SpectrumTableProps<T> extends TableProps<T>, DOMProps, AriaLabe
 export interface TableHeaderProps<T> {
   /** A list of Table columns. */
   columns?: T[],
-  /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop.` */
+  /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
   children: ColumnElement<T> | ColumnElement<T>[] | ColumnRenderer<T>
 }
 
@@ -56,7 +57,7 @@ export interface ColumnProps<T> {
   childColumns?: T[],
   // TODO Not sure if this is a thing, doesn't seem to get passed through?
   /** An accessibility label for the column. */
-  'aria-label'?: string,
+  // 'aria-label'?: string,
   /** The width of the column. */
   width?: number | string,
   /** The minimum width of the column. */
@@ -80,9 +81,9 @@ export interface SpectrumColumnProps<T> extends ColumnProps<T> {
   // allowsReordering?: boolean,
   /** Whether the column allows sorting. */
   allowsSorting?: boolean,
-  /** Whether the column should stick to the viewport when scrolling. TODO check this */
-  isSticky?: boolean, // shouldStick??
-  /** Whether the column is a row header and should be announced. TODO check this  */
+  // /** Whether the column should stick to the viewport when scrolling. */
+  // isSticky?: boolean, // shouldStick?? Not implemented yet?
+  /** Whether a column is a row header and should be announced by assistive technology during row navigation. */
   isRowHeader?: boolean,
   /** Whether the column should render a divider between it and the next column. */
   showDivider?: boolean,
@@ -109,20 +110,20 @@ export interface RowProps<T> {
   /** Rendered contents of the row or row child items. */
   children: CellElement | CellElement[] | CellRenderer,
   /** A string representation of the row's contents, used for features like typeahead. */
-  textValue?: string, // ???
+  textValue?: string // ???
   // TODO Not sure if this is a thing, doesn't seem to get passed through?
   /** An accessibility label for the row. */
-  'aria-label'?: string // ???
+  // 'aria-label'?: string // ???
 }
 
 export interface CellProps {
   /** The contents of the cell. */
   children: ReactNode,
   /** A string representation of the cell's contents, used for features like typeahead. */
-  textValue?: string,
+  textValue?: string
   // TODO Not sure if this is a thing, doesn't seem to get passed through?
   /** An accessibility label for the cell. */
-  'aria-label'?: string
+  // 'aria-label'?: string
 }
 
 export type CellElement = ReactElement<CellProps>;

From a7c9d5ce3c12826ca214a8188f80a7014ee16db5 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Fri, 9 Apr 2021 11:32:09 -0700
Subject: [PATCH 06/62] forgot to remove extra comments

---
 packages/@react-spectrum/table/docs/Table.mdx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index fdb0631133e..a79c072a12e 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -411,8 +411,6 @@ function AsyncSortTable() {
   }
 }} links={tableTypes.links} />
 
-// TODO maybe don't need this, explain through examples?
-
 ### Column props
 
 <PropTable component={{
@@ -421,8 +419,6 @@ function AsyncSortTable() {
   }
 }} links={tableTypes.links} />
 
-// TODO maybe don't need this, explain through examples? Also might need to comment out some of the column types if they aren't supported yet
-
 ### Table body props
 
 <PropTable component={{
@@ -431,8 +427,6 @@ function AsyncSortTable() {
   }
 }} links={tableTypes.links} />
 
-// TODO maybe don't need this, explain through examples?
-
 ### Row props
 
 <PropTable component={{
@@ -441,8 +435,6 @@ function AsyncSortTable() {
   }
 }} links={tableTypes.links} />
 
-// TODO maybe don't need this, explain through examples?
-
 ### Cell props
 
 <PropTable component={{
@@ -451,9 +443,6 @@ function AsyncSortTable() {
   }
 }} links={tableTypes.links} />
 
-// TODO maybe don't need this, explain through examples?
-
-
 ## Visual options
 ### Focusable cells
 ```tsx example

From 1d6b42c0660d84779d9ad83fcbc98fff42cab704 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Fri, 9 Apr 2021 12:19:43 -0700
Subject: [PATCH 07/62] more polish

---
 packages/@react-spectrum/table/docs/Table.mdx | 40 ++++++++++---------
 packages/@react-types/table/src/index.d.ts    |  2 +-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index a79c072a12e..8def238fb9b 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -40,7 +40,7 @@ keywords: [table, grid]
 
 ## Example
 ```tsx example
-<Flex width="size-6000">
+<Flex flexGrow={1} maxWidth="size-6000">
   <Table aria-label="Example table with static contents" width="100%" height="100%">
     <TableHeader>
       <Column>Name</Column>
@@ -99,7 +99,7 @@ function Example() {
   ];
 
   return (
-    <Flex width="size-6000">
+    <Flex flexGrow={1} maxWidth="size-6000">
       <Table aria-label="Example table with dynamic content" width="100%" height="100%">
         <TableHeader columns={columns}>
           {column => (
@@ -137,7 +137,7 @@ to one or more Columns, allowing you to customize which columns should label the
 The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").
 
 ```tsx example
-<Flex width="size-6000">
+<Flex flexGrow={1} maxWidth="size-3000">
   <Table aria-label="Example table with static contents" width="100%" height="100%">
     <TableHeader>
       <Column isRowHeader>First Name</Column>
@@ -179,7 +179,8 @@ function AsyncTable() {
   let columns = [
     {name: 'Name', key: 'name'},
     {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'}
+    {name: 'Mass', key: 'mass'},
+    {name: 'Birth Year', key: 'birth_year'}
   ];
 
   let list = useAsyncList({
@@ -200,7 +201,7 @@ function AsyncTable() {
   });
 
   return (
-    <Flex width="size-6000">
+    <Flex height="size-2000" flexGrow={1} maxWidth="size-4600">
       <Table aria-label="example async loading table" height="100%" width="100%">
         <TableHeader columns={columns}>
           {(column) => (
@@ -232,7 +233,7 @@ Use `defaultSelectedKeys` to provide a default set of selected rows. Note that t
 The example below demonstrates how one would use `defaultSelectedKeys`.
 
 ```tsx example
-<Flex width="size-6000">
+<Flex flexGrow={1} maxWidth="size-6000">
   <Table aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
     <TableHeader>
       <Column>Name</Column>
@@ -288,7 +289,7 @@ function PokemonTable(props) {
   let [selected, setSelected] = React.useState(new Set(['2']));
 
   return (
-    <Flex width="size-6000">
+    <Flex flexGrow={1} maxWidth="size-6000">
       <Table aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
         <TableHeader columns={columns}>
           {column => (
@@ -338,7 +339,8 @@ function AsyncSortTable() {
   let columns = [
     {name: 'Name', key: 'name'},
     {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'}
+    {name: 'Mass', key: 'mass'},
+    {name: 'Birth Year', key: 'birth_year'}
   ];
 
   let list = useAsyncList({
@@ -370,7 +372,7 @@ function AsyncSortTable() {
   });
 
   return (
-    <Flex width="size-6000">
+    <Flex height="size-2000" flexGrow={1} maxWidth="size-4600">
       <Table aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
         <TableHeader columns={columns}>
           {(column) => (
@@ -449,7 +451,7 @@ function AsyncSortTable() {
 import Edit from '@spectrum-icons/workflow/Edit';
 import Delete from '@spectrum-icons/workflow/Delete';
 
-<Flex width="size-3000">
+<Flex maxWidth="size-3000" flexGrow={1}>
   <Table aria-label="Example table for focusable cells" width="100%" height="100%">
     <TableHeader>
       <Column>Name</Column>
@@ -518,7 +520,7 @@ import Delete from '@spectrum-icons/workflow/Delete';
 Columns support three different width props: `minWidth`, `width`, and `maxWidth`.
 
 ```tsx example
-<Flex width="size-6000">
+<Flex flexGrow={1} maxWidth="size-6000">
   <Table aria-label="Example table for column widths" width="100%" height="100%">
     <TableHeader>
       <Column maxWidth={300} align="start">Name</Column>
@@ -554,13 +556,13 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 ### Column dividers
 [View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
 
-```tsx examples
-<Flex width="size-6000">
+```tsx example
+<Flex flexGrow={1} maxWidth="size-6000">
   <Table aria-label="Example table for column dividers" width="100%" height="100%">
     <TableHeader>
       <Column align="start" showDivider>Name</Column>
-      <Column>Type</Column>
-      <Column align="end">Size</Column>
+      <Column showDivider>Type</Column>
+      <Column align="end" showDivider>Size</Column>
     </TableHeader>
     <TableBody>
       <Row>
@@ -592,7 +594,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 [View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
 
 ```tsx example
-<Flex width="size-6000">
+<Flex flexGrow={1} maxWidth="size-6000">
   <Table aria-label="Example table for column alignment" width="100%" height="100%">
     <TableHeader>
       <Column align="start">Name</Column>
@@ -629,7 +631,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 Table supports nesting columns, allowing you to render "tiered" column headers.
 
 ```tsx example
-<Flex width="size-6000">
+<Flex flexGrow={1} maxWidth="size-6000">
   <Table aria-label="Example table for nested columns" width="100%" height="100%">
     <TableHeader>
       <Column title="OS (C:)">
@@ -681,7 +683,7 @@ function TableExample(props) {
   ];
 
   return (
-    <Flex width="size-6000">
+    <Flex flexGrow={1} maxWidth="size-6000">
       <Table aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
         <TableHeader columns={columns}>
           {column => (
@@ -766,7 +768,7 @@ function renderEmptyState() {
   );
 }
 
-<Flex width="size-6000">
+<Flex height="size-6000" flexGrow={1} maxWidth="size-6000">
   <Table aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
     <TableHeader>
       <Column>Name</Column>
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index 09d38c6f783..e136adcf0eb 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -64,7 +64,7 @@ export interface ColumnProps<T> {
   minWidth?: number | string,
   /** The maximum width of the column. */
   maxWidth?: number | string,
-  /** The default width of the column. TODO: is this even a thing? If so, why? */
+  /** The default width of the column. */
   defaultWidth?: number | string
 }
 

From 6fbf0825a29733ce61cc0041fb457cf8fe827289 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Fri, 9 Apr 2021 12:23:47 -0700
Subject: [PATCH 08/62] tweaking sizes

---
 packages/@react-spectrum/table/docs/Table.mdx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index 8def238fb9b..516c561b8cf 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -201,7 +201,7 @@ function AsyncTable() {
   });
 
   return (
-    <Flex height="size-2000" flexGrow={1} maxWidth="size-4600">
+    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
       <Table aria-label="example async loading table" height="100%" width="100%">
         <TableHeader columns={columns}>
           {(column) => (
@@ -372,7 +372,7 @@ function AsyncSortTable() {
   });
 
   return (
-    <Flex height="size-2000" flexGrow={1} maxWidth="size-4600">
+    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
       <Table aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
         <TableHeader columns={columns}>
           {(column) => (
@@ -520,7 +520,7 @@ import Delete from '@spectrum-icons/workflow/Delete';
 Columns support three different width props: `minWidth`, `width`, and `maxWidth`.
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
+<Flex flexGrow={1} maxWidth="size-4600">
   <Table aria-label="Example table for column widths" width="100%" height="100%">
     <TableHeader>
       <Column maxWidth={300} align="start">Name</Column>
@@ -557,7 +557,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 [View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
+<Flex flexGrow={1} maxWidth="size-4600">
   <Table aria-label="Example table for column dividers" width="100%" height="100%">
     <TableHeader>
       <Column align="start" showDivider>Name</Column>
@@ -594,7 +594,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 [View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
+<Flex flexGrow={1} maxWidth="size-4600">
   <Table aria-label="Example table for column alignment" width="100%" height="100%">
     <TableHeader>
       <Column align="start">Name</Column>
@@ -631,7 +631,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 Table supports nesting columns, allowing you to render "tiered" column headers.
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
+<Flex flexGrow={1} maxWidth="size-4600">
   <Table aria-label="Example table for nested columns" width="100%" height="100%">
     <TableHeader>
       <Column title="OS (C:)">

From 97e6f11b294e351f18c4513a1069f680ce954691 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Tue, 13 Apr 2021 10:48:03 -0700
Subject: [PATCH 09/62] proof reading and fixing some examples

---
 packages/@react-spectrum/table/docs/Table.mdx | 185 +++++++++---------
 1 file changed, 94 insertions(+), 91 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index 516c561b8cf..723974c6688 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -74,14 +74,15 @@ keywords: [table, grid]
 ```
 
 ## Content
-Table expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API, accepting both static and dynamic collections.
+Table expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API.
 The TableHeader accepts either static Columns or a `columns` prop with a renderer function for dynamic rendering. Similarly, TableBody accepts either static Rows or a `items` prop with a renderer function.
 Row follows the same pattern, accepting Cells as children instead.
 
 Basic usage of Table, seen in the example above, shows multiple Columns and Rows populated with strings and Cells respectively. Static collections, as in this example, can be used when the contents of the Table is known ahead of time.
 
 Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows Table to automatically cache the rendering of each item,
-which dramatically improves performance. Be sure to match each Column's key with an identical property in the Row object.
+which dramatically improves performance. Make sure that each rendered property in the Row object matches with a Column's key. In the example below, the `uid` of each Column is set as its key and matches with a
+property within each Row object.
 
 ```tsx example
 function Example() {
@@ -227,10 +228,10 @@ function AsyncTable() {
 ## Events
 
 ### Selection
-Table supports multiple selection modes. By default, selection is disabled, however this can be changed using the `selectionMode` prop.
-Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the  value of the selected keys must match the `key` prop of the Row.
+Table supports multiple selection modes. By default, selection is disabled, but this can be modified using the `selectionMode` prop.
+Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the value of the selected keys must match the `key` prop of the Row.
 
-The example below demonstrates how one would use `defaultSelectedKeys`.
+The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-6000">
@@ -332,7 +333,7 @@ When the user presses a column's sort icon, the column's key and sort direction
 the `SortDescriptor` appropriately.
 
 This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
-See the docs for more information.
+See the docs for more information on how to perform server side sorting.
 
 ```tsx example
 function AsyncSortTable() {
@@ -446,70 +447,37 @@ function AsyncSortTable() {
 }} links={tableTypes.links} />
 
 ## Visual options
-### Focusable cells
-```tsx example
-import Edit from '@spectrum-icons/workflow/Edit';
-import Delete from '@spectrum-icons/workflow/Delete';
+### Column alignment
+[View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
 
-<Flex maxWidth="size-3000" flexGrow={1}>
-  <Table aria-label="Example table for focusable cells" width="100%" height="100%">
+```tsx example
+<Flex flexGrow={1} maxWidth="size-4600">
+  <Table aria-label="Example table for column alignment" width="100%" height="100%">
     <TableHeader>
-      <Column>Name</Column>
-      <Column hideHeader>Add</Column>
-      <Column hideHeader>Delete</Column>
+      <Column align="start">Name</Column>
+      <Column align="center">Type</Column>
+      <Column align="end">Size</Column>
     </TableHeader>
     <TableBody>
       <Row>
-        <Cell>Red Panda</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
       </Row>
       <Row>
-        <Cell>Harbor Seal</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
       </Row>
       <Row>
-        <Cell>Groundhog</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
       </Row>
       <Row>
-        <Cell>Otter</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
+        <Cell>Welcome</Cell>
+        <Cell>TXT</Cell>
+        <Cell>24 KB</Cell>
       </Row>
     </TableBody>
   </Table>
@@ -590,16 +558,18 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 </Flex>
 ```
 
-### Column alignment
-[View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
+### Nested columns
+Table supports nesting columns, allowing you to render "tiered" column headers.
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-4600">
-  <Table aria-label="Example table for column alignment" width="100%" height="100%">
+  <Table aria-label="Example table for nested columns" width="100%" height="100%">
     <TableHeader>
-      <Column align="start">Name</Column>
-      <Column align="center">Type</Column>
-      <Column align="end">Size</Column>
+      <Column title="OS (C:)">
+        <Column align="start">Name</Column>
+        <Column>Type</Column>
+        <Column align="end">Size</Column>
+      </Column>
     </TableHeader>
     <TableBody>
       <Row>
@@ -617,44 +587,77 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
         <Cell>PPT</Cell>
         <Cell>472 KB</Cell>
       </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
     </TableBody>
   </Table>
 </Flex>
 ```
 
-### Nested columns
-Table supports nesting columns, allowing you to render "tiered" column headers.
+### Focusable cells
+Cells accept any renderable node, allowing you to have focusable children within the table.
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <Table aria-label="Example table for nested columns" width="100%" height="100%">
+import Edit from '@spectrum-icons/workflow/Edit';
+import Delete from '@spectrum-icons/workflow/Delete';
+
+<Flex maxWidth="size-3000" flexGrow={1}>
+  <Table aria-label="Example table for focusable cells" width="100%" height="100%">
     <TableHeader>
-      <Column title="OS (C:)">
-        <Column align="start">Name</Column>
-        <Column>Type</Column>
-        <Column align="end">Size</Column>
-      </Column>
+      <Column>Name</Column>
+      <Column hideHeader>Add</Column>
+      <Column hideHeader>Delete</Column>
     </TableHeader>
     <TableBody>
       <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
+        <Cell>Red Panda</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
       </Row>
       <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
+        <Cell>Harbor Seal</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
       </Row>
       <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
+        <Cell>Groundhog</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+      <Row>
+        <Cell>Otter</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
       </Row>
     </TableBody>
   </Table>
@@ -679,7 +682,7 @@ function TableExample(props) {
     {id: '2', firstName: 'Jane', lastName: 'Doe', age: '37'},
     {id: '3', firstName: 'Joe', lastName: 'Schmoe', age: '67'},
     {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'},
-    {id: '5', firstName: 'Longgggg Wrapping', lastName: 'Name', age: '56'}
+    {id: '5', firstName: 'Longggggggggggg Wrapping', lastName: 'Name', age: '56'}
   ];
 
   return (
@@ -721,11 +724,11 @@ function TableExample(props) {
 ```
 
 ### Disabled
-Use the `disabledKeys` prop to specify which rows to disable in the Table.
+Use the `disabledKeys` prop to specify which rows to disable selection for in the Table.
 
 ```tsx example
 // Using same setup as hide header example
-<TableExample disabledKeys={['2', '3']} />
+<TableExample disabledKeys={['2', '3']} selectionMode="single" />
 ```
 
 ### Density

From 010c5e10afc332ed89fdda494a39c3592d001a93 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Tue, 13 Apr 2021 11:54:17 -0700
Subject: [PATCH 10/62] fixing sort example

---
 packages/@react-spectrum/table/docs/Table.mdx | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index 723974c6688..a41c7b4786a 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -185,7 +185,6 @@ function AsyncTable() {
   ];
 
   let list = useAsyncList({
-    getKey: (item) => item.name,
     async load({signal, cursor}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
@@ -345,7 +344,6 @@ function AsyncSortTable() {
   ];
 
   let list = useAsyncList({
-    getKey: (item) => item.name,
     async load({signal, cursor}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
@@ -360,14 +358,25 @@ function AsyncSortTable() {
       };
     },
     async sort({items, sortDescriptor}) {
+      let sorted = items.sort((a, b) => {
+        let cmp;
+        let first = a[sortDescriptor.column].replace("BBY", "");
+        let second = b[sortDescriptor.column].replace("BBY", "");
+
+        if (+first || +second) {
+          cmp = +first < +second ? -1 : 1;
+        } else {
+          cmp = first <= second ? -1 : 1;
+        }
+
+        if (sortDescriptor.direction === 'descending') {
+          cmp *= -1;
+        }
+        return cmp;
+      });
+
       return {
-        items: items.slice().sort((a, b) => {
-          let cmp = a[sortDescriptor.column] < b[sortDescriptor.column] ? -1 : 1;
-          if (sortDescriptor.direction === 'descending') {
-            cmp *= -1;
-          }
-          return cmp;
-        })
+        items: sorted
       };
     }
   });

From 99b6b69fd6d8f2e30642328296867073bf06853b Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Apr 2021 11:28:29 -0700
Subject: [PATCH 11/62] updating table export

---
 packages/@react-spectrum/table/docs/Table.mdx    | 6 +-----
 packages/@react-spectrum/table/src/TableView.tsx | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index a41c7b4786a..0ce13cb69dd 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -409,11 +409,7 @@ function AsyncSortTable() {
 
 ### Table props
 
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.SpectrumTableProps.properties))
-  }
-}} links={tableTypes.links} />
+<PropTable component={docs.exports.Table} links={docs.links} />
 
 ### Table header props
 
diff --git a/packages/@react-spectrum/table/src/TableView.tsx b/packages/@react-spectrum/table/src/TableView.tsx
index 399981af0cd..7926befadd3 100644
--- a/packages/@react-spectrum/table/src/TableView.tsx
+++ b/packages/@react-spectrum/table/src/TableView.tsx
@@ -698,5 +698,5 @@ function CenteredWrapper({children}) {
 /**
  * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
  */
-const _TableView = React.forwardRef(TableView);
+const _TableView = React.forwardRef(TableView) as <T>(props: SpectrumTableProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
 export {_TableView as TableView};

From a6bdfa056fb2b5d341a808bbdd1301634e21803d Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Apr 2021 16:31:04 -0700
Subject: [PATCH 12/62] modifiying sort example to remove loadMore

---
 packages/@react-spectrum/table/docs/Table.mdx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index 0ce13cb69dd..b1f9868944b 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -344,17 +344,12 @@ function AsyncSortTable() {
   ];
 
   let list = useAsyncList({
-    async load({signal, cursor}) {
-      if (cursor) {
-        cursor = cursor.replace(/^http:\/\//i, 'https://');
-      }
-
-      let res = await fetch(cursor || `https://swapi.dev/api/people/?search`, {signal});
+    async load({signal}) {
+      let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
       let json = await res.json();
 
       return {
-        items: json.results,
-        cursor: json.next
+        items: json.results
       };
     },
     async sort({items, sortDescriptor}) {
@@ -393,8 +388,7 @@ function AsyncSortTable() {
         </TableHeader>
         <TableBody
           items={list.items}
-          isLoading={list.isLoading}
-          onLoadMore={list.loadMore}>
+          isLoading={list.isLoading}>
           {(item) => (
             <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
           )}

From bc873f3361dad25c431f1fadf77cdf92210c9863 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 13 May 2021 10:24:01 -0700
Subject: [PATCH 13/62] updating docs for TableView rename

---
 packages/@react-spectrum/table/docs/Table.mdx | 110 +++++++++---------
 1 file changed, 55 insertions(+), 55 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/Table.mdx
index b1f9868944b..a96bff6a476 100644
--- a/packages/@react-spectrum/table/docs/Table.mdx
+++ b/packages/@react-spectrum/table/docs/Table.mdx
@@ -18,22 +18,22 @@ import packageData from '@react-spectrum/table/package.json';
 ```jsx import
 import {ActionButton} from '@react-spectrum/button';
 import Add from '@spectrum-icons/workflow/Add';
-import {Cell, Column, Row, Table, TableBody, TableHeader} from '@react-spectrum/table';
+import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table';
 import {Flex} from '@react-spectrum/layout';
 ```
 
 ---
-category: Table
+category: Collections
 keywords: [table, grid]
 ---
 
-# Table
+# TableView
 
-<p>{docs.exports.Table.description}</p>
+<p>{docs.exports.TableView.description}</p>
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['Cell', 'Column', 'Row', 'Table', 'TableBody', 'TableHeader']}
+  componentNames={['Cell', 'Column', 'Row', 'TableView', 'TableBody', 'TableHeader']}
   sourceData={[
     {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/table/'}
   ]} />
@@ -41,7 +41,7 @@ keywords: [table, grid]
 ## Example
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-6000">
-  <Table aria-label="Example table with static contents" width="100%" height="100%">
+  <TableView aria-label="Example table with static contents" width="100%" height="100%">
     <TableHeader>
       <Column>Name</Column>
       <Column>Type</Column>
@@ -69,18 +69,18 @@ keywords: [table, grid]
         <Cell>1/18/2016</Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```
 
 ## Content
-Table expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API.
+TableView expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API.
 The TableHeader accepts either static Columns or a `columns` prop with a renderer function for dynamic rendering. Similarly, TableBody accepts either static Rows or a `items` prop with a renderer function.
 Row follows the same pattern, accepting Cells as children instead.
 
-Basic usage of Table, seen in the example above, shows multiple Columns and Rows populated with strings and Cells respectively. Static collections, as in this example, can be used when the contents of the Table is known ahead of time.
+Basic usage of TableView, seen in the example above, shows multiple Columns and Rows populated with strings and Cells respectively. Static collections, as in this example, can be used when the contents of the TableView is known ahead of time.
 
-Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows Table to automatically cache the rendering of each item,
+Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows TableView to automatically cache the rendering of each item,
 which dramatically improves performance. Make sure that each rendered property in the Row object matches with a Column's key. In the example below, the `uid` of each Column is set as its key and matches with a
 property within each Row object.
 
@@ -101,7 +101,7 @@ function Example() {
 
   return (
     <Flex flexGrow={1} maxWidth="size-6000">
-      <Table aria-label="Example table with dynamic content" width="100%" height="100%">
+      <TableView aria-label="Example table with dynamic content" width="100%" height="100%">
         <TableHeader columns={columns}>
           {column => (
             <Column key={column.uid} align={column.uid === 'date' ? 'end' : 'start'}>
@@ -118,28 +118,28 @@ function Example() {
             </Row>
           )}
         </TableBody>
-      </Table>
+      </TableView>
     </Flex>
   );
 }
 ```
 
 ### Internationalization
-To internationalize a Table, all text content within the Table should be replaced with localized strings. This includes the `aria-label` provided to the Table if any.
-For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of Table is automatically flipped.
+To internationalize a TableView, all text content within the TableView should be replaced with localized strings. This includes the `aria-label` provided to the TableView if any.
+For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of TableView is automatically flipped.
 
 ## Labeling
 ### Accessibility
-An `aria-label` must be provided to the Table for accessibility. If the Table is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
+An `aria-label` must be provided to the TableView for accessibility. If the TableView is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
 
-By default, the first column of the Table is used as the row header and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
-to one or more Columns, allowing you to customize which columns should label the rows of the Table.
+By default, the first column of the TableView is used as the row header and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
+to one or more Columns, allowing you to customize which columns should label the rows of the TableView.
 
 The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-3000">
-  <Table aria-label="Example table with static contents" width="100%" height="100%">
+  <TableView aria-label="Example table with static contents" width="100%" height="100%">
     <TableHeader>
       <Column isRowHeader>First Name</Column>
       <Column isRowHeader>Last Name</Column>
@@ -162,12 +162,12 @@ The example below applies `isRowHeader` to the "First Name" and "Last Name" colu
         <Cell>67</Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```
 
 ## Asynchronous loading
-Table supports loading data asynchronously, and will display a progress circle reflecting the current load state,
+TableView supports loading data asynchronously, and will display a progress circle reflecting the current load state,
 set by the `isLoading` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
 
 This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle loading the data.
@@ -202,7 +202,7 @@ function AsyncTable() {
 
   return (
     <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
-      <Table aria-label="example async loading table" height="100%" width="100%">
+      <TableView aria-label="example async loading table" height="100%" width="100%">
         <TableHeader columns={columns}>
           {(column) => (
             <Column align={column.key !== 'name' ? 'end' : 'start'}>
@@ -218,7 +218,7 @@ function AsyncTable() {
             <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
           )}
         </TableBody>
-      </Table>
+      </TableView>
     </Flex>
   );
 }
@@ -227,14 +227,14 @@ function AsyncTable() {
 ## Events
 
 ### Selection
-Table supports multiple selection modes. By default, selection is disabled, but this can be modified using the `selectionMode` prop.
+TableView supports multiple selection modes. By default, selection is disabled, but this can be modified using the `selectionMode` prop.
 Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the value of the selected keys must match the `key` prop of the Row.
 
 The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-6000">
-  <Table aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
+  <TableView aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
     <TableHeader>
       <Column>Name</Column>
       <Column>Type</Column>
@@ -262,7 +262,7 @@ The example below uses `defaultSelectedKeys` to select the row with key equal to
         <Cell>100</Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```
 
@@ -290,7 +290,7 @@ function PokemonTable(props) {
 
   return (
     <Flex flexGrow={1} maxWidth="size-6000">
-      <Table aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
+      <TableView aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
         <TableHeader columns={columns}>
           {column => (
             <Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
@@ -305,7 +305,7 @@ function PokemonTable(props) {
             </Row>
           )}
         </TableBody>
-      </Table>
+      </TableView>
     </Flex>
   );
 }
@@ -318,7 +318,7 @@ Multiple selection can be enabled by setting `selectionMode` to `multiple`.
 <PokemonTable selectionMode="multiple" />
 ```
 
-Table also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the Table selected at all times.
+TableView also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the TableView selected at all times.
 
 ```tsx example
 // Using the same table as above
@@ -326,8 +326,8 @@ Table also supports a `disallowEmptySelection` prop which forces the user to hav
 ```
 
 ### Sorting
-Table supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
-the `allowsSorting` prop. The Table accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
+TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
+the `allowsSorting` prop. The TableView accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
 When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
 the `SortDescriptor` appropriately.
 
@@ -378,7 +378,7 @@ function AsyncSortTable() {
 
   return (
     <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
-      <Table aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
+      <TableView aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
         <TableHeader columns={columns}>
           {(column) => (
             <Column allowsSorting align={column.key !== 'name' ? 'end' : 'start'}>
@@ -393,7 +393,7 @@ function AsyncSortTable() {
             <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
           )}
         </TableBody>
-      </Table>
+      </TableView>
     </Flex>
   );
 }
@@ -401,11 +401,11 @@ function AsyncSortTable() {
 
 ## Props
 
-### Table props
+### TableView props
 
-<PropTable component={docs.exports.Table} links={docs.links} />
+<PropTable component={docs.exports.TableView} links={docs.links} />
 
-### Table header props
+### TableHeader props
 
 <PropTable component={{
   props: {
@@ -421,7 +421,7 @@ function AsyncSortTable() {
   }
 }} links={tableTypes.links} />
 
-### Table body props
+### TableBody props
 
 <PropTable component={{
   props: {
@@ -451,7 +451,7 @@ function AsyncSortTable() {
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-4600">
-  <Table aria-label="Example table for column alignment" width="100%" height="100%">
+  <TableView aria-label="Example table for column alignment" width="100%" height="100%">
     <TableHeader>
       <Column align="start">Name</Column>
       <Column align="center">Type</Column>
@@ -479,7 +479,7 @@ function AsyncSortTable() {
         <Cell>24 KB</Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```
 
@@ -488,7 +488,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-4600">
-  <Table aria-label="Example table for column widths" width="100%" height="100%">
+  <TableView aria-label="Example table for column widths" width="100%" height="100%">
     <TableHeader>
       <Column maxWidth={300} align="start">Name</Column>
       <Column width={80}>Type</Column>
@@ -516,7 +516,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
         <Cell>24 KB</Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```
 
@@ -525,7 +525,7 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-4600">
-  <Table aria-label="Example table for column dividers" width="100%" height="100%">
+  <TableView aria-label="Example table for column dividers" width="100%" height="100%">
     <TableHeader>
       <Column align="start" showDivider>Name</Column>
       <Column showDivider>Type</Column>
@@ -553,16 +553,16 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
         <Cell>24 KB</Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```
 
 ### Nested columns
-Table supports nesting columns, allowing you to render "tiered" column headers.
+TableView supports nesting columns, allowing you to render "tiered" column headers.
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-4600">
-  <Table aria-label="Example table for nested columns" width="100%" height="100%">
+  <TableView aria-label="Example table for nested columns" width="100%" height="100%">
     <TableHeader>
       <Column title="OS (C:)">
         <Column align="start">Name</Column>
@@ -587,19 +587,19 @@ Table supports nesting columns, allowing you to render "tiered" column headers.
         <Cell>472 KB</Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```
 
 ### Focusable cells
-Cells accept any renderable node, allowing you to have focusable children within the table.
+Cells accept any renderable node, allowing you to have focusable children within the TableView.
 
 ```tsx example
 import Edit from '@spectrum-icons/workflow/Edit';
 import Delete from '@spectrum-icons/workflow/Delete';
 
 <Flex maxWidth="size-3000" flexGrow={1}>
-  <Table aria-label="Example table for focusable cells" width="100%" height="100%">
+  <TableView aria-label="Example table for focusable cells" width="100%" height="100%">
     <TableHeader>
       <Column>Name</Column>
       <Column hideHeader>Add</Column>
@@ -659,7 +659,7 @@ import Delete from '@spectrum-icons/workflow/Delete';
         </Cell>
       </Row>
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```
 
@@ -686,7 +686,7 @@ function TableExample(props) {
 
   return (
     <Flex flexGrow={1} maxWidth="size-6000">
-      <Table aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
+      <TableView aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
         <TableHeader columns={columns}>
           {column => (
             <Column
@@ -708,7 +708,7 @@ function TableExample(props) {
             </Row>)
           }
         </TableBody>
-      </Table>
+      </TableView>
     </Flex>
   );
 }
@@ -723,7 +723,7 @@ function TableExample(props) {
 ```
 
 ### Disabled
-Use the `disabledKeys` prop to specify which rows to disable selection for in the Table.
+Use the `disabledKeys` prop to specify which rows to disable selection for in the TableView.
 
 ```tsx example
 // Using same setup as hide header example
@@ -743,7 +743,7 @@ The amount of vertical padding that each row contains can be modified by providi
 
 ### Overflow mode
 By default, text content that overflows its table cell will be truncated. You can have it wrap instead by passing `overflowMode="wrap"`
-to the Table.
+to the TableView.
 
 ```tsx example
 // Using same setup as hide header example
@@ -751,7 +751,7 @@ to the Table.
 ```
 
 ### Empty state
-Use the `renderEmptyState` prop to customize what the Table will display if there are no rows provided.
+Use the `renderEmptyState` prop to customize what the TableView will display if there are no rows provided.
 
 ```tsx example
 import {Content} from '@react-spectrum/view';
@@ -771,7 +771,7 @@ function renderEmptyState() {
 }
 
 <Flex height="size-6000" flexGrow={1} maxWidth="size-6000">
-  <Table aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
+  <TableView aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
     <TableHeader>
       <Column>Name</Column>
       <Column>Type</Column>
@@ -780,6 +780,6 @@ function renderEmptyState() {
     <TableBody>
       {[]}
     </TableBody>
-  </Table>
+  </TableView>
 </Flex>
 ```

From 91aa2ea771f1f0c61f5aff53870a67e48b47b8c3 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 13 May 2021 10:26:53 -0700
Subject: [PATCH 14/62] renaming table mdx to tableview

---
 packages/@react-spectrum/table/docs/{Table.mdx => TableView.mdx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/@react-spectrum/table/docs/{Table.mdx => TableView.mdx} (100%)

diff --git a/packages/@react-spectrum/table/docs/Table.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
similarity index 100%
rename from packages/@react-spectrum/table/docs/Table.mdx
rename to packages/@react-spectrum/table/docs/TableView.mdx

From 56c996592f44b7b7bdaef3bf0151cd3a724c5a87 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Tue, 13 Apr 2021 14:55:55 -0700
Subject: [PATCH 15/62] useTableState docs and useTable template

---
 packages/@react-aria/table/docs/useTable.mdx  | 72 +++++++++++++++++++
 .../@react-stately/grid/src/useGridState.ts   |  2 +
 .../table/docs/useTableState.mdx              | 40 +++++++++++
 .../@react-stately/table/src/useTableState.ts | 11 +++
 packages/@react-types/grid/src/index.d.ts     |  2 +
 packages/@react-types/table/src/index.d.ts    |  7 ++
 6 files changed, 134 insertions(+)
 create mode 100644 packages/@react-aria/table/docs/useTable.mdx
 create mode 100644 packages/@react-stately/table/docs/useTableState.mdx

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
new file mode 100644
index 00000000000..755eefdf2f5
--- /dev/null
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -0,0 +1,72 @@
+<!-- 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. -->
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-aria/table';
+import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
+import packageData from '@react-aria/table/package.json';
+
+```jsx import
+import {useTable, useTableColumnHeader, useTableRow, useTableRowHeader, useTableSelectionCheckbox} from '@react-aria/table';
+```
+
+---
+category: Table
+keywords: [table, aria]
+---
+
+# useTable
+
+<p>{docs.exports.useTable.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['useTable', 'useTableColumnHeader', 'useTableRow', 'useTableRowHeader', 'useTableSelectionCheckbox']}
+  sourceData={[
+    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#menu'}
+  ]} />
+
+## API
+
+<FunctionAPI function={docs.exports.useTable} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableColumnHeader} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableRow} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableRowHeader} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableSelectionCheckbox} links={docs.links} />
+
+## Features
+
+// Talk about implementing a table via table tr etc and the challenges
+
+// add list of things the hooks offer
+
+## Anatomy
+
+// talk about anatomy of a table, column, rows, row headers, selection checkboxes
+// do we have an anatomy image?
+// mention state object
+
+## State management
+// mention useTableState
+
+## Example
+
+// Perhaps a checkbox vs non checkbox version?
+
+## Usage
+// Add this section?
+// show dynamic vs static
+// see other Table examples in docs
+
+## Internationalization
+
+
+### RTL
diff --git a/packages/@react-stately/grid/src/useGridState.ts b/packages/@react-stately/grid/src/useGridState.ts
index 38a70ba724f..172f9769c3c 100644
--- a/packages/@react-stately/grid/src/useGridState.ts
+++ b/packages/@react-stately/grid/src/useGridState.ts
@@ -5,7 +5,9 @@ import {SelectionManager, useMultipleSelectionState} from '@react-stately/select
 
 export interface GridState<T, C extends GridCollection<T>> {
   collection: C,
+  /** A set of keys for rows that are disabled. */
   disabledKeys: Set<Key>,
+  /** A selection manager to read and update row selection state. */
   selectionManager: SelectionManager
 }
 
diff --git a/packages/@react-stately/table/docs/useTableState.mdx b/packages/@react-stately/table/docs/useTableState.mdx
new file mode 100644
index 00000000000..5523a080c1c
--- /dev/null
+++ b/packages/@react-stately/table/docs/useTableState.mdx
@@ -0,0 +1,40 @@
+<!-- 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. -->
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-stately/table';
+import {ClassAPI, HeaderInfo, FunctionAPI} from '@react-spectrum/docs';
+import packageData from '@react-stately/table/package.json';
+
+---
+category: Table
+keywords: [table, state]
+---
+
+# useTableState
+
+<p>{docs.exports.useTableState.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['useTableState']} />
+
+## API
+
+<FunctionAPI function={docs.exports.useTableState} links={docs.links} />
+
+## Interface
+
+<ClassAPI links={docs.links} class={docs.links[docs.exports.useTableState.return.base.id]} />
+
+## Example
+
+See the docs for [useTable](/react-aria/useTable.html) in react-aria for an example of `useTableState`.
diff --git a/packages/@react-stately/table/src/useTableState.ts b/packages/@react-stately/table/src/useTableState.ts
index da2718318ca..a2d422465cc 100644
--- a/packages/@react-stately/table/src/useTableState.ts
+++ b/packages/@react-stately/table/src/useTableState.ts
@@ -18,9 +18,13 @@ import {TableCollection} from './TableCollection';
 import {useCollection} from '@react-stately/collections';
 
 export interface TableState<T> extends GridState<T, ITableCollection<T>> {
+  /** A collection of rows and columns in the table. */
   collection: ITableCollection<T>,
+  /** Whether the row selection checkboxes should be displayed. */
   showSelectionCheckboxes: boolean,
+  /** The current sorted column and direction. */
   sortDescriptor: SortDescriptor,
+  /** Calls the provided onSortChange handler with the provided column key and sort direction. */
   sort(columnKey: Key): void
 }
 
@@ -30,7 +34,10 @@ export interface CollectionBuilderContext<T> {
   columns: Node<T>[]
 }
 
+// TODO: perhaps define things like `items`, `selectedKeys` etc here instead of relying on extend
+// since the table type descriptions for these props should be more specific to table?
 export interface TableStateProps<T> extends CollectionBase<T>, MultipleSelection, Sortable {
+  /** Whether the row selection checkboxes should be displayed. */
   showSelectionCheckboxes?: boolean
 }
 
@@ -39,6 +46,10 @@ const OPPOSITE_SORT_DIRECTION = {
   descending: 'ascending' as SortDirection
 };
 
+/**
+ * Provides state management for a table component. Handles building a collection
+ * of columns and rows from props. In addition, it tracks row selection and manages sort order changes.
+ */
 export function useTableState<T extends object>(props: TableStateProps<T>): TableState<T>  {
   let {selectionMode = 'none'} = props;
 
diff --git a/packages/@react-types/grid/src/index.d.ts b/packages/@react-types/grid/src/index.d.ts
index 7417ff95aaf..bd4ee79f29d 100644
--- a/packages/@react-types/grid/src/index.d.ts
+++ b/packages/@react-types/grid/src/index.d.ts
@@ -14,7 +14,9 @@ import {Collection, Node} from '@react-types/shared';
 import {Key} from 'react';
 
 export interface GridCollection<T> extends Collection<Node<T>> {
+  /** The number of columns in the grid. */
   columnCount: number,
+  /** A list of rows in the grid. */
   rows: GridNode<T>[]
 }
 
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index e136adcf0eb..b9cf155289b 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -129,9 +129,16 @@ export interface CellProps {
 export type CellElement = ReactElement<CellProps>;
 export type CellRenderer = (columnKey: Key) => CellElement;
 
+// TODO: perhaps defined `rows`, etc here so that we can table specific definitions
 export interface TableCollection<T> extends GridCollection<T> {
+  // TODO perhaps elaborate on this? maybe not clear enought, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc)
+  /** A list of header row nodes in the table. */
   headerRows: GridNode<T>[],
+  /** A list of column nodes in the table. */
   columns: GridNode<T>[],
+  // TODO perhaps elaborate here, link to rowheader docs? https://www.digitala11y.com/rowheader-role/?
+  /** A set of column keys that serve as the row header. */
   rowHeaderColumnKeys: Set<Key>,
+  /** The node that makes up the body of the table. */
   body: GridNode<T>
 }

From 229f69c1b71c84f2b5a67da668a87cb8c8865c43 Mon Sep 17 00:00:00 2001
From: Daniel <dlu@livefyre.com>
Date: Fri, 16 Apr 2021 16:52:57 -0700
Subject: [PATCH 16/62] progress on usetable aria docs

---
 packages/@react-aria/grid/src/useGrid.ts      |   11 +
 packages/@react-aria/grid/src/useGridRow.ts   |    7 +
 .../@react-aria/table/docs/TableAnatomy.svg   | 1727 +++++++++++++++++
 packages/@react-aria/table/docs/useTable.mdx  |  116 +-
 packages/@react-aria/table/src/useTable.ts    |    1 +
 .../table/src/useTableColumnHeader.ts         |    6 +
 .../table/src/useTableRowHeader.ts            |    5 +
 .../table/src/useTableSelectionCheckbox.ts    |    3 +
 8 files changed, 1867 insertions(+), 9 deletions(-)
 create mode 100644 packages/@react-aria/table/docs/TableAnatomy.svg

diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts
index ef39d2ef288..e1afc22c98b 100644
--- a/packages/@react-aria/grid/src/useGrid.ts
+++ b/packages/@react-aria/grid/src/useGrid.ts
@@ -21,13 +21,24 @@ import {useCollator, useLocale} from '@react-aria/i18n';
 import {useSelectableCollection} from '@react-aria/selection';
 
 export interface GridProps extends DOMProps, AriaLabelingProps {
+  /** The ref attached to the grid element. */
   ref: RefObject<HTMLElement>,
+  /** Whether the grid uses virtual scrolling. */
   isVirtualized?: boolean,
+  /**
+   * An optional keyboard delegate implementation for type to select,
+   * to override the default.
+   */
   keyboardDelegate?: KeyboardDelegate,
+  /**
+   * Whether initial grid focus should be placed on the grid row or grid cell.
+   * @default 'row'
+   */
   focusMode?: 'row' | 'cell'
 }
 
 export interface GridAria {
+  /** Props for the grid element. */
   gridProps: HTMLAttributes<HTMLElement>
 }
 
diff --git a/packages/@react-aria/grid/src/useGridRow.ts b/packages/@react-aria/grid/src/useGridRow.ts
index 49143840652..fad2f8cfd61 100644
--- a/packages/@react-aria/grid/src/useGridRow.ts
+++ b/packages/@react-aria/grid/src/useGridRow.ts
@@ -18,15 +18,22 @@ import {usePress} from '@react-aria/interactions';
 import {useSelectableItem} from '@react-aria/selection';
 
 export interface GridRowProps<T> {
+  /** An object representing the grid row. Contains all the relevant information that makes up the grid row. */
   node: Node<T>,
+  /** The ref attached to the grid row. */
   ref?: RefObject<HTMLElement>,
+  /** Whether the grid row is contained in a virtual scroller. */
   isVirtualized?: boolean,
+  /** Whether the grid row is selected. */
   isSelected?: boolean,
+  /** Whether the grid row is disabled. */
   isDisabled?: boolean,
+  /** Whether selection should occur on press up instead of press down. */
   shouldSelectOnPressUp?: boolean
 }
 
 export interface GridRowAria {
+  /** Props for the grid row element. */
   rowProps: HTMLAttributes<HTMLElement>
 }
 
diff --git a/packages/@react-aria/table/docs/TableAnatomy.svg b/packages/@react-aria/table/docs/TableAnatomy.svg
new file mode 100644
index 00000000000..034141a4dca
--- /dev/null
+++ b/packages/@react-aria/table/docs/TableAnatomy.svg
@@ -0,0 +1,1727 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 914 380" style="enable-background:new 0 0 914 380;" xml:space="preserve">
+<title>Table anatomy diagram</title>
+<desc>Shows a table component with labels pointing to its parts, including the row, row divider, column, column header, column divider, sort icon, and cell elements.</desc>
+<image style="overflow:visible;" width="1828" height="760" xlink:href="data:image/png;base64,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
++c2WYsu2Fduutz1l+9rO3i7F7mu7RrvH9kb2PPti+zr7Ww50hyCHAocah8uOREe2Y67jZscLTqiT
+l5PYqdrpvDPq7O0scd7s3DmGMMZ3jHRMzZhrLjQXjkuRS53L3bHMsdFjS8Y2jn06zmZc2rjV406N
+++jq5ZrnusP1ppu+2wS3Erdmt+fuTu4C92r3yx50j3CPBR5NHs88nT1Fnls8r3sxvCZ6fe3V6vXB
+28db7l3v3eNj45Phs8nnGtuAHcdezj7tS/AN8V3ge9j3rZ+3X6Hffr+//F38c/33+D8ebz9eNH7H
++PsBVgH8gG0BXYGswIzAbwO7giyD+EE1QfeCrYOFwTuDH3EcOTmcvZynIa4h8pCDIa+5ftx53JZQ
+LDQitCy0I0w/LClsY9idcKvw7PC68L4Ir4g5ES2RhMioyNWR13hmPAGvltc3wWfCvAltUbSohKiN
+UfeinaLl0c0T0YkTJq6ZeCvGNkYa0xgLYnmxa2Jvx9nHFcT9PIk4KW5S9aSH8W7xc+NPJTASpifs
+SXiVGJK4MvFmkkOSMqk1WSc5Pbk2+XVKaEpFStfkcZPnTT6XapIqSW1KI6Ulp+1M658SNmXdlO50
+r/TS9KtT7afOmnpmmsm0vGlHputM508/kEHISMnYk/GeH8uv4fdn8jI3ZfYJuIL1gifCYOFaYY8o
+QFQhepQVkFWR9Tg7IHtNdo84SFwp7pVwJRslz3Iic7bmvM6Nzd2VO5iXkrcvn5yfkX9Iqi/NlbbN
+MJ8xa0anzFlWKusq8CtYV9Anj5LvVCCKqYqmQgP48d6udFB+pbxbFFhUXfRmZvLMA7P0Zklntc92
+mr1s9qPi8OLv5uBzBHNa51rOXTT37jzOvG3zkfmZ81sXWC9YsqB7YcTC3Yuoi3IX/VriWlJR8nJx
+yuLmJWZLFi65/1XEV3Wl2qXy0mtf+3+9dSm+VLK0Y5nHsg3LPpYJy86Wu5ZXlr9fLlh+9hu3b6q+
+GVyRtaJjpffKLauIq6Srrq4OWr27Qq+iuOL+molrGtay1patfblu+rozlZ6VW9dT1yvXd1VFVzVt
+sNmwasP7jeKNV6pDqvdtMt20bNPrzcLNF7cEb6nfara1fOu7byXfXt8Wsa2hxq6mcjtxe9H2hzuS
+d5z6jv1d7U6TneU7P+yS7uraHb+7rdantnaP6Z6VdWidsq5nb/reC9+Hft9U71K/bR9zX/kP4Afl
+D3/8mPHj1f1R+1sPsA/U/2T706aDjINlDUjD7Ia+RnFjV1NqU+ehCYdam/2bD/489uddhy0PVx8x
+PLLyKPXokqODx4qP9bfIWnqPZx+/3zq99eaJyScut01q6zgZdfL0L+G/nDjFOXXsdMDpw2f8zhw6
+yz7beM77XEO7V/vBX71+Pdjh3dFw3ud80wXfC82d4zuPXgy6ePxS6KVfLvMun7sSc6XzatLV69fS
+r3VdF15/fCPvxrPfin4buLnwFuFW2W3d25V3TO/U/O74+74u764jd0Pvtt9LuHfzvuD+kweKB++7
+lzykP6x8ZPGo9rH748M94T0X/pjyR/cT2ZOB3tI/9f7c9NTh6U9/Bf/V3je5r/uZ/Nng8+UvjF/s
+eun5srU/rv/Oq/xXA6/L3hi/2f2W/fbUu5R3jwZmvie9r/rg+KH5Y9THW4P5g4Myvpw/9CmAwYZm
+ZQHwfBcA9FT47XABHhOmqM98Q4Koz6lDBP4Tq8+FQ+INwK5gAJIWAhANv1G2wGYLmQbvqk/1xGCA
+eniMNI0osjzc1b5o8MRDeDM4+MIMAFIzAB/kg4MDmwcHP8AzKnYDgJYC9VlTJUR4NvjWSEXt13TB
+l6I+h36W45d3oIrAE3x5/xcgdIelWOckdwAAAIplWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEb
+AAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOS
+hgAHAAAAEgAAAHigAgAEAAAAAQAABySgAwAEAAAAAQAAAvgAAAAAQVNDSUkAAABTY3JlZW5zaG90
+QvsOQgAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAddpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
+OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4w
+Ij4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJk
+Zi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAg
+ICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAg
+ICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTgyODwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAg
+ICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAg
+ICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj43NjA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAg
+ICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KuBLRtwAAABxp
+RE9UAAAAAgAAAAAAAAF8AAAAKAAAAXwAAAF8AADFKkbuyJ8AAEAASURBVHgB7N0HnB1l2TfgO733
+UNITem/SpNjF3hvYAHsXUUF9VVBRUVA/fbEjqNgb9vaqiIXeewkkpJJCeq/f80yYzdmzuzmbk93N
+bvaa72fOOdPnmp3h/eY/9/P0WLl6w+bNm8NAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB
+ugR69ojo169X5M/qoceKVRvEkdUqfhMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgsF0CfXr3
+iL59ejZZRiDZhMQIAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTqERjQv2mVpECyHknLECBA
+gAABAgQIECBAgAABAgQIECBAgAABAgQIECDQRKB3qpLsV1UlKZBswmQEAQIECBAgQIAAAQIECBAg
+QIAAAQIECBAgQIAAAQL1CPRMLbYOSH1JVg4CyUoN3wkQIECAAAECBAgQIECAAAECBAgQIECAAAEC
+BAgQqFugR1py4ACBZN2AFiRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAYNsCgwSS2wYylQAB
+AgQIECBAgAABAgQIECBAgAABAgQIECBAgACB+gUEkvXbWZIAAQIECBAgQIAAAQIECBAgQIAAAQIE
+CBAgQIAAgRoCAskaQCYTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFC/gECyfjtLEiBAgAAB
+AgQIECBAgAABAgQIECBAgAABAgQIECBQQ0AgWQPIZAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAA
+AQIE6hcQSNZvZ0kCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBGoICCRrAJlMgAABAgQIECBA
+gAABAgQIECBAgAABAgQIECBAgED9AgLJ+u0sSYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBA
+DQGBZA0gkwkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqF9AIFm/nSUJECBAgAABAgQIECBA
+gAABAgQIECBAgAABAgQIEKghIJCsAWQyAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQL1Cwgk
+67ezJAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECNQQEkjWATCZAgAABAgQIECBAgAABAgQI
+ECBAgAABAgQIECBAoH4BgWT9dpYkQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCGgECyBpDJ
+BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjULyCQrN/OkgQIECBAgAABAgQIECBAgAABAgQI
+ECBAgAABAgQI1BAQSNYAMpkAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgfoFBJL121mSAAEC
+BAgQIECAAAECBAgQIECAAAECBAgQIECAAIEaAgLJGkAmEyBAgAABAgQIECBAgAABAgQIECBAgAAB
+AgQIECBQv4BAsn47SxIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUENAIFkDyGQCBAgQIECA
+AAECBAgQIECAAAECBAgQIECAAAECBOoXEEjWb2dJAgQIECBAgAABAgQIECBAgAABAgQIECBAgAAB
+AgRqCAgkawCZTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBA/QICyfrtLEmAAAECBAgQIECA
+AAECBAgQIECAAAECBAgQIECAQA0BgWQNIJMJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKhf
+QCBZv50lCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCoISCQrAFkMgECBAgQIECAAAECBAgQ
+IECAAAECBAgQIECAAAEC9QsIJOu3syQBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAjUEBJI1
+gEwmQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKB+AYFk/XaWJECAAAECBAgQIECAAAECBAgQ
+IECAAAECBAgQIECghoBAsgaQyQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI1C8gkKzfzpIE
+CBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECNQQEEjWADKZAAECBAgQIECAAAECBAgQIECAAAEC
+BAgQIECAAIH6BQSS9dtZkgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBGgICyRpAJhMgQIAA
+AQIECBAgQIAAAQIECBAgQIAAAQIECBAgUL+AQLJ+O0sSIECAAAECBAgQIECAAAECBAgQIECAAAEC
+BAgQIFBDQCBZA8hkAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTqFxBI1m9nSQIECBAgQIAA
+AQIECBAgQIAAAQIECBAgQIAAAQIEaggIJGsAmUyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECA
+QP0CAsn67SxJgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEANAYFkDSCTCRAgQIAAAQIECBAg
+QIAAAQIECBAgQIAAAQIECBCoX0AgWb+dJQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqCEg
+kKwBZDIBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAvULCCTrt7MkAQIECBAgQIAAAQIECBAg
+QIAAAQIECBAgQIAAAQI1BASSNYBMJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgfgGBZP12
+liRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoIaAQLIGkMkECBAgQIAAAQIECBAgQIAAAQIE
+CBAgQIAAAQIECNQvIJCs386SBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjUEBBI1gAymQAB
+AgQIECBAgAABAgQIECBAgAABAgQIECBAgACB+gUEkvXbWZIAAQIECBAgQIAAAQIECBAgQIAAAQIE
+CBAgQIAAgRoCAskaQCYTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFC/gECyfjtLEiBAgAAB
+AgQIECBAgAABAgQIECBAgAABAgQIECBQQ0AgWQPIZAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAA
+AQIE6hcQSNZvZ0kCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBGoICCRrAJlMgAABAgQIECBA
+gAABAgQIECBAgAABAgQIECBAgED9AgLJ+u0sSYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBA
+DQGBZA0gkwkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqF9AIFm/nSUJECBAgAABAgQIECBA
+gAABAgQIECBAgAABAgQIEKghIJCsAWQyAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQL1Cwgk
+67ezJAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECNQQEkjWATCZAgAABAgQIECBAgAABAgQI
+ECBAgAABAgQIECBAoH4BgWT9dpYkQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCGgECyBpDJ
+BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjULyCQrN/OkgQIECBAgAABAgQIECBAgAABAgQI
+ECBAgAABAgQI1BAQSNYAMpkAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgfoFBJL121mSAAEC
+BAgQIECAAAECBAgQIECAAAECBAgQIECAAIEaAgLJGkAmEyBAgAABAgQIECBAgAABAgQIECBAgAAB
+AgQIECBQv4BAsn47SxIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUENAIFkDyGQCBAgQIECA
+AAECBAgQIECAAAECBAgQIECAAAECBOoXEEjWb2dJAgQIECBAgAABAgQIECBAgAABAgQIECBAgAAB
+AgRqCAgkawCZTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBA/QICyfrtLEmAAAECBAgQIECA
+AAECBAgQIECAAAECBAgQIECAQA0BgWQNIJMJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKhf
+QCBZv50lCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCoISCQrAFkMgECBAgQIECAAAECBAgQ
+IECAAAECBAgQIECAAAEC9QsIJOu3syQBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAjUEBJI1
+gEwmQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKB+AYFk/XaWJECAAAECBAgQIECAAAECBAgQ
+IECAAAECBAgQIECghoBAsgaQyQQIECBAgAABAgQIECBAgMBWgV//c0bcO315vPRpE2L/iUO3TtgF
+v/3u37PinmlL48VP6TrH+pO/To/7ZyyP1z9nSkwZN3gXPCsOiQABAgQIECBAoCsKCCS74lmzzwQI
+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
+ECDQ1QQEkl3tjNlfAgQIECBAgAABArugwOLUbOW0OSuKI5sydnCMGLKlknQXPFSHRIAAAQIECBAg
+QIAAAQIEup2AQLLbnXIHTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDjBASSHWdtSwQIECBA
+gAABAgQIECBAgAABAgQIECBAgAABAgS6nYBAstudcgdMgAABAgQIECBAgAABAgQIECBAgAABAgQI
+ECBAoOMEBJIdZ21LBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBLqdgECy251yB0yAAAECBAgQ
+IECAAAECBAgQIECAAAECBAgQIECg4wQEkh1nbUsECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE
+up2AQLLbnXIHTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDjBASSHWdtSwQIECBAgAABAgQI
+ECBAgAABAgQIECBAgAABAgS6nYBAstudcgdMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoOME
+BJIdZ21LBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBLqdgECy251yB0yAAAECBAgQIECAAAEC
+BAgQIECAAAECBAgQIECg4wQEkh1nbUsECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEup2AQLLb
+nXIHTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDjBASSHWdtSwQIECBAgAABAgQIECBAgAAB
+AgQIECBAgAABAgS6nYBAstudcgdMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoOMEBJIdZ21L
+BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBLqdgECy251yB0yAAAECBAgQIECAAAECBAgQIECA
+AAECBAgQIECg4wQEkh1nbUsECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEup2AQLLbnXIHTIAA
+AQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDjBASSHWdtSwQIECBAgAABAgQIECBAgAABAgQIECBA
+gAABAgS6nYBAstudcgdMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoOMEBJIdZ21LBAgQIECA
+AAECBAgQIECAAAECBAgQIECAAAECBLqdgECy251yB0yAAAECBAgQ2DUF1m/YHCtXr4sNmzZH/r55
+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
++nQJSTl/B2//d558/ONi6aLi4j5N3Wrt4x8WavTkAhf9+GyvjlHTufr7iBSS7ZtV1FSvMzVyc4WL
+XrQopbKl0qeS9eYVTUha/9t27JV/DxgtGzRNrdWdNGlqbcy0ddLv1cnu+RCVh4fUKu2e+//s1miv
+qx8eKev12JNVCN6sYtBrv6gkNWFjItBkQGmNKrr5iTGye88+efyW7NVttNSttwwe59bXE86WyvFb
+jfDyXnvnNcl6+QMjZZNGp3XVdLG9NW1sZENIRhI5uNeJLiQt5a8XMfv6fYe5qGiTXrcOGit79PNk
+95NjNO1nZJs8d6OKwGkaAVxYXtQIXWtWx/ERTZ9s7d/6A4AjNLLvYFtmQnKrjvO+Fydpmumd4qVq
+9c73+NvTZer8gxeSr97bRe9TPhu7/wQD3pwmMxZudGxycs/1xpnR4yiVui+o3LUozCd7dnCRm7av
+1cHsO3SSO2yARqfWrFIiahe/jFspb2gdzeJFCordmyNbdoSk1eK0+21R5fCURkfa/Sy/G0Iyv1eA
+80MAAhCAAAQgAIHEJoCQTOz1Y/QQgAAEIAABCEAgZQkEQUjeMmicWH1CS7Xqj1aKdVE8cZeRkFy1
+fqeTb9afpUVtrbUmrVkU1Xv/Wyh1NELRhEBk26dCY4zWQPtq+FKXUvXFuzq6Xfq9OsW9bzUWrdZi
+Vs0vJB/QaEX7st6EXCNNK/vwv9voF+TpZaT16c0rIyFp+zytKSstJW2z+uXkiVva2lvywXcL5N1v
+F7o0p89p3cyM2qtfztHosqVuHPZFvb9ZTU8Ttpbu1cZnUveCk+rKpRrtlN1mEV13DrHak5oiViOU
+vtCINkut+1zvTmEpahcu3yo3aeSpted6d5R6ui6RDSEZSeTgXie6kPzs50Xy5W9LxWpCDtW0ytZm
+LNgkA96a6qJ/LQK3aJG0tMMeKauBul7Tn7765Vz31nP6o4Iy+nn89s9l8v53C6V8qaIypFcHb/eD
+esxMSHrRmO21juWtEamk4y0kX/1irgyfuEqa1Ssn91yZ9T0sOxBMtPZ5fqJLe3u63tPPP7Fe6HC7
+xu9/OU1IPqb1cv3pckM76ZPfNNX2axqRXUyF5MsHKSQffGWy+/flhE7V5fJTs3//8o8rt54jJHOL
+JP1AAAIQgAAEIACB1CSAkEzNdWfWEIAABCAAAQhAIOEJBEFIPvDSZLEols4tK7mUq9mF6om7jITk
+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
+AQIECBAgQIAAAQIECBAgQIBAWQQEkmWphH4QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqKCA
+QLKCRTUkAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAmUREEiWpRL6QYAAAQIECBAgQIAAAQIE
+CBAgQIAAAQIECBAgQKCCAgLJChbVkAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiURUAgWZZK
+6AcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBCgoIJCtYVEMiQIAAAQIECBAgQIAAAQIECBAg
+QIAAAQIECBAgUBYBgWRZKqEfBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBCooIJCsYFENiQAB
+AgQIECBAgAABAgQIECBAgAABAgQIECBAgEBZBASSZamEfhAgQIAAAQIECBAgQIAAAQIECBAgQIAA
+AQIECBCooIBAsoJFNSQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECZREQSJalEvpBgAABAgQI
+ECBAgAABAgQIECBAgAABAgQIECBAoIICAskKFtWQCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE
+CJRFQCBZlkroBwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEKCggkK1hUQyJAgAABAgQIECBA
+gAABAgQIECBAgAABAgQIECBQFgGBZFkqoR8ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEKigg
+kKxgUQ2JAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQFkEBJJlqYR+ECBAgAABAgQIECBAgAAB
+AgQIECBAgAABAgQIEKiggECygkU1JAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJlERBIlqUS
++kGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgggICyQoW1ZAIECBAgAABAgQIECBAgAABAgQI
+ECBAgAABAgQIlEVAIFmWSugHAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQoKCCQrWFRDIkCA
+AAECBAgQIECAAAECBAgQIECAAAECBAgQIFAWAYFkWSqhHwQIECBAgAABAgQIECBAgAABAgQIECBA
+gAABAgQqKCCQrGBRDYkAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAWQQEkmWphH4QIECAAAEC
+BAgQIECAAAECBAgQIECAAAECBAgQqKCAQLKCRTUkAgQIECBAgAABAgQIECBAgAABAgQIECBAgAAB
+AmUREEiWpRL6QYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCCAgLJChbVkAgQIECAAAECBAgQ
+IECAAAECBAgQIECAAAECBAiURUAgWZZK6AcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBCgoI
+JCtYVEMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUBYBgWRZKqEfBAgQIECAAAECBAgQIECA
+AAECBAgQIECAAAECBCooIJCsYFENiQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBZBASSZamE
+fhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCooIBAsoJFNSQCBAgQIECAAAECBAgQIECAAAEC
+BAgQIECAAAECZREQSJalEvpBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoIICAskKFtWQCBAg
+QIAAAQIECBAgQIAAAQIECBAgQIAAAQIECJRFQCBZlkroBwECBAgQIECAAAECBAgQIECAAAECBAgQ
+IECAAIEKCggkK1hUQyJAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQFgGBZFkqoR8ECBAgQIAA
+AQIECBAgQIAAAQIECBAgQIAAAQIEKiggkKxgUQ2JAAECBAgQIECAAAECBAgQIECAAAECBAgQIECA
+QFkEBJJlqYR+ECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiggECygkU1JAIECBAgQIAAAQIE
+CBAgQIAAAQIECBAgQIAAAQJlERBIlqUS+kGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgggIC
+yQoW1ZAIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIlEVAIFmWSugHAQIECBAgQIAAAQIECBAg
+QIAAAQIECBAgQIAAgQoKCCQrWFRDIkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFAWAYFkWSqh
+HwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQqKCCQrGBRDYkAAQIECBAgQIAAAQIECBAgQIAA
+AQIECBAgQIBAWQQEkmWphH4QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqKCAQLKCRTUkAgQI
+ECBAgAABAgQIECBAgAABAgQIECBAgAABAmUREEiWpRL6QYAAAQIECBAgQIAAAQIECBAgQIAAAQIE
+CBAgQKCCAgLJChbVkAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiURUAgWZZK6AcBAgQIECBA
+gAABAgQIECBAgAABAgQIECBAgACBCgoIJCtYVEMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg
+UBYBgWRZKqEfBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBCooIJCsYFENiQABAgQIECBAgAAB
+AgQIECBAgAABAgQIECBAgEBZBASSZamEfhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCooIBA
+soJFNSQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECZREQSJalEvpBgAABAgQIECBAgAABAgQI
+ECBAgAABAgQIECBAoIICAskKFtWQCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECJRFQCBZlkro
+BwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEKCggkK1hUQyJAgAABAgQIECBAgAABAgQIECBA
+gAABAgQIECBQFgGBZFkqoR8ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEKiggkKxgUQ2JAAEC
+BAgQIECAAAECBAgQIECAAAECBAgQIECAQFkEBJJlqYR+ECBAgAABAgQIECBAgAABAgQIECBAgAAB
+AgQIEKiggECygkU1JAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJlERBIlqUS+kGAAAECBAgQ
+IECAAAECBAgQIECAAAECBAgQIECgggICyQoW1ZAIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI
+lEVAIFmWSugHAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQoKCCQrWFRDIkCAAAECBAgQIECA
+AAECBAgQIECAAAECBAgQIFAWAYFkWSqhHwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQqJtAl
+G0/fPt1ajKrL4qWr1rZ4xzcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDYDIFuXbtE715d
+W5wpkGzB4RsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBDZXoEf3LtGzh0Byc/2cR4AAAQIE
+CBAgQIAAAQIECBAgQIAAAQIECBAgQIDAJgT69u4WXdK6rc02MySbYXhJgAABAgQIECBAgAABAgQI
+ECBAgAABAgQIECBAgMDmCaSZkWmG5Ppbl6XPrFq7xlMk13fxPQECBAgQIECAAAECBAgQIECAAAEC
+BAgQIECAAAECrRTIHh0ZfbLZkRvbuqzNthUr18TKVVLJjQF5jwABAgQIECBAgAABAgQIECBAgAAB
+AgQIECBAgACB5xfY2HMjmx+dB5LpjTVrIlauXpN9XZu/bn6Q1wQIECBAgAABAgQIECBAgAABAgQI
+ECBAgAABAgQIECgEunaN6Jo9LLJH966RXm9qawokN3WQfQQIECBAgAABAgQIECBAgAABAgQIECBA
+gAABAgQIENgcAYHk5qg5hwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBVgn8f5o5WQL5PTtO
+AAAAAElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 0 0)">
+</image>
+</svg>
diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 755eefdf2f5..1a1384850e1 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -11,11 +11,15 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import docs from 'docs:@react-aria/table';
+import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
+import selectionDocs from 'docs:@react-stately/selection';
+import statelyDocs from 'docs:@react-stately/table';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
 import packageData from '@react-aria/table/package.json';
+import Anatomy from './TableAnatomy.svg';
 
 ```jsx import
-import {useTable, useTableColumnHeader, useTableRow, useTableRowHeader, useTableSelectionCheckbox} from '@react-aria/table';
+import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableRowGroup, useTableRowHeader, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
 ```
 
 ---
@@ -29,33 +33,119 @@ keywords: [table, aria]
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['useTable', 'useTableColumnHeader', 'useTableRow', 'useTableRowHeader', 'useTableSelectionCheckbox']}
+  componentNames={['useTable', 'useTableCell', 'useTableColumnHeader', 'useTableRow', 'useTableRowGroup', 'useTableRowHeader', 'useTableSelectAllCheckbox', 'useTableSelectionCheckbox']}
   sourceData={[
     {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#menu'}
   ]} />
 
 ## API
 
+TODO figure out how to get the api for useTableCell and useTableRowGroup to work, FunctionApi doesn't play nice with those perhaps because they are grid hooks that are renamed in the export?
+
 <FunctionAPI function={docs.exports.useTable} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableColumnHeader} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableRow} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableRowHeader} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableSelectionCheckbox} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableSelectAllCheckbox} links={docs.links} />
 
 ## Features
 
-// Talk about implementing a table via table tr etc and the challenges
-
-// add list of things the hooks offer
+A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), [&lt;thead&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead),
+[&lt;tbody&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), and other table specific HTML elements, but this is very limited in functionality especially when it comes to user interactions.
+`useTable` helps achieve accessible and interactive table components that can be styled as needed.
+
+* Exposed to assistive technology as a `grid` using ARIA
+* Support for single, multiple, or no row selection
+* Support for disabled rows
+* Labeling support for accessibility
+* Support for mouse, touch, and keyboard interactions
+* Support for keyboard navigation between columns, rows, cells, and in-cell focusable items
+* Column sorting
+* Multiple row header support
+* Automatic scrolling support during keyboard navigation
+* Typeahead to allow focusing rows by typing text
+* Virtualized scrolling support for performance with large tables
 
 ## Anatomy
+TODO: currently using the Table on the spectrum site, maybe should use the anatomy diagram on the contribution site? That one shows collapsible rows though...
+<Anatomy />
+
+A table consists of a container element, with columns and rows of cells containing data inside.The cells within a table may contain focusable elements or plain text content.
+If the table supports row selection, each row includes a selection checkbox. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
+
+`useTable`, `useTableCell`, `useTableColumnHeader`, `useTableRow`, and `useTableRowHeader` handle keyboard, mouse, and other interactions to support
+row selection, in table navigation, and overall focus behavior. Those hooks, along with `useTableRowGroup`, also handle exposing the table and its contents
+to assistive technology using ARIA. `useTableSelectAllCheckbox` and `useTableSelectionCheckbox` handle row selection and associating each checkbox with its respective rows
+for assistive technology.
+
+`useTable` returns props that you should spread onto the table container element:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTable.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableColumnHeader` returns props for an individual table column header:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableColumnHeader.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableRow` returns props for an individual table row:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableRow.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableRowGroup` returns props for a element containing one or more rows of column headers or cells. This is often equivalent
+to the header, body, and footer of the table:
+
+TODO FIGURE OUT WHY THIS IMPORT DOESN"T WORK
 
-// talk about anatomy of a table, column, rows, row headers, selection checkboxes
-// do we have an anatomy image?
-// mention state object
+`useTableRowHeader` returns props for the table cell that serves as a row's header:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableRowHeader.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableCell` returns props for an individual table cell:
+
+TODO FIGURE OUT WHY THIS IMPORT DOESN"T WORK
+
+`useTableSelectionCheckbox` returns props for an individual table row selection checkbox:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableSelectionCheckbox.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableSelectAllCheckbox` returns props for the table's "select all" checkbox:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableSelectAllCheckbox.return.id].properties} />
+</TypeContext.Provider>
+
+State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
+hook from `@react-stately/table`. The state object should be passed as an option to each of the above hooks where applicable.
+
+Note that an `aria-label` or `aria-labelledby` must be passed to the table to identify the element to assistive technology.
 
 ## State management
-// mention useTableState
+
+`useTable` requires knowledge of the rows, cells, and columns in the table in order to handle keyboard
+navigation and other interactions. It does this using
+the <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Collection} />
+interface, which is a generic interface to access sequential unique keyed data. You can
+implement this interface yourself, e.g. by using a prop to pass a list of item objects,
+but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} /> from
+`@react-stately/table` implements a JSX based interface for building collections instead.
+See [Collection Components](/react-stately/collections.html) for more information,
+and [Collection Interface](/react-stately/Collection.html) for internal details.
+
+In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
+manages the state necessary for multiple selection and exposes
+a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
+which makes use of the collection to provide an interface to update the selection state.
+For more information, see [Selection](/react-stately/selection.html).
 
 ## Example
 
@@ -68,5 +158,13 @@ keywords: [table, aria]
 
 ## Internationalization
 
+`useTable` handles some aspects of internationalization automatically.
+For example, type to select is implemented with an
+[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
+for internationalized string matching. You are responsible for localizing all text content within the table.
+Make sure that some types of content (e.g. file extensions) are not translated.
 
 ### RTL
+
+In right-to-left languages, the table layout should be mirrored. The columns should be ordered from right to left and the
+individual column text alignment should be inverted. Ensure that your CSS accounts for this.
diff --git a/packages/@react-aria/table/src/useTable.ts b/packages/@react-aria/table/src/useTable.ts
index fc3b267548a..4b818c812f3 100644
--- a/packages/@react-aria/table/src/useTable.ts
+++ b/packages/@react-aria/table/src/useTable.ts
@@ -21,6 +21,7 @@ import {useId} from '@react-aria/utils';
 import {useMemo} from 'react';
 
 interface TableProps<T> extends GridProps {
+  /** The layout object for the table. Computes what content is visible and how to position and style them. */
   layout?: Layout<Node<T>>
 }
 
diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts
index d5910cdab47..a828ec7eb90 100644
--- a/packages/@react-aria/table/src/useTableColumnHeader.ts
+++ b/packages/@react-aria/table/src/useTableColumnHeader.ts
@@ -21,14 +21,20 @@ import {usePress} from '@react-aria/interactions';
 
 
 interface ColumnHeaderProps {
+  /** An object representing the column header. Contains all the relevant information that makes up the column header. */
   node: Node<unknown>,
+  /** The ref attached to the column header. */
   ref: RefObject<HTMLElement>,
+  /** Whether the column header is contained in a virtual scroller. */
   isVirtualized?: boolean,
+  /** The number of columns the column header should span. */
   colspan?: number,
+  /** Whether the column header is disabled. */
   isDisabled?: boolean
 }
 
 interface ColumnHeaderAria {
+  /** Props for the column header element. */
   columnHeaderProps: HTMLAttributes<HTMLElement>
 }
 
diff --git a/packages/@react-aria/table/src/useTableRowHeader.ts b/packages/@react-aria/table/src/useTableRowHeader.ts
index 9c5406c199b..53d52adf051 100644
--- a/packages/@react-aria/table/src/useTableRowHeader.ts
+++ b/packages/@react-aria/table/src/useTableRowHeader.ts
@@ -17,13 +17,18 @@ import {TableState} from '@react-stately/table';
 import {useGridCell} from '@react-aria/grid';
 
 interface RowHeaderProps {
+  /** An object representing the row header. Contains all the relevant information that makes up the row header. */
   node: GridNode<unknown>,
+  /** The ref attached to the row header. */
   ref: RefObject<HTMLElement>,
+  /** Whether the row header is contained in a virtual scroller. */
   isVirtualized?: boolean,
+  /** Whether the row header is disabled. */
   isDisabled?: boolean
 }
 
 interface RowHeaderAria {
+  /** Props for the row header element. */
   rowHeaderProps: HTMLAttributes<HTMLElement>
 }
 
diff --git a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
index 72c9b3ac76f..1a715a41b01 100644
--- a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
+++ b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
@@ -17,11 +17,14 @@ import {TableState} from '@react-stately/table';
 import {useId} from '@react-aria/utils';
 
 interface SelectionCheckboxProps {
+  /** A unique key for the checkbox. */
   key: Key,
+  /** Whether the checkbox is disabled. */
   isDisabled?: boolean
 }
 
 interface SelectionCheckboxAria {
+  /** Props for the checkbox element. */
   checkboxProps: AriaCheckboxProps
 }
 

From 6e411f018ec6c80f3ca9851cc3dd0e174637f995 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 27 Apr 2021 12:30:56 -0700
Subject: [PATCH 17/62] progress

local docs are busted
---
 packages/@react-aria/table/docs/useTable.mdx  | 388 +++++++++++++++-
 .../tooltip/stories/Tooltip.stories.tsx       | 432 +++++++++++++++++-
 2 files changed, 815 insertions(+), 5 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 1a1384850e1..d1df86e2c85 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -149,12 +149,392 @@ For more information, see [Selection](/react-stately/selection.html).
 
 ## Example
 
-// Perhaps a checkbox vs non checkbox version?
+This example uses HTML `<div>` elements to construct the table. It uses `useTableState` to construct the table's collection of rows and columns,
+applying the appropriate attributes to each `<div>` using the various table hooks listed above paired with the div's role in the table.
+The table follows the [Collection Components API](../react-stately/collections.html), accepting both static and dynamic collections.
+The example below shows a static collection, which can be used when the full set of table contents is known ahead of time.
+
+```tsx example export=true
+import {Cell, Column, Row, TableBody, TableHeader, useTableState} from '@react-stately/table';
+import {mergeProps} from '@react-aria/utils';
+import {useCheckbox} from '@react-aria/checkbox';
+import {useContext, useRef} from 'react';
+import {useFocusRing} from '@react-aria/focus';
+import {useToggleState} from '@react-stately/toggle';
+
+const TableContext = React.createContext(null);
+function useTableContext() {
+  return useContext(TableContext);
+}
+
+function Table(props) {
+  let state = useTableState({...props, showSelectionCheckboxes: true});
+  let ref = useRef();
+
+  let {gridProps} = useTable({
+    ...props,
+    ref: ref
+  }, state);
+
+  let headerRows = state.collection.rows.filter(item => item.type === 'headerrow' && item);
+  let rows = state.collection.rows.filter(item => item.type === 'item' && item);
+
+  let renderColumnNode = (node) => {
+    if (node.props.isSelectionCell) {
+      return <TableSelectAllCell column={node} />;
+    }
+
+    return <TableColumnHeader column={node} />;
+  };
+
+  let renderRowNode = (node) => {
+    if (node.props.isSelectionCell) {
+      return <TableCheckboxCell cell={node} />;
+    }
+
+    if (state.collection.rowHeaderColumnKeys.has(node.column.key)) {
+      return <TableRowHeader cell={node} />;
+    }
+
+    return <TableCell cell={node} />;
+  };
+
+  return (
+    <TableContext.Provider value={state}>
+      <div {...gridProps} style={{...props.style, display: 'flex', flexDirection: 'column'}} ref={ref}>
+        <TableHeaderGroup>
+          {[...headerRows].map(headerRow => (
+            <TableHeaderRow item={headerRow}>
+              {[...headerRow.childNodes].map((column) => renderColumnNode(column))}
+            </TableHeaderRow>
+          ))}
+        </TableHeaderGroup>
+        <div
+          style={{
+            borderTop: '2px solid black',
+            borderBottom: '2px solid black',
+            padding: '0px 1px 0px 1px',
+            flex: '1 1 0%',
+            overflow: 'auto'
+          }}>
+          <TableRowGroup>
+            {[...rows].map(row => (
+              <TableRow item={row}>
+                {[...row.childNodes].map((node) => renderRowNode(node))}
+              </TableRow>
+            ))}
+          </TableRowGroup>
+        </div>
+      </div>
+    </TableContext.Provider>
+  );
+}
+
+
+function TableHeaderGroup({children, ...otherProps}) {
+  let {rowGroupProps} = useTableRowGroup();
+
+  return (
+    <div {...rowGroupProps} {...otherProps}>
+      {children}
+    </div>
+  );
+}
+
+function TableColumnHeader({column}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let {columnHeaderProps} = useTableColumnHeader({
+    node: column,
+    ref,
+    colspan: column.colspan
+  }, state);
+
+  let {isFocusVisible, focusProps} = useFocusRing();
+  let columnProps = column.props;
+  let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
+
+  return (
+    <div
+      {...mergeProps(columnHeaderProps, focusProps)}
+      style={{
+        height: '16px',
+        lineHeight: '16px',
+        width: '100px',
+        padding: '10px 10px 10px 10px',
+        outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
+      }}
+      ref={ref}>
+      {column.rendered}
+      {columnProps.allowsSorting && state.sortDescriptor?.column === column.key &&
+        <span aria-hidden="true" style={{padding: '0 2px'}}>
+          {arrowIcon}
+        </span>
+      }
+    </div>
+  );
+}
+
+function TableSelectAllCell({column}) {
+  let ref = useRef();
+  let state = useTableContext();
+
+  let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
+  let {columnHeaderProps} = useTableColumnHeader({
+    node: column,
+    ref,
+    colspan: column.colspan,
+    isDisabled: isSingleSelectionMode
+  }, state);
+
+  let {checkboxProps} = useTableSelectAllCheckbox(state);
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);
+
+  return (
+    <div
+      {...columnHeaderProps}
+      style={{
+        height: '16px',
+        padding: '10px 10px 10px 10px'
+      }}
+      aria-disabled={isSingleSelectionMode}
+      ref={ref}>
+      <input
+        {...inputProps}
+        disabled={isSingleSelectionMode}
+        style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
+    </div>
+  );
+}
+
+function TableRowGroup({children, ...otherProps}) {
+  let {rowGroupProps} = useTableRowGroup();
+
+  return (
+    <div {...rowGroupProps} {...otherProps}>
+      {children}
+    </div>
+  );
+}
+
+function TableRow({item, children, ...otherProps}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(item.key);
+  let isSelected = state.selectionManager.isSelected(item.key) && !isDisabled;
+  let {rowProps} = useTableRow({
+    node: item,
+    isSelected,
+    ref,
+    isDisabled
+  }, state);
+
+  let props = mergeProps(
+    rowProps,
+    otherProps
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        padding: '1px 1px 2px 1px',
+        borderTop: '1px solid lightgrey'
+      }}
+      {...props}
+      ref={ref}>
+      {children}
+    </div>
+  );
+}
+
+function TableHeaderRow({item, children, ...otherProps}) {
+  return (
+    <div role="row" aria-rowindex={item.index + 1} {...otherProps} style={{display: 'flex', flexDirection: 'row', paddingBottom: '4px'}}>
+      {children}
+    </div>
+  );
+}
+
+function TableCheckboxCell({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {gridCellProps} = useTableCell({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+
+  let {checkboxProps} = useTableSelectionCheckbox(
+    {
+      key: cell.parentKey,
+      isDisabled
+    },
+    state
+  );
+
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox({...checkboxProps, isDisabled}, useToggleState(checkboxProps), inputRef);
+
+  return (
+    <div
+      {...gridCellProps}
+      style={{
+        height: '16px',
+        padding: '10px 10px 10px 10px'
+      }}
+      ref={ref}>
+      {state.selectionManager.selectionMode !== 'none' &&
+        <input {...inputProps} />
+      }
+    </div>
+  );
+}
+
+function TableCell({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {gridCellProps} = useTableCell({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+
+  return (
+    <TableCellBase
+      {...gridCellProps}
+      cell={cell}
+      cellRef={ref} />
+  );
+}
+
+function TableRowHeader({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {rowHeaderProps} = useTableRowHeader({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+
+  return (
+    <TableCellBase
+      {...rowHeaderProps}
+      cell={cell}
+      cellRef={ref} />
+  );
+}
+
+function TableCellBase({cell, cellRef, ...otherProps}) {
+  let {isFocusVisible, focusProps} = useFocusRing();
+
+  return (
+    <div
+      {...mergeProps(otherProps, focusProps)}
+      style={{
+        height: '16px',
+        lineHeight: '16px',
+        width: '100px',
+        padding: '10px 10px 10px 10px',
+        outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
+      }}
+      ref={cellRef}>
+      <span>
+        {cell.rendered}
+      </span>
+    </div>
+  );
+}
+
+<Table aria-label="Example static collection table" style={{height: '200px'}}>
+  <TableHeader>
+    <Column>Name</Column>
+    <Column>Type</Column>
+    <Column>Date Modified</Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>Games</Cell>
+      <Cell>File folder</Cell>
+      <Cell>6/7/2020</Cell>
+    </Row>
+    <Row>
+      <Cell>Program Files</Cell>
+      <Cell>File folder</Cell>
+      <Cell>4/7/2021</Cell>
+    </Row>
+    <Row>
+      <Cell>bootmgr</Cell>
+      <Cell>System file</Cell>
+      <Cell>11/20/2010</Cell>
+    </Row>
+    <Row>
+      <Cell>log.txt</Cell>
+      <Cell>Text Document</Cell>
+      <Cell>1/18/2016</Cell>
+    </Row>
+  </TableBody>
+</Table>
+```
 
 ## Usage
-// Add this section?
-// show dynamic vs static
-// see other Table examples in docs
+
+### Dynamic collections
+
+// TODO add description
+
+```tsx example
+function Example() {
+  let columns = [
+    {name: 'Name', key: 'name'},
+    {name: 'Type', key: 'type'},
+    {name: 'Date Modified', key: 'date'}
+  ];
+
+  let rows = [
+    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
+    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
+    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
+    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
+  ];
+
+  return (
+    <Table aria-label="Example dynamic collection table" style={{height: '200px'}}>
+      <TableHeader columns={columns}>
+        {(column) => (
+          <Column key={column.key}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <Row key={item.id}>
+            {/* Note this key is equal to the key of the the column,
+            not the key set on the Row prior */}
+            {(key) => <Cell>{item[key]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Selection
+
+### Sorting
+
+### Async
+// show dynamic
+// show single selection, no selection, multiple selection
+// show sorting
+// show async
 
 ## Internationalization
 
diff --git a/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx b/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
index fcf41a0317f..adf51371ff7 100644
--- a/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
+++ b/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
@@ -10,9 +10,40 @@
  * governing permissions and limitations under the License.
  */
 
-import React from 'react';
+import {action} from '@storybook/addon-actions';
+import React, {useContext, useRef} from 'react';
 import {storiesOf} from '@storybook/react';
 import {Tooltip} from '../src';
+import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableRowGroup, useTableRowHeader, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
+import {TableState, useTableState} from '@react-stately/table';
+import { mergeProps } from '@react-aria/utils';
+
+import {useCheckbox} from '@react-aria/checkbox';
+import {useToggleState} from '@react-stately/toggle';
+import {
+  Cell,
+  Column,
+  Row,
+  TableBody,
+  TableHeader
+} from '@react-stately/table';
+
+let onSelectionChange = action('onSelectionChange');
+let columns = [
+  {name: 'Foo', key: 'foo'},
+  {name: 'Bar', key: 'bar'},
+  {name: 'Baz', key: 'baz'}
+];
+let items = [
+  {test: 'Test 1', foo: 'Foo 1', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
+  {test: 'Test 2', foo: 'Foo 2', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'},
+  {test: 'Test 1', foo: 'Foo 3', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
+  {test: 'Test 2', foo: 'Foo 4', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'},
+  {test: 'Test 1', foo: 'Foo 5', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
+  {test: 'Test 2', foo: 'Foo 6', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'},
+  {test: 'Test 1', foo: 'Foo 7', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
+  {test: 'Test 2', foo: 'Foo 8', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'}
+];
 
 storiesOf('Tooltip', module)
   .add(
@@ -70,6 +101,49 @@ storiesOf('Tooltip', module)
   .add(
     'long content',
     () => render(longMarkup)
+  )
+  .add(
+    'dynamic',
+    () => (
+      // <Table aria-label="Table with dynamic contents" width={300} height={200}>
+      <Table aria-label="Table with dynamic contents" style={{width: '300px', height: '200px'}}>
+        <TableHeader columns={columns}>
+          {column => <Column>{column.name}</Column>}
+        </TableHeader>
+        <TableBody items={items}>
+          {item =>
+            (<Row key={item.foo}>
+              {key => <Cell>{item[key]}</Cell>}
+            </Row>)
+          }
+        </TableBody>
+      </Table>
+    )
+  )
+  .add(
+    'static',
+    () => (
+      // <Table aria-label="blah" selectionMode="multiple" width={500} height={200} isQuiet onSelectionChange={s => onSelectionChange([...s])}>
+      <Table aria-label="blah" selectionMode="multiple" onSelectionChange={s => onSelectionChange([...s])} style={{width: '500px', height: '200px'}}>
+        <TableHeader>
+          <Column isRowHeader>First Name</Column>
+          <Column isRowHeader>Last Name</Column>
+          <Column>Birthday</Column>
+        </TableHeader>
+        <TableBody>
+          <Row>
+            <Cell>Sam</Cell>
+            <Cell>Smith</Cell>
+            <Cell>May 3</Cell>
+          </Row>
+          <Row>
+            <Cell>Julia</Cell>
+            <Cell>Jones</Cell>
+            <Cell>February 10</Cell>
+          </Row>
+        </TableBody>
+      </Table>
+    )
   );
 
 const longMarkup = (
@@ -93,3 +167,359 @@ function render(content, props = {}) {
     </div>
   );
 }
+
+
+const TableContext = React.createContext(null);
+function useTableContext() {
+  return useContext(TableContext);
+}
+
+function Table(props) {
+  // NEEDED?
+  let {isQuiet} = props;
+  let state = useTableState({...props, showSelectionCheckboxes: true});
+  // NEEDED?
+  let density = props.density || 'regular';
+  let ref = useRef();
+  // NEEDED? Maybe too much, just pass some basic values, no need for density and scale?
+  // layout is technically optional
+  // let layout = useMemo(() => new TableLayout({
+  //   // If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights.
+  //   rowHeight: props.overflowMode === 'wrap'
+  //     ? null
+  //     : ROW_HEIGHTS[density][scale],
+  //   estimatedRowHeight: props.overflowMode === 'wrap'
+  //     ? ROW_HEIGHTS[density][scale]
+  //     : null,
+  //   headingHeight: props.overflowMode === 'wrap'
+  //     ? null
+  //     : DEFAULT_HEADER_HEIGHT[scale],
+  //   estimatedHeadingHeight: props.overflowMode === 'wrap'
+  //     ? DEFAULT_HEADER_HEIGHT[scale]
+  //     : null,
+  //   getDefaultWidth: ({hideHeader, isSelectionCell, showDivider}) => {
+  //     if (hideHeader) {
+  //       let width = DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
+  //       return showDivider ? width + 1 : width;
+  //     } else if (isSelectionCell) {
+  //       return SELECTION_CELL_DEFAULT_WIDTH;
+  //     }
+  //   }
+  // }), [props.overflowMode, scale, density]);
+
+  let {gridProps} = useTable({
+    ...props,
+    // ref: domRef,
+    ref: ref,
+    // layout
+  }, state);
+  // console.log('state, state.collection', state, state.collection)
+  let headerRows = state.collection.rows.filter(item => item.type === 'headerrow' && item);
+  let rows = state.collection.rows.filter(item => item.type === 'item' && item);
+
+  let renderColumnNode = (node) => {
+    if (node.props.isSelectionCell) {
+      return <TableSelectAllCell column={node} />
+    }
+
+    return <TableColumnHeader column={node} />
+  };
+
+  let renderRowNode = (node) => {
+    if (node.props.isSelectionCell) {
+      return <TableCheckboxCell cell={node} />;
+    }
+
+    if (state.collection.rowHeaderColumnKeys.has(node.column.key)) {
+      return <TableRowHeader cell={node} />;
+    }
+
+    return <TableCell cell={node} />;
+  };
+
+  // TODO check the extra div styles
+  return (
+    <TableContext.Provider value={state}>
+      <div {...gridProps} style={props.style} ref={ref}>
+        <div style={{overflow: 'hidden'}}>
+          <TableHeaderRENAME>
+            {[...headerRows].map(headerRow => (
+              <TableHeaderRow item={headerRow}>
+                {[...headerRow.childNodes].map((column) => renderColumnNode(column))}
+              </TableHeaderRow>
+            ))}
+          </TableHeaderRENAME>
+        </div>
+        <div style={{padding: '0px', flex: '1 1 0%', overflow: 'auto'}}>
+          <div style={{overflow: 'visible'}}>
+            <TableRowGroup>
+              {[...rows].map(row => (
+                <TableRow item={row}>
+                  {[...row.childNodes].map((node) => renderRowNode(node))}
+                </TableRow>
+              ))}
+            </TableRowGroup>
+          </div>
+        </div>
+      </div>
+    </TableContext.Provider>
+  );
+}
+
+
+function TableHeaderRENAME({children, ...otherProps}) {
+  let {rowGroupProps} = useTableRowGroup();
+
+  return (
+    <div {...rowGroupProps} {...otherProps}>
+      {children}
+    </div>
+  );
+}
+
+function TableColumnHeader({column}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let {columnHeaderProps} = useTableColumnHeader({
+    node: column,
+    ref,
+    colspan: column.colspan,
+  }, state);
+
+  let columnProps = column.props;
+  // let {hoverProps, isHovered} = useHover({});
+
+  return (
+    <div
+      // {...mergeProps(columnHeaderProps, hoverProps)}
+      {...columnHeaderProps}
+      ref={ref}>
+      {column.rendered}
+      {/* {columnProps.hideHeader ?
+        <VisuallyHidden>{column.rendered}</VisuallyHidden> :
+        column.rendered
+      } */}
+      {/* TODO: add style/element for sorting? ignore sorting? */}
+      {/* {columnProps.allowsSorting &&
+        <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />
+      } */}
+    </div>
+  );
+}
+
+function TableSelectAllCell({column}) {
+  let ref = useRef();
+  let state = useTableContext();
+
+  let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
+  let {columnHeaderProps} = useTableColumnHeader({
+    node: column,
+    ref,
+    colspan: column.colspan,
+    isDisabled: isSingleSelectionMode
+  }, state);
+
+  let {checkboxProps} = useTableSelectAllCheckbox(state);
+  // let {hoverProps, isHovered} = useHover({});
+  // TODO
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef)
+  return (
+    <div
+      // {...mergeProps(columnHeaderProps, hoverProps)}
+      {...columnHeaderProps}
+      aria-disabled={isSingleSelectionMode}
+      ref={ref}>
+      {/* <Checkbox
+        {...checkboxProps}
+        isDisabled={isSingleSelectionMode}
+        isEmphasized
+        UNSAFE_style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}}
+        UNSAFE_className={classNames(styles, 'spectrum-Table-checkbox')} /> */}
+      <input
+        // {...checkboxProps}
+        {...inputProps}
+        style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
+    </div>
+  );
+}
+
+function TableRowGroup({children, ...otherProps}) {
+  let {rowGroupProps} = useTableRowGroup();
+
+  return (
+    <div {...rowGroupProps} {...otherProps}>
+      {children}
+    </div>
+  );
+}
+
+function TableRow({item, children, ...otherProps}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(item.key);
+  let isSelected = state.selectionManager.isSelected(item.key) && !isDisabled;
+  let {rowProps} = useTableRow({
+    node: item,
+    isSelected,
+    ref,
+    isDisabled
+  }, state);
+
+  // TODO: do we need the below for the aria example?
+  // The row should show the focus background style when any cell inside it is focused.
+  // If the row itself is focused, then it should have a blue focus indicator on the left.
+  // let {
+  //   isFocusVisible: isFocusVisibleWithin,
+  //   focusProps: focusWithinProps
+  // } = useFocusRing({within: true});
+  // let {isFocusVisible, focusProps} = useFocusRing();
+  // let {hoverProps, isHovered} = useHover({isDisabled});
+  let props = mergeProps(
+    rowProps,
+    otherProps,
+    // focusWithinProps,
+    // focusProps,
+    // hoverProps
+  );
+
+  return (
+    <div
+      style={{display: 'flex', flexDirection: 'row'}}
+      {...props}
+      ref={ref}>
+      {/* // className={
+      //   classNames(
+      //     styles,
+      //     'spectrum-Table-row',
+      //     {
+      //       'is-selected': isSelected,
+      //       'is-focused': isFocusVisibleWithin,
+      //       'focus-ring': isFocusVisible,
+      //       'is-hovered': isHovered,
+      //       'is-disabled': isDisabled
+      //     }
+      //   )
+      // }> */}
+      {children}
+    </div>
+  );
+}
+
+function TableHeaderRow({item, children, ...otherProps}) {
+  return (
+    <div role="row" aria-rowindex={item.index + 1} {...otherProps} style={{display: 'flex', flexDirection: 'row'}}>
+      {children}
+    </div>
+  );
+}
+
+function TableCheckboxCell({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {gridCellProps} = useTableCell({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+
+  let {checkboxProps} = useTableSelectionCheckbox(
+    {
+      key: cell.parentKey,
+      isDisabled
+    },
+    state
+  );
+
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef)
+
+  return (
+    <div
+      {...gridCellProps}
+      ref={ref}>
+      {state.selectionManager.selectionMode !== 'none' &&
+        <input {...inputProps} />
+      }
+    </div>
+  );
+}
+
+function TableCell({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {gridCellProps} = useTableCell({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+
+  return (
+    <TableCellBase
+      {...gridCellProps}
+      cell={cell}
+      cellRef={ref} />
+  );
+}
+
+function TableRowHeader({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {rowHeaderProps} = useTableRowHeader({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+
+  return (
+    <TableCellBase
+      {...rowHeaderProps}
+      cell={cell}
+      cellRef={ref} />
+  );
+}
+
+function TableCellBase({cell, cellRef, ...otherProps}) {
+  let state = useTableContext();
+  let columnProps = cell.column.props;
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+
+  return (
+    <div
+      {...otherProps}
+      ref={cellRef}
+      // className={
+      //   classNames(
+      //     styles,
+      //     'spectrum-Table-cell',
+      //     {
+      //       'spectrum-Table-cell--divider': columnProps.showDivider,
+      //       'spectrum-Table-cell--hideHeader': columnProps.hideHeader,
+      //       'is-disabled': isDisabled
+      //     },
+      //     classNames(
+      //       stylesOverrides,
+      //       'react-spectrum-Table-cell',
+      //       {
+      //         'react-spectrum-Table-cell--alignCenter': columnProps.align === 'center',
+      //         'react-spectrum-Table-cell--alignEnd': columnProps.align === 'end'
+      //       }
+      //     )
+      //   )
+      // }>
+      >
+      <span>
+      {/* //   className={
+      //     classNames(
+      //       styles,
+      //       'spectrum-Table-cellContents'
+      //     )
+      // }> */}
+        {cell.rendered}
+      </span>
+    </div>
+  );
+}

From 065343e24da386ce90d966305b342970252f1bb2 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 27 Apr 2021 12:52:23 -0700
Subject: [PATCH 18/62] removing stuff from tooltip.stories

---
 .../tooltip/stories/Tooltip.stories.tsx       | 432 +-----------------
 1 file changed, 1 insertion(+), 431 deletions(-)

diff --git a/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx b/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
index adf51371ff7..fcf41a0317f 100644
--- a/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
+++ b/packages/@react-spectrum/tooltip/stories/Tooltip.stories.tsx
@@ -10,40 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {action} from '@storybook/addon-actions';
-import React, {useContext, useRef} from 'react';
+import React from 'react';
 import {storiesOf} from '@storybook/react';
 import {Tooltip} from '../src';
-import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableRowGroup, useTableRowHeader, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
-import {TableState, useTableState} from '@react-stately/table';
-import { mergeProps } from '@react-aria/utils';
-
-import {useCheckbox} from '@react-aria/checkbox';
-import {useToggleState} from '@react-stately/toggle';
-import {
-  Cell,
-  Column,
-  Row,
-  TableBody,
-  TableHeader
-} from '@react-stately/table';
-
-let onSelectionChange = action('onSelectionChange');
-let columns = [
-  {name: 'Foo', key: 'foo'},
-  {name: 'Bar', key: 'bar'},
-  {name: 'Baz', key: 'baz'}
-];
-let items = [
-  {test: 'Test 1', foo: 'Foo 1', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
-  {test: 'Test 2', foo: 'Foo 2', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'},
-  {test: 'Test 1', foo: 'Foo 3', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
-  {test: 'Test 2', foo: 'Foo 4', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'},
-  {test: 'Test 1', foo: 'Foo 5', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
-  {test: 'Test 2', foo: 'Foo 6', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'},
-  {test: 'Test 1', foo: 'Foo 7', bar: 'Bar 1', yay: 'Yay 1', baz: 'Baz 1'},
-  {test: 'Test 2', foo: 'Foo 8', bar: 'Bar 2', yay: 'Yay 2', baz: 'Baz 2'}
-];
 
 storiesOf('Tooltip', module)
   .add(
@@ -101,49 +70,6 @@ storiesOf('Tooltip', module)
   .add(
     'long content',
     () => render(longMarkup)
-  )
-  .add(
-    'dynamic',
-    () => (
-      // <Table aria-label="Table with dynamic contents" width={300} height={200}>
-      <Table aria-label="Table with dynamic contents" style={{width: '300px', height: '200px'}}>
-        <TableHeader columns={columns}>
-          {column => <Column>{column.name}</Column>}
-        </TableHeader>
-        <TableBody items={items}>
-          {item =>
-            (<Row key={item.foo}>
-              {key => <Cell>{item[key]}</Cell>}
-            </Row>)
-          }
-        </TableBody>
-      </Table>
-    )
-  )
-  .add(
-    'static',
-    () => (
-      // <Table aria-label="blah" selectionMode="multiple" width={500} height={200} isQuiet onSelectionChange={s => onSelectionChange([...s])}>
-      <Table aria-label="blah" selectionMode="multiple" onSelectionChange={s => onSelectionChange([...s])} style={{width: '500px', height: '200px'}}>
-        <TableHeader>
-          <Column isRowHeader>First Name</Column>
-          <Column isRowHeader>Last Name</Column>
-          <Column>Birthday</Column>
-        </TableHeader>
-        <TableBody>
-          <Row>
-            <Cell>Sam</Cell>
-            <Cell>Smith</Cell>
-            <Cell>May 3</Cell>
-          </Row>
-          <Row>
-            <Cell>Julia</Cell>
-            <Cell>Jones</Cell>
-            <Cell>February 10</Cell>
-          </Row>
-        </TableBody>
-      </Table>
-    )
   );
 
 const longMarkup = (
@@ -167,359 +93,3 @@ function render(content, props = {}) {
     </div>
   );
 }
-
-
-const TableContext = React.createContext(null);
-function useTableContext() {
-  return useContext(TableContext);
-}
-
-function Table(props) {
-  // NEEDED?
-  let {isQuiet} = props;
-  let state = useTableState({...props, showSelectionCheckboxes: true});
-  // NEEDED?
-  let density = props.density || 'regular';
-  let ref = useRef();
-  // NEEDED? Maybe too much, just pass some basic values, no need for density and scale?
-  // layout is technically optional
-  // let layout = useMemo(() => new TableLayout({
-  //   // If props.rowHeight is auto, then use estimated heights based on scale, otherwise use fixed heights.
-  //   rowHeight: props.overflowMode === 'wrap'
-  //     ? null
-  //     : ROW_HEIGHTS[density][scale],
-  //   estimatedRowHeight: props.overflowMode === 'wrap'
-  //     ? ROW_HEIGHTS[density][scale]
-  //     : null,
-  //   headingHeight: props.overflowMode === 'wrap'
-  //     ? null
-  //     : DEFAULT_HEADER_HEIGHT[scale],
-  //   estimatedHeadingHeight: props.overflowMode === 'wrap'
-  //     ? DEFAULT_HEADER_HEIGHT[scale]
-  //     : null,
-  //   getDefaultWidth: ({hideHeader, isSelectionCell, showDivider}) => {
-  //     if (hideHeader) {
-  //       let width = DEFAULT_HIDE_HEADER_CELL_WIDTH[scale];
-  //       return showDivider ? width + 1 : width;
-  //     } else if (isSelectionCell) {
-  //       return SELECTION_CELL_DEFAULT_WIDTH;
-  //     }
-  //   }
-  // }), [props.overflowMode, scale, density]);
-
-  let {gridProps} = useTable({
-    ...props,
-    // ref: domRef,
-    ref: ref,
-    // layout
-  }, state);
-  // console.log('state, state.collection', state, state.collection)
-  let headerRows = state.collection.rows.filter(item => item.type === 'headerrow' && item);
-  let rows = state.collection.rows.filter(item => item.type === 'item' && item);
-
-  let renderColumnNode = (node) => {
-    if (node.props.isSelectionCell) {
-      return <TableSelectAllCell column={node} />
-    }
-
-    return <TableColumnHeader column={node} />
-  };
-
-  let renderRowNode = (node) => {
-    if (node.props.isSelectionCell) {
-      return <TableCheckboxCell cell={node} />;
-    }
-
-    if (state.collection.rowHeaderColumnKeys.has(node.column.key)) {
-      return <TableRowHeader cell={node} />;
-    }
-
-    return <TableCell cell={node} />;
-  };
-
-  // TODO check the extra div styles
-  return (
-    <TableContext.Provider value={state}>
-      <div {...gridProps} style={props.style} ref={ref}>
-        <div style={{overflow: 'hidden'}}>
-          <TableHeaderRENAME>
-            {[...headerRows].map(headerRow => (
-              <TableHeaderRow item={headerRow}>
-                {[...headerRow.childNodes].map((column) => renderColumnNode(column))}
-              </TableHeaderRow>
-            ))}
-          </TableHeaderRENAME>
-        </div>
-        <div style={{padding: '0px', flex: '1 1 0%', overflow: 'auto'}}>
-          <div style={{overflow: 'visible'}}>
-            <TableRowGroup>
-              {[...rows].map(row => (
-                <TableRow item={row}>
-                  {[...row.childNodes].map((node) => renderRowNode(node))}
-                </TableRow>
-              ))}
-            </TableRowGroup>
-          </div>
-        </div>
-      </div>
-    </TableContext.Provider>
-  );
-}
-
-
-function TableHeaderRENAME({children, ...otherProps}) {
-  let {rowGroupProps} = useTableRowGroup();
-
-  return (
-    <div {...rowGroupProps} {...otherProps}>
-      {children}
-    </div>
-  );
-}
-
-function TableColumnHeader({column}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let {columnHeaderProps} = useTableColumnHeader({
-    node: column,
-    ref,
-    colspan: column.colspan,
-  }, state);
-
-  let columnProps = column.props;
-  // let {hoverProps, isHovered} = useHover({});
-
-  return (
-    <div
-      // {...mergeProps(columnHeaderProps, hoverProps)}
-      {...columnHeaderProps}
-      ref={ref}>
-      {column.rendered}
-      {/* {columnProps.hideHeader ?
-        <VisuallyHidden>{column.rendered}</VisuallyHidden> :
-        column.rendered
-      } */}
-      {/* TODO: add style/element for sorting? ignore sorting? */}
-      {/* {columnProps.allowsSorting &&
-        <ArrowDownSmall UNSAFE_className={classNames(styles, 'spectrum-Table-sortedIcon')} />
-      } */}
-    </div>
-  );
-}
-
-function TableSelectAllCell({column}) {
-  let ref = useRef();
-  let state = useTableContext();
-
-  let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
-  let {columnHeaderProps} = useTableColumnHeader({
-    node: column,
-    ref,
-    colspan: column.colspan,
-    isDisabled: isSingleSelectionMode
-  }, state);
-
-  let {checkboxProps} = useTableSelectAllCheckbox(state);
-  // let {hoverProps, isHovered} = useHover({});
-  // TODO
-  let inputRef = useRef(null);
-  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef)
-  return (
-    <div
-      // {...mergeProps(columnHeaderProps, hoverProps)}
-      {...columnHeaderProps}
-      aria-disabled={isSingleSelectionMode}
-      ref={ref}>
-      {/* <Checkbox
-        {...checkboxProps}
-        isDisabled={isSingleSelectionMode}
-        isEmphasized
-        UNSAFE_style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}}
-        UNSAFE_className={classNames(styles, 'spectrum-Table-checkbox')} /> */}
-      <input
-        // {...checkboxProps}
-        {...inputProps}
-        style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
-    </div>
-  );
-}
-
-function TableRowGroup({children, ...otherProps}) {
-  let {rowGroupProps} = useTableRowGroup();
-
-  return (
-    <div {...rowGroupProps} {...otherProps}>
-      {children}
-    </div>
-  );
-}
-
-function TableRow({item, children, ...otherProps}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(item.key);
-  let isSelected = state.selectionManager.isSelected(item.key) && !isDisabled;
-  let {rowProps} = useTableRow({
-    node: item,
-    isSelected,
-    ref,
-    isDisabled
-  }, state);
-
-  // TODO: do we need the below for the aria example?
-  // The row should show the focus background style when any cell inside it is focused.
-  // If the row itself is focused, then it should have a blue focus indicator on the left.
-  // let {
-  //   isFocusVisible: isFocusVisibleWithin,
-  //   focusProps: focusWithinProps
-  // } = useFocusRing({within: true});
-  // let {isFocusVisible, focusProps} = useFocusRing();
-  // let {hoverProps, isHovered} = useHover({isDisabled});
-  let props = mergeProps(
-    rowProps,
-    otherProps,
-    // focusWithinProps,
-    // focusProps,
-    // hoverProps
-  );
-
-  return (
-    <div
-      style={{display: 'flex', flexDirection: 'row'}}
-      {...props}
-      ref={ref}>
-      {/* // className={
-      //   classNames(
-      //     styles,
-      //     'spectrum-Table-row',
-      //     {
-      //       'is-selected': isSelected,
-      //       'is-focused': isFocusVisibleWithin,
-      //       'focus-ring': isFocusVisible,
-      //       'is-hovered': isHovered,
-      //       'is-disabled': isDisabled
-      //     }
-      //   )
-      // }> */}
-      {children}
-    </div>
-  );
-}
-
-function TableHeaderRow({item, children, ...otherProps}) {
-  return (
-    <div role="row" aria-rowindex={item.index + 1} {...otherProps} style={{display: 'flex', flexDirection: 'row'}}>
-      {children}
-    </div>
-  );
-}
-
-function TableCheckboxCell({cell}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {gridCellProps} = useTableCell({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-
-  let {checkboxProps} = useTableSelectionCheckbox(
-    {
-      key: cell.parentKey,
-      isDisabled
-    },
-    state
-  );
-
-  let inputRef = useRef(null);
-  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef)
-
-  return (
-    <div
-      {...gridCellProps}
-      ref={ref}>
-      {state.selectionManager.selectionMode !== 'none' &&
-        <input {...inputProps} />
-      }
-    </div>
-  );
-}
-
-function TableCell({cell}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {gridCellProps} = useTableCell({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-
-  return (
-    <TableCellBase
-      {...gridCellProps}
-      cell={cell}
-      cellRef={ref} />
-  );
-}
-
-function TableRowHeader({cell}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {rowHeaderProps} = useTableRowHeader({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-
-  return (
-    <TableCellBase
-      {...rowHeaderProps}
-      cell={cell}
-      cellRef={ref} />
-  );
-}
-
-function TableCellBase({cell, cellRef, ...otherProps}) {
-  let state = useTableContext();
-  let columnProps = cell.column.props;
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-
-  return (
-    <div
-      {...otherProps}
-      ref={cellRef}
-      // className={
-      //   classNames(
-      //     styles,
-      //     'spectrum-Table-cell',
-      //     {
-      //       'spectrum-Table-cell--divider': columnProps.showDivider,
-      //       'spectrum-Table-cell--hideHeader': columnProps.hideHeader,
-      //       'is-disabled': isDisabled
-      //     },
-      //     classNames(
-      //       stylesOverrides,
-      //       'react-spectrum-Table-cell',
-      //       {
-      //         'react-spectrum-Table-cell--alignCenter': columnProps.align === 'center',
-      //         'react-spectrum-Table-cell--alignEnd': columnProps.align === 'end'
-      //       }
-      //     )
-      //   )
-      // }>
-      >
-      <span>
-      {/* //   className={
-      //     classNames(
-      //       styles,
-      //       'spectrum-Table-cellContents'
-      //     )
-      // }> */}
-        {cell.rendered}
-      </span>
-    </div>
-  );
-}

From 848227292817fa2439b16c124e8f24b509e428c8 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 27 Apr 2021 14:05:38 -0700
Subject: [PATCH 19/62] adding examples to useTable

---
 packages/@react-aria/table/docs/useTable.mdx  | 190 +++++++++++++++++-
 .../table/docs/useTableState.mdx              |   5 +
 2 files changed, 185 insertions(+), 10 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index d1df86e2c85..82c9c3b08d9 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -152,7 +152,10 @@ For more information, see [Selection](/react-stately/selection.html).
 This example uses HTML `<div>` elements to construct the table. It uses `useTableState` to construct the table's collection of rows and columns,
 applying the appropriate attributes to each `<div>` using the various table hooks listed above paired with the div's role in the table.
 The table follows the [Collection Components API](../react-stately/collections.html), accepting both static and dynamic collections.
-The example below shows a static collection, which can be used when the full set of table contents is known ahead of time.
+
+The example below shows a static collection, which can be used when the full set of table contents is known ahead of time. Be sure to note the usage of
+`Cell`, `Column`, `Row`, `TableBody`, and `TableHeader` to construct the table structure. These elements are similar to `Item` and `Section` used in other components
+following the [Collection Components API](../react-stately/collections.html) mentioned previously, serving as node generators for the table collection.
 
 ```tsx example export=true
 import {Cell, Column, Row, TableBody, TableHeader, useTableState} from '@react-stately/table';
@@ -444,14 +447,14 @@ function TableCellBase({cell, cellRef, ...otherProps}) {
         outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
       }}
       ref={cellRef}>
-      <span>
+      <span style={{overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}>
         {cell.rendered}
       </span>
     </div>
   );
 }
 
-<Table aria-label="Example static collection table" style={{height: '200px'}}>
+<Table aria-label="Example static collection table" style={{height: '200px', maxWidth: '400px'}}>
   <TableHeader>
     <Column>Name</Column>
     <Column>Type</Column>
@@ -486,7 +489,8 @@ function TableCellBase({cell, cellRef, ...otherProps}) {
 
 ### Dynamic collections
 
-// TODO add description
+Dynamic collections, as shown below, can be used when the table data comes from an external data source such as an API call, or update over time.
+In the example below, both the columns and the rows are provided to the table via a render function.
 
 ```tsx example
 function Example() {
@@ -504,7 +508,7 @@ function Example() {
   ];
 
   return (
-    <Table aria-label="Example dynamic collection table" style={{height: '200px'}}>
+    <Table aria-label="Example dynamic collection table" style={{height: '200px', maxWidth: '400px'}}>
       <TableHeader columns={columns}>
         {(column) => (
           <Column key={column.key}>
@@ -528,13 +532,179 @@ function Example() {
 
 ### Selection
 
+By default, `useTableState` doesn't allow row selection but this can be modified using the `selectionMode` prop. Use `defaultSelectedKeys` to provide a default set of selected rows.
+Note that the value of the selected keys must match the `key` prop of the row.
+
+The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
+
+```tsx example
+<Table aria-label="Example table with single selection (uncontrolled)" selectionMode="single" defaultSelectedKeys={['2']} style={{height: '200px', maxWidth: '400px'}}>
+  <TableHeader>
+    <Column>Name</Column>
+    <Column>Type</Column>
+    <Column>Level</Column>
+  </TableHeader>
+  <TableBody>
+    <Row key="1">
+      <Cell>Charizard</Cell>
+      <Cell>Fire, Flying</Cell>
+      <Cell>67</Cell>
+    </Row>
+    <Row key="2">
+      <Cell>Blastoise</Cell>
+      <Cell>Water</Cell>
+      <Cell>56</Cell>
+    </Row>
+    <Row key="3">
+      <Cell>Venusaur</Cell>
+      <Cell>Grass, Poison</Cell>
+      <Cell>83</Cell>
+    </Row>
+    <Row key="4">
+      <Cell>Pikachu</Cell>
+      <Cell>Electric</Cell>
+      <Cell>100</Cell>
+    </Row>
+  </TableBody>
+</Table>
+```
+
+To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
+be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
+
+Here is how you would control selection for the above example.
+
+```tsx example export=true
+function PokemonTable(props) {
+  let columns = [
+    {name: 'Name', uid: 'name'},
+    {name: 'Type', uid: 'type'},
+    {name: 'Level', uid: 'level'}
+  ];
+  let rows = [
+    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
+    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
+    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
+  ];
+  let [selected, setSelected] = React.useState(new Set(['2']));
+  return (
+    <Table aria-label="Example table with single selection (controlled)" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} style={{height: '200px', maxWidth: '400px'}} {...props}>
+      <TableHeader columns={columns}>
+        {column => (
+          <Column key={column.uid}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody items={rows}>
+        {item => (
+          <Row key={item.id}>
+            {key => <Cell>{item[key]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+Multiple selection can be enabled by setting `selectionMode` to `multiple`.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="multiple" />
+```
+
+Table also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the Table selected at all times.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="single" disallowEmptySelection />
+```
+
+### Disabled rows
+
+You can disable specific rows by providing an array of keys to `useTableState` via the `disabledKeys` prop. This will prevent rows from being selectable as shown in the example below.
+Note that you are responsible for the styling of disabled rows.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="multiple" disabledKeys={['2']} />
+```
+
 ### Sorting
 
-### Async
-// show dynamic
-// show single selection, no selection, multiple selection
-// show sorting
-// show async
+Table supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
+the `allowsSorting` prop. The Table accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
+When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
+the `SortDescriptor` appropriately.
+
+This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
+See the docs for more information on how to perform server side sorting.
+
+```tsx example
+import {useAsyncList} from '@react-stately/data';
+
+function AsyncSortTable() {
+  let columns = [
+    {name: 'Name', key: 'name'},
+    {name: 'Height', key: 'height'},
+    {name: 'Mass', key: 'mass'},
+    {name: 'Birth Year', key: 'birth_year'}
+  ];
+  let list = useAsyncList({
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+      let res = await fetch(cursor || `https://swapi.dev/api/people/?search`, {signal});
+      let json = await res.json();
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    },
+    async sort({items, sortDescriptor}) {
+      let sorted = items.sort((a, b) => {
+        let cmp;
+        let first = a[sortDescriptor.column].replace("BBY", "");
+        let second = b[sortDescriptor.column].replace("BBY", "");
+        if (+first || +second) {
+          cmp = +first < +second ? -1 : 1;
+        } else {
+          cmp = first <= second ? -1 : 1;
+        }
+        if (sortDescriptor.direction === 'descending') {
+          cmp *= -1;
+        }
+        return cmp;
+      });
+      return {
+        items: sorted
+      };
+    }
+  });
+
+  return (
+    <Table aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort} style={{height: '400px', maxWidth: '600px'}}>
+      <TableHeader columns={columns}>
+        {(column) => (
+          <Column allowsSorting>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody
+        items={list.items}>
+        {(item) => (
+          <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+```
 
 ## Internationalization
 
diff --git a/packages/@react-stately/table/docs/useTableState.mdx b/packages/@react-stately/table/docs/useTableState.mdx
index 5523a080c1c..a2d2abcd434 100644
--- a/packages/@react-stately/table/docs/useTableState.mdx
+++ b/packages/@react-stately/table/docs/useTableState.mdx
@@ -30,6 +30,11 @@ keywords: [table, state]
 ## API
 
 <FunctionAPI function={docs.exports.useTableState} links={docs.links} />
+<FunctionAPI function={docs.exports.Cell} links={docs.links} />
+<FunctionAPI function={docs.exports.Column} links={docs.links} />
+<FunctionAPI function={docs.exports.Row} links={docs.links} />
+<FunctionAPI function={docs.exports.TableBody} links={docs.links} />
+<FunctionAPI function={docs.exports.TableHeader} links={docs.links} />
 
 ## Interface
 

From 5cd8fe555a1ead21820117f8b71f4538119519a6 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 27 Apr 2021 16:16:46 -0700
Subject: [PATCH 20/62] adding loadmore functionality

---
 packages/@react-aria/table/docs/useTable.mdx  | 28 +++++++++++++++++--
 .../table/docs/useTableState.mdx              |  3 +-
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 82c9c3b08d9..041c162a1ae 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -156,12 +156,13 @@ The table follows the [Collection Components API](../react-stately/collections.h
 The example below shows a static collection, which can be used when the full set of table contents is known ahead of time. Be sure to note the usage of
 `Cell`, `Column`, `Row`, `TableBody`, and `TableHeader` to construct the table structure. These elements are similar to `Item` and `Section` used in other components
 following the [Collection Components API](../react-stately/collections.html) mentioned previously, serving as node generators for the table collection.
+See [useTableState](/react-stately/useTableState.html) for more info on the props they support.
 
 ```tsx example export=true
 import {Cell, Column, Row, TableBody, TableHeader, useTableState} from '@react-stately/table';
 import {mergeProps} from '@react-aria/utils';
 import {useCheckbox} from '@react-aria/checkbox';
-import {useContext, useRef} from 'react';
+import {useContext, useLayoutEffect, useRef} from 'react';
 import {useFocusRing} from '@react-aria/focus';
 import {useToggleState} from '@react-stately/toggle';
 
@@ -173,6 +174,8 @@ function useTableContext() {
 function Table(props) {
   let state = useTableState({...props, showSelectionCheckboxes: true});
   let ref = useRef();
+  let scrollViewRef = useRef();
+  let {collection, selectionManager} = state;
 
   let {gridProps} = useTable({
     ...props,
@@ -202,9 +205,26 @@ function Table(props) {
     return <TableCell cell={node} />;
   };
 
+  let onScroll = (e) => {
+    if (e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight < 10) {
+      collection.body.props.onLoadMore && collection.body.props.onLoadMore();
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (scrollViewRef.current) {
+      let scrollHeight = scrollViewRef.current.scrollHeight;
+      let clientHeight = scrollViewRef.current?.clientHeight;
+
+      if (!(scrollHeight > clientHeight)) {
+        collection.body.props.onLoadMore && collection.body.props.onLoadMore();
+      }
+    }
+  }, [collection.body.props, scrollViewRef]);
+
   return (
     <TableContext.Provider value={state}>
-      <div {...gridProps} style={{...props.style, display: 'flex', flexDirection: 'column'}} ref={ref}>
+      <div {...gridProps} style={{...props.style, display: 'flex', flexDirection: 'column'}} ref={ref} onScroll={onScroll}>
         <TableHeaderGroup>
           {[...headerRows].map(headerRow => (
             <TableHeaderRow item={headerRow}>
@@ -213,6 +233,7 @@ function Table(props) {
           ))}
         </TableHeaderGroup>
         <div
+          ref={scrollViewRef}
           style={{
             borderTop: '2px solid black',
             borderBottom: '2px solid black',
@@ -696,7 +717,8 @@ function AsyncSortTable() {
         )}
       </TableHeader>
       <TableBody
-        items={list.items}>
+        items={list.items}
+        onLoadMore={list.loadMore}>
         {(item) => (
           <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
         )}
diff --git a/packages/@react-stately/table/docs/useTableState.mdx b/packages/@react-stately/table/docs/useTableState.mdx
index a2d2abcd434..da5405e430c 100644
--- a/packages/@react-stately/table/docs/useTableState.mdx
+++ b/packages/@react-stately/table/docs/useTableState.mdx
@@ -42,4 +42,5 @@ keywords: [table, state]
 
 ## Example
 
-See the docs for [useTable](/react-aria/useTable.html) in react-aria for an example of `useTableState`.
+See the docs for [useTable](/react-aria/useTable.html) in react-aria for an example of `useTableState`, `Cell`, `Column`,
+`Row`, `TableBody`, and `TableHeader`.

From 4c1eb93d324019386a9c76c4809b9766856144a6 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 28 Apr 2021 18:13:43 -0700
Subject: [PATCH 21/62] update transformer and packager so that renamed exports
 work in the docs api table

---
 packages/dev/parcel-packager-docs/DocsPackager.js     | 11 ++++++++++-
 .../dev/parcel-transformer-docs/DocsTransformer.js    |  4 ++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/dev/parcel-packager-docs/DocsPackager.js b/packages/dev/parcel-packager-docs/DocsPackager.js
index 630fa6da7b5..fa46f64cfb9 100644
--- a/packages/dev/parcel-packager-docs/DocsPackager.js
+++ b/packages/dev/parcel-packager-docs/DocsPackager.js
@@ -44,12 +44,21 @@ module.exports = new Packager({
     function _processAsset(asset, res) {
       let obj = processCode(asset, code.get(asset.id));
       for (let [exported] of asset.symbols) {
+
         let {asset: resolvedAsset, exportSymbol} = bundleGraph.resolveSymbol(asset, exported);
         let processed = resolvedAsset.id === asset.id ? obj : processAsset(resolvedAsset);
+
         if (exportSymbol === '*') {
           Object.assign(res, processed);
         } else {
-          res[exported] = processed[exportSymbol];
+          // Re-exported with different name (e.g. export {useGridCell as useTableCell})
+          if (exportSymbol !== exported) {
+            let clone = {...processed[exportSymbol]};
+            clone.name = exported;
+            res[exported] = clone;
+          } else {
+            res[exported] = processed[exportSymbol];
+          }
         }
       }
 
diff --git a/packages/dev/parcel-transformer-docs/DocsTransformer.js b/packages/dev/parcel-transformer-docs/DocsTransformer.js
index 5bdcdc0eebb..f33a81a3a35 100644
--- a/packages/dev/parcel-transformer-docs/DocsTransformer.js
+++ b/packages/dev/parcel-transformer-docs/DocsTransformer.js
@@ -41,8 +41,8 @@ module.exports = new Transformer({
         if (path.node.source) {
           let symbols = new Map();
           for (let specifier of path.node.specifiers) {
-            symbols.set(specifier.exported.name, {local: specifier.local.name});
-            asset.symbols.set(specifier.exported.name, specifier.local.name);
+            symbols.set(specifier.local.name, {local: specifier.exported.name});
+            asset.symbols.set(specifier.exported.name, specifier.exported.name);
           }
 
           asset.addDependency({

From 2ff09418107acb949edc1ba356e9fea1d995eb6b Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 29 Apr 2021 10:25:34 -0700
Subject: [PATCH 22/62] updating docs now that I can pull in useTablecell props

---
 packages/@react-aria/table/docs/useTable.mdx  | 63 +++++++------------
 .../dev/parcel-packager-docs/DocsPackager.js  |  1 -
 2 files changed, 22 insertions(+), 42 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 041c162a1ae..9a41e04c153 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -40,19 +40,19 @@ keywords: [table, aria]
 
 ## API
 
-TODO figure out how to get the api for useTableCell and useTableRowGroup to work, FunctionApi doesn't play nice with those perhaps because they are grid hooks that are renamed in the export?
-
 <FunctionAPI function={docs.exports.useTable} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableColumnHeader} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableRow} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableRowGroup} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableRowHeader} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableCell} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableSelectionCheckbox} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableSelectAllCheckbox} links={docs.links} />
 
 ## Features
 
 A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), [&lt;thead&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead),
-[&lt;tbody&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), and other table specific HTML elements, but this is very limited in functionality especially when it comes to user interactions.
+[&lt;tbody&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), and other table specific HTML elements, but is very limited in functionality especially when it comes to user interactions.
 `useTable` helps achieve accessible and interactive table components that can be styled as needed.
 
 * Exposed to assistive technology as a `grid` using ARIA
@@ -68,7 +68,7 @@ A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-
 * Virtualized scrolling support for performance with large tables
 
 ## Anatomy
-TODO: currently using the Table on the spectrum site, maybe should use the anatomy diagram on the contribution site? That one shows collapsible rows though...
+
 <Anatomy />
 
 A table consists of a container element, with columns and rows of cells containing data inside.The cells within a table may contain focusable elements or plain text content.
@@ -100,7 +100,9 @@ for assistive technology.
 `useTableRowGroup` returns props for a element containing one or more rows of column headers or cells. This is often equivalent
 to the header, body, and footer of the table:
 
-TODO FIGURE OUT WHY THIS IMPORT DOESN"T WORK
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableRowGroup.return.id].properties} />
+</TypeContext.Provider>
 
 `useTableRowHeader` returns props for the table cell that serves as a row's header:
 
@@ -110,7 +112,9 @@ TODO FIGURE OUT WHY THIS IMPORT DOESN"T WORK
 
 `useTableCell` returns props for an individual table cell:
 
-TODO FIGURE OUT WHY THIS IMPORT DOESN"T WORK
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableCell.return.id].properties} />
+</TypeContext.Provider>
 
 `useTableSelectionCheckbox` returns props for an individual table row selection checkbox:
 
@@ -162,7 +166,7 @@ See [useTableState](/react-stately/useTableState.html) for more info on the prop
 import {Cell, Column, Row, TableBody, TableHeader, useTableState} from '@react-stately/table';
 import {mergeProps} from '@react-aria/utils';
 import {useCheckbox} from '@react-aria/checkbox';
-import {useContext, useLayoutEffect, useRef} from 'react';
+import {useContext, useRef} from 'react';
 import {useFocusRing} from '@react-aria/focus';
 import {useToggleState} from '@react-stately/toggle';
 
@@ -175,15 +179,14 @@ function Table(props) {
   let state = useTableState({...props, showSelectionCheckboxes: true});
   let ref = useRef();
   let scrollViewRef = useRef();
-  let {collection, selectionManager} = state;
-
+  let {collection} = state;
   let {gridProps} = useTable({
     ...props,
     ref: ref
   }, state);
 
-  let headerRows = state.collection.rows.filter(item => item.type === 'headerrow' && item);
-  let rows = state.collection.rows.filter(item => item.type === 'item' && item);
+  let headerRows = collection.rows.filter(item => item.type === 'headerrow' && item);
+  let rows = collection.rows.filter(item => item.type === 'item' && item);
 
   let renderColumnNode = (node) => {
     if (node.props.isSelectionCell) {
@@ -198,33 +201,16 @@ function Table(props) {
       return <TableCheckboxCell cell={node} />;
     }
 
-    if (state.collection.rowHeaderColumnKeys.has(node.column.key)) {
+    if (collection.rowHeaderColumnKeys.has(node.column.key)) {
       return <TableRowHeader cell={node} />;
     }
 
     return <TableCell cell={node} />;
   };
 
-  let onScroll = (e) => {
-    if (e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight < 10) {
-      collection.body.props.onLoadMore && collection.body.props.onLoadMore();
-    }
-  };
-
-  useLayoutEffect(() => {
-    if (scrollViewRef.current) {
-      let scrollHeight = scrollViewRef.current.scrollHeight;
-      let clientHeight = scrollViewRef.current?.clientHeight;
-
-      if (!(scrollHeight > clientHeight)) {
-        collection.body.props.onLoadMore && collection.body.props.onLoadMore();
-      }
-    }
-  }, [collection.body.props, scrollViewRef]);
-
   return (
     <TableContext.Provider value={state}>
-      <div {...gridProps} style={{...props.style, display: 'flex', flexDirection: 'column'}} ref={ref} onScroll={onScroll}>
+      <div {...gridProps} style={{...props.style, display: 'flex', flexDirection: 'column'}} ref={ref}>
         <TableHeaderGroup>
           {[...headerRows].map(headerRow => (
             <TableHeaderRow item={headerRow}>
@@ -233,7 +219,6 @@ function Table(props) {
           ))}
         </TableHeaderGroup>
         <div
-          ref={scrollViewRef}
           style={{
             borderTop: '2px solid black',
             borderBottom: '2px solid black',
@@ -674,16 +659,13 @@ function AsyncSortTable() {
     {name: 'Mass', key: 'mass'},
     {name: 'Birth Year', key: 'birth_year'}
   ];
+
   let list = useAsyncList({
-    async load({signal, cursor}) {
-      if (cursor) {
-        cursor = cursor.replace(/^http:\/\//i, 'https://');
-      }
-      let res = await fetch(cursor || `https://swapi.dev/api/people/?search`, {signal});
+    async load({signal}) {
+      let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
       let json = await res.json();
       return {
-        items: json.results,
-        cursor: json.next
+        items: json.results
       };
     },
     async sort({items, sortDescriptor}) {
@@ -708,7 +690,7 @@ function AsyncSortTable() {
   });
 
   return (
-    <Table aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort} style={{height: '400px', maxWidth: '600px'}}>
+    <Table aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort} style={{height: '300px', maxWidth: '600px'}}>
       <TableHeader columns={columns}>
         {(column) => (
           <Column allowsSorting>
@@ -717,8 +699,7 @@ function AsyncSortTable() {
         )}
       </TableHeader>
       <TableBody
-        items={list.items}
-        onLoadMore={list.loadMore}>
+        items={list.items}>
         {(item) => (
           <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
         )}
diff --git a/packages/dev/parcel-packager-docs/DocsPackager.js b/packages/dev/parcel-packager-docs/DocsPackager.js
index fa46f64cfb9..6b44d53859f 100644
--- a/packages/dev/parcel-packager-docs/DocsPackager.js
+++ b/packages/dev/parcel-packager-docs/DocsPackager.js
@@ -44,7 +44,6 @@ module.exports = new Packager({
     function _processAsset(asset, res) {
       let obj = processCode(asset, code.get(asset.id));
       for (let [exported] of asset.symbols) {
-
         let {asset: resolvedAsset, exportSymbol} = bundleGraph.resolveSymbol(asset, exported);
         let processed = resolvedAsset.id === asset.id ? obj : processAsset(resolvedAsset);
 

From 323f1664fa674fda0cd74df260a55b7a91c32f03 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 11 May 2021 13:20:41 -0700
Subject: [PATCH 23/62] updating svg

---
 .../@react-aria/table/docs/TableAnatomy.svg   | 1840 +----------------
 1 file changed, 114 insertions(+), 1726 deletions(-)

diff --git a/packages/@react-aria/table/docs/TableAnatomy.svg b/packages/@react-aria/table/docs/TableAnatomy.svg
index 034141a4dca..ae2a58e96fe 100644
--- a/packages/@react-aria/table/docs/TableAnatomy.svg
+++ b/packages/@react-aria/table/docs/TableAnatomy.svg
@@ -1,1727 +1,115 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 914 380" style="enable-background:new 0 0 914 380;" xml:space="preserve">
-<title>Table anatomy diagram</title>
-<desc>Shows a table component with labels pointing to its parts, including the row, row divider, column, column header, column divider, sort icon, and cell elements.</desc>
-<image style="overflow:visible;" width="1828" height="760" xlink:href="data:image/png;base64,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
-+c2WYsu2Fduutz1l+9rO3i7F7mu7RrvH9kb2PPti+zr7Ww50hyCHAocah8uOREe2Y67jZscLTqiT
-l5PYqdrpvDPq7O0scd7s3DmGMMZ3jHRMzZhrLjQXjkuRS53L3bHMsdFjS8Y2jn06zmZc2rjV406N
-++jq5ZrnusP1ppu+2wS3Erdmt+fuTu4C92r3yx50j3CPBR5NHs88nT1Fnls8r3sxvCZ6fe3V6vXB
-28db7l3v3eNj45Phs8nnGtuAHcdezj7tS/AN8V3ge9j3rZ+3X6Hffr+//F38c/33+D8ebz9eNH7H
-+PsBVgH8gG0BXYGswIzAbwO7giyD+EE1QfeCrYOFwTuDH3EcOTmcvZynIa4h8pCDIa+5ftx53JZQ
-LDQitCy0I0w/LClsY9idcKvw7PC68L4Ir4g5ES2RhMioyNWR13hmPAGvltc3wWfCvAltUbSohKiN
-UfeinaLl0c0T0YkTJq6ZeCvGNkYa0xgLYnmxa2Jvx9nHFcT9PIk4KW5S9aSH8W7xc+NPJTASpifs
-SXiVGJK4MvFmkkOSMqk1WSc5Pbk2+XVKaEpFStfkcZPnTT6XapIqSW1KI6Ulp+1M658SNmXdlO50
-r/TS9KtT7afOmnpmmsm0vGlHputM508/kEHISMnYk/GeH8uv4fdn8jI3ZfYJuIL1gifCYOFaYY8o
-QFQhepQVkFWR9Tg7IHtNdo84SFwp7pVwJRslz3Iic7bmvM6Nzd2VO5iXkrcvn5yfkX9Iqi/NlbbN
-MJ8xa0anzFlWKusq8CtYV9Anj5LvVCCKqYqmQgP48d6udFB+pbxbFFhUXfRmZvLMA7P0Zklntc92
-mr1s9qPi8OLv5uBzBHNa51rOXTT37jzOvG3zkfmZ81sXWC9YsqB7YcTC3Yuoi3IX/VriWlJR8nJx
-yuLmJWZLFi65/1XEV3Wl2qXy0mtf+3+9dSm+VLK0Y5nHsg3LPpYJy86Wu5ZXlr9fLlh+9hu3b6q+
-GVyRtaJjpffKLauIq6Srrq4OWr27Qq+iuOL+molrGtay1patfblu+rozlZ6VW9dT1yvXd1VFVzVt
-sNmwasP7jeKNV6pDqvdtMt20bNPrzcLNF7cEb6nfara1fOu7byXfXt8Wsa2hxq6mcjtxe9H2hzuS
-d5z6jv1d7U6TneU7P+yS7uraHb+7rdantnaP6Z6VdWidsq5nb/reC9+Hft9U71K/bR9zX/kP4Afl
-D3/8mPHj1f1R+1sPsA/U/2T706aDjINlDUjD7Ia+RnFjV1NqU+ehCYdam/2bD/489uddhy0PVx8x
-PLLyKPXokqODx4qP9bfIWnqPZx+/3zq99eaJyScut01q6zgZdfL0L+G/nDjFOXXsdMDpw2f8zhw6
-yz7beM77XEO7V/vBX71+Pdjh3dFw3ud80wXfC82d4zuPXgy6ePxS6KVfLvMun7sSc6XzatLV69fS
-r3VdF15/fCPvxrPfin4buLnwFuFW2W3d25V3TO/U/O74+74u764jd0Pvtt9LuHfzvuD+kweKB++7
-lzykP6x8ZPGo9rH748M94T0X/pjyR/cT2ZOB3tI/9f7c9NTh6U9/Bf/V3je5r/uZ/Nng8+UvjF/s
-eun5srU/rv/Oq/xXA6/L3hi/2f2W/fbUu5R3jwZmvie9r/rg+KH5Y9THW4P5g4Myvpw/9CmAwYZm
-ZQHwfBcA9FT47XABHhOmqM98Q4Koz6lDBP4Tq8+FQ+INwK5gAJIWAhANv1G2wGYLmQbvqk/1xGCA
-eniMNI0osjzc1b5o8MRDeDM4+MIMAFIzAB/kg4MDmwcHP8AzKnYDgJYC9VlTJUR4NvjWSEXt13TB
-l6I+h36W45d3oIrAE3x5/xcgdIelWOckdwAAAIplWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEb
-AAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAACQAAAAAQAAAJAAAAABAAOS
-hgAHAAAAEgAAAHigAgAEAAAAAQAABySgAwAEAAAAAQAAAvgAAAAAQVNDSUkAAABTY3JlZW5zaG90
-QvsOQgAAAAlwSFlzAAAWJQAAFiUBSVIk8AAAAddpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4
-OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4w
-Ij4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJk
-Zi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAg
-ICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAg
-ICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTgyODwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAg
-ICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAg
-ICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj43NjA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAg
-ICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KuBLRtwAAABxp
-RE9UAAAAAgAAAAAAAAF8AAAAKAAAAXwAAAF8AADFKkbuyJ8AAEAASURBVHgB7N0HnB1l2TfgO733
-UNITem/SpNjF3hvYAHsXUUF9VVBRUVA/fbEjqNgb9vaqiIXeewkkpJJCeq/f80yYzdmzuzmbk93N
-bvaa72fOOdPnmp3h/eY/9/P0WLl6w+bNm8NAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB
-ugR69ojo169X5M/qoceKVRvEkdUqfhMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgsF0CfXr3
-iL59ejZZRiDZhMQIAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTqERjQv2mVpECyHknLECBA
-gAABAgQIECBAgAABAgQIECBAgAABAgQIECDQRKB3qpLsV1UlKZBswmQEAQIECBAgQIAAAQIECBAg
-QIAAAQIECBAgQIAAAQL1CPRMLbYOSH1JVg4CyUoN3wkQIECAAAECBAgQIECAAAECBAgQIECAAAEC
-BAgQqFugR1py4ACBZN2AFiRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAYNsCgwSS2wYylQAB
-AgQIECBAgAABAgQIECBAgAABAgQIECBAgACB+gUEkvXbWZIAAQIECBAgQIAAAQIECBAgQIAAAQIE
-CBAgQIAAgRoCAskaQCYTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFC/gECyfjtLEiBAgAAB
-AgQIECBAgAABAgQIECBAgAABAgQIECBQQ0AgWQPIZAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAA
-AQIE6hcQSNZvZ0kCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBGoICCRrAJlMgAABAgQIECBA
-gAABAgQIECBAgAABAgQIECBAgED9AgLJ+u0sSYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBA
-DQGBZA0gkwkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqF9AIFm/nSUJECBAgAABAgQIECBA
-gAABAgQIECBAgAABAgQIEKghIJCsAWQyAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQL1Cwgk
-67ezJAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECNQQEkjWATCZAgAABAgQIECBAgAABAgQI
-ECBAgAABAgQIECBAoH4BgWT9dpYkQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCGgECyBpDJ
-BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjULyCQrN/OkgQIECBAgAABAgQIECBAgAABAgQI
-ECBAgAABAgQI1BAQSNYAMpkAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgfoFBJL121mSAAEC
-BAgQIECAAAECBAgQIECAAAECBAgQIECAAIEaAgLJGkAmEyBAgAABAgQIECBAgAABAgQIECBAgAAB
-AgQIECBQv4BAsn47SxIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUENAIFkDyGQCBAgQIECA
-AAECBAgQIECAAAECBAgQIECAAAECBOoXEEjWb2dJAgQIECBAgAABAgQIECBAgAABAgQIECBAgAAB
-AgRqCAgkawCZTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBA/QICyfrtLEmAAAECBAgQIECA
-AAECBAgQIECAAAECBAgQIECAQA0BgWQNIJMJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKhf
-QCBZv50lCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCoISCQrAFkMgECBAgQIECAAAECBAgQ
-IECAAAECBAgQIECAAAEC9QsIJOu3syQBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAjUEBJI1
-gEwmQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKB+AYFk/XaWJECAAAECBAgQIECAAAECBAgQ
-IECAAAECBAgQIECghoBAsgaQyQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI1C8gkKzfzpIE
-CBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECNQQEEjWADKZAAECBAgQIECAAAECBAgQIECAAAEC
-BAgQIECAAIH6BQSS9dtZkgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBGgICyRpAJhMgQIAA
-AQIECBAgQIAAAQIECBAgQIAAAQIECBAgUL+AQLJ+O0sSIECAAAECBAgQIECAAAECBAgQIECAAAEC
-BAgQIFBDQCBZA8hkAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTqFxBI1m9nSQIECBAgQIAA
-AQIECBAgQIAAAQIECBAgQIAAAQIEaggIJGsAmUyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECA
-QP0CAsn67SxJgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEANAYFkDSCTCRAgQIAAAQIECBAg
-QIAAAQIECBAgQIAAAQIECBCoX0AgWb+dJQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqCEg
-kKwBZDIBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAvULCCTrt7MkAQIECBAgQIAAAQIECBAg
-QIAAAQIECBAgQIAAAQI1BASSNYBMJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgfgGBZP12
-liRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoIaAQLIGkMkECBAgQIAAAQIECBAgQIAAAQIE
-CBAgQIAAAQIECNQvIJCs386SBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjUEBBI1gAymQAB
-AgQIECBAgAABAgQIECBAgAABAgQIECBAgACB+gUEkvXbWZIAAQIECBAgQIAAAQIECBAgQIAAAQIE
-CBAgQIAAgRoCAskaQCYTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFC/gECyfjtLEiBAgAAB
-AgQIECBAgAABAgQIECBAgAABAgQIECBQQ0AgWQPIZAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAA
-AQIE6hcQSNZvZ0kCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBGoICCRrAJlMgAABAgQIECBA
-gAABAgQIECBAgAABAgQIECBAgED9AgLJ+u0sSYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBA
-DQGBZA0gkwkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqF9AIFm/nSUJECBAgAABAgQIECBA
-gAABAgQIECBAgAABAgQIEKghIJCsAWQyAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQL1Cwgk
-67ezJAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECNQQEkjWATCZAgAABAgQIECBAgAABAgQI
-ECBAgAABAgQIECBAoH4BgWT9dpYkQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCGgECyBpDJ
-BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjULyCQrN/OkgQIECBAgAABAgQIECBAgAABAgQI
-ECBAgAABAgQI1BAQSNYAMpkAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgfoFBJL121mSAAEC
-BAgQIECAAAECBAgQIECAAAECBAgQIECAAIEaAgLJGkAmEyBAgAABAgQIECBAgAABAgQIECBAgAAB
-AgQIECBQv4BAsn47SxIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUENAIFkDyGQCBAgQIECA
-AAECBAgQIECAAAECBAgQIECAAAECBOoXEEjWb2dJAgQIECBAgAABAgQIECBAgAABAgQIECBAgAAB
-AgRqCAgkawCZTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBA/QICyfrtLEmAAAECBAgQIECA
-AAECBAgQIECAAAECBAgQIECAQA0BgWQNIJMJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKhf
-QCBZv50lCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCoISCQrAFkMgECBAgQIECAAAECBAgQ
-IECAAAECBAgQIECAAAEC9QsIJOu3syQBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAjUEBJI1
-gEwmQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKB+AYFk/XaWJECAAAECBAgQIECAAAECBAgQ
-IECAAAECBAgQIECghoBAsgaQyQQIECBAgAABAgQIECBAgMBWgV//c0bcO315vPRpE2L/iUO3TtgF
-v/3u37PinmlL48VP6TrH+pO/To/7ZyyP1z9nSkwZN3gXPCsOiQABAgQIECBAoCsKCCS74lmzzwQI
-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
-ECDQ1QQEkl3tjNlfAgQIECBAgAABArugwOLUbOW0OSuKI5sydnCMGLKlknQXPFSHRIAAAQIECBAg
-QIAAAQIEup2AQLLbnXIHTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDjBASSHWdtSwQIECBA
-gAABAgQIECBAgAABAgQIECBAgAABAgS6nYBAstudcgdMgAABAgQIECBAgAABAgQIECBAgAABAgQI
-ECBAoOMEBJIdZ21LBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBLqdgECy251yB0yAAAECBAgQ
-IECAAAECBAgQIECAAAECBAgQIECg4wQEkh1nbUsECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE
-up2AQLLbnXIHTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDjBASSHWdtSwQIECBAgAABAgQI
-ECBAgAABAgQIECBAgAABAgS6nYBAstudcgdMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoOME
-BJIdZ21LBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBLqdgECy251yB0yAAAECBAgQIECAAAEC
-BAgQIECAAAECBAgQIECg4wQEkh1nbUsECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEup2AQLLb
-nXIHTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDjBASSHWdtSwQIECBAgAABAgQIECBAgAAB
-AgQIECBAgAABAgS6nYBAstudcgdMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoOMEBJIdZ21L
-BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBLqdgECy251yB0yAAAECBAgQIECAAAECBAgQIECA
-AAECBAgQIECg4wQEkh1nbUsECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEup2AQLLbnXIHTIAA
-AQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDjBASSHWdtSwQIECBAgAABAgQIECBAgAABAgQIECBA
-gAABAgS6nYBAstudcgdMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoOMEBJIdZ21LBAgQIECA
-AAECBAgQIECAAAECBAgQIECAAAECBLqdgECy251yB0yAAAECBAgQ2DUF1m/YHCtXr4sNmzZH/r55
-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
-+nQJSTl/B2//d558/ONi6aLi4j5N3Wrt4x8WavTkAhf9+GyvjlHTufr7iBSS7ZtV1FSvMzVyc4WL
-XrQopbKl0qeS9eYVTUha/9t27JV/DxgtGzRNrdWdNGlqbcy0ddLv1cnu+RCVh4fUKu2e+//s1miv
-qx8eKev12JNVCN6sYtBrv6gkNWFjItBkQGmNKrr5iTGye88+efyW7NVttNSttwwe59bXE86WyvFb
-jfDyXnvnNcl6+QMjZZNGp3XVdLG9NW1sZENIRhI5uNeJLiQt5a8XMfv6fYe5qGiTXrcOGit79PNk
-95NjNO1nZJs8d6OKwGkaAVxYXtQIXWtWx/ERTZ9s7d/6A4AjNLLvYFtmQnKrjvO+Fydpmumd4qVq
-9c73+NvTZer8gxeSr97bRe9TPhu7/wQD3pwmMxZudGxycs/1xpnR4yiVui+o3LUozCd7dnCRm7av
-1cHsO3SSO2yARqfWrFIiahe/jFspb2gdzeJFCordmyNbdoSk1eK0+21R5fCURkfa/Sy/G0Iyv1eA
-80MAAhCAAAQgAIHEJoCQTOz1Y/QQgAAEIAABCEAgZQkEQUjeMmicWH1CS7Xqj1aKdVE8cZeRkFy1
-fqeTb9afpUVtrbUmrVkU1Xv/Wyh1NELRhEBk26dCY4zWQPtq+FKXUvXFuzq6Xfq9OsW9bzUWrdZi
-Vs0vJB/QaEX7st6EXCNNK/vwv9voF+TpZaT16c0rIyFp+zytKSstJW2z+uXkiVva2lvywXcL5N1v
-F7o0p89p3cyM2qtfztHosqVuHPZFvb9ZTU8Ttpbu1cZnUveCk+rKpRrtlN1mEV13DrHak5oiViOU
-vtCINkut+1zvTmEpahcu3yo3aeSpted6d5R6ui6RDSEZSeTgXie6kPzs50Xy5W9LxWpCDtW0ytZm
-LNgkA96a6qJ/LQK3aJG0tMMeKauBul7Tn7765Vz31nP6o4Iy+nn89s9l8v53C6V8qaIypFcHb/eD
-esxMSHrRmO21juWtEamk4y0kX/1irgyfuEqa1Ssn91yZ9T0sOxBMtPZ5fqJLe3u63tPPP7Fe6HC7
-xu9/OU1IPqb1cv3pckM76ZPfNNX2axqRXUyF5MsHKSQffGWy+/flhE7V5fJTs3//8o8rt54jJHOL
-JP1AAAIQgAAEIACB1CSAkEzNdWfWEIAABCAAAQhAIOEJBEFIPvDSZLEols4tK7mUq9mF6om7jITk
-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
-AIHaCAgka+OqVQIECBAgQIAAAQIE2llAANXOoHXenPuhzguo+wQIECBAgAABAgQINJSAQLKhym2w
-BAgQIECAAAECBOpXQABVv7WrRc/dD7VQ1SYBAgQIECBAgAABAgRqIyCQrI2rVgkQIECAAAECBAgQ
-aGcBAVQ7g9Z5c+6HOi+g7hMgQIAAAQIECBAg0FACAsmGKrfBEiBAgAABAgQIEKhfAQFU/dauFj13
-P9RCVZsECBAgQIAAAQIECBCojYBAsjauWiVAgAABAgQIECBAoJ0FBFDtDFrnzbkf6ryAuk+AAAEC
-BAgQIECAQEMJCCQbqtwGS4AAAQIECBAgQKB+BQRQ9Vu7WvTc/VALVW0SIECAAAECBAgQIECgNgIC
-ydq4apUAAQIECBAgQIAAgXYWEEC1M2idN+d+qPMC6j4BAgQIECBAgAABAg0lIJBsqHIbLAECBAgQ
-IECAAAECBAgQIECAAAECBAgQIECAAIGOFRBIdqy3qxEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE
-CBBoKAGBZEOV22AJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIdKyAQLJjvV2NAAECBAgQIECA
-AAECBAgQIECAAAECBAgQIECAQEMJCCQbqtwGS4AAAQIECBAgQLybGREAACoZSURBVIAAAQIECBAg
-QIAAAQIECBAgQKBjBQSSHevtagQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQaSkAg2VDlNlgC
-BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECHSsgkOxYb1cjQIAAAQIECBAgQKCZwK2T5sbfbpsV
-++w8JI45ZESzPV42ooD7oRGrbswECBAgQIAAAQIECDSCgECyEapsjAQIECBAgAABAgS2UGDpstXx
-yPRFMX/xikivB/TtHsMG94rx2w+Mrl02v/Gv/fSBuPneOXHysePj6IO33fyGnNmhAu6HDuV2MQIE
-CBAgQIAAAQIECNS9gECy7ktoAAQIECBAgAABAgRqJzBt1pL40R+mxn2PzI9Vq9ducKEX77t1fOBN
-u2zwfmvf+Oild8b07Brnvnev2GXMoNae5rhOEnA/dBK8yxIgQIAAAQIECBAgQKDOBQSSdV5A3SdA
-gAABAgQIECBQK4G/3Dozrv79lFixck107Roxanj/2HG7frHVwJ6xcPHKeGj64jhsr6HxuiO336wu
-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
-AQIECBAgQIAAAQIECBAgQIBAWQQEkmWphH4QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqKCA
-QLKCRTUkAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAmUREEiWpRL6QYAAAQIECBAgQIAAAQIE
-CBAgQIAAAQIECBAgQKCCAgLJChbVkAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiURUAgWZZK
-6AcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBCgoIJCtYVEMiQIAAAQIECBAgQIAAAQIECBAg
-QIAAAQIECBAgUBYBgWRZKqEfBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBCooIJCsYFENiQAB
-AgQIECBAgAABAgQIECBAgAABAgQIECBAgEBZBASSZamEfhAgQIAAAQIECBAgQIAAAQIECBAgQIAA
-AQIECBCooIBAsoJFNSQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECZREQSJalEvpBgAABAgQI
-ECBAgAABAgQIECBAgAABAgQIECBAoIICAskKFtWQCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE
-CJRFQCBZlkroBwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEKCggkK1hUQyJAgAABAgQIECBA
-gAABAgQIECBAgAABAgQIECBQFgGBZFkqoR8ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEKigg
-kKxgUQ2JAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQFkEBJJlqYR+ECBAgAABAgQIECBAgAAB
-AgQIECBAgAABAgQIEKiggECygkU1JAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJlERBIlqUS
-+kGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgggICyQoW1ZAIECBAgAABAgQIECBAgAABAgQI
-ECBAgAABAgQIlEVAIFmWSugHAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQoKCCQrWFRDIkCA
-AAECBAgQIECAAAECBAgQIECAAAECBAgQIFAWAYFkWSqhHwQIECBAgAABAgQIECBAgAABAgQIECBA
-gAABAgQqKCCQrGBRDYkAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAWQQEkmWphH4QIECAAAEC
-BAgQIECAAAECBAgQIECAAAECBAgQqKCAQLKCRTUkAgQIECBAgAABAgQIECBAgAABAgQIECBAgAAB
-AmUREEiWpRL6QYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCCAgLJChbVkAgQIECAAAECBAgQ
-IECAAAECBAgQIECAAAECBAiURUAgWZZK6AcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBCgoI
-JCtYVEMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUBYBgWRZKqEfBAgQIECAAAECBAgQIECA
-AAECBAgQIECAAAECBCooIJCsYFENiQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBZBASSZamE
-fhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCooIBAsoJFNSQCBAgQIECAAAECBAgQIECAAAEC
-BAgQIECAAAECZREQSJalEvpBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoIICAskKFtWQCBAg
-QIAAAQIECBAgQIAAAQIECBAgQIAAAQIECJRFQCBZlkroBwECBAgQIECAAAECBAgQIECAAAECBAgQ
-IECAAIEKCggkK1hUQyJAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQFgGBZFkqoR8ECBAgQIAA
-AQIECBAgQIAAAQIECBAgQIAAAQIEKiggkKxgUQ2JAAECBAgQIECAAAECBAgQIECAAAECBAgQIECA
-QFkEBJJlqYR+ECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiggECygkU1JAIECBAgQIAAAQIE
-CBAgQIAAAQIECBAgQIAAAQJlERBIlqUS+kGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgggIC
-yQoW1ZAIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIlEVAIFmWSugHAQIECBAgQIAAAQIECBAg
-QIAAAQIECBAgQIAAgQoKCCQrWFRDIkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFAWAYFkWSqh
-HwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQqKCCQrGBRDYkAAQIECBAgQIAAAQIECBAgQIAA
-AQIECBAgQIBAWQQEkmWphH4QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqKCAQLKCRTUkAgQI
-ECBAgAABAgQIECBAgAABAgQIECBAgAABAmUREEiWpRL6QYAAAQIECBAgQIAAAQIECBAgQIAAAQIE
-CBAgQKCCAgLJChbVkAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiURUAgWZZK6AcBAgQIECBA
-gAABAgQIECBAgAABAgQIECBAgACBCgoIJCtYVEMiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg
-UBYBgWRZKqEfBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBCooIJCsYFENiQABAgQIECBAgAAB
-AgQIECBAgAABAgQIECBAgEBZBASSZamEfhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCooIBA
-soJFNSQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECZREQSJalEvpBgAABAgQIECBAgAABAgQI
-ECBAgAABAgQIECBAoIICAskKFtWQCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECJRFQCBZlkro
-BwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEKCggkK1hUQyJAgAABAgQIECBAgAABAgQIECBA
-gAABAgQIECBQFgGBZFkqoR8ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEKiggkKxgUQ2JAAEC
-BAgQIECAAAECBAgQIECAAAECBAgQIECAQFkEBJJlqYR+ECBAgAABAgQIECBAgAABAgQIECBAgAAB
-AgQIEKiggECygkU1JAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJlERBIlqUS+kGAAAECBAgQ
-IECAAAECBAgQIECAAAECBAgQIECgggICyQoW1ZAIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI
-lEVAIFmWSugHAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQoKCCQrWFRDIkCAAAECBAgQIECA
-AAECBAgQIECAAAECBAgQIFAWAYFkWSqhHwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQqJtAl
-G0/fPt1ajKrL4qWr1rZ4xzcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDYDIFuXbtE715d
-W5wpkGzB4RsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBDZXoEf3LtGzh0Byc/2cR4AAAQIE
-CBAgQIAAAQIECBAgQIAAAQIECBAgQIDAJgT69u4WXdK6rc02MySbYXhJgAABAgQIECBAgAABAgQI
-ECBAgAABAgQIECBAgMDmCaSZkWmG5Ppbl6XPrFq7xlMk13fxPQECBAgQIECAAAECBAgQIECAAAEC
-BAgQIECAAAECrRTIHh0ZfbLZkRvbuqzNthUr18TKVVLJjQF5jwABAgQIECBAgAABAgQIECBAgAAB
-AgQIECBAgACB5xfY2HMjmx+dB5LpjTVrIlauXpN9XZu/bn6Q1wQIECBAgAABAgQIECBAgAABAgQI
-ECBAgAABAgQIECgEunaN6Jo9LLJH966RXm9qawokN3WQfQQIECBAgAABAgQIECBAgAABAgQIECBA
-gAABAgQIENgcAYHk5qg5hwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBVgn8f5o5WQL5PTtO
-AAAAAElFTkSuQmCC" transform="matrix(0.5 0 0 0.5 0 0)">
-</image>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="842" height="342" style="max-height: 342; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: 4px;" viewBox="0 0 842 342">
+  <title>Table anatomy diagram</title>
+  <desc>Shows a table component with labels pointing to its parts, including the row, row divider, column, column header, column divider, sort icon, and cell elements.</desc>
+  <defs>
+    <clipPath id="clip-table_anatomy">
+      <rect width="842" height="342"/>
+    </clipPath>
+  </defs>
+  <g id="table_anatomy" clip-path="url(#clip-table_anatomy)">
+    <rect width="842" height="342" fill="var(--anatomy-gray-100)4f6fc"/>
+    <g id="Group_4011" data-name="Group 4011" transform="translate(-36 403)">
+      <rect id="Rectangle_3659" data-name="Rectangle 3659" width="20" height="20" transform="translate(392 -340)" fill="red" opacity="0"/>
+      <text id="Column_header" data-name="Column
+header" transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.576" y="15">header</tspan></text>
+      <path id="Union_50" data-name="Union 50" d="M-8701-353.5a2.5,2.5,0,0,1,2-2.45V-374h1v18.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8701-353.5Z" transform="translate(9100.5 34)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <text id="Typography" transform="translate(543 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="-26.224" y="0">SENT</tspan></text>
+    <g id="rectangle-33" transform="translate(276 107)" fill="var(--anatomy-gray-100)ff">
+      <path d="M 296 188.5 L 4 188.5 C 2.070076942443848 188.5 0.5 186.9299163818359 0.5 185 L 0.5 4 C 0.5 2.070076942443848 2.070076942443848 0.5 4 0.5 L 296 0.5 C 297.929931640625 0.5 299.5 2.070076942443848 299.5 4 L 299.5 185 C 299.5 186.9299163818359 297.929931640625 188.5 296 188.5 Z" stroke="none"/>
+      <path d="M 4 1 C 2.345794677734375 1 1 2.345809936523438 1 4 L 1 185 C 1 186.6541900634766 2.345794677734375 188 4 188 L 296 188 C 297.6542053222656 188 299 186.6541900634766 299 185 L 299 4 C 299 2.345809936523438 297.6542053222656 1 296 1 L 4 1 M 4 0 L 296 0 C 298.2091064453125 0 300 1.790847778320312 300 4 L 300 185 C 300 187.2091522216797 298.2091064453125 189 296 189 L 4 189 C 1.79083251953125 189 0 187.2091522216797 0 185 L 0 4 C 0 1.790847778320312 1.79083251953125 0 4 0 Z" stroke="none" fill="var(--anatomy-gray-300)"/>
+    </g>
+    <text id="Typography-2" data-name="Typography" transform="translate(557 135)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-30.618" y="0">6,554</tspan></text>
+    <rect id="rectangle-34" width="298" height="1" transform="translate(277 154)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-2" data-name="rectangle-34" width="298" height="1" transform="translate(277 107)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-3" data-name="rectangle-34" width="298" height="1" transform="translate(277 201)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-4" data-name="rectangle-34" width="298" height="1" transform="translate(277 248)" fill="var(--anatomy-gray-300)"/>
+    <text id="Typography-3" data-name="Typography" transform="translate(557 182)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.106" y="0">2,875</tspan></text>
+    <text id="Typography-4" data-name="Typography" transform="translate(557 229)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.652" y="0">3,679</tspan></text>
+    <text id="Typography-5" data-name="Typography" transform="translate(557 276)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-28.462" y="0">1,308</tspan></text>
+    <text id="Tree_item" data-name="Tree item" transform="translate(340 137)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
+    <text id="Tree_item-2" data-name="Tree item" transform="translate(340 183)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
+    <text id="Tree_item-3" data-name="Tree item" transform="translate(340 277)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
+    <text id="Tree_item-4" data-name="Tree item" transform="translate(340 231)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
+    <text id="Typography-6" data-name="Typography" transform="translate(336 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="0" y="0">ITEM NAME</tspan></text>
+    <g id="Group_4019" data-name="Group 4019" transform="translate(-77 637.5)">
+      <rect id="Rectangle_3659-2" data-name="Rectangle 3659" width="20" height="21" transform="translate(355 -350.5)" fill="red" opacity="0"/>
+      <text id="Column" transform="translate(364 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan></text>
+      <path id="Union_53" data-name="Union 53" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(8963.5 259)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <text id="Cell" transform="translate(563 321)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-9.276" y="0">Cell</tspan></text>
+    <path id="Union_56" data-name="Union 56" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9162.5 896.5)" fill="var(--anatomy-gray-500)"/>
+    <path id="Path_3123" data-name="Path 3123" d="M9,7a1,1,0,0,0-1.71-.71L6,7.59V2A1,1,0,1,0,4,2V7.59L2.71,6.29A1,1,0,0,0,1.29,7.71l3,3a1,1,0,0,0,1.41,0l3-3A1,1,0,0,0,9,7Z" transform="translate(547.004 84)" fill="var(--anatomy-gray-600)"/>
+    <g id="Group_4012" data-name="Group 4012" transform="translate(150 398)">
+      <text id="Sort_icon" data-name="Sort icon" transform="translate(402 -340)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-22.236" y="0">Sort icon</tspan></text>
+      <rect id="Rectangle_12329" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0"/>
+      <path id="Union_49" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <g id="Group_16603" data-name="Group 16603" transform="translate(86 378)">
+      <text id="Row_divider" data-name="Row
+divider" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-11.102" y="0">Row</tspan><tspan x="-17.173" y="15">divider</tspan></text>
+      <rect id="Rectangle_12329-2" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -330)" fill="red" opacity="0"/>
+      <path id="Union_49-2" data-name="Union 49" d="M0,92.5a2.5,2.5,0,0,1,2-2.45V0H3V90.051A2.5,2.5,0,1,1,0,92.5Z" transform="translate(399.5 -318)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <g id="Checkbox" transform="translate(293 115)">
+      <g id="Placement_Area" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none"/>
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
+      </g>
+      <g id="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Checkbox-2" data-name="Checkbox" transform="translate(293 209)">
+      <g id="Placement_Area-2" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none"/>
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
+      </g>
+      <g id="Box-2" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Checkbox-3" data-name="Checkbox" transform="translate(293 162)">
+      <g id="Placement_Area-3" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none"/>
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
+      </g>
+      <g id="Box-3" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Checkbox-4" data-name="Checkbox" transform="translate(293 256)">
+      <g id="Placement_Area-4" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none"/>
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
+      </g>
+      <g id="Box-4" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Checkbox-5" data-name="Checkbox" transform="translate(293 74)">
+      <g id="Placement_Area-5" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none"/>
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
+      </g>
+      <g id="Box-5" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Group_16604" data-name="Group 16604" transform="translate(-102 398)">
+      <text id="Checkbox_selection" data-name="Checkbox
+selection" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-24.31" y="0">Checkbox</tspan><tspan x="-22.003" y="15">selection</tspan></text>
+      <rect id="Rectangle_12329-3" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0"/>
+      <path id="Union_49-3" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <rect id="rectangle-34-5" data-name="rectangle-34" width="1" height="189" transform="translate(497 107)" fill="var(--anatomy-gray-300)"/>
+    <text id="Column_divider" data-name="Column
+divider" transform="translate(497 315)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.173" y="15">divider</tspan></text>
+    <path id="Union_57" data-name="Union 57" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9095.5 888)" fill="var(--anatomy-gray-500)"/>
+  </g>
 </svg>

From b8b42486265f097f77c326d921cead3fbca44db0 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 11 May 2021 14:29:39 -0700
Subject: [PATCH 24/62] fixing colors

---
 .../@react-aria/table/docs/TableAnatomy.svg   | 50 +++++--------------
 1 file changed, 13 insertions(+), 37 deletions(-)

diff --git a/packages/@react-aria/table/docs/TableAnatomy.svg b/packages/@react-aria/table/docs/TableAnatomy.svg
index ae2a58e96fe..08836534427 100644
--- a/packages/@react-aria/table/docs/TableAnatomy.svg
+++ b/packages/@react-aria/table/docs/TableAnatomy.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="842" height="342" style="max-height: 342; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: 4px;" viewBox="0 0 842 342">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="842" height="342" style="max-height: 342px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: 4px;" viewBox="0 0 842 342">
   <title>Table anatomy diagram</title>
   <desc>Shows a table component with labels pointing to its parts, including the row, row divider, column, column header, column divider, sort icon, and cell elements.</desc>
   <defs>
@@ -7,23 +7,18 @@
     </clipPath>
   </defs>
   <g id="table_anatomy" clip-path="url(#clip-table_anatomy)">
-    <rect width="842" height="342" fill="var(--anatomy-gray-100)4f6fc"/>
+    <rect width="842" height="342" fill="var(--anatomy-gray-100)"/>
     <g id="Group_4011" data-name="Group 4011" transform="translate(-36 403)">
-      <rect id="Rectangle_3659" data-name="Rectangle 3659" width="20" height="20" transform="translate(392 -340)" fill="red" opacity="0"/>
       <text id="Column_header" data-name="Column
 header" transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.576" y="15">header</tspan></text>
       <path id="Union_50" data-name="Union 50" d="M-8701-353.5a2.5,2.5,0,0,1,2-2.45V-374h1v18.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8701-353.5Z" transform="translate(9100.5 34)" fill="var(--anatomy-gray-500)"/>
     </g>
     <text id="Typography" transform="translate(543 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="-26.224" y="0">SENT</tspan></text>
-    <g id="rectangle-33" transform="translate(276 107)" fill="var(--anatomy-gray-100)ff">
+    <g id="rectangle-33" transform="translate(276 107)" fill="var(--anatomy-gray-100)">
       <path d="M 296 188.5 L 4 188.5 C 2.070076942443848 188.5 0.5 186.9299163818359 0.5 185 L 0.5 4 C 0.5 2.070076942443848 2.070076942443848 0.5 4 0.5 L 296 0.5 C 297.929931640625 0.5 299.5 2.070076942443848 299.5 4 L 299.5 185 C 299.5 186.9299163818359 297.929931640625 188.5 296 188.5 Z" stroke="none"/>
       <path d="M 4 1 C 2.345794677734375 1 1 2.345809936523438 1 4 L 1 185 C 1 186.6541900634766 2.345794677734375 188 4 188 L 296 188 C 297.6542053222656 188 299 186.6541900634766 299 185 L 299 4 C 299 2.345809936523438 297.6542053222656 1 296 1 L 4 1 M 4 0 L 296 0 C 298.2091064453125 0 300 1.790847778320312 300 4 L 300 185 C 300 187.2091522216797 298.2091064453125 189 296 189 L 4 189 C 1.79083251953125 189 0 187.2091522216797 0 185 L 0 4 C 0 1.790847778320312 1.79083251953125 0 4 0 Z" stroke="none" fill="var(--anatomy-gray-300)"/>
     </g>
     <text id="Typography-2" data-name="Typography" transform="translate(557 135)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-30.618" y="0">6,554</tspan></text>
-    <rect id="rectangle-34" width="298" height="1" transform="translate(277 154)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-2" data-name="rectangle-34" width="298" height="1" transform="translate(277 107)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-3" data-name="rectangle-34" width="298" height="1" transform="translate(277 201)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-4" data-name="rectangle-34" width="298" height="1" transform="translate(277 248)" fill="var(--anatomy-gray-300)"/>
     <text id="Typography-3" data-name="Typography" transform="translate(557 182)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.106" y="0">2,875</tspan></text>
     <text id="Typography-4" data-name="Typography" transform="translate(557 229)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.652" y="0">3,679</tspan></text>
     <text id="Typography-5" data-name="Typography" transform="translate(557 276)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-28.462" y="0">1,308</tspan></text>
@@ -33,7 +28,6 @@ header" transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size
     <text id="Tree_item-4" data-name="Tree item" transform="translate(340 231)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
     <text id="Typography-6" data-name="Typography" transform="translate(336 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="0" y="0">ITEM NAME</tspan></text>
     <g id="Group_4019" data-name="Group 4019" transform="translate(-77 637.5)">
-      <rect id="Rectangle_3659-2" data-name="Rectangle 3659" width="20" height="21" transform="translate(355 -350.5)" fill="red" opacity="0"/>
       <text id="Column" transform="translate(364 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan></text>
       <path id="Union_53" data-name="Union 53" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(8963.5 259)" fill="var(--anatomy-gray-500)"/>
     </g>
@@ -45,58 +39,42 @@ header" transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size
       <rect id="Rectangle_12329" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0"/>
       <path id="Union_49" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
     </g>
+    <rect id="rectangle-34" width="298" height="1" transform="translate(277 154)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-2" data-name="rectangle-34" width="298" height="1" transform="translate(277 107)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-3" data-name="rectangle-34" width="298" height="1" transform="translate(277 201)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-4" data-name="rectangle-34" width="298" height="1" transform="translate(277 248)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-5" data-name="rectangle-34" width="1" height="189" transform="translate(497 107)" fill="var(--anatomy-gray-300)"/>
     <g id="Group_16603" data-name="Group 16603" transform="translate(86 378)">
       <text id="Row_divider" data-name="Row
 divider" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-11.102" y="0">Row</tspan><tspan x="-17.173" y="15">divider</tspan></text>
-      <rect id="Rectangle_12329-2" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -330)" fill="red" opacity="0"/>
       <path id="Union_49-2" data-name="Union 49" d="M0,92.5a2.5,2.5,0,0,1,2-2.45V0H3V90.051A2.5,2.5,0,1,1,0,92.5Z" transform="translate(399.5 -318)" fill="var(--anatomy-gray-500)"/>
     </g>
     <g id="Checkbox" transform="translate(293 115)">
-      <g id="Placement_Area" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none"/>
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
-      </g>
-      <g id="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+      <g id="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
         <rect width="14" height="14" rx="2" stroke="none"/>
         <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
       </g>
     </g>
     <g id="Checkbox-2" data-name="Checkbox" transform="translate(293 209)">
-      <g id="Placement_Area-2" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none"/>
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
-      </g>
-      <g id="Box-2" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+      <g id="Box-2" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
         <rect width="14" height="14" rx="2" stroke="none"/>
         <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
       </g>
     </g>
     <g id="Checkbox-3" data-name="Checkbox" transform="translate(293 162)">
-      <g id="Placement_Area-3" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none"/>
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
-      </g>
-      <g id="Box-3" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+      <g id="Box-3" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
         <rect width="14" height="14" rx="2" stroke="none"/>
         <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
       </g>
     </g>
     <g id="Checkbox-4" data-name="Checkbox" transform="translate(293 256)">
-      <g id="Placement_Area-4" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none"/>
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
-      </g>
-      <g id="Box-4" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+      <g id="Box-4" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
         <rect width="14" height="14" rx="2" stroke="none"/>
         <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
       </g>
     </g>
     <g id="Checkbox-5" data-name="Checkbox" transform="translate(293 74)">
-      <g id="Placement_Area-5" data-name="Placement Area" fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
-        <rect width="14" height="32" stroke="none"/>
-        <rect x="0.5" y="0.5" width="13" height="31" fill="none"/>
-      </g>
-      <g id="Box-5" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)dfdfe" stroke="var(--anatomy-gray-600)" stroke-width="2">
+      <g id="Box-5" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
         <rect width="14" height="14" rx="2" stroke="none"/>
         <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
       </g>
@@ -104,10 +82,8 @@ divider" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-siz
     <g id="Group_16604" data-name="Group 16604" transform="translate(-102 398)">
       <text id="Checkbox_selection" data-name="Checkbox
 selection" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-24.31" y="0">Checkbox</tspan><tspan x="-22.003" y="15">selection</tspan></text>
-      <rect id="Rectangle_12329-3" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0"/>
       <path id="Union_49-3" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
     </g>
-    <rect id="rectangle-34-5" data-name="rectangle-34" width="1" height="189" transform="translate(497 107)" fill="var(--anatomy-gray-300)"/>
     <text id="Column_divider" data-name="Column
 divider" transform="translate(497 315)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.173" y="15">divider</tspan></text>
     <path id="Union_57" data-name="Union 57" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9095.5 888)" fill="var(--anatomy-gray-500)"/>

From 1543d96f936a9f8c4dc5eab790dc8fab71579d4b Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 11 May 2021 17:31:59 -0700
Subject: [PATCH 25/62] stopgap to get the dividers to show up

---
 packages/@react-aria/table/docs/TableAnatomy.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/table/docs/TableAnatomy.svg b/packages/@react-aria/table/docs/TableAnatomy.svg
index 08836534427..9f0779b9577 100644
--- a/packages/@react-aria/table/docs/TableAnatomy.svg
+++ b/packages/@react-aria/table/docs/TableAnatomy.svg
@@ -14,7 +14,7 @@ header" transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size
       <path id="Union_50" data-name="Union 50" d="M-8701-353.5a2.5,2.5,0,0,1,2-2.45V-374h1v18.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8701-353.5Z" transform="translate(9100.5 34)" fill="var(--anatomy-gray-500)"/>
     </g>
     <text id="Typography" transform="translate(543 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="-26.224" y="0">SENT</tspan></text>
-    <g id="rectangle-33" transform="translate(276 107)" fill="var(--anatomy-gray-100)">
+    <g id="rectangle-33" transform="translate(276 107)" fill="none">
       <path d="M 296 188.5 L 4 188.5 C 2.070076942443848 188.5 0.5 186.9299163818359 0.5 185 L 0.5 4 C 0.5 2.070076942443848 2.070076942443848 0.5 4 0.5 L 296 0.5 C 297.929931640625 0.5 299.5 2.070076942443848 299.5 4 L 299.5 185 C 299.5 186.9299163818359 297.929931640625 188.5 296 188.5 Z" stroke="none"/>
       <path d="M 4 1 C 2.345794677734375 1 1 2.345809936523438 1 4 L 1 185 C 1 186.6541900634766 2.345794677734375 188 4 188 L 296 188 C 297.6542053222656 188 299 186.6541900634766 299 185 L 299 4 C 299 2.345809936523438 297.6542053222656 1 296 1 L 4 1 M 4 0 L 296 0 C 298.2091064453125 0 300 1.790847778320312 300 4 L 300 185 C 300 187.2091522216797 298.2091064453125 189 296 189 L 4 189 C 1.79083251953125 189 0 187.2091522216797 0 185 L 0 4 C 0 1.790847778320312 1.79083251953125 0 4 0 Z" stroke="none" fill="var(--anatomy-gray-300)"/>
     </g>

From d4be58f3d796261c273196ba156a5cd5eb9c42e8 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 13 May 2021 15:23:31 -0700
Subject: [PATCH 26/62] allowing styles to be passed to PropTable

---
 packages/@react-spectrum/table/docs/TableView.mdx | 10 +++++-----
 packages/dev/docs/src/PropTable.js                |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index a96bff6a476..f4075c5dbad 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -403,7 +403,7 @@ function AsyncSortTable() {
 
 ### TableView props
 
-<PropTable component={docs.exports.TableView} links={docs.links} />
+<PropTable component={docs.exports.TableView} links={docs.links} style={{marginBottom: '40px'}} />
 
 ### TableHeader props
 
@@ -411,7 +411,7 @@ function AsyncSortTable() {
   props: {
     properties: Object.fromEntries(Object.entries(tableTypes.exports.TableHeaderProps.properties))
   }
-}} links={tableTypes.links} />
+}} links={tableTypes.links} style={{marginBottom: '40px'}} />
 
 ### Column props
 
@@ -419,7 +419,7 @@ function AsyncSortTable() {
   props: {
     properties: Object.fromEntries(Object.entries(tableTypes.exports.SpectrumColumnProps.properties))
   }
-}} links={tableTypes.links} />
+}} links={tableTypes.links} style={{marginBottom: '40px'}} />
 
 ### TableBody props
 
@@ -427,7 +427,7 @@ function AsyncSortTable() {
   props: {
     properties: Object.fromEntries(Object.entries(tableTypes.exports.TableBodyProps.properties))
   }
-}} links={tableTypes.links} />
+}} links={tableTypes.links} style={{marginBottom: '40px'}} />
 
 ### Row props
 
@@ -435,7 +435,7 @@ function AsyncSortTable() {
   props: {
     properties: Object.fromEntries(Object.entries(tableTypes.exports.RowProps.properties))
   }
-}} links={tableTypes.links} />
+}} links={tableTypes.links} style={{marginBottom: '40px'}} />
 
 ### Cell props
 
diff --git a/packages/dev/docs/src/PropTable.js b/packages/dev/docs/src/PropTable.js
index ece058810ca..74445f50ac1 100644
--- a/packages/dev/docs/src/PropTable.js
+++ b/packages/dev/docs/src/PropTable.js
@@ -75,11 +75,11 @@ const GROUPS = {
   ]
 };
 
-export function PropTable({component, links}) {
+export function PropTable({component, links, style}) {
   let [ungrouped, groups] = groupProps(component.props.properties);
 
   return (
-    <>
+    <div style={style}>
       <TypeContext.Provider value={links}>
         <InterfaceType properties={ungrouped} showRequired showDefault isComponent />
         {Object.keys(groups).map(group => (
@@ -92,7 +92,7 @@ export function PropTable({component, links}) {
           </details>
         ))}
       </TypeContext.Provider>
-    </>
+    </div>
   );
 }
 

From a13dc23d584c899c23e50163a657af64ff165110 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 13 May 2021 15:31:14 -0700
Subject: [PATCH 27/62] moving aria and stately table docs to collections

---
 packages/@react-aria/table/docs/useTable.mdx         | 2 +-
 packages/@react-stately/table/docs/useTableState.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 9a41e04c153..4166b086597 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -23,7 +23,7 @@ import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableRowGr
 ```
 
 ---
-category: Table
+category: Collections
 keywords: [table, aria]
 ---
 
diff --git a/packages/@react-stately/table/docs/useTableState.mdx b/packages/@react-stately/table/docs/useTableState.mdx
index da5405e430c..f8aa7f3627f 100644
--- a/packages/@react-stately/table/docs/useTableState.mdx
+++ b/packages/@react-stately/table/docs/useTableState.mdx
@@ -15,7 +15,7 @@ import {ClassAPI, HeaderInfo, FunctionAPI} from '@react-spectrum/docs';
 import packageData from '@react-stately/table/package.json';
 
 ---
-category: Table
+category: Collections
 keywords: [table, state]
 ---
 

From d31aa4c23b9b9844b19c3616107ab9f403eee022 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 13 May 2021 15:43:02 -0700
Subject: [PATCH 28/62] adding some missing types

---
 packages/@react-aria/grid/src/useGridCell.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/grid/src/useGridCell.ts b/packages/@react-aria/grid/src/useGridCell.ts
index e4d31ba4710..e0f5dd60232 100644
--- a/packages/@react-aria/grid/src/useGridCell.ts
+++ b/packages/@react-aria/grid/src/useGridCell.ts
@@ -22,13 +22,17 @@ import {useLocale} from '@react-aria/i18n';
 import {useSelectableItem} from '@react-aria/selection';
 
 interface GridCellProps {
+  /** An object representing the grid cell. Contains all the relevant information that makes up the grid cell. */
   node: RSNode<unknown>,
+  /** The ref attached to the grid cell element. */
   ref: RefObject<HTMLElement>,
+  /** Whether the grid cell is contained in a virtual scroller. */
   isVirtualized?: boolean,
+  /** Whether the grid cell is disabled. */
   isDisabled?: boolean,
-
-  /* when a cell is focused, should the cell or it's first focusable item be focused */
+  /** Whether the cell or it's first focusable item be focused when the grid cell is focused. */
   focusMode?: 'child' | 'cell',
+  /** Whether selection should occur on press up instead of press down. */
   shouldSelectOnPressUp?: boolean
 }
 

From e77d309ffacbbdbaeda0cbd3ec05c1375c691a51 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 17 May 2021 15:54:13 -0700
Subject: [PATCH 29/62] partial review comment addressing

---
 packages/@react-aria/grid/src/useGridCell.ts     | 1 +
 packages/@react-aria/grid/src/useGridRowGroup.ts | 1 +
 packages/@react-aria/table/docs/useTable.mdx     | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/grid/src/useGridCell.ts b/packages/@react-aria/grid/src/useGridCell.ts
index e0f5dd60232..64925142560 100644
--- a/packages/@react-aria/grid/src/useGridCell.ts
+++ b/packages/@react-aria/grid/src/useGridCell.ts
@@ -37,6 +37,7 @@ interface GridCellProps {
 }
 
 interface GridCellAria {
+  /** Props for the grid cell element. */
   gridCellProps: HTMLAttributes<HTMLElement>
 }
 
diff --git a/packages/@react-aria/grid/src/useGridRowGroup.ts b/packages/@react-aria/grid/src/useGridRowGroup.ts
index 0439507ad03..fcff2aa2d7f 100644
--- a/packages/@react-aria/grid/src/useGridRowGroup.ts
+++ b/packages/@react-aria/grid/src/useGridRowGroup.ts
@@ -13,6 +13,7 @@
 import {HTMLAttributes} from 'react';
 
 interface GridRowGroupAria {
+  /** Props for the row group element. */
   rowGroupProps: HTMLAttributes<HTMLElement>
 }
 
diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 4166b086597..dd06e266479 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -71,7 +71,7 @@ A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-
 
 <Anatomy />
 
-A table consists of a container element, with columns and rows of cells containing data inside.The cells within a table may contain focusable elements or plain text content.
+A table consists of a container element, with columns and rows of cells containing data inside. The cells within a table may contain focusable elements or plain text content.
 If the table supports row selection, each row includes a selection checkbox. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
 
 `useTable`, `useTableCell`, `useTableColumnHeader`, `useTableRow`, and `useTableRowHeader` handle keyboard, mouse, and other interactions to support
@@ -460,7 +460,7 @@ function TableCellBase({cell, cellRef, ...otherProps}) {
   );
 }
 
-<Table aria-label="Example static collection table" style={{height: '200px', maxWidth: '400px'}}>
+<Table aria-label="Example static collection table" style={{height: '210px', maxWidth: '400px'}}>
   <TableHeader>
     <Column>Name</Column>
     <Column>Type</Column>

From dbb1f6af11d88ea8710a46b8b1da2b867cc62f27 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 18 May 2021 11:12:01 -0700
Subject: [PATCH 30/62] fixing table height and table checkbox description

---
 packages/@react-aria/table/docs/useTable.mdx             | 6 +++---
 .../@react-aria/table/src/useTableSelectionCheckbox.ts   | 9 +++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index dd06e266479..29b8602c81c 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -514,7 +514,7 @@ function Example() {
   ];
 
   return (
-    <Table aria-label="Example dynamic collection table" style={{height: '200px', maxWidth: '400px'}}>
+    <Table aria-label="Example dynamic collection table" style={{height: '210px', maxWidth: '400px'}}>
       <TableHeader columns={columns}>
         {(column) => (
           <Column key={column.key}>
@@ -544,7 +544,7 @@ Note that the value of the selected keys must match the `key` prop of the row.
 The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
 
 ```tsx example
-<Table aria-label="Example table with single selection (uncontrolled)" selectionMode="single" defaultSelectedKeys={['2']} style={{height: '200px', maxWidth: '400px'}}>
+<Table aria-label="Example table with single selection (uncontrolled)" selectionMode="single" defaultSelectedKeys={['2']} style={{height: '210px', maxWidth: '400px'}}>
   <TableHeader>
     <Column>Name</Column>
     <Column>Type</Column>
@@ -595,7 +595,7 @@ function PokemonTable(props) {
   ];
   let [selected, setSelected] = React.useState(new Set(['2']));
   return (
-    <Table aria-label="Example table with single selection (controlled)" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} style={{height: '200px', maxWidth: '400px'}} {...props}>
+    <Table aria-label="Example table with single selection (controlled)" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} style={{height: '210px', maxWidth: '400px'}} {...props}>
       <TableHeader columns={columns}>
         {column => (
           <Column key={column.uid}>
diff --git a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
index 1a715a41b01..80cd1e8e2bf 100644
--- a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
+++ b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
@@ -24,7 +24,12 @@ interface SelectionCheckboxProps {
 }
 
 interface SelectionCheckboxAria {
-  /** Props for the checkbox element. */
+  /** Props for the row selection checkbox element. */
+  checkboxProps: AriaCheckboxProps
+}
+
+interface SelectAllCheckboxAria {
+  /** Props for the select all checkbox element. */
   checkboxProps: AriaCheckboxProps
 }
 
@@ -51,7 +56,7 @@ export function useTableSelectionCheckbox<T>(props: SelectionCheckboxProps, stat
   };
 }
 
-export function useTableSelectAllCheckbox<T>(state: TableState<T>): SelectionCheckboxAria {
+export function useTableSelectAllCheckbox<T>(state: TableState<T>): SelectAllCheckboxAria {
   let {isEmpty, isSelectAll} = state.selectionManager;
   return {
     checkboxProps: {

From 1a453bbbcbe35ca5041c5876c3688682f9bc6a3a Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 18 May 2021 11:19:15 -0700
Subject: [PATCH 31/62] adding links explaining rowheader column and column
 headers

---
 packages/@react-aria/table/docs/useTable.mdx         |  2 +-
 .../@react-aria/table/src/useTableColumnHeader.ts    | 12 ++++++------
 packages/@react-aria/table/src/useTableRowHeader.ts  | 10 +++++-----
 packages/@react-spectrum/table/docs/TableView.mdx    |  2 +-
 packages/@react-types/table/src/index.d.ts           |  5 ++---
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 29b8602c81c..e82c4ec9519 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -62,7 +62,7 @@ A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-
 * Support for mouse, touch, and keyboard interactions
 * Support for keyboard navigation between columns, rows, cells, and in-cell focusable items
 * Column sorting
-* Multiple row header support
+* Multiple [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) support
 * Automatic scrolling support during keyboard navigation
 * Typeahead to allow focusing rows by typing text
 * Virtualized scrolling support for performance with large tables
diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts
index a828ec7eb90..7b1476060a3 100644
--- a/packages/@react-aria/table/src/useTableColumnHeader.ts
+++ b/packages/@react-aria/table/src/useTableColumnHeader.ts
@@ -21,20 +21,20 @@ import {usePress} from '@react-aria/interactions';
 
 
 interface ColumnHeaderProps {
-  /** An object representing the column header. Contains all the relevant information that makes up the column header. */
+  /** An object representing the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader). Contains all the relevant information that makes up the column header. */
   node: Node<unknown>,
-  /** The ref attached to the column header. */
+  /** The ref attached to the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader). */
   ref: RefObject<HTMLElement>,
-  /** Whether the column header is contained in a virtual scroller. */
+  /** Whether the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) is contained in a virtual scroller. */
   isVirtualized?: boolean,
-  /** The number of columns the column header should span. */
+  /** The number of columns the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) should span. */
   colspan?: number,
-  /** Whether the column header is disabled. */
+  /** Whether the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) is disabled. */
   isDisabled?: boolean
 }
 
 interface ColumnHeaderAria {
-  /** Props for the column header element. */
+  /** Props for the [column header](https://www.w3.org/TR/wai-aria-1.1/#columnheader) element. */
   columnHeaderProps: HTMLAttributes<HTMLElement>
 }
 
diff --git a/packages/@react-aria/table/src/useTableRowHeader.ts b/packages/@react-aria/table/src/useTableRowHeader.ts
index 53d52adf051..f6657b3093c 100644
--- a/packages/@react-aria/table/src/useTableRowHeader.ts
+++ b/packages/@react-aria/table/src/useTableRowHeader.ts
@@ -17,18 +17,18 @@ import {TableState} from '@react-stately/table';
 import {useGridCell} from '@react-aria/grid';
 
 interface RowHeaderProps {
-  /** An object representing the row header. Contains all the relevant information that makes up the row header. */
+  /** An object representing the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). Contains all the relevant information that makes up the row header. */
   node: GridNode<unknown>,
-  /** The ref attached to the row header. */
+  /** The ref attached to the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). */
   ref: RefObject<HTMLElement>,
-  /** Whether the row header is contained in a virtual scroller. */
+  /** Whether the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) is contained in a virtual scroller. */
   isVirtualized?: boolean,
-  /** Whether the row header is disabled. */
+  /** Whether the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) is disabled. */
   isDisabled?: boolean
 }
 
 interface RowHeaderAria {
-  /** Props for the row header element. */
+  /** Props for the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) element. */
   rowHeaderProps: HTMLAttributes<HTMLElement>
 }
 
diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index f4075c5dbad..b75affd1607 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -132,7 +132,7 @@ For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout o
 ### Accessibility
 An `aria-label` must be provided to the TableView for accessibility. If the TableView is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
 
-By default, the first column of the TableView is used as the row header and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
+By default, the first column of the TableView is used as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
 to one or more Columns, allowing you to customize which columns should label the rows of the TableView.
 
 The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index b9cf155289b..4e905a45171 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -83,7 +83,7 @@ export interface SpectrumColumnProps<T> extends ColumnProps<T> {
   allowsSorting?: boolean,
   // /** Whether the column should stick to the viewport when scrolling. */
   // isSticky?: boolean, // shouldStick?? Not implemented yet?
-  /** Whether a column is a row header and should be announced by assistive technology during row navigation. */
+  /** Whether a column is a [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and should be announced by assistive technology during row navigation. */
   isRowHeader?: boolean,
   /** Whether the column should render a divider between it and the next column. */
   showDivider?: boolean,
@@ -136,8 +136,7 @@ export interface TableCollection<T> extends GridCollection<T> {
   headerRows: GridNode<T>[],
   /** A list of column nodes in the table. */
   columns: GridNode<T>[],
-  // TODO perhaps elaborate here, link to rowheader docs? https://www.digitala11y.com/rowheader-role/?
-  /** A set of column keys that serve as the row header. */
+  /** A set of column keys that serve as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader). */
   rowHeaderColumnKeys: Set<Key>,
   /** The node that makes up the body of the table. */
   body: GridNode<T>

From 4c45c71415a5609a57825340a9319918a5da1689 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 18 May 2021 11:30:21 -0700
Subject: [PATCH 32/62] removing some todos

---
 packages/@react-stately/table/src/useTableState.ts | 2 --
 packages/@react-types/table/src/index.d.ts         | 1 -
 2 files changed, 3 deletions(-)

diff --git a/packages/@react-stately/table/src/useTableState.ts b/packages/@react-stately/table/src/useTableState.ts
index a2d422465cc..1cceedca618 100644
--- a/packages/@react-stately/table/src/useTableState.ts
+++ b/packages/@react-stately/table/src/useTableState.ts
@@ -34,8 +34,6 @@ export interface CollectionBuilderContext<T> {
   columns: Node<T>[]
 }
 
-// TODO: perhaps define things like `items`, `selectedKeys` etc here instead of relying on extend
-// since the table type descriptions for these props should be more specific to table?
 export interface TableStateProps<T> extends CollectionBase<T>, MultipleSelection, Sortable {
   /** Whether the row selection checkboxes should be displayed. */
   showSelectionCheckboxes?: boolean
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index 4e905a45171..7a5059628d0 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -129,7 +129,6 @@ export interface CellProps {
 export type CellElement = ReactElement<CellProps>;
 export type CellRenderer = (columnKey: Key) => CellElement;
 
-// TODO: perhaps defined `rows`, etc here so that we can table specific definitions
 export interface TableCollection<T> extends GridCollection<T> {
   // TODO perhaps elaborate on this? maybe not clear enought, essentially returns the table header rows (e.g. in a tiered headers table, will return the nodes containing the top tier column, next tier, etc)
   /** A list of header row nodes in the table. */

From 4fc0dc832f9e8dcf6263312eb92994ab4d2ca0d0 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 24 May 2021 10:38:38 -0700
Subject: [PATCH 33/62] updating docs to reflect isLoading -> loadingState
 change

---
 packages/@react-spectrum/table/docs/TableView.mdx | 6 +++---
 packages/@react-types/table/src/index.d.ts        | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index f4075c5dbad..e5db2e757e5 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -168,7 +168,7 @@ The example below applies `isRowHeader` to the "First Name" and "Last Name" colu
 
 ## Asynchronous loading
 TableView supports loading data asynchronously, and will display a progress circle reflecting the current load state,
-set by the `isLoading` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
+set by the `loadingState` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
 
 This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle loading the data.
 See the docs for more information.
@@ -212,7 +212,7 @@ function AsyncTable() {
         </TableHeader>
         <TableBody
           items={list.items}
-          isLoading={list.isLoading}
+          loadingState={list.loadingState}
           onLoadMore={list.loadMore}>
           {(item) => (
             <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
@@ -388,7 +388,7 @@ function AsyncSortTable() {
         </TableHeader>
         <TableBody
           items={list.items}
-          isLoading={list.isLoading}>
+          loadingState={list.loadingState}>
           {(item) => (
             <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
           )}
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index f652defe528..ae60790cb00 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -98,7 +98,7 @@ export interface TableBodyProps<T> extends Omit<AsyncLoadable, 'isLoading'> {
   /** The contents of the table body. Supports static items or a function for dynamic rendering. */
   children: CollectionChildren<T>,
   /** A list of row objects in the table body used when dynamically rendering rows. */
-  items?: Iterable<T>
+  items?: Iterable<T>,
   /** The current loading state of the TableView. */
   loadingState?: LoadingState
 }

From 9335e4b00f3d08a568fc6296fbe4bbaf2c5eb072 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 25 May 2021 15:02:18 -0700
Subject: [PATCH 34/62] addressing review comments

---
 packages/@react-types/table/src/index.d.ts | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index ae60790cb00..df398fabd4d 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -15,9 +15,8 @@ import {GridCollection, GridNode} from '@react-types/grid';
 import {Key, ReactElement, ReactNode} from 'react';
 
 export interface TableProps<T> extends MultipleSelection, Sortable {
-  // TODO: I think this shouldn't have Section and row? Also need to fix prop table rendering for this
   /** The elements that make up the Table. Includes the TableHeader, TableBody, Columns, and Rows. */
-  children: ReactElement<TableHeaderProps<T> | TableBodyProps<T>>[],
+  children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>],
   /** A list of row keys to disable. */
   disabledKeys?: Iterable<Key>
 }
@@ -55,9 +54,6 @@ export interface ColumnProps<T> {
   children: ReactNode | ColumnElement<T> | ColumnElement<T>[],
   /** A list of child columns used when dynamically rendering nested child columns. */
   childColumns?: T[],
-  // TODO Not sure if this is a thing, doesn't seem to get passed through?
-  /** An accessibility label for the column. */
-  // 'aria-label'?: string,
   /** The width of the column. */
   width?: number | string,
   /** The minimum width of the column. */
@@ -75,10 +71,6 @@ export interface SpectrumColumnProps<T> extends ColumnProps<T> {
    * @default 'start'
    */
   align?: 'start' | 'center' | 'end',
-  // /** TODO: Don't think this is implemented yet */
-  // allowsResizing?: boolean,
-  // /** TODO: Don't think this is implemented yet */
-  // allowsReordering?: boolean,
   /** Whether the column allows sorting. */
   allowsSorting?: boolean,
   // /** Whether the column should stick to the viewport when scrolling. */
@@ -113,9 +105,6 @@ export interface RowProps<T> {
   children: CellElement | CellElement[] | CellRenderer,
   /** A string representation of the row's contents, used for features like typeahead. */
   textValue?: string // ???
-  // TODO Not sure if this is a thing, doesn't seem to get passed through?
-  /** An accessibility label for the row. */
-  // 'aria-label'?: string // ???
 }
 
 export interface CellProps {
@@ -123,9 +112,6 @@ export interface CellProps {
   children: ReactNode,
   /** A string representation of the cell's contents, used for features like typeahead. */
   textValue?: string
-  // TODO Not sure if this is a thing, doesn't seem to get passed through?
-  /** An accessibility label for the cell. */
-  // 'aria-label'?: string
 }
 
 export type CellElement = ReactElement<CellProps>;

From 59637b3b278aeb9b80cc4cddf909200b019ac5f7 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 8 Jun 2021 10:36:07 -0700
Subject: [PATCH 35/62] addressing review comments

---
 packages/@react-aria/table/docs/useTable.mdx         | 7 ++++---
 packages/@react-stately/table/docs/useTableState.mdx | 2 +-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index e82c4ec9519..ea2ce207bf5 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -24,7 +24,7 @@ import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableRowGr
 
 ---
 category: Collections
-keywords: [table, aria]
+keywords: [table, aria, grid]
 ---
 
 # useTable
@@ -35,7 +35,7 @@ keywords: [table, aria]
   packageData={packageData}
   componentNames={['useTable', 'useTableCell', 'useTableColumnHeader', 'useTableRow', 'useTableRowGroup', 'useTableRowHeader', 'useTableSelectAllCheckbox', 'useTableSelectionCheckbox']}
   sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#menu'}
+    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#grid}
   ]} />
 
 ## API
@@ -72,7 +72,7 @@ A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-
 <Anatomy />
 
 A table consists of a container element, with columns and rows of cells containing data inside. The cells within a table may contain focusable elements or plain text content.
-If the table supports row selection, each row includes a selection checkbox. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
+If the table supports row selection, each row includes a selection checkbox in the first column. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
 
 `useTable`, `useTableCell`, `useTableColumnHeader`, `useTableRow`, and `useTableRowHeader` handle keyboard, mouse, and other interactions to support
 row selection, in table navigation, and overall focus behavior. Those hooks, along with `useTableRowGroup`, also handle exposing the table and its contents
@@ -311,6 +311,7 @@ function TableSelectAllCell({column}) {
       ref={ref}>
       <input
         {...inputProps}
+        ref={inputRef}
         disabled={isSingleSelectionMode}
         style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
     </div>
diff --git a/packages/@react-stately/table/docs/useTableState.mdx b/packages/@react-stately/table/docs/useTableState.mdx
index f8aa7f3627f..eb586fc2250 100644
--- a/packages/@react-stately/table/docs/useTableState.mdx
+++ b/packages/@react-stately/table/docs/useTableState.mdx
@@ -16,7 +16,7 @@ import packageData from '@react-stately/table/package.json';
 
 ---
 category: Collections
-keywords: [table, state]
+keywords: [table, state, grid]
 ---
 
 # useTableState

From 9d2758cac53f463b38d3fc88971aad7424c8d8e5 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 8 Jun 2021 10:57:31 -0700
Subject: [PATCH 36/62] fixing docs

---
 packages/@react-aria/table/docs/useTable.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index ea2ce207bf5..cfc97d7f5ab 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -35,7 +35,7 @@ keywords: [table, aria, grid]
   packageData={packageData}
   componentNames={['useTable', 'useTableCell', 'useTableColumnHeader', 'useTableRow', 'useTableRowGroup', 'useTableRowHeader', 'useTableSelectAllCheckbox', 'useTableSelectionCheckbox']}
   sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#grid}
+    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#grid'}
   ]} />
 
 ## API

From 69bea2a66d0a84cccb3829cd24cbd6a0ba5915bf Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 9 Jun 2021 11:34:22 -0700
Subject: [PATCH 37/62] adding note about hideheader and its expected column
 content

---
 packages/@react-spectrum/table/docs/TableView.mdx | 3 ++-
 packages/@react-types/table/src/index.d.ts        | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index e5db2e757e5..1c3a177dcff 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -665,7 +665,8 @@ import Delete from '@spectrum-icons/workflow/Delete';
 
 ### Hide header
 Individual column headers can be hidden by providing the `hideHeader` prop to the Column. A tooltip is rendered when the column header is focused
-to compensate for the lack of a visual title.
+to compensate for the lack of a visual title. Note that the `hideHeader` prop is specifically intended for columns that contain ActionButtons instead
+of text content.
 
 ```tsx example export=true
 function TableExample(props) {
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index df398fabd4d..b37319b82f3 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -81,7 +81,8 @@ export interface SpectrumColumnProps<T> extends ColumnProps<T> {
   showDivider?: boolean,
   /**
    * Whether the column should hide its header text. A tooltip with the column's header text
-   * will be displayed when the column header is focused instead.
+   * will be displayed when the column header is focused instead. Note that this prop is specifically for columns
+   * that contain ActionButtons in place of text content.
    */
   hideHeader?: boolean
 }

From c1eb348aaccbddcb10de1c366b774a8a7b8e4336 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 13:47:12 -0700
Subject: [PATCH 38/62] splitting out tableview mdx from type updates for
 release

---
 .../@react-spectrum/table/docs/TableView.mdx  | 786 ------------------
 1 file changed, 786 deletions(-)
 delete mode 100644 packages/@react-spectrum/table/docs/TableView.mdx

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
deleted file mode 100644
index 1c3a177dcff..00000000000
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ /dev/null
@@ -1,786 +0,0 @@
-<!-- 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. -->
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-spectrum/table';
-import tableTypes from 'docs:@react-types/table/src/index.d.ts';
-import {HeaderInfo, PropTable} from '@react-spectrum/docs';
-import packageData from '@react-spectrum/table/package.json';
-
-```jsx import
-import {ActionButton} from '@react-spectrum/button';
-import Add from '@spectrum-icons/workflow/Add';
-import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table';
-import {Flex} from '@react-spectrum/layout';
-```
-
----
-category: Collections
-keywords: [table, grid]
----
-
-# TableView
-
-<p>{docs.exports.TableView.description}</p>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['Cell', 'Column', 'Row', 'TableView', 'TableBody', 'TableHeader']}
-  sourceData={[
-    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/table/'}
-  ]} />
-
-## Example
-```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table with static contents" width="100%" height="100%">
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column align="end">Date Modified</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>Games</Cell>
-        <Cell>File folder</Cell>
-        <Cell>6/7/2020</Cell>
-      </Row>
-      <Row>
-        <Cell>Program Files</Cell>
-        <Cell>File folder</Cell>
-        <Cell>4/7/2021</Cell>
-      </Row>
-      <Row>
-        <Cell>bootmgr</Cell>
-        <Cell>System file</Cell>
-        <Cell>11/20/2010</Cell>
-      </Row>
-      <Row>
-        <Cell>log.txt</Cell>
-        <Cell>Text Document</Cell>
-        <Cell>1/18/2016</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-## Content
-TableView expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API.
-The TableHeader accepts either static Columns or a `columns` prop with a renderer function for dynamic rendering. Similarly, TableBody accepts either static Rows or a `items` prop with a renderer function.
-Row follows the same pattern, accepting Cells as children instead.
-
-Basic usage of TableView, seen in the example above, shows multiple Columns and Rows populated with strings and Cells respectively. Static collections, as in this example, can be used when the contents of the TableView is known ahead of time.
-
-Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows TableView to automatically cache the rendering of each item,
-which dramatically improves performance. Make sure that each rendered property in the Row object matches with a Column's key. In the example below, the `uid` of each Column is set as its key and matches with a
-property within each Row object.
-
-```tsx example
-function Example() {
-  let columns = [
-    {name: 'Name', uid: 'name'},
-    {name: 'Type', uid: 'type'},
-    {name: 'Date Modified', uid: 'date'}
-  ];
-
-  let rows = [
-    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
-    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
-    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
-    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
-  ];
-
-  return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with dynamic content" width="100%" height="100%">
-        <TableHeader columns={columns}>
-          {column => (
-            <Column key={column.uid} align={column.uid === 'date' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item => (
-            <Row key={item.id}>
-              {/* Note this key is equal to the key of the the column,
-              not the key set on the Row prior */}
-              {key => <Cell>{item[key]}</Cell>}
-            </Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-### Internationalization
-To internationalize a TableView, all text content within the TableView should be replaced with localized strings. This includes the `aria-label` provided to the TableView if any.
-For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of TableView is automatically flipped.
-
-## Labeling
-### Accessibility
-An `aria-label` must be provided to the TableView for accessibility. If the TableView is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
-
-By default, the first column of the TableView is used as the row header and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
-to one or more Columns, allowing you to customize which columns should label the rows of the TableView.
-
-The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-3000">
-  <TableView aria-label="Example table with static contents" width="100%" height="100%">
-    <TableHeader>
-      <Column isRowHeader>First Name</Column>
-      <Column isRowHeader>Last Name</Column>
-      <Column align="end">Age</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>John</Cell>
-        <Cell>Doe</Cell>
-        <Cell>45</Cell>
-      </Row>
-      <Row>
-        <Cell>Jane</Cell>
-        <Cell>Doe</Cell>
-        <Cell>37</Cell>
-      </Row>
-      <Row>
-        <Cell>Joe</Cell>
-        <Cell>Schmoe</Cell>
-        <Cell>67</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-## Asynchronous loading
-TableView supports loading data asynchronously, and will display a progress circle reflecting the current load state,
-set by the `loadingState` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
-
-This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle loading the data.
-See the docs for more information.
-
-```tsx example
-import {useAsyncList} from '@react-stately/data';
-
-function AsyncTable() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'},
-    {name: 'Birth Year', key: 'birth_year'}
-  ];
-
-  let list = useAsyncList({
-    async load({signal, cursor}) {
-      if (cursor) {
-        cursor = cursor.replace(/^http:\/\//i, 'https://');
-      }
-
-      let res = await fetch(cursor || `https://swapi.dev/api/people/?search=`, {signal});
-      let json = await res.json();
-
-      return {
-        items: json.results,
-        cursor: json.next
-      };
-    }
-  });
-
-  return (
-    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="example async loading table" height="100%" width="100%">
-        <TableHeader columns={columns}>
-          {(column) => (
-            <Column align={column.key !== 'name' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody
-          items={list.items}
-          loadingState={list.loadingState}
-          onLoadMore={list.loadMore}>
-          {(item) => (
-            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-## Events
-
-### Selection
-TableView supports multiple selection modes. By default, selection is disabled, but this can be modified using the `selectionMode` prop.
-Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the value of the selected keys must match the `key` prop of the Row.
-
-The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column align="end">Level</Column>
-    </TableHeader>
-    <TableBody>
-      <Row key="1">
-        <Cell>Charizard</Cell>
-        <Cell>Fire, Flying</Cell>
-        <Cell>67</Cell>
-      </Row>
-      <Row key="2">
-        <Cell>Blastoise</Cell>
-        <Cell>Water</Cell>
-        <Cell>56</Cell>
-      </Row>
-      <Row key="3">
-        <Cell>Venusaur</Cell>
-        <Cell>Grass, Poison</Cell>
-        <Cell>83</Cell>
-      </Row>
-      <Row key="4">
-        <Cell>Pikachu</Cell>
-        <Cell>Electric</Cell>
-        <Cell>100</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
-be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
-
-Here is how you would control selection for the above example.
-
-```tsx example export=true
-function PokemonTable(props) {
-  let columns = [
-    {name: 'Name', uid: 'name'},
-    {name: 'Type', uid: 'type'},
-    {name: 'Level', uid: 'level'}
-  ];
-
-  let rows = [
-    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
-    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
-    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
-  ];
-
-  let [selected, setSelected] = React.useState(new Set(['2']));
-
-  return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
-        <TableHeader columns={columns}>
-          {column => (
-            <Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item => (
-            <Row key={item.id}>
-              {key => <Cell>{item[key]}</Cell>}
-            </Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-Multiple selection can be enabled by setting `selectionMode` to `multiple`.
-
-```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="multiple" />
-```
-
-TableView also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the TableView selected at all times.
-
-```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="single" disallowEmptySelection />
-```
-
-### Sorting
-TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
-the `allowsSorting` prop. The TableView accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
-When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
-the `SortDescriptor` appropriately.
-
-This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
-See the docs for more information on how to perform server side sorting.
-
-```tsx example
-function AsyncSortTable() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'},
-    {name: 'Birth Year', key: 'birth_year'}
-  ];
-
-  let list = useAsyncList({
-    async load({signal}) {
-      let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
-      let json = await res.json();
-
-      return {
-        items: json.results
-      };
-    },
-    async sort({items, sortDescriptor}) {
-      let sorted = items.sort((a, b) => {
-        let cmp;
-        let first = a[sortDescriptor.column].replace("BBY", "");
-        let second = b[sortDescriptor.column].replace("BBY", "");
-
-        if (+first || +second) {
-          cmp = +first < +second ? -1 : 1;
-        } else {
-          cmp = first <= second ? -1 : 1;
-        }
-
-        if (sortDescriptor.direction === 'descending') {
-          cmp *= -1;
-        }
-        return cmp;
-      });
-
-      return {
-        items: sorted
-      };
-    }
-  });
-
-  return (
-    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
-        <TableHeader columns={columns}>
-          {(column) => (
-            <Column allowsSorting align={column.key !== 'name' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody
-          items={list.items}
-          loadingState={list.loadingState}>
-          {(item) => (
-            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-## Props
-
-### TableView props
-
-<PropTable component={docs.exports.TableView} links={docs.links} style={{marginBottom: '40px'}} />
-
-### TableHeader props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.TableHeaderProps.properties))
-  }
-}} links={tableTypes.links} style={{marginBottom: '40px'}} />
-
-### Column props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.SpectrumColumnProps.properties))
-  }
-}} links={tableTypes.links} style={{marginBottom: '40px'}} />
-
-### TableBody props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.TableBodyProps.properties))
-  }
-}} links={tableTypes.links} style={{marginBottom: '40px'}} />
-
-### Row props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.RowProps.properties))
-  }
-}} links={tableTypes.links} style={{marginBottom: '40px'}} />
-
-### Cell props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.CellProps.properties))
-  }
-}} links={tableTypes.links} />
-
-## Visual options
-### Column alignment
-[View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column alignment" width="100%" height="100%">
-    <TableHeader>
-      <Column align="start">Name</Column>
-      <Column align="center">Type</Column>
-      <Column align="end">Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Column widths
-Columns support three different width props: `minWidth`, `width`, and `maxWidth`.
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column widths" width="100%" height="100%">
-    <TableHeader>
-      <Column maxWidth={300} align="start">Name</Column>
-      <Column width={80}>Type</Column>
-      <Column minWidth={100} align="end">Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Column dividers
-[View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column dividers" width="100%" height="100%">
-    <TableHeader>
-      <Column align="start" showDivider>Name</Column>
-      <Column showDivider>Type</Column>
-      <Column align="end" showDivider>Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Nested columns
-TableView supports nesting columns, allowing you to render "tiered" column headers.
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for nested columns" width="100%" height="100%">
-    <TableHeader>
-      <Column title="OS (C:)">
-        <Column align="start">Name</Column>
-        <Column>Type</Column>
-        <Column align="end">Size</Column>
-      </Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Focusable cells
-Cells accept any renderable node, allowing you to have focusable children within the TableView.
-
-```tsx example
-import Edit from '@spectrum-icons/workflow/Edit';
-import Delete from '@spectrum-icons/workflow/Delete';
-
-<Flex maxWidth="size-3000" flexGrow={1}>
-  <TableView aria-label="Example table for focusable cells" width="100%" height="100%">
-    <TableHeader>
-      <Column>Name</Column>
-      <Column hideHeader>Add</Column>
-      <Column hideHeader>Delete</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>Red Panda</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Harbor Seal</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Groundhog</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Otter</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Hide header
-Individual column headers can be hidden by providing the `hideHeader` prop to the Column. A tooltip is rendered when the column header is focused
-to compensate for the lack of a visual title. Note that the `hideHeader` prop is specifically intended for columns that contain ActionButtons instead
-of text content.
-
-```tsx example export=true
-function TableExample(props) {
-  let columns = [
-    {name: 'First Name', key: 'firstName'},
-    {name: 'Last Name', key: 'lastName'},
-    {name: 'Add Info', key: 'addInfo'},
-    {name: 'Age', key: 'age'}
-  ];
-
-  let rows = [
-    {id: '1', firstName: 'John', lastName: 'Doe', age: '45'},
-    {id: '2', firstName: 'Jane', lastName: 'Doe', age: '37'},
-    {id: '3', firstName: 'Joe', lastName: 'Schmoe', age: '67'},
-    {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'},
-    {id: '5', firstName: 'Longggggggggggg Wrapping', lastName: 'Name', age: '56'}
-  ];
-
-  return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
-        <TableHeader columns={columns}>
-          {column => (
-            <Column
-              hideHeader={column.key === 'addInfo'}
-              align={column.key === 'age' ? 'end' : 'start'}
-              showDivider={column.key === 'addInfo'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item =>
-            (<Row key={item.id}>
-              {key =>
-                key === 'addInfo'
-                ? <Cell><ActionButton isQuiet><Add /></ActionButton></Cell>
-                : <Cell>{item[key]}</Cell>
-              }
-            </Row>)
-          }
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-### Quiet
-[View guidelines](https://spectrum.adobe.com/page/table/#Standard-or-quiet)
-
-```tsx example
-// Using same setup as hide header example
-<TableExample isQuiet />
-```
-
-### Disabled
-Use the `disabledKeys` prop to specify which rows to disable selection for in the TableView.
-
-```tsx example
-// Using same setup as hide header example
-<TableExample disabledKeys={['2', '3']} selectionMode="single" />
-```
-
-### Density
-The amount of vertical padding that each row contains can be modified by providing the `density` prop.
-
-```tsx example
-// Using same setup as hide header example
-<Flex direction="column" gap="size-300">
-  <TableExample density="compact" />
-  <TableExample density="spacious" />
-</Flex>
-```
-
-### Overflow mode
-By default, text content that overflows its table cell will be truncated. You can have it wrap instead by passing `overflowMode="wrap"`
-to the TableView.
-
-```tsx example
-// Using same setup as hide header example
-<TableExample overflowMode="wrap" />
-```
-
-### Empty state
-Use the `renderEmptyState` prop to customize what the TableView will display if there are no rows provided.
-
-```tsx example
-import {Content} from '@react-spectrum/view';
-import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Heading} from '@react-spectrum/text';
-
-function renderEmptyState() {
-  return (
-    <IllustratedMessage>
-      <svg width="150" height="103" viewBox="0 0 150 103">
-        <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" />
-      </svg>
-      <Heading>No results</Heading>
-      <Content>No results found</Content>
-    </IllustratedMessage>
-  );
-}
-
-<Flex height="size-6000" flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column>Size</Column>
-    </TableHeader>
-    <TableBody>
-      {[]}
-    </TableBody>
-  </TableView>
-</Flex>
-```

From c2c40fe4413608eb7a4585b0dbacdcf952018ed8 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 13:48:39 -0700
Subject: [PATCH 39/62] adding tableview docs

---
 .../@react-types/table/docs/TableView.mdx     | 786 ++++++++++++++++++
 1 file changed, 786 insertions(+)
 create mode 100644 packages/@react-types/table/docs/TableView.mdx

diff --git a/packages/@react-types/table/docs/TableView.mdx b/packages/@react-types/table/docs/TableView.mdx
new file mode 100644
index 00000000000..1c3a177dcff
--- /dev/null
+++ b/packages/@react-types/table/docs/TableView.mdx
@@ -0,0 +1,786 @@
+<!-- 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. -->
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-spectrum/table';
+import tableTypes from 'docs:@react-types/table/src/index.d.ts';
+import {HeaderInfo, PropTable} from '@react-spectrum/docs';
+import packageData from '@react-spectrum/table/package.json';
+
+```jsx import
+import {ActionButton} from '@react-spectrum/button';
+import Add from '@spectrum-icons/workflow/Add';
+import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table';
+import {Flex} from '@react-spectrum/layout';
+```
+
+---
+category: Collections
+keywords: [table, grid]
+---
+
+# TableView
+
+<p>{docs.exports.TableView.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['Cell', 'Column', 'Row', 'TableView', 'TableBody', 'TableHeader']}
+  sourceData={[
+    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/table/'}
+  ]} />
+
+## Example
+```tsx example
+<Flex flexGrow={1} maxWidth="size-6000">
+  <TableView aria-label="Example table with static contents" width="100%" height="100%">
+    <TableHeader>
+      <Column>Name</Column>
+      <Column>Type</Column>
+      <Column align="end">Date Modified</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>Games</Cell>
+        <Cell>File folder</Cell>
+        <Cell>6/7/2020</Cell>
+      </Row>
+      <Row>
+        <Cell>Program Files</Cell>
+        <Cell>File folder</Cell>
+        <Cell>4/7/2021</Cell>
+      </Row>
+      <Row>
+        <Cell>bootmgr</Cell>
+        <Cell>System file</Cell>
+        <Cell>11/20/2010</Cell>
+      </Row>
+      <Row>
+        <Cell>log.txt</Cell>
+        <Cell>Text Document</Cell>
+        <Cell>1/18/2016</Cell>
+      </Row>
+    </TableBody>
+  </TableView>
+</Flex>
+```
+
+## Content
+TableView expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API.
+The TableHeader accepts either static Columns or a `columns` prop with a renderer function for dynamic rendering. Similarly, TableBody accepts either static Rows or a `items` prop with a renderer function.
+Row follows the same pattern, accepting Cells as children instead.
+
+Basic usage of TableView, seen in the example above, shows multiple Columns and Rows populated with strings and Cells respectively. Static collections, as in this example, can be used when the contents of the TableView is known ahead of time.
+
+Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows TableView to automatically cache the rendering of each item,
+which dramatically improves performance. Make sure that each rendered property in the Row object matches with a Column's key. In the example below, the `uid` of each Column is set as its key and matches with a
+property within each Row object.
+
+```tsx example
+function Example() {
+  let columns = [
+    {name: 'Name', uid: 'name'},
+    {name: 'Type', uid: 'type'},
+    {name: 'Date Modified', uid: 'date'}
+  ];
+
+  let rows = [
+    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
+    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
+    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
+    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
+  ];
+
+  return (
+    <Flex flexGrow={1} maxWidth="size-6000">
+      <TableView aria-label="Example table with dynamic content" width="100%" height="100%">
+        <TableHeader columns={columns}>
+          {column => (
+            <Column key={column.uid} align={column.uid === 'date' ? 'end' : 'start'}>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={rows}>
+          {item => (
+            <Row key={item.id}>
+              {/* Note this key is equal to the key of the the column,
+              not the key set on the Row prior */}
+              {key => <Cell>{item[key]}</Cell>}
+            </Row>
+          )}
+        </TableBody>
+      </TableView>
+    </Flex>
+  );
+}
+```
+
+### Internationalization
+To internationalize a TableView, all text content within the TableView should be replaced with localized strings. This includes the `aria-label` provided to the TableView if any.
+For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of TableView is automatically flipped.
+
+## Labeling
+### Accessibility
+An `aria-label` must be provided to the TableView for accessibility. If the TableView is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
+
+By default, the first column of the TableView is used as the row header and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
+to one or more Columns, allowing you to customize which columns should label the rows of the TableView.
+
+The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").
+
+```tsx example
+<Flex flexGrow={1} maxWidth="size-3000">
+  <TableView aria-label="Example table with static contents" width="100%" height="100%">
+    <TableHeader>
+      <Column isRowHeader>First Name</Column>
+      <Column isRowHeader>Last Name</Column>
+      <Column align="end">Age</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>John</Cell>
+        <Cell>Doe</Cell>
+        <Cell>45</Cell>
+      </Row>
+      <Row>
+        <Cell>Jane</Cell>
+        <Cell>Doe</Cell>
+        <Cell>37</Cell>
+      </Row>
+      <Row>
+        <Cell>Joe</Cell>
+        <Cell>Schmoe</Cell>
+        <Cell>67</Cell>
+      </Row>
+    </TableBody>
+  </TableView>
+</Flex>
+```
+
+## Asynchronous loading
+TableView supports loading data asynchronously, and will display a progress circle reflecting the current load state,
+set by the `loadingState` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
+
+This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle loading the data.
+See the docs for more information.
+
+```tsx example
+import {useAsyncList} from '@react-stately/data';
+
+function AsyncTable() {
+  let columns = [
+    {name: 'Name', key: 'name'},
+    {name: 'Height', key: 'height'},
+    {name: 'Mass', key: 'mass'},
+    {name: 'Birth Year', key: 'birth_year'}
+  ];
+
+  let list = useAsyncList({
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+
+      let res = await fetch(cursor || `https://swapi.dev/api/people/?search=`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+
+  return (
+    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
+      <TableView aria-label="example async loading table" height="100%" width="100%">
+        <TableHeader columns={columns}>
+          {(column) => (
+            <Column align={column.key !== 'name' ? 'end' : 'start'}>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody
+          items={list.items}
+          loadingState={list.loadingState}
+          onLoadMore={list.loadMore}>
+          {(item) => (
+            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
+          )}
+        </TableBody>
+      </TableView>
+    </Flex>
+  );
+}
+```
+
+## Events
+
+### Selection
+TableView supports multiple selection modes. By default, selection is disabled, but this can be modified using the `selectionMode` prop.
+Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the value of the selected keys must match the `key` prop of the Row.
+
+The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
+
+```tsx example
+<Flex flexGrow={1} maxWidth="size-6000">
+  <TableView aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
+    <TableHeader>
+      <Column>Name</Column>
+      <Column>Type</Column>
+      <Column align="end">Level</Column>
+    </TableHeader>
+    <TableBody>
+      <Row key="1">
+        <Cell>Charizard</Cell>
+        <Cell>Fire, Flying</Cell>
+        <Cell>67</Cell>
+      </Row>
+      <Row key="2">
+        <Cell>Blastoise</Cell>
+        <Cell>Water</Cell>
+        <Cell>56</Cell>
+      </Row>
+      <Row key="3">
+        <Cell>Venusaur</Cell>
+        <Cell>Grass, Poison</Cell>
+        <Cell>83</Cell>
+      </Row>
+      <Row key="4">
+        <Cell>Pikachu</Cell>
+        <Cell>Electric</Cell>
+        <Cell>100</Cell>
+      </Row>
+    </TableBody>
+  </TableView>
+</Flex>
+```
+
+To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
+be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
+
+Here is how you would control selection for the above example.
+
+```tsx example export=true
+function PokemonTable(props) {
+  let columns = [
+    {name: 'Name', uid: 'name'},
+    {name: 'Type', uid: 'type'},
+    {name: 'Level', uid: 'level'}
+  ];
+
+  let rows = [
+    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
+    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
+    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
+  ];
+
+  let [selected, setSelected] = React.useState(new Set(['2']));
+
+  return (
+    <Flex flexGrow={1} maxWidth="size-6000">
+      <TableView aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
+        <TableHeader columns={columns}>
+          {column => (
+            <Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={rows}>
+          {item => (
+            <Row key={item.id}>
+              {key => <Cell>{item[key]}</Cell>}
+            </Row>
+          )}
+        </TableBody>
+      </TableView>
+    </Flex>
+  );
+}
+```
+
+Multiple selection can be enabled by setting `selectionMode` to `multiple`.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="multiple" />
+```
+
+TableView also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the TableView selected at all times.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="single" disallowEmptySelection />
+```
+
+### Sorting
+TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
+the `allowsSorting` prop. The TableView accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
+When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
+the `SortDescriptor` appropriately.
+
+This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
+See the docs for more information on how to perform server side sorting.
+
+```tsx example
+function AsyncSortTable() {
+  let columns = [
+    {name: 'Name', key: 'name'},
+    {name: 'Height', key: 'height'},
+    {name: 'Mass', key: 'mass'},
+    {name: 'Birth Year', key: 'birth_year'}
+  ];
+
+  let list = useAsyncList({
+    async load({signal}) {
+      let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
+      let json = await res.json();
+
+      return {
+        items: json.results
+      };
+    },
+    async sort({items, sortDescriptor}) {
+      let sorted = items.sort((a, b) => {
+        let cmp;
+        let first = a[sortDescriptor.column].replace("BBY", "");
+        let second = b[sortDescriptor.column].replace("BBY", "");
+
+        if (+first || +second) {
+          cmp = +first < +second ? -1 : 1;
+        } else {
+          cmp = first <= second ? -1 : 1;
+        }
+
+        if (sortDescriptor.direction === 'descending') {
+          cmp *= -1;
+        }
+        return cmp;
+      });
+
+      return {
+        items: sorted
+      };
+    }
+  });
+
+  return (
+    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
+      <TableView aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
+        <TableHeader columns={columns}>
+          {(column) => (
+            <Column allowsSorting align={column.key !== 'name' ? 'end' : 'start'}>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody
+          items={list.items}
+          loadingState={list.loadingState}>
+          {(item) => (
+            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
+          )}
+        </TableBody>
+      </TableView>
+    </Flex>
+  );
+}
+```
+
+## Props
+
+### TableView props
+
+<PropTable component={docs.exports.TableView} links={docs.links} style={{marginBottom: '40px'}} />
+
+### TableHeader props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.TableHeaderProps.properties))
+  }
+}} links={tableTypes.links} style={{marginBottom: '40px'}} />
+
+### Column props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.SpectrumColumnProps.properties))
+  }
+}} links={tableTypes.links} style={{marginBottom: '40px'}} />
+
+### TableBody props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.TableBodyProps.properties))
+  }
+}} links={tableTypes.links} style={{marginBottom: '40px'}} />
+
+### Row props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.RowProps.properties))
+  }
+}} links={tableTypes.links} style={{marginBottom: '40px'}} />
+
+### Cell props
+
+<PropTable component={{
+  props: {
+    properties: Object.fromEntries(Object.entries(tableTypes.exports.CellProps.properties))
+  }
+}} links={tableTypes.links} />
+
+## Visual options
+### Column alignment
+[View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
+
+```tsx example
+<Flex flexGrow={1} maxWidth="size-4600">
+  <TableView aria-label="Example table for column alignment" width="100%" height="100%">
+    <TableHeader>
+      <Column align="start">Name</Column>
+      <Column align="center">Type</Column>
+      <Column align="end">Size</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Welcome</Cell>
+        <Cell>TXT</Cell>
+        <Cell>24 KB</Cell>
+      </Row>
+    </TableBody>
+  </TableView>
+</Flex>
+```
+
+### Column widths
+Columns support three different width props: `minWidth`, `width`, and `maxWidth`.
+
+```tsx example
+<Flex flexGrow={1} maxWidth="size-4600">
+  <TableView aria-label="Example table for column widths" width="100%" height="100%">
+    <TableHeader>
+      <Column maxWidth={300} align="start">Name</Column>
+      <Column width={80}>Type</Column>
+      <Column minWidth={100} align="end">Size</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Welcome</Cell>
+        <Cell>TXT</Cell>
+        <Cell>24 KB</Cell>
+      </Row>
+    </TableBody>
+  </TableView>
+</Flex>
+```
+
+### Column dividers
+[View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
+
+```tsx example
+<Flex flexGrow={1} maxWidth="size-4600">
+  <TableView aria-label="Example table for column dividers" width="100%" height="100%">
+    <TableHeader>
+      <Column align="start" showDivider>Name</Column>
+      <Column showDivider>Type</Column>
+      <Column align="end" showDivider>Size</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Welcome</Cell>
+        <Cell>TXT</Cell>
+        <Cell>24 KB</Cell>
+      </Row>
+    </TableBody>
+  </TableView>
+</Flex>
+```
+
+### Nested columns
+TableView supports nesting columns, allowing you to render "tiered" column headers.
+
+```tsx example
+<Flex flexGrow={1} maxWidth="size-4600">
+  <TableView aria-label="Example table for nested columns" width="100%" height="100%">
+    <TableHeader>
+      <Column title="OS (C:)">
+        <Column align="start">Name</Column>
+        <Column>Type</Column>
+        <Column align="end">Size</Column>
+      </Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>2021406_Proposal</Cell>
+        <Cell>PDF</Cell>
+        <Cell>86 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Budget Template</Cell>
+        <Cell>XLS</Cell>
+        <Cell>120 KB</Cell>
+      </Row>
+      <Row>
+        <Cell>Onboarding</Cell>
+        <Cell>PPT</Cell>
+        <Cell>472 KB</Cell>
+      </Row>
+    </TableBody>
+  </TableView>
+</Flex>
+```
+
+### Focusable cells
+Cells accept any renderable node, allowing you to have focusable children within the TableView.
+
+```tsx example
+import Edit from '@spectrum-icons/workflow/Edit';
+import Delete from '@spectrum-icons/workflow/Delete';
+
+<Flex maxWidth="size-3000" flexGrow={1}>
+  <TableView aria-label="Example table for focusable cells" width="100%" height="100%">
+    <TableHeader>
+      <Column>Name</Column>
+      <Column hideHeader>Add</Column>
+      <Column hideHeader>Delete</Column>
+    </TableHeader>
+    <TableBody>
+      <Row>
+        <Cell>Red Panda</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+      <Row>
+        <Cell>Harbor Seal</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+      <Row>
+        <Cell>Groundhog</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+      <Row>
+        <Cell>Otter</Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Edit />
+          </ActionButton>
+        </Cell>
+        <Cell>
+          <ActionButton isQuiet>
+            <Delete />
+          </ActionButton>
+        </Cell>
+      </Row>
+    </TableBody>
+  </TableView>
+</Flex>
+```
+
+### Hide header
+Individual column headers can be hidden by providing the `hideHeader` prop to the Column. A tooltip is rendered when the column header is focused
+to compensate for the lack of a visual title. Note that the `hideHeader` prop is specifically intended for columns that contain ActionButtons instead
+of text content.
+
+```tsx example export=true
+function TableExample(props) {
+  let columns = [
+    {name: 'First Name', key: 'firstName'},
+    {name: 'Last Name', key: 'lastName'},
+    {name: 'Add Info', key: 'addInfo'},
+    {name: 'Age', key: 'age'}
+  ];
+
+  let rows = [
+    {id: '1', firstName: 'John', lastName: 'Doe', age: '45'},
+    {id: '2', firstName: 'Jane', lastName: 'Doe', age: '37'},
+    {id: '3', firstName: 'Joe', lastName: 'Schmoe', age: '67'},
+    {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'},
+    {id: '5', firstName: 'Longggggggggggg Wrapping', lastName: 'Name', age: '56'}
+  ];
+
+  return (
+    <Flex flexGrow={1} maxWidth="size-6000">
+      <TableView aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
+        <TableHeader columns={columns}>
+          {column => (
+            <Column
+              hideHeader={column.key === 'addInfo'}
+              align={column.key === 'age' ? 'end' : 'start'}
+              showDivider={column.key === 'addInfo'}>
+              {column.name}
+            </Column>
+          )}
+        </TableHeader>
+        <TableBody items={rows}>
+          {item =>
+            (<Row key={item.id}>
+              {key =>
+                key === 'addInfo'
+                ? <Cell><ActionButton isQuiet><Add /></ActionButton></Cell>
+                : <Cell>{item[key]}</Cell>
+              }
+            </Row>)
+          }
+        </TableBody>
+      </TableView>
+    </Flex>
+  );
+}
+```
+
+### Quiet
+[View guidelines](https://spectrum.adobe.com/page/table/#Standard-or-quiet)
+
+```tsx example
+// Using same setup as hide header example
+<TableExample isQuiet />
+```
+
+### Disabled
+Use the `disabledKeys` prop to specify which rows to disable selection for in the TableView.
+
+```tsx example
+// Using same setup as hide header example
+<TableExample disabledKeys={['2', '3']} selectionMode="single" />
+```
+
+### Density
+The amount of vertical padding that each row contains can be modified by providing the `density` prop.
+
+```tsx example
+// Using same setup as hide header example
+<Flex direction="column" gap="size-300">
+  <TableExample density="compact" />
+  <TableExample density="spacious" />
+</Flex>
+```
+
+### Overflow mode
+By default, text content that overflows its table cell will be truncated. You can have it wrap instead by passing `overflowMode="wrap"`
+to the TableView.
+
+```tsx example
+// Using same setup as hide header example
+<TableExample overflowMode="wrap" />
+```
+
+### Empty state
+Use the `renderEmptyState` prop to customize what the TableView will display if there are no rows provided.
+
+```tsx example
+import {Content} from '@react-spectrum/view';
+import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
+import {Heading} from '@react-spectrum/text';
+
+function renderEmptyState() {
+  return (
+    <IllustratedMessage>
+      <svg width="150" height="103" viewBox="0 0 150 103">
+        <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" />
+      </svg>
+      <Heading>No results</Heading>
+      <Content>No results found</Content>
+    </IllustratedMessage>
+  );
+}
+
+<Flex height="size-6000" flexGrow={1} maxWidth="size-6000">
+  <TableView aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
+    <TableHeader>
+      <Column>Name</Column>
+      <Column>Type</Column>
+      <Column>Size</Column>
+    </TableHeader>
+    <TableBody>
+      {[]}
+    </TableBody>
+  </TableView>
+</Flex>
+```

From 8dd7345c72ed76d89b84929cb41a48833b1b69ca Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 14:05:20 -0700
Subject: [PATCH 40/62] splitting out the mdx files

---
 .../@react-aria/table/docs/TableAnatomy.svg   |  91 ---
 packages/@react-aria/table/docs/useTable.mdx  | 724 ------------------
 .../table/docs/useTableState.mdx              |  46 --
 3 files changed, 861 deletions(-)
 delete mode 100644 packages/@react-aria/table/docs/TableAnatomy.svg
 delete mode 100644 packages/@react-aria/table/docs/useTable.mdx
 delete mode 100644 packages/@react-stately/table/docs/useTableState.mdx

diff --git a/packages/@react-aria/table/docs/TableAnatomy.svg b/packages/@react-aria/table/docs/TableAnatomy.svg
deleted file mode 100644
index 9f0779b9577..00000000000
--- a/packages/@react-aria/table/docs/TableAnatomy.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="842" height="342" style="max-height: 342px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: 4px;" viewBox="0 0 842 342">
-  <title>Table anatomy diagram</title>
-  <desc>Shows a table component with labels pointing to its parts, including the row, row divider, column, column header, column divider, sort icon, and cell elements.</desc>
-  <defs>
-    <clipPath id="clip-table_anatomy">
-      <rect width="842" height="342"/>
-    </clipPath>
-  </defs>
-  <g id="table_anatomy" clip-path="url(#clip-table_anatomy)">
-    <rect width="842" height="342" fill="var(--anatomy-gray-100)"/>
-    <g id="Group_4011" data-name="Group 4011" transform="translate(-36 403)">
-      <text id="Column_header" data-name="Column
-header" transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.576" y="15">header</tspan></text>
-      <path id="Union_50" data-name="Union 50" d="M-8701-353.5a2.5,2.5,0,0,1,2-2.45V-374h1v18.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8701-353.5Z" transform="translate(9100.5 34)" fill="var(--anatomy-gray-500)"/>
-    </g>
-    <text id="Typography" transform="translate(543 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="-26.224" y="0">SENT</tspan></text>
-    <g id="rectangle-33" transform="translate(276 107)" fill="none">
-      <path d="M 296 188.5 L 4 188.5 C 2.070076942443848 188.5 0.5 186.9299163818359 0.5 185 L 0.5 4 C 0.5 2.070076942443848 2.070076942443848 0.5 4 0.5 L 296 0.5 C 297.929931640625 0.5 299.5 2.070076942443848 299.5 4 L 299.5 185 C 299.5 186.9299163818359 297.929931640625 188.5 296 188.5 Z" stroke="none"/>
-      <path d="M 4 1 C 2.345794677734375 1 1 2.345809936523438 1 4 L 1 185 C 1 186.6541900634766 2.345794677734375 188 4 188 L 296 188 C 297.6542053222656 188 299 186.6541900634766 299 185 L 299 4 C 299 2.345809936523438 297.6542053222656 1 296 1 L 4 1 M 4 0 L 296 0 C 298.2091064453125 0 300 1.790847778320312 300 4 L 300 185 C 300 187.2091522216797 298.2091064453125 189 296 189 L 4 189 C 1.79083251953125 189 0 187.2091522216797 0 185 L 0 4 C 0 1.790847778320312 1.79083251953125 0 4 0 Z" stroke="none" fill="var(--anatomy-gray-300)"/>
-    </g>
-    <text id="Typography-2" data-name="Typography" transform="translate(557 135)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-30.618" y="0">6,554</tspan></text>
-    <text id="Typography-3" data-name="Typography" transform="translate(557 182)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.106" y="0">2,875</tspan></text>
-    <text id="Typography-4" data-name="Typography" transform="translate(557 229)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.652" y="0">3,679</tspan></text>
-    <text id="Typography-5" data-name="Typography" transform="translate(557 276)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-28.462" y="0">1,308</tspan></text>
-    <text id="Tree_item" data-name="Tree item" transform="translate(340 137)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
-    <text id="Tree_item-2" data-name="Tree item" transform="translate(340 183)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
-    <text id="Tree_item-3" data-name="Tree item" transform="translate(340 277)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
-    <text id="Tree_item-4" data-name="Tree item" transform="translate(340 231)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
-    <text id="Typography-6" data-name="Typography" transform="translate(336 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="0" y="0">ITEM NAME</tspan></text>
-    <g id="Group_4019" data-name="Group 4019" transform="translate(-77 637.5)">
-      <text id="Column" transform="translate(364 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan></text>
-      <path id="Union_53" data-name="Union 53" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(8963.5 259)" fill="var(--anatomy-gray-500)"/>
-    </g>
-    <text id="Cell" transform="translate(563 321)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-9.276" y="0">Cell</tspan></text>
-    <path id="Union_56" data-name="Union 56" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9162.5 896.5)" fill="var(--anatomy-gray-500)"/>
-    <path id="Path_3123" data-name="Path 3123" d="M9,7a1,1,0,0,0-1.71-.71L6,7.59V2A1,1,0,1,0,4,2V7.59L2.71,6.29A1,1,0,0,0,1.29,7.71l3,3a1,1,0,0,0,1.41,0l3-3A1,1,0,0,0,9,7Z" transform="translate(547.004 84)" fill="var(--anatomy-gray-600)"/>
-    <g id="Group_4012" data-name="Group 4012" transform="translate(150 398)">
-      <text id="Sort_icon" data-name="Sort icon" transform="translate(402 -340)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-22.236" y="0">Sort icon</tspan></text>
-      <rect id="Rectangle_12329" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0"/>
-      <path id="Union_49" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
-    </g>
-    <rect id="rectangle-34" width="298" height="1" transform="translate(277 154)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-2" data-name="rectangle-34" width="298" height="1" transform="translate(277 107)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-3" data-name="rectangle-34" width="298" height="1" transform="translate(277 201)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-4" data-name="rectangle-34" width="298" height="1" transform="translate(277 248)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-5" data-name="rectangle-34" width="1" height="189" transform="translate(497 107)" fill="var(--anatomy-gray-300)"/>
-    <g id="Group_16603" data-name="Group 16603" transform="translate(86 378)">
-      <text id="Row_divider" data-name="Row
-divider" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-11.102" y="0">Row</tspan><tspan x="-17.173" y="15">divider</tspan></text>
-      <path id="Union_49-2" data-name="Union 49" d="M0,92.5a2.5,2.5,0,0,1,2-2.45V0H3V90.051A2.5,2.5,0,1,1,0,92.5Z" transform="translate(399.5 -318)" fill="var(--anatomy-gray-500)"/>
-    </g>
-    <g id="Checkbox" transform="translate(293 115)">
-      <g id="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
-      </g>
-    </g>
-    <g id="Checkbox-2" data-name="Checkbox" transform="translate(293 209)">
-      <g id="Box-2" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
-      </g>
-    </g>
-    <g id="Checkbox-3" data-name="Checkbox" transform="translate(293 162)">
-      <g id="Box-3" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
-      </g>
-    </g>
-    <g id="Checkbox-4" data-name="Checkbox" transform="translate(293 256)">
-      <g id="Box-4" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
-      </g>
-    </g>
-    <g id="Checkbox-5" data-name="Checkbox" transform="translate(293 74)">
-      <g id="Box-5" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
-      </g>
-    </g>
-    <g id="Group_16604" data-name="Group 16604" transform="translate(-102 398)">
-      <text id="Checkbox_selection" data-name="Checkbox
-selection" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-24.31" y="0">Checkbox</tspan><tspan x="-22.003" y="15">selection</tspan></text>
-      <path id="Union_49-3" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
-    </g>
-    <text id="Column_divider" data-name="Column
-divider" transform="translate(497 315)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.173" y="15">divider</tspan></text>
-    <path id="Union_57" data-name="Union 57" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9095.5 888)" fill="var(--anatomy-gray-500)"/>
-  </g>
-</svg>
diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
deleted file mode 100644
index cfc97d7f5ab..00000000000
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ /dev/null
@@ -1,724 +0,0 @@
-<!-- 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. -->
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-aria/table';
-import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
-import selectionDocs from 'docs:@react-stately/selection';
-import statelyDocs from 'docs:@react-stately/table';
-import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
-import packageData from '@react-aria/table/package.json';
-import Anatomy from './TableAnatomy.svg';
-
-```jsx import
-import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableRowGroup, useTableRowHeader, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
-```
-
----
-category: Collections
-keywords: [table, aria, grid]
----
-
-# useTable
-
-<p>{docs.exports.useTable.description}</p>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTable', 'useTableCell', 'useTableColumnHeader', 'useTableRow', 'useTableRowGroup', 'useTableRowHeader', 'useTableSelectAllCheckbox', 'useTableSelectionCheckbox']}
-  sourceData={[
-    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#grid'}
-  ]} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTable} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableColumnHeader} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableRow} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableRowGroup} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableRowHeader} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableCell} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableSelectionCheckbox} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableSelectAllCheckbox} links={docs.links} />
-
-## Features
-
-A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), [&lt;thead&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead),
-[&lt;tbody&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), and other table specific HTML elements, but is very limited in functionality especially when it comes to user interactions.
-`useTable` helps achieve accessible and interactive table components that can be styled as needed.
-
-* Exposed to assistive technology as a `grid` using ARIA
-* Support for single, multiple, or no row selection
-* Support for disabled rows
-* Labeling support for accessibility
-* Support for mouse, touch, and keyboard interactions
-* Support for keyboard navigation between columns, rows, cells, and in-cell focusable items
-* Column sorting
-* Multiple [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) support
-* Automatic scrolling support during keyboard navigation
-* Typeahead to allow focusing rows by typing text
-* Virtualized scrolling support for performance with large tables
-
-## Anatomy
-
-<Anatomy />
-
-A table consists of a container element, with columns and rows of cells containing data inside. The cells within a table may contain focusable elements or plain text content.
-If the table supports row selection, each row includes a selection checkbox in the first column. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
-
-`useTable`, `useTableCell`, `useTableColumnHeader`, `useTableRow`, and `useTableRowHeader` handle keyboard, mouse, and other interactions to support
-row selection, in table navigation, and overall focus behavior. Those hooks, along with `useTableRowGroup`, also handle exposing the table and its contents
-to assistive technology using ARIA. `useTableSelectAllCheckbox` and `useTableSelectionCheckbox` handle row selection and associating each checkbox with its respective rows
-for assistive technology.
-
-`useTable` returns props that you should spread onto the table container element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTable.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableColumnHeader` returns props for an individual table column header:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableColumnHeader.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableRow` returns props for an individual table row:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableRow.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableRowGroup` returns props for a element containing one or more rows of column headers or cells. This is often equivalent
-to the header, body, and footer of the table:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableRowGroup.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableRowHeader` returns props for the table cell that serves as a row's header:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableRowHeader.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableCell` returns props for an individual table cell:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableCell.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableSelectionCheckbox` returns props for an individual table row selection checkbox:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableSelectionCheckbox.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableSelectAllCheckbox` returns props for the table's "select all" checkbox:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableSelectAllCheckbox.return.id].properties} />
-</TypeContext.Provider>
-
-State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
-hook from `@react-stately/table`. The state object should be passed as an option to each of the above hooks where applicable.
-
-Note that an `aria-label` or `aria-labelledby` must be passed to the table to identify the element to assistive technology.
-
-## State management
-
-`useTable` requires knowledge of the rows, cells, and columns in the table in order to handle keyboard
-navigation and other interactions. It does this using
-the <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Collection} />
-interface, which is a generic interface to access sequential unique keyed data. You can
-implement this interface yourself, e.g. by using a prop to pass a list of item objects,
-but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} /> from
-`@react-stately/table` implements a JSX based interface for building collections instead.
-See [Collection Components](/react-stately/collections.html) for more information,
-and [Collection Interface](/react-stately/Collection.html) for internal details.
-
-In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
-manages the state necessary for multiple selection and exposes
-a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
-which makes use of the collection to provide an interface to update the selection state.
-For more information, see [Selection](/react-stately/selection.html).
-
-## Example
-
-This example uses HTML `<div>` elements to construct the table. It uses `useTableState` to construct the table's collection of rows and columns,
-applying the appropriate attributes to each `<div>` using the various table hooks listed above paired with the div's role in the table.
-The table follows the [Collection Components API](../react-stately/collections.html), accepting both static and dynamic collections.
-
-The example below shows a static collection, which can be used when the full set of table contents is known ahead of time. Be sure to note the usage of
-`Cell`, `Column`, `Row`, `TableBody`, and `TableHeader` to construct the table structure. These elements are similar to `Item` and `Section` used in other components
-following the [Collection Components API](../react-stately/collections.html) mentioned previously, serving as node generators for the table collection.
-See [useTableState](/react-stately/useTableState.html) for more info on the props they support.
-
-```tsx example export=true
-import {Cell, Column, Row, TableBody, TableHeader, useTableState} from '@react-stately/table';
-import {mergeProps} from '@react-aria/utils';
-import {useCheckbox} from '@react-aria/checkbox';
-import {useContext, useRef} from 'react';
-import {useFocusRing} from '@react-aria/focus';
-import {useToggleState} from '@react-stately/toggle';
-
-const TableContext = React.createContext(null);
-function useTableContext() {
-  return useContext(TableContext);
-}
-
-function Table(props) {
-  let state = useTableState({...props, showSelectionCheckboxes: true});
-  let ref = useRef();
-  let scrollViewRef = useRef();
-  let {collection} = state;
-  let {gridProps} = useTable({
-    ...props,
-    ref: ref
-  }, state);
-
-  let headerRows = collection.rows.filter(item => item.type === 'headerrow' && item);
-  let rows = collection.rows.filter(item => item.type === 'item' && item);
-
-  let renderColumnNode = (node) => {
-    if (node.props.isSelectionCell) {
-      return <TableSelectAllCell column={node} />;
-    }
-
-    return <TableColumnHeader column={node} />;
-  };
-
-  let renderRowNode = (node) => {
-    if (node.props.isSelectionCell) {
-      return <TableCheckboxCell cell={node} />;
-    }
-
-    if (collection.rowHeaderColumnKeys.has(node.column.key)) {
-      return <TableRowHeader cell={node} />;
-    }
-
-    return <TableCell cell={node} />;
-  };
-
-  return (
-    <TableContext.Provider value={state}>
-      <div {...gridProps} style={{...props.style, display: 'flex', flexDirection: 'column'}} ref={ref}>
-        <TableHeaderGroup>
-          {[...headerRows].map(headerRow => (
-            <TableHeaderRow item={headerRow}>
-              {[...headerRow.childNodes].map((column) => renderColumnNode(column))}
-            </TableHeaderRow>
-          ))}
-        </TableHeaderGroup>
-        <div
-          style={{
-            borderTop: '2px solid black',
-            borderBottom: '2px solid black',
-            padding: '0px 1px 0px 1px',
-            flex: '1 1 0%',
-            overflow: 'auto'
-          }}>
-          <TableRowGroup>
-            {[...rows].map(row => (
-              <TableRow item={row}>
-                {[...row.childNodes].map((node) => renderRowNode(node))}
-              </TableRow>
-            ))}
-          </TableRowGroup>
-        </div>
-      </div>
-    </TableContext.Provider>
-  );
-}
-
-
-function TableHeaderGroup({children, ...otherProps}) {
-  let {rowGroupProps} = useTableRowGroup();
-
-  return (
-    <div {...rowGroupProps} {...otherProps}>
-      {children}
-    </div>
-  );
-}
-
-function TableColumnHeader({column}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let {columnHeaderProps} = useTableColumnHeader({
-    node: column,
-    ref,
-    colspan: column.colspan
-  }, state);
-
-  let {isFocusVisible, focusProps} = useFocusRing();
-  let columnProps = column.props;
-  let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
-
-  return (
-    <div
-      {...mergeProps(columnHeaderProps, focusProps)}
-      style={{
-        height: '16px',
-        lineHeight: '16px',
-        width: '100px',
-        padding: '10px 10px 10px 10px',
-        outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
-      }}
-      ref={ref}>
-      {column.rendered}
-      {columnProps.allowsSorting && state.sortDescriptor?.column === column.key &&
-        <span aria-hidden="true" style={{padding: '0 2px'}}>
-          {arrowIcon}
-        </span>
-      }
-    </div>
-  );
-}
-
-function TableSelectAllCell({column}) {
-  let ref = useRef();
-  let state = useTableContext();
-
-  let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
-  let {columnHeaderProps} = useTableColumnHeader({
-    node: column,
-    ref,
-    colspan: column.colspan,
-    isDisabled: isSingleSelectionMode
-  }, state);
-
-  let {checkboxProps} = useTableSelectAllCheckbox(state);
-  let inputRef = useRef(null);
-  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);
-
-  return (
-    <div
-      {...columnHeaderProps}
-      style={{
-        height: '16px',
-        padding: '10px 10px 10px 10px'
-      }}
-      aria-disabled={isSingleSelectionMode}
-      ref={ref}>
-      <input
-        {...inputProps}
-        ref={inputRef}
-        disabled={isSingleSelectionMode}
-        style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
-    </div>
-  );
-}
-
-function TableRowGroup({children, ...otherProps}) {
-  let {rowGroupProps} = useTableRowGroup();
-
-  return (
-    <div {...rowGroupProps} {...otherProps}>
-      {children}
-    </div>
-  );
-}
-
-function TableRow({item, children, ...otherProps}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(item.key);
-  let isSelected = state.selectionManager.isSelected(item.key) && !isDisabled;
-  let {rowProps} = useTableRow({
-    node: item,
-    isSelected,
-    ref,
-    isDisabled
-  }, state);
-
-  let props = mergeProps(
-    rowProps,
-    otherProps
-  );
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        padding: '1px 1px 2px 1px',
-        borderTop: '1px solid lightgrey'
-      }}
-      {...props}
-      ref={ref}>
-      {children}
-    </div>
-  );
-}
-
-function TableHeaderRow({item, children, ...otherProps}) {
-  return (
-    <div role="row" aria-rowindex={item.index + 1} {...otherProps} style={{display: 'flex', flexDirection: 'row', paddingBottom: '4px'}}>
-      {children}
-    </div>
-  );
-}
-
-function TableCheckboxCell({cell}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {gridCellProps} = useTableCell({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-
-  let {checkboxProps} = useTableSelectionCheckbox(
-    {
-      key: cell.parentKey,
-      isDisabled
-    },
-    state
-  );
-
-  let inputRef = useRef(null);
-  let {inputProps} = useCheckbox({...checkboxProps, isDisabled}, useToggleState(checkboxProps), inputRef);
-
-  return (
-    <div
-      {...gridCellProps}
-      style={{
-        height: '16px',
-        padding: '10px 10px 10px 10px'
-      }}
-      ref={ref}>
-      {state.selectionManager.selectionMode !== 'none' &&
-        <input {...inputProps} />
-      }
-    </div>
-  );
-}
-
-function TableCell({cell}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {gridCellProps} = useTableCell({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-
-  return (
-    <TableCellBase
-      {...gridCellProps}
-      cell={cell}
-      cellRef={ref} />
-  );
-}
-
-function TableRowHeader({cell}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {rowHeaderProps} = useTableRowHeader({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-
-  return (
-    <TableCellBase
-      {...rowHeaderProps}
-      cell={cell}
-      cellRef={ref} />
-  );
-}
-
-function TableCellBase({cell, cellRef, ...otherProps}) {
-  let {isFocusVisible, focusProps} = useFocusRing();
-
-  return (
-    <div
-      {...mergeProps(otherProps, focusProps)}
-      style={{
-        height: '16px',
-        lineHeight: '16px',
-        width: '100px',
-        padding: '10px 10px 10px 10px',
-        outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
-      }}
-      ref={cellRef}>
-      <span style={{overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}>
-        {cell.rendered}
-      </span>
-    </div>
-  );
-}
-
-<Table aria-label="Example static collection table" style={{height: '210px', maxWidth: '400px'}}>
-  <TableHeader>
-    <Column>Name</Column>
-    <Column>Type</Column>
-    <Column>Date Modified</Column>
-  </TableHeader>
-  <TableBody>
-    <Row>
-      <Cell>Games</Cell>
-      <Cell>File folder</Cell>
-      <Cell>6/7/2020</Cell>
-    </Row>
-    <Row>
-      <Cell>Program Files</Cell>
-      <Cell>File folder</Cell>
-      <Cell>4/7/2021</Cell>
-    </Row>
-    <Row>
-      <Cell>bootmgr</Cell>
-      <Cell>System file</Cell>
-      <Cell>11/20/2010</Cell>
-    </Row>
-    <Row>
-      <Cell>log.txt</Cell>
-      <Cell>Text Document</Cell>
-      <Cell>1/18/2016</Cell>
-    </Row>
-  </TableBody>
-</Table>
-```
-
-## Usage
-
-### Dynamic collections
-
-Dynamic collections, as shown below, can be used when the table data comes from an external data source such as an API call, or update over time.
-In the example below, both the columns and the rows are provided to the table via a render function.
-
-```tsx example
-function Example() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Type', key: 'type'},
-    {name: 'Date Modified', key: 'date'}
-  ];
-
-  let rows = [
-    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
-    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
-    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
-    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
-  ];
-
-  return (
-    <Table aria-label="Example dynamic collection table" style={{height: '210px', maxWidth: '400px'}}>
-      <TableHeader columns={columns}>
-        {(column) => (
-          <Column key={column.key}>
-            {column.name}
-          </Column>
-        )}
-      </TableHeader>
-      <TableBody items={rows}>
-        {(item) => (
-          <Row key={item.id}>
-            {/* Note this key is equal to the key of the the column,
-            not the key set on the Row prior */}
-            {(key) => <Cell>{item[key]}</Cell>}
-          </Row>
-        )}
-      </TableBody>
-    </Table>
-  );
-}
-```
-
-### Selection
-
-By default, `useTableState` doesn't allow row selection but this can be modified using the `selectionMode` prop. Use `defaultSelectedKeys` to provide a default set of selected rows.
-Note that the value of the selected keys must match the `key` prop of the row.
-
-The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
-
-```tsx example
-<Table aria-label="Example table with single selection (uncontrolled)" selectionMode="single" defaultSelectedKeys={['2']} style={{height: '210px', maxWidth: '400px'}}>
-  <TableHeader>
-    <Column>Name</Column>
-    <Column>Type</Column>
-    <Column>Level</Column>
-  </TableHeader>
-  <TableBody>
-    <Row key="1">
-      <Cell>Charizard</Cell>
-      <Cell>Fire, Flying</Cell>
-      <Cell>67</Cell>
-    </Row>
-    <Row key="2">
-      <Cell>Blastoise</Cell>
-      <Cell>Water</Cell>
-      <Cell>56</Cell>
-    </Row>
-    <Row key="3">
-      <Cell>Venusaur</Cell>
-      <Cell>Grass, Poison</Cell>
-      <Cell>83</Cell>
-    </Row>
-    <Row key="4">
-      <Cell>Pikachu</Cell>
-      <Cell>Electric</Cell>
-      <Cell>100</Cell>
-    </Row>
-  </TableBody>
-</Table>
-```
-
-To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
-be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
-
-Here is how you would control selection for the above example.
-
-```tsx example export=true
-function PokemonTable(props) {
-  let columns = [
-    {name: 'Name', uid: 'name'},
-    {name: 'Type', uid: 'type'},
-    {name: 'Level', uid: 'level'}
-  ];
-  let rows = [
-    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
-    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
-    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
-  ];
-  let [selected, setSelected] = React.useState(new Set(['2']));
-  return (
-    <Table aria-label="Example table with single selection (controlled)" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} style={{height: '210px', maxWidth: '400px'}} {...props}>
-      <TableHeader columns={columns}>
-        {column => (
-          <Column key={column.uid}>
-            {column.name}
-          </Column>
-        )}
-      </TableHeader>
-      <TableBody items={rows}>
-        {item => (
-          <Row key={item.id}>
-            {key => <Cell>{item[key]}</Cell>}
-          </Row>
-        )}
-      </TableBody>
-    </Table>
-  );
-}
-```
-
-Multiple selection can be enabled by setting `selectionMode` to `multiple`.
-
-```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="multiple" />
-```
-
-Table also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the Table selected at all times.
-
-```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="single" disallowEmptySelection />
-```
-
-### Disabled rows
-
-You can disable specific rows by providing an array of keys to `useTableState` via the `disabledKeys` prop. This will prevent rows from being selectable as shown in the example below.
-Note that you are responsible for the styling of disabled rows.
-
-```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="multiple" disabledKeys={['2']} />
-```
-
-### Sorting
-
-Table supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
-the `allowsSorting` prop. The Table accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
-When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
-the `SortDescriptor` appropriately.
-
-This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
-See the docs for more information on how to perform server side sorting.
-
-```tsx example
-import {useAsyncList} from '@react-stately/data';
-
-function AsyncSortTable() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'},
-    {name: 'Birth Year', key: 'birth_year'}
-  ];
-
-  let list = useAsyncList({
-    async load({signal}) {
-      let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
-      let json = await res.json();
-      return {
-        items: json.results
-      };
-    },
-    async sort({items, sortDescriptor}) {
-      let sorted = items.sort((a, b) => {
-        let cmp;
-        let first = a[sortDescriptor.column].replace("BBY", "");
-        let second = b[sortDescriptor.column].replace("BBY", "");
-        if (+first || +second) {
-          cmp = +first < +second ? -1 : 1;
-        } else {
-          cmp = first <= second ? -1 : 1;
-        }
-        if (sortDescriptor.direction === 'descending') {
-          cmp *= -1;
-        }
-        return cmp;
-      });
-      return {
-        items: sorted
-      };
-    }
-  });
-
-  return (
-    <Table aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort} style={{height: '300px', maxWidth: '600px'}}>
-      <TableHeader columns={columns}>
-        {(column) => (
-          <Column allowsSorting>
-            {column.name}
-          </Column>
-        )}
-      </TableHeader>
-      <TableBody
-        items={list.items}>
-        {(item) => (
-          <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
-        )}
-      </TableBody>
-    </Table>
-  );
-}
-```
-
-## Internationalization
-
-`useTable` handles some aspects of internationalization automatically.
-For example, type to select is implemented with an
-[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
-for internationalized string matching. You are responsible for localizing all text content within the table.
-Make sure that some types of content (e.g. file extensions) are not translated.
-
-### RTL
-
-In right-to-left languages, the table layout should be mirrored. The columns should be ordered from right to left and the
-individual column text alignment should be inverted. Ensure that your CSS accounts for this.
diff --git a/packages/@react-stately/table/docs/useTableState.mdx b/packages/@react-stately/table/docs/useTableState.mdx
deleted file mode 100644
index eb586fc2250..00000000000
--- a/packages/@react-stately/table/docs/useTableState.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
-<!-- 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. -->
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-stately/table';
-import {ClassAPI, HeaderInfo, FunctionAPI} from '@react-spectrum/docs';
-import packageData from '@react-stately/table/package.json';
-
----
-category: Collections
-keywords: [table, state, grid]
----
-
-# useTableState
-
-<p>{docs.exports.useTableState.description}</p>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['useTableState']} />
-
-## API
-
-<FunctionAPI function={docs.exports.useTableState} links={docs.links} />
-<FunctionAPI function={docs.exports.Cell} links={docs.links} />
-<FunctionAPI function={docs.exports.Column} links={docs.links} />
-<FunctionAPI function={docs.exports.Row} links={docs.links} />
-<FunctionAPI function={docs.exports.TableBody} links={docs.links} />
-<FunctionAPI function={docs.exports.TableHeader} links={docs.links} />
-
-## Interface
-
-<ClassAPI links={docs.links} class={docs.links[docs.exports.useTableState.return.base.id]} />
-
-## Example
-
-See the docs for [useTable](/react-aria/useTable.html) in react-aria for an example of `useTableState`, `Cell`, `Column`,
-`Row`, `TableBody`, and `TableHeader`.

From f592b071d8e91020c86414684de72606c0795c57 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 14:07:06 -0700
Subject: [PATCH 41/62] removing tableview docs

---
 .../@react-spectrum/table/docs/TableView.mdx  | 786 ------------------
 1 file changed, 786 deletions(-)
 delete mode 100644 packages/@react-spectrum/table/docs/TableView.mdx

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
deleted file mode 100644
index b110a74babb..00000000000
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ /dev/null
@@ -1,786 +0,0 @@
-<!-- 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. -->
-
-import {Layout} from '@react-spectrum/docs';
-export default Layout;
-
-import docs from 'docs:@react-spectrum/table';
-import tableTypes from 'docs:@react-types/table/src/index.d.ts';
-import {HeaderInfo, PropTable} from '@react-spectrum/docs';
-import packageData from '@react-spectrum/table/package.json';
-
-```jsx import
-import {ActionButton} from '@react-spectrum/button';
-import Add from '@spectrum-icons/workflow/Add';
-import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table';
-import {Flex} from '@react-spectrum/layout';
-```
-
----
-category: Collections
-keywords: [table, grid]
----
-
-# TableView
-
-<p>{docs.exports.TableView.description}</p>
-
-<HeaderInfo
-  packageData={packageData}
-  componentNames={['Cell', 'Column', 'Row', 'TableView', 'TableBody', 'TableHeader']}
-  sourceData={[
-    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/table/'}
-  ]} />
-
-## Example
-```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table with static contents" width="100%" height="100%">
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column align="end">Date Modified</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>Games</Cell>
-        <Cell>File folder</Cell>
-        <Cell>6/7/2020</Cell>
-      </Row>
-      <Row>
-        <Cell>Program Files</Cell>
-        <Cell>File folder</Cell>
-        <Cell>4/7/2021</Cell>
-      </Row>
-      <Row>
-        <Cell>bootmgr</Cell>
-        <Cell>System file</Cell>
-        <Cell>11/20/2010</Cell>
-      </Row>
-      <Row>
-        <Cell>log.txt</Cell>
-        <Cell>Text Document</Cell>
-        <Cell>1/18/2016</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-## Content
-TableView expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API.
-The TableHeader accepts either static Columns or a `columns` prop with a renderer function for dynamic rendering. Similarly, TableBody accepts either static Rows or a `items` prop with a renderer function.
-Row follows the same pattern, accepting Cells as children instead.
-
-Basic usage of TableView, seen in the example above, shows multiple Columns and Rows populated with strings and Cells respectively. Static collections, as in this example, can be used when the contents of the TableView is known ahead of time.
-
-Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows TableView to automatically cache the rendering of each item,
-which dramatically improves performance. Make sure that each rendered property in the Row object matches with a Column's key. In the example below, the `uid` of each Column is set as its key and matches with a
-property within each Row object.
-
-```tsx example
-function Example() {
-  let columns = [
-    {name: 'Name', uid: 'name'},
-    {name: 'Type', uid: 'type'},
-    {name: 'Date Modified', uid: 'date'}
-  ];
-
-  let rows = [
-    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
-    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
-    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
-    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
-  ];
-
-  return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with dynamic content" width="100%" height="100%">
-        <TableHeader columns={columns}>
-          {column => (
-            <Column key={column.uid} align={column.uid === 'date' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item => (
-            <Row key={item.id}>
-              {/* Note this key is equal to the key of the the column,
-              not the key set on the Row prior */}
-              {key => <Cell>{item[key]}</Cell>}
-            </Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-### Internationalization
-To internationalize a TableView, all text content within the TableView should be replaced with localized strings. This includes the `aria-label` provided to the TableView if any.
-For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of TableView is automatically flipped.
-
-## Labeling
-### Accessibility
-An `aria-label` must be provided to the TableView for accessibility. If the TableView is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
-
-By default, the first column of the TableView is used as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
-to one or more Columns, allowing you to customize which columns should label the rows of the TableView.
-
-The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-3000">
-  <TableView aria-label="Example table with static contents" width="100%" height="100%">
-    <TableHeader>
-      <Column isRowHeader>First Name</Column>
-      <Column isRowHeader>Last Name</Column>
-      <Column align="end">Age</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>John</Cell>
-        <Cell>Doe</Cell>
-        <Cell>45</Cell>
-      </Row>
-      <Row>
-        <Cell>Jane</Cell>
-        <Cell>Doe</Cell>
-        <Cell>37</Cell>
-      </Row>
-      <Row>
-        <Cell>Joe</Cell>
-        <Cell>Schmoe</Cell>
-        <Cell>67</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-## Asynchronous loading
-TableView supports loading data asynchronously, and will display a progress circle reflecting the current load state,
-set by the `loadingState` prop. It also supports infinite scrolling to load more data on demand as the user scrolls, via the `onLoadMore` prop.
-
-This example uses the [useAsyncList](../react-stately/useAsyncList.html) hook to handle loading the data.
-See the docs for more information.
-
-```tsx example
-import {useAsyncList} from '@react-stately/data';
-
-function AsyncTable() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'},
-    {name: 'Birth Year', key: 'birth_year'}
-  ];
-
-  let list = useAsyncList({
-    async load({signal, cursor}) {
-      if (cursor) {
-        cursor = cursor.replace(/^http:\/\//i, 'https://');
-      }
-
-      let res = await fetch(cursor || `https://swapi.dev/api/people/?search=`, {signal});
-      let json = await res.json();
-
-      return {
-        items: json.results,
-        cursor: json.next
-      };
-    }
-  });
-
-  return (
-    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="example async loading table" height="100%" width="100%">
-        <TableHeader columns={columns}>
-          {(column) => (
-            <Column align={column.key !== 'name' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody
-          items={list.items}
-          loadingState={list.loadingState}
-          onLoadMore={list.loadMore}>
-          {(item) => (
-            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-## Events
-
-### Selection
-TableView supports multiple selection modes. By default, selection is disabled, but this can be modified using the `selectionMode` prop.
-Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the value of the selected keys must match the `key` prop of the Row.
-
-The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column align="end">Level</Column>
-    </TableHeader>
-    <TableBody>
-      <Row key="1">
-        <Cell>Charizard</Cell>
-        <Cell>Fire, Flying</Cell>
-        <Cell>67</Cell>
-      </Row>
-      <Row key="2">
-        <Cell>Blastoise</Cell>
-        <Cell>Water</Cell>
-        <Cell>56</Cell>
-      </Row>
-      <Row key="3">
-        <Cell>Venusaur</Cell>
-        <Cell>Grass, Poison</Cell>
-        <Cell>83</Cell>
-      </Row>
-      <Row key="4">
-        <Cell>Pikachu</Cell>
-        <Cell>Electric</Cell>
-        <Cell>100</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
-be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
-
-Here is how you would control selection for the above example.
-
-```tsx example export=true
-function PokemonTable(props) {
-  let columns = [
-    {name: 'Name', uid: 'name'},
-    {name: 'Type', uid: 'type'},
-    {name: 'Level', uid: 'level'}
-  ];
-
-  let rows = [
-    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
-    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
-    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
-  ];
-
-  let [selected, setSelected] = React.useState(new Set(['2']));
-
-  return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
-        <TableHeader columns={columns}>
-          {column => (
-            <Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item => (
-            <Row key={item.id}>
-              {key => <Cell>{item[key]}</Cell>}
-            </Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-Multiple selection can be enabled by setting `selectionMode` to `multiple`.
-
-```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="multiple" />
-```
-
-TableView also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the TableView selected at all times.
-
-```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="single" disallowEmptySelection />
-```
-
-### Sorting
-TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
-the `allowsSorting` prop. The TableView accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
-When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
-the `SortDescriptor` appropriately.
-
-This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
-See the docs for more information on how to perform server side sorting.
-
-```tsx example
-function AsyncSortTable() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'},
-    {name: 'Birth Year', key: 'birth_year'}
-  ];
-
-  let list = useAsyncList({
-    async load({signal}) {
-      let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
-      let json = await res.json();
-
-      return {
-        items: json.results
-      };
-    },
-    async sort({items, sortDescriptor}) {
-      let sorted = items.sort((a, b) => {
-        let cmp;
-        let first = a[sortDescriptor.column].replace("BBY", "");
-        let second = b[sortDescriptor.column].replace("BBY", "");
-
-        if (+first || +second) {
-          cmp = +first < +second ? -1 : 1;
-        } else {
-          cmp = first <= second ? -1 : 1;
-        }
-
-        if (sortDescriptor.direction === 'descending') {
-          cmp *= -1;
-        }
-        return cmp;
-      });
-
-      return {
-        items: sorted
-      };
-    }
-  });
-
-  return (
-    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
-        <TableHeader columns={columns}>
-          {(column) => (
-            <Column allowsSorting align={column.key !== 'name' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody
-          items={list.items}
-          loadingState={list.loadingState}>
-          {(item) => (
-            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-## Props
-
-### TableView props
-
-<PropTable component={docs.exports.TableView} links={docs.links} style={{marginBottom: '40px'}} />
-
-### TableHeader props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.TableHeaderProps.properties))
-  }
-}} links={tableTypes.links} style={{marginBottom: '40px'}} />
-
-### Column props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.SpectrumColumnProps.properties))
-  }
-}} links={tableTypes.links} style={{marginBottom: '40px'}} />
-
-### TableBody props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.TableBodyProps.properties))
-  }
-}} links={tableTypes.links} style={{marginBottom: '40px'}} />
-
-### Row props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.RowProps.properties))
-  }
-}} links={tableTypes.links} style={{marginBottom: '40px'}} />
-
-### Cell props
-
-<PropTable component={{
-  props: {
-    properties: Object.fromEntries(Object.entries(tableTypes.exports.CellProps.properties))
-  }
-}} links={tableTypes.links} />
-
-## Visual options
-### Column alignment
-[View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column alignment" width="100%" height="100%">
-    <TableHeader>
-      <Column align="start">Name</Column>
-      <Column align="center">Type</Column>
-      <Column align="end">Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Column widths
-Columns support three different width props: `minWidth`, `width`, and `maxWidth`.
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column widths" width="100%" height="100%">
-    <TableHeader>
-      <Column maxWidth={300} align="start">Name</Column>
-      <Column width={80}>Type</Column>
-      <Column minWidth={100} align="end">Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Column dividers
-[View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column dividers" width="100%" height="100%">
-    <TableHeader>
-      <Column align="start" showDivider>Name</Column>
-      <Column showDivider>Type</Column>
-      <Column align="end" showDivider>Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Nested columns
-TableView supports nesting columns, allowing you to render "tiered" column headers.
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for nested columns" width="100%" height="100%">
-    <TableHeader>
-      <Column title="OS (C:)">
-        <Column align="start">Name</Column>
-        <Column>Type</Column>
-        <Column align="end">Size</Column>
-      </Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Focusable cells
-Cells accept any renderable node, allowing you to have focusable children within the TableView.
-
-```tsx example
-import Edit from '@spectrum-icons/workflow/Edit';
-import Delete from '@spectrum-icons/workflow/Delete';
-
-<Flex maxWidth="size-3000" flexGrow={1}>
-  <TableView aria-label="Example table for focusable cells" width="100%" height="100%">
-    <TableHeader>
-      <Column>Name</Column>
-      <Column hideHeader>Add</Column>
-      <Column hideHeader>Delete</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>Red Panda</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Harbor Seal</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Groundhog</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Otter</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
-### Hide header
-Individual column headers can be hidden by providing the `hideHeader` prop to the Column. A tooltip is rendered when the column header is focused
-to compensate for the lack of a visual title. Note that the `hideHeader` prop is specifically intended for columns that contain ActionButtons instead
-of text content.
-
-```tsx example export=true
-function TableExample(props) {
-  let columns = [
-    {name: 'First Name', key: 'firstName'},
-    {name: 'Last Name', key: 'lastName'},
-    {name: 'Add Info', key: 'addInfo'},
-    {name: 'Age', key: 'age'}
-  ];
-
-  let rows = [
-    {id: '1', firstName: 'John', lastName: 'Doe', age: '45'},
-    {id: '2', firstName: 'Jane', lastName: 'Doe', age: '37'},
-    {id: '3', firstName: 'Joe', lastName: 'Schmoe', age: '67'},
-    {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'},
-    {id: '5', firstName: 'Longggggggggggg Wrapping', lastName: 'Name', age: '56'}
-  ];
-
-  return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
-        <TableHeader columns={columns}>
-          {column => (
-            <Column
-              hideHeader={column.key === 'addInfo'}
-              align={column.key === 'age' ? 'end' : 'start'}
-              showDivider={column.key === 'addInfo'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item =>
-            (<Row key={item.id}>
-              {key =>
-                key === 'addInfo'
-                ? <Cell><ActionButton isQuiet><Add /></ActionButton></Cell>
-                : <Cell>{item[key]}</Cell>
-              }
-            </Row>)
-          }
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
-```
-
-### Quiet
-[View guidelines](https://spectrum.adobe.com/page/table/#Standard-or-quiet)
-
-```tsx example
-// Using same setup as hide header example
-<TableExample isQuiet />
-```
-
-### Disabled
-Use the `disabledKeys` prop to specify which rows to disable selection for in the TableView.
-
-```tsx example
-// Using same setup as hide header example
-<TableExample disabledKeys={['2', '3']} selectionMode="single" />
-```
-
-### Density
-The amount of vertical padding that each row contains can be modified by providing the `density` prop.
-
-```tsx example
-// Using same setup as hide header example
-<Flex direction="column" gap="size-300">
-  <TableExample density="compact" />
-  <TableExample density="spacious" />
-</Flex>
-```
-
-### Overflow mode
-By default, text content that overflows its table cell will be truncated. You can have it wrap instead by passing `overflowMode="wrap"`
-to the TableView.
-
-```tsx example
-// Using same setup as hide header example
-<TableExample overflowMode="wrap" />
-```
-
-### Empty state
-Use the `renderEmptyState` prop to customize what the TableView will display if there are no rows provided.
-
-```tsx example
-import {Content} from '@react-spectrum/view';
-import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
-import {Heading} from '@react-spectrum/text';
-
-function renderEmptyState() {
-  return (
-    <IllustratedMessage>
-      <svg width="150" height="103" viewBox="0 0 150 103">
-        <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" />
-      </svg>
-      <Heading>No results</Heading>
-      <Content>No results found</Content>
-    </IllustratedMessage>
-  );
-}
-
-<Flex height="size-6000" flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column>Size</Column>
-    </TableHeader>
-    <TableBody>
-      {[]}
-    </TableBody>
-  </TableView>
-</Flex>
-```

From 5395577d91e18c8dac03be1fe6a3da755907f123 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 14:14:21 -0700
Subject: [PATCH 42/62] adding aria and stately docs

---
 .../@react-aria/table/docs/TableAnatomy.svg   |  91 +++
 packages/@react-aria/table/docs/useTable.mdx  | 683 ++++++++++++++++++
 .../table/docs/useTableState.mdx              |  46 ++
 .../@react-types/table/docs/TableView.mdx     |   2 +-
 4 files changed, 821 insertions(+), 1 deletion(-)
 create mode 100644 packages/@react-aria/table/docs/TableAnatomy.svg
 create mode 100644 packages/@react-aria/table/docs/useTable.mdx
 create mode 100644 packages/@react-stately/table/docs/useTableState.mdx

diff --git a/packages/@react-aria/table/docs/TableAnatomy.svg b/packages/@react-aria/table/docs/TableAnatomy.svg
new file mode 100644
index 00000000000..9f0779b9577
--- /dev/null
+++ b/packages/@react-aria/table/docs/TableAnatomy.svg
@@ -0,0 +1,91 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="842" height="342" style="max-height: 342px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: 4px;" viewBox="0 0 842 342">
+  <title>Table anatomy diagram</title>
+  <desc>Shows a table component with labels pointing to its parts, including the row, row divider, column, column header, column divider, sort icon, and cell elements.</desc>
+  <defs>
+    <clipPath id="clip-table_anatomy">
+      <rect width="842" height="342"/>
+    </clipPath>
+  </defs>
+  <g id="table_anatomy" clip-path="url(#clip-table_anatomy)">
+    <rect width="842" height="342" fill="var(--anatomy-gray-100)"/>
+    <g id="Group_4011" data-name="Group 4011" transform="translate(-36 403)">
+      <text id="Column_header" data-name="Column
+header" transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.576" y="15">header</tspan></text>
+      <path id="Union_50" data-name="Union 50" d="M-8701-353.5a2.5,2.5,0,0,1,2-2.45V-374h1v18.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8701-353.5Z" transform="translate(9100.5 34)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <text id="Typography" transform="translate(543 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="-26.224" y="0">SENT</tspan></text>
+    <g id="rectangle-33" transform="translate(276 107)" fill="none">
+      <path d="M 296 188.5 L 4 188.5 C 2.070076942443848 188.5 0.5 186.9299163818359 0.5 185 L 0.5 4 C 0.5 2.070076942443848 2.070076942443848 0.5 4 0.5 L 296 0.5 C 297.929931640625 0.5 299.5 2.070076942443848 299.5 4 L 299.5 185 C 299.5 186.9299163818359 297.929931640625 188.5 296 188.5 Z" stroke="none"/>
+      <path d="M 4 1 C 2.345794677734375 1 1 2.345809936523438 1 4 L 1 185 C 1 186.6541900634766 2.345794677734375 188 4 188 L 296 188 C 297.6542053222656 188 299 186.6541900634766 299 185 L 299 4 C 299 2.345809936523438 297.6542053222656 1 296 1 L 4 1 M 4 0 L 296 0 C 298.2091064453125 0 300 1.790847778320312 300 4 L 300 185 C 300 187.2091522216797 298.2091064453125 189 296 189 L 4 189 C 1.79083251953125 189 0 187.2091522216797 0 185 L 0 4 C 0 1.790847778320312 1.79083251953125 0 4 0 Z" stroke="none" fill="var(--anatomy-gray-300)"/>
+    </g>
+    <text id="Typography-2" data-name="Typography" transform="translate(557 135)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-30.618" y="0">6,554</tspan></text>
+    <text id="Typography-3" data-name="Typography" transform="translate(557 182)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.106" y="0">2,875</tspan></text>
+    <text id="Typography-4" data-name="Typography" transform="translate(557 229)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.652" y="0">3,679</tspan></text>
+    <text id="Typography-5" data-name="Typography" transform="translate(557 276)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-28.462" y="0">1,308</tspan></text>
+    <text id="Tree_item" data-name="Tree item" transform="translate(340 137)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
+    <text id="Tree_item-2" data-name="Tree item" transform="translate(340 183)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
+    <text id="Tree_item-3" data-name="Tree item" transform="translate(340 277)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
+    <text id="Tree_item-4" data-name="Tree item" transform="translate(340 231)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
+    <text id="Typography-6" data-name="Typography" transform="translate(336 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="0" y="0">ITEM NAME</tspan></text>
+    <g id="Group_4019" data-name="Group 4019" transform="translate(-77 637.5)">
+      <text id="Column" transform="translate(364 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan></text>
+      <path id="Union_53" data-name="Union 53" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(8963.5 259)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <text id="Cell" transform="translate(563 321)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-9.276" y="0">Cell</tspan></text>
+    <path id="Union_56" data-name="Union 56" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9162.5 896.5)" fill="var(--anatomy-gray-500)"/>
+    <path id="Path_3123" data-name="Path 3123" d="M9,7a1,1,0,0,0-1.71-.71L6,7.59V2A1,1,0,1,0,4,2V7.59L2.71,6.29A1,1,0,0,0,1.29,7.71l3,3a1,1,0,0,0,1.41,0l3-3A1,1,0,0,0,9,7Z" transform="translate(547.004 84)" fill="var(--anatomy-gray-600)"/>
+    <g id="Group_4012" data-name="Group 4012" transform="translate(150 398)">
+      <text id="Sort_icon" data-name="Sort icon" transform="translate(402 -340)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-22.236" y="0">Sort icon</tspan></text>
+      <rect id="Rectangle_12329" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0"/>
+      <path id="Union_49" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <rect id="rectangle-34" width="298" height="1" transform="translate(277 154)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-2" data-name="rectangle-34" width="298" height="1" transform="translate(277 107)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-3" data-name="rectangle-34" width="298" height="1" transform="translate(277 201)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-4" data-name="rectangle-34" width="298" height="1" transform="translate(277 248)" fill="var(--anatomy-gray-300)"/>
+    <rect id="rectangle-34-5" data-name="rectangle-34" width="1" height="189" transform="translate(497 107)" fill="var(--anatomy-gray-300)"/>
+    <g id="Group_16603" data-name="Group 16603" transform="translate(86 378)">
+      <text id="Row_divider" data-name="Row
+divider" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-11.102" y="0">Row</tspan><tspan x="-17.173" y="15">divider</tspan></text>
+      <path id="Union_49-2" data-name="Union 49" d="M0,92.5a2.5,2.5,0,0,1,2-2.45V0H3V90.051A2.5,2.5,0,1,1,0,92.5Z" transform="translate(399.5 -318)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <g id="Checkbox" transform="translate(293 115)">
+      <g id="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Checkbox-2" data-name="Checkbox" transform="translate(293 209)">
+      <g id="Box-2" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Checkbox-3" data-name="Checkbox" transform="translate(293 162)">
+      <g id="Box-3" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Checkbox-4" data-name="Checkbox" transform="translate(293 256)">
+      <g id="Box-4" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Checkbox-5" data-name="Checkbox" transform="translate(293 74)">
+      <g id="Box-5" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none"/>
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+      </g>
+    </g>
+    <g id="Group_16604" data-name="Group 16604" transform="translate(-102 398)">
+      <text id="Checkbox_selection" data-name="Checkbox
+selection" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-24.31" y="0">Checkbox</tspan><tspan x="-22.003" y="15">selection</tspan></text>
+      <path id="Union_49-3" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
+    </g>
+    <text id="Column_divider" data-name="Column
+divider" transform="translate(497 315)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.173" y="15">divider</tspan></text>
+    <path id="Union_57" data-name="Union 57" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9095.5 888)" fill="var(--anatomy-gray-500)"/>
+  </g>
+</svg>
diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
new file mode 100644
index 00000000000..8105f1ebbe5
--- /dev/null
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -0,0 +1,683 @@
+<!-- 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. -->
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-aria/table';
+import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
+import selectionDocs from 'docs:@react-stately/selection';
+import statelyDocs from 'docs:@react-stately/table';
+import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
+import packageData from '@react-aria/table/package.json';
+import Anatomy from './TableAnatomy.svg';
+
+```jsx import
+import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableRowGroup, useTableRowHeader, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
+```
+
+---
+category: Collections
+keywords: [table, aria, grid]
+---
+
+# useTable
+
+<p>{docs.exports.useTable.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['useTable', 'useTableCell', 'useTableColumnHeader', 'useTableRow', 'useTableRowGroup', 'useTableRowHeader', 'useTableSelectAllCheckbox', 'useTableSelectionCheckbox']}
+  sourceData={[
+    {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#grid'}
+  ]} />
+
+## API
+
+<FunctionAPI function={docs.exports.useTable} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableColumnHeader} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableRow} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableRowGroup} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableRowHeader} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableCell} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableSelectionCheckbox} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableSelectAllCheckbox} links={docs.links} />
+
+## Features
+
+A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), [&lt;thead&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead),
+[&lt;tbody&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), and other table specific HTML elements, but is very limited in functionality especially when it comes to user interactions.
+`useTable` helps achieve accessible and interactive table components that can be styled as needed.
+
+* Exposed to assistive technology as a `grid` using ARIA
+* Support for single, multiple, or no row selection
+* Support for disabled rows
+* Labeling support for accessibility
+* Support for mouse, touch, and keyboard interactions
+* Support for keyboard navigation between columns, rows, cells, and in-cell focusable items
+* Column sorting
+* Multiple [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) support
+* Automatic scrolling support during keyboard navigation
+* Typeahead to allow focusing rows by typing text
+* Virtualized scrolling support for performance with large tables
+
+## Anatomy
+
+<Anatomy />
+
+A table consists of a container element, with columns and rows of cells containing data inside. The cells within a table may contain focusable elements or plain text content.
+If the table supports row selection, each row includes a selection checkbox in the first column. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
+
+`useTable`, `useTableCell`, `useTableColumnHeader`, `useTableRow`, and `useTableRowHeader` handle keyboard, mouse, and other interactions to support
+row selection, in table navigation, and overall focus behavior. Those hooks, along with `useTableRowGroup`, also handle exposing the table and its contents
+to assistive technology using ARIA. `useTableSelectAllCheckbox` and `useTableSelectionCheckbox` handle row selection and associating each checkbox with its respective rows
+for assistive technology.
+
+`useTable` returns props that you should spread onto the table container element:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTable.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableColumnHeader` returns props for an individual table column header:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableColumnHeader.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableRow` returns props for an individual table row:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableRow.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableRowGroup` returns props for a element containing one or more rows of column headers or cells. This is often equivalent
+to the header, body, and footer of the table:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableRowGroup.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableRowHeader` returns props for the table cell that serves as a row's header:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableRowHeader.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableCell` returns props for an individual table cell:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableCell.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableSelectionCheckbox` returns props for an individual table row selection checkbox:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableSelectionCheckbox.return.id].properties} />
+</TypeContext.Provider>
+
+`useTableSelectAllCheckbox` returns props for the table's "select all" checkbox:
+
+<TypeContext.Provider value={docs.links}>
+  <InterfaceType properties={docs.links[docs.exports.useTableSelectAllCheckbox.return.id].properties} />
+</TypeContext.Provider>
+
+State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
+hook from `@react-stately/table`. The state object should be passed as an option to each of the above hooks where applicable.
+
+Note that an `aria-label` or `aria-labelledby` must be passed to the table to identify the element to assistive technology.
+
+## State management
+
+`useTable` requires knowledge of the rows, cells, and columns in the table in order to handle keyboard
+navigation and other interactions. It does this using
+the <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Collection} />
+interface, which is a generic interface to access sequential unique keyed data. You can
+implement this interface yourself, e.g. by using a prop to pass a list of item objects,
+but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} /> from
+`@react-stately/table` implements a JSX based interface for building collections instead.
+See [Collection Components](/react-stately/collections.html) for more information,
+and [Collection Interface](/react-stately/Collection.html) for internal details.
+
+In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
+manages the state necessary for multiple selection and exposes
+a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
+which makes use of the collection to provide an interface to update the selection state.
+For more information, see [Selection](/react-stately/selection.html).
+
+## Example
+
+This example uses HTML `<div>` elements to construct the table. It uses `useTableState` to construct the table's collection of rows and columns,
+applying the appropriate attributes to each `<div>` using the various table hooks listed above paired with the div's role in the table.
+The table follows the [Collection Components API](../react-stately/collections.html), accepting both static and dynamic collections.
+
+The example below shows a static collection, which can be used when the full set of table contents is known ahead of time. Be sure to note the usage of
+`Cell`, `Column`, `Row`, `TableBody`, and `TableHeader` to construct the table structure. These elements are similar to `Item` and `Section` used in other components
+following the [Collection Components API](../react-stately/collections.html) mentioned previously, serving as node generators for the table collection.
+See [useTableState](/react-stately/useTableState.html) for more info on the props they support.
+
+```tsx example export=true
+import {Cell, Column, Row, TableBody, TableHeader, useTableState} from '@react-stately/table';
+import {mergeProps} from '@react-aria/utils';
+import {useCheckbox} from '@react-aria/checkbox';
+import {useContext, useRef} from 'react';
+import {useFocusRing} from '@react-aria/focus';
+import {useToggleState} from '@react-stately/toggle';
+const TableContext = React.createContext(null);
+function useTableContext() {
+  return useContext(TableContext);
+}
+function Table(props) {
+  let state = useTableState({...props, showSelectionCheckboxes: true});
+  let ref = useRef();
+  let scrollViewRef = useRef();
+  let {collection} = state;
+  let {gridProps} = useTable({
+    ...props,
+    ref: ref
+  }, state);
+  let headerRows = collection.rows.filter(item => item.type === 'headerrow' && item);
+  let rows = collection.rows.filter(item => item.type === 'item' && item);
+  let renderColumnNode = (node) => {
+    if (node.props.isSelectionCell) {
+      return <TableSelectAllCell column={node} />;
+    }
+    return <TableColumnHeader column={node} />;
+  };
+  let renderRowNode = (node) => {
+    if (node.props.isSelectionCell) {
+      return <TableCheckboxCell cell={node} />;
+    }
+    if (collection.rowHeaderColumnKeys.has(node.column.key)) {
+      return <TableRowHeader cell={node} />;
+    }
+    return <TableCell cell={node} />;
+  };
+  return (
+    <TableContext.Provider value={state}>
+      <div {...gridProps} style={{...props.style, display: 'flex', flexDirection: 'column'}} ref={ref}>
+        <TableHeaderGroup>
+          {[...headerRows].map(headerRow => (
+            <TableHeaderRow item={headerRow}>
+              {[...headerRow.childNodes].map((column) => renderColumnNode(column))}
+            </TableHeaderRow>
+          ))}
+        </TableHeaderGroup>
+        <div
+          style={{
+            borderTop: '2px solid black',
+            borderBottom: '2px solid black',
+            padding: '0px 1px 0px 1px',
+            flex: '1 1 0%',
+            overflow: 'auto'
+          }}>
+          <TableRowGroup>
+            {[...rows].map(row => (
+              <TableRow item={row}>
+                {[...row.childNodes].map((node) => renderRowNode(node))}
+              </TableRow>
+            ))}
+          </TableRowGroup>
+        </div>
+      </div>
+    </TableContext.Provider>
+  );
+}
+function TableHeaderGroup({children, ...otherProps}) {
+  let {rowGroupProps} = useTableRowGroup();
+  return (
+    <div {...rowGroupProps} {...otherProps}>
+      {children}
+    </div>
+  );
+}
+function TableColumnHeader({column}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let {columnHeaderProps} = useTableColumnHeader({
+    node: column,
+    ref,
+    colspan: column.colspan
+  }, state);
+  let {isFocusVisible, focusProps} = useFocusRing();
+  let columnProps = column.props;
+  let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
+  return (
+    <div
+      {...mergeProps(columnHeaderProps, focusProps)}
+      style={{
+        height: '16px',
+        lineHeight: '16px',
+        width: '100px',
+        padding: '10px 10px 10px 10px',
+        outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
+      }}
+      ref={ref}>
+      {column.rendered}
+      {columnProps.allowsSorting && state.sortDescriptor?.column === column.key &&
+        <span aria-hidden="true" style={{padding: '0 2px'}}>
+          {arrowIcon}
+        </span>
+      }
+    </div>
+  );
+}
+function TableSelectAllCell({column}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
+  let {columnHeaderProps} = useTableColumnHeader({
+    node: column,
+    ref,
+    colspan: column.colspan,
+    isDisabled: isSingleSelectionMode
+  }, state);
+  let {checkboxProps} = useTableSelectAllCheckbox(state);
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);
+  return (
+    <div
+      {...columnHeaderProps}
+      style={{
+        height: '16px',
+        padding: '10px 10px 10px 10px'
+      }}
+      aria-disabled={isSingleSelectionMode}
+      ref={ref}>
+      <input
+        {...inputProps}
+        ref={inputRef}
+        disabled={isSingleSelectionMode}
+        style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
+    </div>
+  );
+}
+function TableRowGroup({children, ...otherProps}) {
+  let {rowGroupProps} = useTableRowGroup();
+  return (
+    <div {...rowGroupProps} {...otherProps}>
+      {children}
+    </div>
+  );
+}
+function TableRow({item, children, ...otherProps}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(item.key);
+  let isSelected = state.selectionManager.isSelected(item.key) && !isDisabled;
+  let {rowProps} = useTableRow({
+    node: item,
+    isSelected,
+    ref,
+    isDisabled
+  }, state);
+  let props = mergeProps(
+    rowProps,
+    otherProps
+  );
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        padding: '1px 1px 2px 1px',
+        borderTop: '1px solid lightgrey'
+      }}
+      {...props}
+      ref={ref}>
+      {children}
+    </div>
+  );
+}
+function TableHeaderRow({item, children, ...otherProps}) {
+  return (
+    <div role="row" aria-rowindex={item.index + 1} {...otherProps} style={{display: 'flex', flexDirection: 'row', paddingBottom: '4px'}}>
+      {children}
+    </div>
+  );
+}
+function TableCheckboxCell({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {gridCellProps} = useTableCell({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+  let {checkboxProps} = useTableSelectionCheckbox(
+    {
+      key: cell.parentKey,
+      isDisabled
+    },
+    state
+  );
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox({...checkboxProps, isDisabled}, useToggleState(checkboxProps), inputRef);
+  return (
+    <div
+      {...gridCellProps}
+      style={{
+        height: '16px',
+        padding: '10px 10px 10px 10px'
+      }}
+      ref={ref}>
+      {state.selectionManager.selectionMode !== 'none' &&
+        <input {...inputProps} />
+      }
+    </div>
+  );
+}
+function TableCell({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {gridCellProps} = useTableCell({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+  return (
+    <TableCellBase
+      {...gridCellProps}
+      cell={cell}
+      cellRef={ref} />
+  );
+}
+function TableRowHeader({cell}) {
+  let ref = useRef();
+  let state = useTableContext();
+  let isDisabled = state.disabledKeys.has(cell.parentKey);
+  let {rowHeaderProps} = useTableRowHeader({
+    node: cell,
+    ref,
+    isDisabled
+  }, state);
+  return (
+    <TableCellBase
+      {...rowHeaderProps}
+      cell={cell}
+      cellRef={ref} />
+  );
+}
+function TableCellBase({cell, cellRef, ...otherProps}) {
+  let {isFocusVisible, focusProps} = useFocusRing();
+  return (
+    <div
+      {...mergeProps(otherProps, focusProps)}
+      style={{
+        height: '16px',
+        lineHeight: '16px',
+        width: '100px',
+        padding: '10px 10px 10px 10px',
+        outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
+      }}
+      ref={cellRef}>
+      <span style={{overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}>
+        {cell.rendered}
+      </span>
+    </div>
+  );
+}
+<Table aria-label="Example static collection table" style={{height: '210px', maxWidth: '400px'}}>
+  <TableHeader>
+    <Column>Name</Column>
+    <Column>Type</Column>
+    <Column>Date Modified</Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>Games</Cell>
+      <Cell>File folder</Cell>
+      <Cell>6/7/2020</Cell>
+    </Row>
+    <Row>
+      <Cell>Program Files</Cell>
+      <Cell>File folder</Cell>
+      <Cell>4/7/2021</Cell>
+    </Row>
+    <Row>
+      <Cell>bootmgr</Cell>
+      <Cell>System file</Cell>
+      <Cell>11/20/2010</Cell>
+    </Row>
+    <Row>
+      <Cell>log.txt</Cell>
+      <Cell>Text Document</Cell>
+      <Cell>1/18/2016</Cell>
+    </Row>
+  </TableBody>
+</Table>
+```
+
+## Usage
+
+### Dynamic collections
+
+Dynamic collections, as shown below, can be used when the table data comes from an external data source such as an API call, or update over time.
+In the example below, both the columns and the rows are provided to the table via a render function.
+
+```tsx example
+function Example() {
+  let columns = [
+    {name: 'Name', key: 'name'},
+    {name: 'Type', key: 'type'},
+    {name: 'Date Modified', key: 'date'}
+  ];
+  let rows = [
+    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
+    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
+    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
+    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
+  ];
+  return (
+    <Table aria-label="Example dynamic collection table" style={{height: '210px', maxWidth: '400px'}}>
+      <TableHeader columns={columns}>
+        {(column) => (
+          <Column key={column.key}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody items={rows}>
+        {(item) => (
+          <Row key={item.id}>
+            {/* Note this key is equal to the key of the the column,
+            not the key set on the Row prior */}
+            {(key) => <Cell>{item[key]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+### Selection
+
+By default, `useTableState` doesn't allow row selection but this can be modified using the `selectionMode` prop. Use `defaultSelectedKeys` to provide a default set of selected rows.
+Note that the value of the selected keys must match the `key` prop of the row.
+
+The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
+
+```tsx example
+<Table aria-label="Example table with single selection (uncontrolled)" selectionMode="single" defaultSelectedKeys={['2']} style={{height: '210px', maxWidth: '400px'}}>
+  <TableHeader>
+    <Column>Name</Column>
+    <Column>Type</Column>
+    <Column>Level</Column>
+  </TableHeader>
+  <TableBody>
+    <Row key="1">
+      <Cell>Charizard</Cell>
+      <Cell>Fire, Flying</Cell>
+      <Cell>67</Cell>
+    </Row>
+    <Row key="2">
+      <Cell>Blastoise</Cell>
+      <Cell>Water</Cell>
+      <Cell>56</Cell>
+    </Row>
+    <Row key="3">
+      <Cell>Venusaur</Cell>
+      <Cell>Grass, Poison</Cell>
+      <Cell>83</Cell>
+    </Row>
+    <Row key="4">
+      <Cell>Pikachu</Cell>
+      <Cell>Electric</Cell>
+      <Cell>100</Cell>
+    </Row>
+  </TableBody>
+</Table>
+```
+
+To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
+be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
+
+Here is how you would control selection for the above example.
+
+```tsx example export=true
+function PokemonTable(props) {
+  let columns = [
+    {name: 'Name', uid: 'name'},
+    {name: 'Type', uid: 'type'},
+    {name: 'Level', uid: 'level'}
+  ];
+  let rows = [
+    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
+    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
+    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
+  ];
+  let [selected, setSelected] = React.useState(new Set(['2']));
+  return (
+    <Table aria-label="Example table with single selection (controlled)" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} style={{height: '210px', maxWidth: '400px'}} {...props}>
+      <TableHeader columns={columns}>
+        {column => (
+          <Column key={column.uid}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody items={rows}>
+        {item => (
+          <Row key={item.id}>
+            {key => <Cell>{item[key]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+Multiple selection can be enabled by setting `selectionMode` to `multiple`.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="multiple" />
+```
+
+Table also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the Table selected at all times.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="single" disallowEmptySelection />
+```
+
+### Disabled rows
+
+You can disable specific rows by providing an array of keys to `useTableState` via the `disabledKeys` prop. This will prevent rows from being selectable as shown in the example below.
+Note that you are responsible for the styling of disabled rows.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="multiple" disabledKeys={['2']} />
+```
+
+### Sorting
+
+Table supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
+the `allowsSorting` prop. The Table accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
+When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
+the `SortDescriptor` appropriately.
+
+This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
+See the docs for more information on how to perform server side sorting.
+
+```tsx example
+import {useAsyncList} from '@react-stately/data';
+function AsyncSortTable() {
+  let columns = [
+    {name: 'Name', key: 'name'},
+    {name: 'Height', key: 'height'},
+    {name: 'Mass', key: 'mass'},
+    {name: 'Birth Year', key: 'birth_year'}
+  ];
+  let list = useAsyncList({
+    async load({signal}) {
+      let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
+      let json = await res.json();
+      return {
+        items: json.results
+      };
+    },
+    async sort({items, sortDescriptor}) {
+      let sorted = items.sort((a, b) => {
+        let cmp;
+        let first = a[sortDescriptor.column].replace("BBY", "");
+        let second = b[sortDescriptor.column].replace("BBY", "");
+        if (+first || +second) {
+          cmp = +first < +second ? -1 : 1;
+        } else {
+          cmp = first <= second ? -1 : 1;
+        }
+        if (sortDescriptor.direction === 'descending') {
+          cmp *= -1;
+        }
+        return cmp;
+      });
+      return {
+        items: sorted
+      };
+    }
+  });
+  return (
+    <Table aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort} style={{height: '300px', maxWidth: '600px'}}>
+      <TableHeader columns={columns}>
+        {(column) => (
+          <Column allowsSorting>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody
+        items={list.items}>
+        {(item) => (
+          <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
+```
+
+## Internationalization
+
+`useTable` handles some aspects of internationalization automatically.
+For example, type to select is implemented with an
+[Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
+for internationalized string matching. You are responsible for localizing all text content within the table.
+Make sure that some types of content (e.g. file extensions) are not translated.
+
+### RTL
+
+In right-to-left languages, the table layout should be mirrored. The columns should be ordered from right to left and the
+individual column text alignment should be inverted. Ensure that your CSS accounts for this.
diff --git a/packages/@react-stately/table/docs/useTableState.mdx b/packages/@react-stately/table/docs/useTableState.mdx
new file mode 100644
index 00000000000..eb586fc2250
--- /dev/null
+++ b/packages/@react-stately/table/docs/useTableState.mdx
@@ -0,0 +1,46 @@
+<!-- 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. -->
+
+import {Layout} from '@react-spectrum/docs';
+export default Layout;
+
+import docs from 'docs:@react-stately/table';
+import {ClassAPI, HeaderInfo, FunctionAPI} from '@react-spectrum/docs';
+import packageData from '@react-stately/table/package.json';
+
+---
+category: Collections
+keywords: [table, state, grid]
+---
+
+# useTableState
+
+<p>{docs.exports.useTableState.description}</p>
+
+<HeaderInfo
+  packageData={packageData}
+  componentNames={['useTableState']} />
+
+## API
+
+<FunctionAPI function={docs.exports.useTableState} links={docs.links} />
+<FunctionAPI function={docs.exports.Cell} links={docs.links} />
+<FunctionAPI function={docs.exports.Column} links={docs.links} />
+<FunctionAPI function={docs.exports.Row} links={docs.links} />
+<FunctionAPI function={docs.exports.TableBody} links={docs.links} />
+<FunctionAPI function={docs.exports.TableHeader} links={docs.links} />
+
+## Interface
+
+<ClassAPI links={docs.links} class={docs.links[docs.exports.useTableState.return.base.id]} />
+
+## Example
+
+See the docs for [useTable](/react-aria/useTable.html) in react-aria for an example of `useTableState`, `Cell`, `Column`,
+`Row`, `TableBody`, and `TableHeader`.
diff --git a/packages/@react-types/table/docs/TableView.mdx b/packages/@react-types/table/docs/TableView.mdx
index 1c3a177dcff..b110a74babb 100644
--- a/packages/@react-types/table/docs/TableView.mdx
+++ b/packages/@react-types/table/docs/TableView.mdx
@@ -132,7 +132,7 @@ For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout o
 ### Accessibility
 An `aria-label` must be provided to the TableView for accessibility. If the TableView is labeled by a separate element, an `aria-labelledby` prop must be provided using the id of the labeling element instead.
 
-By default, the first column of the TableView is used as the row header and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
+By default, the first column of the TableView is used as the [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) and is announced by assistive technology when navigating through the rows. You can override this behavior by providing the `isRowHeader` prop
 to one or more Columns, allowing you to customize which columns should label the rows of the TableView.
 
 The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").

From 2f27852db9b94fc53c54fd5e4c6fb8e535b3b9a5 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 14:25:06 -0700
Subject: [PATCH 43/62] moving tableview docs to the right place

---
 .../{@react-types => @react-spectrum}/table/docs/TableView.mdx    | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/{@react-types => @react-spectrum}/table/docs/TableView.mdx (100%)

diff --git a/packages/@react-types/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
similarity index 100%
rename from packages/@react-types/table/docs/TableView.mdx
rename to packages/@react-spectrum/table/docs/TableView.mdx

From 20128b5c61ecb3b425cdb04b21023d5066580153 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 14:59:48 -0700
Subject: [PATCH 44/62] getting rid of table column defaultWidth prop and row
 child items

not supported yet so removing for now
---
 .../@react-stately/layout/src/TableLayout.ts  |  2 +-
 packages/@react-stately/table/src/Row.ts      | 12 +-------
 packages/@react-types/table/src/index.d.ts    | 29 +++++++++----------
 3 files changed, 16 insertions(+), 27 deletions(-)

diff --git a/packages/@react-stately/layout/src/TableLayout.ts b/packages/@react-stately/layout/src/TableLayout.ts
index 5b1cb9be50b..99bf5760662 100644
--- a/packages/@react-stately/layout/src/TableLayout.ts
+++ b/packages/@react-stately/layout/src/TableLayout.ts
@@ -72,7 +72,7 @@ export class TableLayout<T> extends ListLayout<T> {
     let remainingSpace = this.virtualizer.visibleRect.width;
     for (let column of this.collection.columns) {
       let props = column.props as ColumnProps<T>;
-      let width = props.width ?? props.defaultWidth ?? this.getDefaultWidth(props);
+      let width = props.width ?? this.getDefaultWidth(props);
       if (width != null) {
         let w = this.parseWidth(width);
         this.columnWidths.set(column.key, w);
diff --git a/packages/@react-stately/table/src/Row.ts b/packages/@react-stately/table/src/Row.ts
index 2cdcdead8f5..52193c325de 100644
--- a/packages/@react-stately/table/src/Row.ts
+++ b/packages/@react-stately/table/src/Row.ts
@@ -20,7 +20,7 @@ function Row<T>(props: RowProps<T>): ReactElement { // eslint-disable-line @type
 }
 
 Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps<T>, context: CollectionBuilderContext<T>): Generator<PartialNode<T>> {
-  let {childItems, children, textValue} = props;
+  let {children, textValue} = props;
 
   yield {
     type: 'item',
@@ -63,16 +63,6 @@ Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps<T>, conte
 
         yield* cells;
       }
-
-      // Then process child rows (e.g. treeble)
-      if (childItems) {
-        for (let child of childItems) {
-          yield {
-            type: 'item',
-            value: child
-          };
-        }
-      }
     },
     shouldInvalidate(newContext: CollectionBuilderContext<T>) {
       // Invalidate all rows if the columns changed.
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index b37319b82f3..31369eef2bf 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -15,7 +15,7 @@ import {GridCollection, GridNode} from '@react-types/grid';
 import {Key, ReactElement, ReactNode} from 'react';
 
 export interface TableProps<T> extends MultipleSelection, Sortable {
-  /** The elements that make up the Table. Includes the TableHeader, TableBody, Columns, and Rows. */
+  /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
   children: [ReactElement<TableHeaderProps<T>>, ReactElement<TableBodyProps<T>>],
   /** A list of row keys to disable. */
   disabledKeys?: Iterable<Key>
@@ -23,23 +23,23 @@ export interface TableProps<T> extends MultipleSelection, Sortable {
 
 export interface SpectrumTableProps<T> extends TableProps<T>, DOMProps, AriaLabelingProps, StyleProps {
   /**
-   * Sets the amount of vertical padding within each Table cell.
+   * Sets the amount of vertical padding within each cell.
    * @default 'regular'
    */
   density?: 'compact' | 'regular' | 'spacious',
   /**
-   * Sets the overflow behavior for the Table cell contents.
+   * Sets the overflow behavior for the cell contents.
    * @default 'truncate'
    */
   overflowMode?: 'wrap' | 'truncate',
-  /** Whether the Table should be displayed with a quiet style. */
+  /** Whether the TableView should be displayed with a quiet style. */
   isQuiet?: boolean,
-  /** Sets what the Table should render when there is no content to display. */
+  /** Sets what the TableView should render when there is no content to display. */
   renderEmptyState?: () => JSX.Element
 }
 
 export interface TableHeaderProps<T> {
-  /** A list of Table columns. */
+  /** A list of table columns. */
   columns?: T[],
   /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
   children: ColumnElement<T> | ColumnElement<T>[] | ColumnRenderer<T>
@@ -59,9 +59,8 @@ export interface ColumnProps<T> {
   /** The minimum width of the column. */
   minWidth?: number | string,
   /** The maximum width of the column. */
-  maxWidth?: number | string,
-  /** The default width of the column. */
-  defaultWidth?: number | string
+  maxWidth?: number | string
+  // defaultWidth?: number | string
 }
 
 // TODO: how to support these in CollectionBuilder...
@@ -92,16 +91,16 @@ export interface TableBodyProps<T> extends Omit<AsyncLoadable, 'isLoading'> {
   children: CollectionChildren<T>,
   /** A list of row objects in the table body used when dynamically rendering rows. */
   items?: Iterable<T>,
-  /** The current loading state of the TableView. */
+  /** The current loading state of the table. */
   loadingState?: LoadingState
 }
 
 export interface RowProps<T> {
-  // treeble case?
-  /** A list of child item objects used when dynamically rendering row children. */
-  childItems?: Iterable<T>,
-  /** Whether this row has children, even if not loaded yet. */
-  hasChildItems?: boolean,
+  // treeble case? Unsupported props for now
+  // /** A list of child item objects used when dynamically rendering row children. */
+  // childItems?: Iterable<T>,
+  // /** Whether this row has children, even if not loaded yet. */
+  // hasChildItems?: boolean,
   /** Rendered contents of the row or row child items. */
   children: CellElement | CellElement[] | CellRenderer,
   /** A string representation of the row's contents, used for features like typeahead. */

From 91324a929cdfefc462a8c2a5739f8b3802c433e7 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 15:04:01 -0700
Subject: [PATCH 45/62] fixing lint

---
 packages/@react-stately/table/src/Row.ts   | 6 +++---
 packages/@react-types/table/src/index.d.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@react-stately/table/src/Row.ts b/packages/@react-stately/table/src/Row.ts
index 52193c325de..3267e4fa871 100644
--- a/packages/@react-stately/table/src/Row.ts
+++ b/packages/@react-stately/table/src/Row.ts
@@ -15,11 +15,11 @@ import {PartialNode} from '@react-stately/collections';
 import React, {ReactElement} from 'react';
 import {RowProps} from '@react-types/table';
 
-function Row<T>(props: RowProps<T>): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
+function Row(props: RowProps): ReactElement { // eslint-disable-line @typescript-eslint/no-unused-vars
   return null;
 }
 
-Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps<T>, context: CollectionBuilderContext<T>): Generator<PartialNode<T>> {
+Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps, context: CollectionBuilderContext<T>): Generator<PartialNode<T>> {
   let {children, textValue} = props;
 
   yield {
@@ -75,5 +75,5 @@ Row.getCollectionNode = function* getCollectionNode<T>(props: RowProps<T>, conte
 };
 
 // We don't want getCollectionNode to show up in the type definition
-let _Row = Row as <T>(props: RowProps<T>) => JSX.Element;
+let _Row = Row as (props: RowProps) => JSX.Element;
 export {_Row as Row};
diff --git a/packages/@react-types/table/src/index.d.ts b/packages/@react-types/table/src/index.d.ts
index 31369eef2bf..b9b33b7dded 100644
--- a/packages/@react-types/table/src/index.d.ts
+++ b/packages/@react-types/table/src/index.d.ts
@@ -95,7 +95,7 @@ export interface TableBodyProps<T> extends Omit<AsyncLoadable, 'isLoading'> {
   loadingState?: LoadingState
 }
 
-export interface RowProps<T> {
+export interface RowProps {
   // treeble case? Unsupported props for now
   // /** A list of child item objects used when dynamically rendering row children. */
   // childItems?: Iterable<T>,

From aadf95bacc681617bfcd0d1d25785498bc39e0f9 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 15:51:52 -0700
Subject: [PATCH 46/62] adding doc comments for grid and table hooks

---
 packages/@react-aria/grid/src/useGrid.ts                  | 8 +++++++-
 packages/@react-aria/grid/src/useGridCell.ts              | 7 ++++++-
 packages/@react-aria/grid/src/useGridRow.ts               | 5 +++++
 packages/@react-aria/grid/src/useGridRowGroup.ts          | 3 +++
 packages/@react-aria/table/src/useTable.ts                | 6 ++++++
 packages/@react-aria/table/src/useTableColumnHeader.ts    | 5 +++++
 packages/@react-aria/table/src/useTableRowHeader.ts       | 5 +++++
 .../@react-aria/table/src/useTableSelectionCheckbox.ts    | 5 +++++
 packages/@react-stately/grid/src/useGridState.ts          | 3 +++
 9 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts
index c6e09412da7..d08f304e54e 100644
--- a/packages/@react-aria/grid/src/useGrid.ts
+++ b/packages/@react-aria/grid/src/useGrid.ts
@@ -39,7 +39,7 @@ export interface GridProps extends DOMProps, AriaLabelingProps {
    */
   focusMode?: 'row' | 'cell',
   /**
-   * A function that returns the text that should be announced by accessibility tools when a row is added or removed from selection.
+   * A function that returns the text that should be announced by assistive technology when a row is added or removed from selection.
    * @default (key) => state.collection.getItem(key)?.textValue
    */
   getRowText?: (key: Key) => string
@@ -50,6 +50,12 @@ export interface GridAria {
   gridProps: HTMLAttributes<HTMLElement>
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a grid component.
+ * A grid displays data in one or more rows and columns and enables a user to navigate its contents via directional navigation keys.
+ * @param props - Props for the grid.
+ * @param state - State for the grid, as returned by `useGridState`.
+ */
 export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<T>>): GridAria {
   let {
     ref,
diff --git a/packages/@react-aria/grid/src/useGridCell.ts b/packages/@react-aria/grid/src/useGridCell.ts
index a63ae3f9946..55a68365057 100644
--- a/packages/@react-aria/grid/src/useGridCell.ts
+++ b/packages/@react-aria/grid/src/useGridCell.ts
@@ -30,7 +30,7 @@ interface GridCellProps {
   isVirtualized?: boolean,
   /** Whether the grid cell is disabled. */
   isDisabled?: boolean,
-  /** Whether the cell or it's first focusable item be focused when the grid cell is focused. */
+  /** Whether the cell or its first focusable child element should be focused when the grid cell is focused. */
   focusMode?: 'child' | 'cell',
   /** Whether selection should occur on press up instead of press down. */
   shouldSelectOnPressUp?: boolean
@@ -41,6 +41,11 @@ interface GridCellAria {
   gridCellProps: HTMLAttributes<HTMLElement>
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a cell in a grid.
+ * @param props - Props for the cell.
+ * @param state - State of the parent grid, as returned by `useGridState`.
+ */
 export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps, state: GridState<T, C>): GridCellAria {
   let {
     node,
diff --git a/packages/@react-aria/grid/src/useGridRow.ts b/packages/@react-aria/grid/src/useGridRow.ts
index fad2f8cfd61..91df542deb1 100644
--- a/packages/@react-aria/grid/src/useGridRow.ts
+++ b/packages/@react-aria/grid/src/useGridRow.ts
@@ -37,6 +37,11 @@ export interface GridRowAria {
   rowProps: HTMLAttributes<HTMLElement>
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a row in a grid.
+ * @param props - Props for the row.
+ * @param state - State of the parent grid, as returned by `useGridState`.
+ */
 export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T, C>>(props: GridRowProps<T>, state: S): GridRowAria {
   let {
     node,
diff --git a/packages/@react-aria/grid/src/useGridRowGroup.ts b/packages/@react-aria/grid/src/useGridRowGroup.ts
index fcff2aa2d7f..90b2da378de 100644
--- a/packages/@react-aria/grid/src/useGridRowGroup.ts
+++ b/packages/@react-aria/grid/src/useGridRowGroup.ts
@@ -17,6 +17,9 @@ interface GridRowGroupAria {
   rowGroupProps: HTMLAttributes<HTMLElement>
 }
 
+/**
+ * Provides the accessibility implementation for a row group in a grid.
+ */
 export function useGridRowGroup(): GridRowGroupAria {
   return {
     rowGroupProps: {
diff --git a/packages/@react-aria/table/src/useTable.ts b/packages/@react-aria/table/src/useTable.ts
index e5b7bc27bb4..67bf7da4474 100644
--- a/packages/@react-aria/table/src/useTable.ts
+++ b/packages/@react-aria/table/src/useTable.ts
@@ -25,6 +25,12 @@ interface TableProps<T> extends GridProps {
   layout?: Layout<Node<T>>
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a table component.
+ * A table displays data in one or more rows and columns and enables a user to navigate its contents via directional navigation keys.
+ * @param props - Props for the table.
+ * @param state - State for the table, as returned by `useTableState`.
+ */
 export function useTable<T>(props: TableProps<T>, state: TableState<T>): GridAria {
   let {
     ref,
diff --git a/packages/@react-aria/table/src/useTableColumnHeader.ts b/packages/@react-aria/table/src/useTableColumnHeader.ts
index 7b1476060a3..3a98bb0e03c 100644
--- a/packages/@react-aria/table/src/useTableColumnHeader.ts
+++ b/packages/@react-aria/table/src/useTableColumnHeader.ts
@@ -38,6 +38,11 @@ interface ColumnHeaderAria {
   columnHeaderProps: HTMLAttributes<HTMLElement>
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a column header in a table.
+ * @param props - Props for the column header.
+ * @param state - State of the table, as returned by `useTableState`.
+ */
 export function useTableColumnHeader<T>(props: ColumnHeaderProps, state: TableState<T>): ColumnHeaderAria {
   let {node, colspan, ref, isDisabled} = props;
   let {gridCellProps} = useGridCell(props, state);
diff --git a/packages/@react-aria/table/src/useTableRowHeader.ts b/packages/@react-aria/table/src/useTableRowHeader.ts
index f6657b3093c..25b5404384f 100644
--- a/packages/@react-aria/table/src/useTableRowHeader.ts
+++ b/packages/@react-aria/table/src/useTableRowHeader.ts
@@ -32,6 +32,11 @@ interface RowHeaderAria {
   rowHeaderProps: HTMLAttributes<HTMLElement>
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a row header in a table.
+ * @param props - Props for the row header.
+ * @param state - State of the table, as returned by `useTableState`.
+ */
 export function useTableRowHeader<T>(props: RowHeaderProps, state: TableState<T>): RowHeaderAria {
   let {gridCellProps} = useGridCell(props, state);
 
diff --git a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
index 80cd1e8e2bf..16ea547d685 100644
--- a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
+++ b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
@@ -33,6 +33,11 @@ interface SelectAllCheckboxAria {
   checkboxProps: AriaCheckboxProps
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a selection checkbox in a table.
+ * @param props - Props for the selection checkbox.
+ * @param state - State of the table, as returned by `useTableState`.
+ */
 export function useTableSelectionCheckbox<T>(props: SelectionCheckboxProps, state: TableState<T>): SelectionCheckboxAria {
   let {
     key,
diff --git a/packages/@react-stately/grid/src/useGridState.ts b/packages/@react-stately/grid/src/useGridState.ts
index 172f9769c3c..9b77dcf73fd 100644
--- a/packages/@react-stately/grid/src/useGridState.ts
+++ b/packages/@react-stately/grid/src/useGridState.ts
@@ -17,6 +17,9 @@ interface GridStateOptions<T, C extends GridCollection<T>> extends MultipleSelec
   focusMode?: 'row' | 'cell'
 }
 
+/**
+ * Provides state management for a grid component. Handles row selection and focusing a grid cell's focusable child if applicable.
+ */
 export function useGridState<T extends object, C extends GridCollection<T>>(props: GridStateOptions<T, C>): GridState<T, C> {
   let {collection, focusMode} = props;
   let selectionState = useMultipleSelectionState(props);

From ed1df88781614db68d1c2839239033b5b29657c7 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 15:55:41 -0700
Subject: [PATCH 47/62] missed usetablerow doc comment

---
 packages/@react-aria/table/src/useTableRow.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/@react-aria/table/src/useTableRow.ts b/packages/@react-aria/table/src/useTableRow.ts
index 39bc0ba0f32..7de1366dfdc 100644
--- a/packages/@react-aria/table/src/useTableRow.ts
+++ b/packages/@react-aria/table/src/useTableRow.ts
@@ -15,6 +15,11 @@ import {GridRowAria, GridRowProps, useGridRow} from '@react-aria/grid';
 import {TableCollection} from '@react-types/table';
 import {TableState} from '@react-stately/table';
 
+/**
+ * Provides the behavior and accessibility implementation for a row in a table.
+ * @param props - Props for the row.
+ * @param state - State of the table, as returned by `useTableState`.
+ */
 export function useTableRow<T>(props: GridRowProps<T>, state: TableState<T>): GridRowAria {
   let {node} = props;
   let {rowProps} = useGridRow<T, TableCollection<T>, TableState<T>>(props, state);

From 4f5a66df848b83baeea76ee6c0dd6af9a3ca14d2 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 11 Jun 2021 16:11:26 -0700
Subject: [PATCH 48/62] adding missing description for
 useTableSelectAllCheckbox hook

so sneaky
---
 packages/@react-aria/table/src/useTableSelectionCheckbox.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
index 16ea547d685..bbbee61bf58 100644
--- a/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
+++ b/packages/@react-aria/table/src/useTableSelectionCheckbox.ts
@@ -61,6 +61,11 @@ export function useTableSelectionCheckbox<T>(props: SelectionCheckboxProps, stat
   };
 }
 
+/**
+ * Provides the behavior and accessibility implementation for the select all checkbox in a table.
+ * @param props - Props for the select all checkbox.
+ * @param state - State of the table, as returned by `useTableState`.
+ */
 export function useTableSelectAllCheckbox<T>(state: TableState<T>): SelectAllCheckboxAria {
   let {isEmpty, isSelectAll} = state.selectionManager;
   return {

From 95a09ef70a1ff505a978dae447bf4d8f7e03117f Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 17 Jun 2021 10:12:57 -0700
Subject: [PATCH 49/62] replacing table css hover pseudo class with is-hovered

fixes doc examples where hovering was highlighting rows for tableview w/o selection enebaled
---
 .../@adobe/spectrum-css-temp/components/table/skin.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/@adobe/spectrum-css-temp/components/table/skin.css b/packages/@adobe/spectrum-css-temp/components/table/skin.css
index 8f142bc0aa7..bcb23e07c09 100644
--- a/packages/@adobe/spectrum-css-temp/components/table/skin.css
+++ b/packages/@adobe/spectrum-css-temp/components/table/skin.css
@@ -19,7 +19,7 @@ governing permissions and limitations under the License.
       color: var(--spectrum-table-header-sort-icon-color);
     }
 
-    &:hover {
+    &.is-hovered {
       color: var(--spectrum-table-header-text-color-hover);
 
       .spectrum-Table-sortedIcon {
@@ -119,7 +119,7 @@ tbody.spectrum-Table-body {
 
   /* We apply background color to the cell rather than the row so that
    * cells can overlap (e.g. sticky row headers). */
-  &:hover .spectrum-Table-cell {
+  &.is-hovered .spectrum-Table-cell {
     background-color: var(--spectrum-table-row-background-color-hover);
   }
 
@@ -143,7 +143,7 @@ tbody.spectrum-Table-body {
       background-color: var(--spectrum-table-row-background-color-selected);
     }
 
-    &:hover .spectrum-Table-cell {
+    &.is-hovered .spectrum-Table-cell {
       background-color: var(--spectrum-table-row-background-color-selected-hover);
     }
 
@@ -191,7 +191,7 @@ tbody.spectrum-Table-body {
       background-color: var(--spectrum-alias-background-color-default);
     }
 
-    &:hover .spectrum-Table-cell {
+    &.is-hovered .spectrum-Table-cell {
       background-color: var(--spectrum-table-quiet-row-background-color-hover);
     }
 
@@ -209,7 +209,7 @@ tbody.spectrum-Table-body {
         background-color: var(--spectrum-table-quiet-row-background-color-selected);
       }
 
-      &:hover .spectrum-Table-cell {
+      &.is-hovered .spectrum-Table-cell {
         background-color: var(--spectrum-table-quiet-row-background-color-selected-hover);
       }
 

From 17589c44fa569e78e248b1304afc4323d58ebe34 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 17 Jun 2021 12:44:08 -0700
Subject: [PATCH 50/62] Update some examples

---
 .../@react-spectrum/table/docs/TableView.mdx  | 416 ++++++++++--------
 1 file changed, 226 insertions(+), 190 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index b110a74babb..5b6ff53ce58 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -85,43 +85,40 @@ which dramatically improves performance. Make sure that each rendered property i
 property within each Row object.
 
 ```tsx example
-function Example() {
-  let columns = [
-    {name: 'Name', uid: 'name'},
-    {name: 'Type', uid: 'type'},
-    {name: 'Date Modified', uid: 'date'}
-  ];
-
-  let rows = [
-    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
-    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
-    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
-    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
-  ];
-
-  return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with dynamic content" width="100%" height="100%">
-        <TableHeader columns={columns}>
-          {column => (
-            <Column key={column.uid} align={column.uid === 'date' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item => (
-            <Row key={item.id}>
-              {/* Note this key is equal to the key of the the column,
-              not the key set on the Row prior */}
-              {key => <Cell>{item[key]}</Cell>}
-            </Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
-  );
-}
+let columns = [
+  {name: 'Name', uid: 'name'},
+  {name: 'Type', uid: 'type'},
+  {name: 'Date Modified', uid: 'date'}
+];
+
+let rows = [
+  {id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
+  {id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder'},
+  {id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file'},
+  {id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
+];
+
+<TableView
+  aria-label="Example table with dynamic content"
+  height="size-3000"
+  maxWidth="size-6000">
+  <TableHeader columns={columns}>
+    {column => (
+      <Column
+        key={column.uid}
+        align={column.uid === 'date' ? 'end' : 'start'}>
+        {column.name}
+      </Column>
+    )}
+  </TableHeader>
+  <TableBody items={rows}>
+    {item => (
+      <Row>
+        {columnKey => <Cell>{item[columnKey]}</Cell>}
+      </Row>
+    )}
+  </TableBody>
+</TableView>
 ```
 
 ### Internationalization
@@ -224,50 +221,50 @@ function AsyncTable() {
 }
 ```
 
-## Events
 
-### Selection
-TableView supports multiple selection modes. By default, selection is disabled, but this can be modified using the `selectionMode` prop.
+## Selection
+
+By default, TableView doesn't allow row selection but this can be enabled using the `selectionMode` prop.
 Use `defaultSelectedKeys` to provide a default set of selected rows. Note that the value of the selected keys must match the `key` prop of the Row.
 
-The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
+The example below enables multiple selection mode, and uses `defaultSelectedKeys` to select the rows with keys "2" and "4".
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table with single selection (uncontrolled)" width="100%" height="100%" selectionMode="single" defaultSelectedKeys={['2']}>
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column align="end">Level</Column>
-    </TableHeader>
-    <TableBody>
-      <Row key="1">
-        <Cell>Charizard</Cell>
-        <Cell>Fire, Flying</Cell>
-        <Cell>67</Cell>
-      </Row>
-      <Row key="2">
-        <Cell>Blastoise</Cell>
-        <Cell>Water</Cell>
-        <Cell>56</Cell>
-      </Row>
-      <Row key="3">
-        <Cell>Venusaur</Cell>
-        <Cell>Grass, Poison</Cell>
-        <Cell>83</Cell>
-      </Row>
-      <Row key="4">
-        <Cell>Pikachu</Cell>
-        <Cell>Electric</Cell>
-        <Cell>100</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
+<TableView aria-label="Example table with multiple selection" maxWidth="size-6000" height="size-3000" selectionMode="multiple" defaultSelectedKeys={['2', '4']}>
+  <TableHeader>
+    <Column>Name</Column>
+    <Column>Type</Column>
+    <Column align="end">Level</Column>
+  </TableHeader>
+  <TableBody>
+    <Row key="1">
+      <Cell>Charizard</Cell>
+      <Cell>Fire, Flying</Cell>
+      <Cell>67</Cell>
+    </Row>
+    <Row key="2">
+      <Cell>Blastoise</Cell>
+      <Cell>Water</Cell>
+      <Cell>56</Cell>
+    </Row>
+    <Row key="3">
+      <Cell>Venusaur</Cell>
+      <Cell>Grass, Poison</Cell>
+      <Cell>83</Cell>
+    </Row>
+    <Row key="4">
+      <Cell>Pikachu</Cell>
+      <Cell>Electric</Cell>
+      <Cell>100</Cell>
+    </Row>
+  </TableBody>
+</TableView>
 ```
 
-To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
-be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
+### Controlled selection
+
+To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected rows will
+be passed into the callback when the row is pressed, allowing you to update state accordingly.
 
 Here is how you would control selection for the above example.
 
@@ -280,121 +277,117 @@ function PokemonTable(props) {
   ];
 
   let rows = [
-    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
-    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
-    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
+    {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
+    {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
+    {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+    {id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
   ];
 
-  let [selected, setSelected] = React.useState(new Set(['2']));
+  let [selectedKeys, setSelectedKeys] = React.useState(new Set([2]));
 
   return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with single selection (controlled)" width="100%" height="100%" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} {...props}>
-        <TableHeader columns={columns}>
-          {column => (
-            <Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item => (
-            <Row key={item.id}>
-              {key => <Cell>{item[key]}</Cell>}
-            </Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
+    <TableView aria-label="Table with controlled selection" maxWidth="size-6000" height="size-3000" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} {...props}>
+      <TableHeader columns={columns}>
+        {column => (
+          <Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody items={rows}>
+        {item => (
+          <Row>
+            {columnKey => <Cell>{item[columnKey]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </TableView>
   );
 }
 ```
 
-Multiple selection can be enabled by setting `selectionMode` to `multiple`.
+### Single selection
+
+To limit users to selecting only a single item at a time, `selectionMode` can be set to `single`.
 
 ```tsx example
 // Using the same table as above
-<PokemonTable selectionMode="multiple" />
+<PokemonTable selectionMode="single" />
 ```
 
+### Disallow empty selection
+
 TableView also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the TableView selected at all times.
+In this mode, if a single row is selected and the user presses it, it will not be deselected.
 
 ```tsx example
 // Using the same table as above
-<PokemonTable selectionMode="single" disallowEmptySelection />
+<PokemonTable disallowEmptySelection />
 ```
 
-### Sorting
+### Disabled rows
+
+You can disable specific rows by providing an array of keys to TableView via the `disabledKeys` prop. This will prevent rows from being
+selectable as shown in the example below.
+
+```tsx example
+// Using the same table as above
+<PokemonTable selectionMode="multiple" disabledKeys={[3]} />
+```
+
+## Sorting
+
 TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
-the `allowsSorting` prop. The TableView accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
-When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
-the `SortDescriptor` appropriately.
+the `allowsSorting` prop. The TableView accepts a `sortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
+When the user presses a sortable column header, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
+the `sortDescriptor` appropriately.
 
 This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
 See the docs for more information on how to perform server side sorting.
 
 ```tsx example
 function AsyncSortTable() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'},
-    {name: 'Birth Year', key: 'birth_year'}
-  ];
-
   let list = useAsyncList({
     async load({signal}) {
       let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
       let json = await res.json();
-
       return {
         items: json.results
       };
     },
     async sort({items, sortDescriptor}) {
-      let sorted = items.sort((a, b) => {
-        let cmp;
-        let first = a[sortDescriptor.column].replace("BBY", "");
-        let second = b[sortDescriptor.column].replace("BBY", "");
-
-        if (+first || +second) {
-          cmp = +first < +second ? -1 : 1;
-        } else {
-          cmp = first <= second ? -1 : 1;
-        }
-
-        if (sortDescriptor.direction === 'descending') {
-          cmp *= -1;
-        }
-        return cmp;
-      });
-
       return {
-        items: sorted
+        items: items.sort((a, b) => {
+          let first = a[sortDescriptor.column];
+          let second = b[sortDescriptor.column];
+          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
+          if (sortDescriptor.direction === 'descending') {
+            cmp *= -1;
+          }
+          return cmp;
+        })
       };
     }
   });
 
   return (
-    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with client side sorting" height="100%" width="100%" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
-        <TableHeader columns={columns}>
-          {(column) => (
-            <Column allowsSorting align={column.key !== 'name' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody
-          items={list.items}
-          loadingState={list.loadingState}>
-          {(item) => (
-            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
+    <TableView aria-label="Example table with client side sorting" height="size-3000" maxWidth="size-6000" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
+      <TableHeader>
+        <Column key="name" allowsSorting>Name</Column>
+        <Column key="height" allowsSorting>Height</Column>
+        <Column key="mass" allowsSorting>Mass</Column>
+        <Column key="birth_year" allowsSorting>Birth Year</Column>
+      </TableHeader>
+      <TableBody
+        items={list.items}
+        loadingState={list.loadingState}>
+        {item => (
+          <Row key={item.name}>
+            {columnKey => <Cell>{item[columnKey]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </TableView>
   );
 }
 ```
@@ -557,40 +550,6 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 </Flex>
 ```
 
-### Nested columns
-TableView supports nesting columns, allowing you to render "tiered" column headers.
-
-```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for nested columns" width="100%" height="100%">
-    <TableHeader>
-      <Column title="OS (C:)">
-        <Column align="start">Name</Column>
-        <Column>Type</Column>
-        <Column align="end">Size</Column>
-      </Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
 ### Focusable cells
 Cells accept any renderable node, allowing you to have focusable children within the TableView.
 
@@ -723,14 +682,6 @@ function TableExample(props) {
 <TableExample isQuiet />
 ```
 
-### Disabled
-Use the `disabledKeys` prop to specify which rows to disable selection for in the TableView.
-
-```tsx example
-// Using same setup as hide header example
-<TableExample disabledKeys={['2', '3']} selectionMode="single" />
-```
-
 ### Density
 The amount of vertical padding that each row contains can be modified by providing the `density` prop.
 
@@ -784,3 +735,88 @@ function renderEmptyState() {
   </TableView>
 </Flex>
 ```
+
+### Nested columns
+
+TableView supports nesting columns, allowing you to create column groups, or "tiered" column headers.
+
+```tsx example
+<TableView aria-label="Example table for nested columns" maxWidth="size-6000" height="size-3000">
+  <TableHeader>
+    <Column title="Name">
+      <Column isRowHeader>First Name</Column>
+      <Column isRowHeader>Last Name</Column>
+    </Column>
+    <Column title="Information">
+      <Column>Age</Column>
+      <Column>Birthday</Column>
+    </Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>Sam</Cell>
+      <Cell>Smith</Cell>
+      <Cell>36</Cell>
+      <Cell>May 3</Cell>
+    </Row>
+    <Row>
+      <Cell>Julia</Cell>
+      <Cell>Jones</Cell>
+      <Cell>24</Cell>
+      <Cell>February 10</Cell>
+    </Row>
+    <Row>
+      <Cell>Peter</Cell>
+      <Cell>Parker</Cell>
+      <Cell>28</Cell>
+      <Cell>September 7</Cell>
+    </Row>
+    <Row>
+      <Cell>Bruce</Cell>
+      <Cell>Wayne</Cell>
+      <Cell>32</Cell>
+      <Cell>December 18</Cell>
+    </Row>
+  </TableBody>
+</TableView>
+```
+
+Nested columns can also be defined dynamically using the function syntax and the `childColumns` prop.
+The following example is the same as the example above, but defined dynamically.
+
+```tsx example
+let columns = [
+  {name: 'Name', key: 'name', children: [
+    {name: 'First Name', key: 'first', isRowHeader: true},
+    {name: 'Last Name', key: 'last', isRowHeader: true}
+  ]},
+  {name: 'Information', key: 'info', children: [
+    {name: 'Age', key: 'age'},
+    {name: 'Birthday', key: 'birthday'}
+  ]}
+];
+
+let rows = [
+  {id: 1, first: 'Sam', last: 'Smith', age: 36, birthday: 'May 3'},
+  {id: 2, first: 'Julia', last: 'Jones', age: 24, birthday: 'February 10'},
+  {id: 3, first: 'Peter', last: 'Parker', age: 28, birthday: 'September 7'},
+  {id: 4, first: 'Bruce', last: 'Wayne', age: 32, birthday: 'December 18'}
+];
+
+<TableView aria-label="Example table for nested columns" maxWidth="size-6000" height="size-3000">
+  <TableHeader columns={columns}>
+    {column => (
+      <Column isRowHeader={column.isRowHeader} childColumns={column.children}>
+        {column.name}
+      </Column>
+    )}
+  </TableHeader>
+  <TableBody items={rows}>
+    {item => (
+      <Row>
+        {columnKey => <Cell>{item[columnKey]}</Cell>}
+      </Row>
+    )}
+  </TableBody>
+</TableView>
+```

From 7c1a9254b45d4ab70de340a618f4aa2d3008ccd2 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 17 Jun 2021 15:25:31 -0700
Subject: [PATCH 51/62] Update table anatomy diagram

So that it matches up with the ARIA roles better
---
 .../@react-aria/table/docs/TableAnatomy.svg   | 226 ++++++++++++------
 1 file changed, 150 insertions(+), 76 deletions(-)

diff --git a/packages/@react-aria/table/docs/TableAnatomy.svg b/packages/@react-aria/table/docs/TableAnatomy.svg
index 9f0779b9577..89841bcdfd5 100644
--- a/packages/@react-aria/table/docs/TableAnatomy.svg
+++ b/packages/@react-aria/table/docs/TableAnatomy.svg
@@ -1,91 +1,165 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="842" height="342" style="max-height: 342px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: 4px;" viewBox="0 0 842 342">
+<svg style="max-height: 293px; background: var(--anatomy-gray-100); padding: 32px; margin-bottom: 16px; width: calc(100% - 64px); border-radius: 4px;" viewBox="0 0 435.862 293">
   <title>Table anatomy diagram</title>
-  <desc>Shows a table component with labels pointing to its parts, including the row, row divider, column, column header, column divider, sort icon, and cell elements.</desc>
-  <defs>
-    <clipPath id="clip-table_anatomy">
-      <rect width="842" height="342"/>
-    </clipPath>
-  </defs>
-  <g id="table_anatomy" clip-path="url(#clip-table_anatomy)">
-    <rect width="842" height="342" fill="var(--anatomy-gray-100)"/>
-    <g id="Group_4011" data-name="Group 4011" transform="translate(-36 403)">
-      <text id="Column_header" data-name="Column
-header" transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.576" y="15">header</tspan></text>
-      <path id="Union_50" data-name="Union 50" d="M-8701-353.5a2.5,2.5,0,0,1,2-2.45V-374h1v18.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8701-353.5Z" transform="translate(9100.5 34)" fill="var(--anatomy-gray-500)"/>
-    </g>
-    <text id="Typography" transform="translate(543 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="-26.224" y="0">SENT</tspan></text>
-    <g id="rectangle-33" transform="translate(276 107)" fill="none">
-      <path d="M 296 188.5 L 4 188.5 C 2.070076942443848 188.5 0.5 186.9299163818359 0.5 185 L 0.5 4 C 0.5 2.070076942443848 2.070076942443848 0.5 4 0.5 L 296 0.5 C 297.929931640625 0.5 299.5 2.070076942443848 299.5 4 L 299.5 185 C 299.5 186.9299163818359 297.929931640625 188.5 296 188.5 Z" stroke="none"/>
-      <path d="M 4 1 C 2.345794677734375 1 1 2.345809936523438 1 4 L 1 185 C 1 186.6541900634766 2.345794677734375 188 4 188 L 296 188 C 297.6542053222656 188 299 186.6541900634766 299 185 L 299 4 C 299 2.345809936523438 297.6542053222656 1 296 1 L 4 1 M 4 0 L 296 0 C 298.2091064453125 0 300 1.790847778320312 300 4 L 300 185 C 300 187.2091522216797 298.2091064453125 189 296 189 L 4 189 C 1.79083251953125 189 0 187.2091522216797 0 185 L 0 4 C 0 1.790847778320312 1.79083251953125 0 4 0 Z" stroke="none" fill="var(--anatomy-gray-300)"/>
-    </g>
-    <text id="Typography-2" data-name="Typography" transform="translate(557 135)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-30.618" y="0">6,554</tspan></text>
-    <text id="Typography-3" data-name="Typography" transform="translate(557 182)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.106" y="0">2,875</tspan></text>
-    <text id="Typography-4" data-name="Typography" transform="translate(557 229)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-29.652" y="0">3,679</tspan></text>
-    <text id="Typography-5" data-name="Typography" transform="translate(557 276)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="-28.462" y="0">1,308</tspan></text>
-    <text id="Tree_item" data-name="Tree item" transform="translate(340 137)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
-    <text id="Tree_item-2" data-name="Tree item" transform="translate(340 183)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
-    <text id="Tree_item-3" data-name="Tree item" transform="translate(340 277)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
-    <text id="Tree_item-4" data-name="Tree item" transform="translate(340 231)" fill="var(--anatomy-gray-800)" font-size="14" font-family="AdobeClean-Regular, Adobe Clean"><tspan x="0" y="0">Tree item</tspan></text>
-    <text id="Typography-6" data-name="Typography" transform="translate(336 94)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em"><tspan x="0" y="0">ITEM NAME</tspan></text>
-    <g id="Group_4019" data-name="Group 4019" transform="translate(-77 637.5)">
-      <text id="Column" transform="translate(364 -316.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan></text>
-      <path id="Union_53" data-name="Union 53" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(8963.5 259)" fill="var(--anatomy-gray-500)"/>
-    </g>
-    <text id="Cell" transform="translate(563 321)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-9.276" y="0">Cell</tspan></text>
-    <path id="Union_56" data-name="Union 56" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9162.5 896.5)" fill="var(--anatomy-gray-500)"/>
-    <path id="Path_3123" data-name="Path 3123" d="M9,7a1,1,0,0,0-1.71-.71L6,7.59V2A1,1,0,1,0,4,2V7.59L2.71,6.29A1,1,0,0,0,1.29,7.71l3,3a1,1,0,0,0,1.41,0l3-3A1,1,0,0,0,9,7Z" transform="translate(547.004 84)" fill="var(--anatomy-gray-600)"/>
-    <g id="Group_4012" data-name="Group 4012" transform="translate(150 398)">
-      <text id="Sort_icon" data-name="Sort icon" transform="translate(402 -340)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-22.236" y="0">Sort icon</tspan></text>
-      <rect id="Rectangle_12329" data-name="Rectangle 12329" width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0"/>
-      <path id="Union_49" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
-    </g>
-    <rect id="rectangle-34" width="298" height="1" transform="translate(277 154)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-2" data-name="rectangle-34" width="298" height="1" transform="translate(277 107)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-3" data-name="rectangle-34" width="298" height="1" transform="translate(277 201)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-4" data-name="rectangle-34" width="298" height="1" transform="translate(277 248)" fill="var(--anatomy-gray-300)"/>
-    <rect id="rectangle-34-5" data-name="rectangle-34" width="1" height="189" transform="translate(497 107)" fill="var(--anatomy-gray-300)"/>
-    <g id="Group_16603" data-name="Group 16603" transform="translate(86 378)">
-      <text id="Row_divider" data-name="Row
-divider" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-11.102" y="0">Row</tspan><tspan x="-17.173" y="15">divider</tspan></text>
-      <path id="Union_49-2" data-name="Union 49" d="M0,92.5a2.5,2.5,0,0,1,2-2.45V0H3V90.051A2.5,2.5,0,1,1,0,92.5Z" transform="translate(399.5 -318)" fill="var(--anatomy-gray-500)"/>
+  <desc>Shows a table component with labels pointing to its parts, including the row, column, column header, and cell elements.</desc>
+  <g transform="translate(-272.277 -86)">
+    <g transform="translate(27.996 459)">
+      <rect width="20" height="20" transform="translate(392 -340)" fill="red" opacity="0" /><text transform="translate(402 -360)" fill="var(--anatomy-gray-700)" font-size="13" font-family="Adobe-Clean" font-style="italic">
+        <tspan x="-19.858" y="0">Column</tspan>
+        <tspan x="-17.576" y="15">header</tspan>
+      </text>
+      <path d="M-8701-353.5a2.5,2.5,0,0,1,2-2.45V-374h1v18.05a2.5,2.5,0,0,1,2,2.45,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8701-353.5Z" transform="translate(9100.5 34)" fill="var(--anatomy-gray-500)" />
+    </g><text transform="translate(606.996 150)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em">
+      <tspan x="-21.791" y="0">SIZE</tspan>
+    </text>
+    <g transform="translate(342 161)" fill="var(--anatomy-gray-50)">
+      <path d="M 296 188.5 L 4 188.5 C 2.070076942443848 188.5 0.5 186.9299163818359 0.5 185 L 0.5 4 C 0.5 2.070076942443848 2.070076942443848 0.5 4 0.5 L 296 0.5 C 297.929931640625 0.5 299.5 2.070076942443848 299.5 4 L 299.5 185 C 299.5 186.9299163818359 297.929931640625 188.5 296 188.5 Z" stroke="none" />
+      <path d="M 4 1 C 2.345794677734375 1 1 2.345809936523438 1 4 L 1 185 C 1 186.6541900634766 2.345794677734375 188 4 188 L 296 188 C 297.6542053222656 188 299 186.6541900634766 299 185 L 299 4 C 299 2.345809936523438 297.6542053222656 1 296 1 L 4 1 M 4 0 L 296 0 C 298.2091064453125 0 300 1.790847778320312 300 4 L 300 185 C 300 187.2091522216797 298.2091064453125 189 296 189 L 4 189 C 1.79083251953125 189 0 187.2091522216797 0 185 L 0 4 C 0 1.790847778320312 1.79083251953125 0 4 0 Z" stroke="none" fill="var(--anatomy-gray-300)" />
+    </g><text transform="translate(623 189)" fill="var(--anatomy-gray-800)" font-size="14" font-family="Adobe-Clean">
+      <tspan x="-37.1" y="0">214 KB</tspan>
+    </text>
+    <rect width="298" height="1" transform="translate(343 208)" fill="var(--anatomy-gray-300)" />
+    <rect width="298" height="1" transform="translate(343 255)" fill="var(--anatomy-gray-300)" />
+    <rect width="298" height="1" transform="translate(343 302)" fill="var(--anatomy-gray-300)" /><text transform="translate(623 236)" fill="var(--anatomy-gray-800)" font-size="14" font-family="Adobe-Clean">
+      <tspan x="-37.324" y="0">120 KB</tspan>
+    </text><text transform="translate(623 283)" fill="var(--anatomy-gray-800)" font-size="14" font-family="Adobe-Clean">
+      <tspan x="-37.156" y="0">139 KB</tspan>
+    </text><text transform="translate(623 330)" fill="var(--anatomy-gray-800)" font-size="14" font-family="Adobe-Clean">
+      <tspan x="-32.34" y="0">24 KB</tspan>
+    </text><text transform="translate(395 190)" fill="var(--anatomy-gray-800)" font-size="14" font-family="Adobe-Clean">
+      <tspan x="0" y="0">Proposal</tspan>
+    </text><text transform="translate(395 237)" fill="var(--anatomy-gray-800)" font-size="14" font-family="Adobe-Clean">
+      <tspan x="0" y="0">Budget</tspan>
+    </text><text transform="translate(395 331)" fill="var(--anatomy-gray-800)" font-size="14" font-family="Adobe-Clean">
+      <tspan x="0" y="0">Welcome</tspan>
+    </text><text transform="translate(395 284)" fill="var(--anatomy-gray-800)" font-size="14" font-family="Adobe-Clean">
+      <tspan x="0" y="0">Onboarding</tspan>
+    </text><text transform="translate(392.996 150)" fill="var(--anatomy-gray-600)" font-size="11" font-family="AdobeClean-Medium, Adobe Clean" font-weight="500" letter-spacing="0.06em">
+      <tspan x="0" y="0">FILE NAME</tspan>
+    </text>
+    <rect width="20" height="21" transform="translate(554 341)" fill="red" opacity="0" />
+    <rect width="20" height="21" transform="translate(620 341)" fill="red" opacity="0" /><text transform="translate(463 376)" fill="var(--anatomy-gray-700)" font-size="13" font-family="Adobe-Clean" font-style="italic">
+      <tspan x="-9.276" y="0">Cell</tspan>
+    </text>
+    <path d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9062.5 951.5)" fill="var(--anatomy-gray-500)" />
+    <path d="M9,7a1,1,0,0,0-1.71-.71L6,7.59V2A1,1,0,1,0,4,2V7.59L2.71,6.29A1,1,0,0,0,1.29,7.71l3,3a1,1,0,0,0,1.41,0l3-3A1,1,0,0,0,9,7Z" transform="translate(611 140)" fill="var(--anatomy-gray-600)" />
+    <g transform="translate(359 169)">
+      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none" />
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
+      </g>
+      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none" />
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
+      </g>
     </g>
-    <g id="Checkbox" transform="translate(293 115)">
-      <g id="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+    <g transform="translate(359 263)">
+      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none" />
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
+      </g>
+      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none" />
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
       </g>
     </g>
-    <g id="Checkbox-2" data-name="Checkbox" transform="translate(293 209)">
-      <g id="Box-2" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+    <g transform="translate(359 216)">
+      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none" />
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
+      </g>
+      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none" />
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
       </g>
     </g>
-    <g id="Checkbox-3" data-name="Checkbox" transform="translate(293 162)">
-      <g id="Box-3" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+    <g transform="translate(359 310)">
+      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none" />
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
+      </g>
+      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none" />
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
       </g>
     </g>
-    <g id="Checkbox-4" data-name="Checkbox" transform="translate(293 256)">
-      <g id="Box-4" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+    <g transform="translate(356.996 130)">
+      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none" />
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
+      </g>
+      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none" />
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
       </g>
     </g>
-    <g id="Checkbox-5" data-name="Checkbox" transform="translate(293 74)">
-      <g id="Box-5" data-name="Box" transform="translate(0 9)" fill="var(--anatomy-gray-100)" stroke="var(--anatomy-gray-600)" stroke-width="2">
-        <rect width="14" height="14" rx="2" stroke="none"/>
-        <rect x="1" y="1" width="12" height="12" rx="1" fill="none"/>
+    <g transform="translate(-38.004 454)"><text transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="Adobe-Clean" font-style="italic">
+        <tspan x="-22.354" y="0">Select all</tspan>
+        <tspan x="-23.433" y="15">checkbox</tspan>
+      </text>
+      <rect width="20" height="20" transform="translate(392 -335)" fill="red" opacity="0" />
+      <path d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)" />
+    </g>
+    <g transform="translate(-85.639 624)"><text transform="translate(418 -350.5)" fill="var(--anatomy-gray-700)" font-size="13" font-family="Adobe-Clean" font-style="italic">
+        <tspan x="-45.305" y="0">Selection</tspan>
+        <tspan x="-46.865" y="16">checkbox</tspan>
+      </text>
+      <path d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(-165 8253.5) rotate(90)" fill="var(--anatomy-gray-500)" />
+    </g><text transform="translate(677.139 252.812)" fill="var(--anatomy-gray-700)" font-size="13" font-family="Adobe-Clean" font-style="italic">
+      <tspan x="0" y="0">Row</tspan>
+      <tspan x="0" y="16">group</tspan>
+    </text>
+    <rect width="8" height="1" transform="translate(661.14 255.311)" fill="var(--anatomy-gray-500)" />
+    <g transform="translate(652.14 162)">
+      <rect width="8" height="1" fill="var(--anatomy-gray-500)" />
+      <rect width="1" height="187.5" transform="translate(8)" fill="var(--anatomy-gray-500)" />
+      <rect width="8" height="1" transform="translate(0 186.5)" fill="var(--anatomy-gray-500)" />
+    </g><text transform="translate(309.277 141.349)" fill="var(--anatomy-gray-700)" font-size="13" font-family="Adobe-Clean" font-style="italic">
+      <tspan x="-36.66" y="0">Header</tspan>
+      <tspan x="-19.539" y="16">row</tspan>
+    </text>
+    <rect width="8" height="1" transform="translate(316.136 144.349)" fill="var(--anatomy-gray-500)" />
+    <g transform="translate(324.136 135.001)">
+      <rect width="8" height="1" transform="translate(1)" fill="var(--anatomy-gray-500)" />
+      <rect width="1" height="21.677" fill="var(--anatomy-gray-500)" />
+      <rect width="8" height="1" transform="translate(1 20.677)" fill="var(--anatomy-gray-500)" />
+    </g><text transform="translate(308 190)" fill="var(--anatomy-gray-700)" font-size="13" font-family="Adobe-Clean" font-style="italic">
+      <tspan x="-22.204" y="0">Row</tspan>
+    </text>
+    <rect width="8" height="1" transform="translate(316 184.641)" fill="var(--anatomy-gray-500)" />
+    <g transform="translate(324 162)">
+      <rect width="8" height="1" transform="translate(1)" fill="var(--anatomy-gray-500)" />
+      <rect width="1" height="46" fill="var(--anatomy-gray-500)" />
+      <rect width="8" height="1" transform="translate(1 45)" fill="var(--anatomy-gray-500)" />
+    </g>
+    <g transform="translate(359 169)">
+      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none" />
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
+      </g>
+      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none" />
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
       </g>
     </g>
-    <g id="Group_16604" data-name="Group 16604" transform="translate(-102 398)">
-      <text id="Checkbox_selection" data-name="Checkbox
-selection" transform="translate(402 -355)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-24.31" y="0">Checkbox</tspan><tspan x="-22.003" y="15">selection</tspan></text>
-      <path id="Union_49-3" data-name="Union 49" d="M-8556-348.5a2.5,2.5,0,0,1,2-2.45V-369h1v18.051a2.5,2.5,0,0,1,2,2.449,2.5,2.5,0,0,1-2.5,2.5A2.5,2.5,0,0,1-8556-348.5Z" transform="translate(8955.5 34)" fill="var(--anatomy-gray-500)"/>
+    <g transform="translate(359 169)">
+      <g fill="red" stroke="rgba(0,0,0,0)" stroke-width="1" opacity="0">
+        <rect width="14" height="32" stroke="none" />
+        <rect x="0.5" y="0.5" width="13" height="31" fill="none" />
+      </g>
+      <g transform="translate(0 9)" fill="var(--anatomy-gray-75)" stroke="var(--anatomy-gray-600)" stroke-width="2">
+        <rect width="14" height="14" rx="2" stroke="none" />
+        <rect x="1" y="1" width="12" height="12" rx="1" fill="none" />
+      </g>
+    </g><text transform="translate(676 144)" fill="var(--anatomy-gray-700)" font-size="13" font-family="Adobe-Clean" font-style="italic">
+      <tspan x="0" y="0">Row</tspan>
+      <tspan x="0" y="16">group</tspan>
+    </text>
+    <rect width="8" height="1" transform="translate(661.14 145.51)" fill="var(--anatomy-gray-500)" />
+    <g transform="translate(652.14 136.162)">
+      <rect width="8" height="1" fill="var(--anatomy-gray-500)" />
+      <rect width="1" height="21.677" transform="translate(8)" fill="var(--anatomy-gray-500)" />
+      <rect width="8" height="1" transform="translate(0 20.677)" fill="var(--anatomy-gray-500)" />
     </g>
-    <text id="Column_divider" data-name="Column
-divider" transform="translate(497 315)" fill="var(--anatomy-gray-700)" font-size="13" font-family="AdobeClean-It, Adobe Clean" font-style="italic"><tspan x="-19.858" y="0">Column</tspan><tspan x="-17.173" y="15">divider</tspan></text>
-    <path id="Union_57" data-name="Union 57" d="M-8599-588.5V-608.55a2.5,2.5,0,0,1-2-2.45,2.5,2.5,0,0,1,2.5-2.5,2.5,2.5,0,0,1,2.5,2.5,2.5,2.5,0,0,1-2,2.449V-588.5Z" transform="translate(9095.5 888)" fill="var(--anatomy-gray-500)"/>
+    <rect width="1" height="189" transform="translate(564 161)" fill="var(--anatomy-gray-300)" />
   </g>
 </svg>

From 4c5b2ba7a1f61d47ffd72990368872b3edcbf2ef Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 17 Jun 2021 15:35:17 -0700
Subject: [PATCH 52/62] ARIA docs updates

Breaks apart the large example into separate components with individual code blocks.
---
 packages/@react-aria/table/docs/useTable.mdx  | 850 ++++++++++--------
 .../MDXTransformer.js                         |  17 +-
 2 files changed, 468 insertions(+), 399 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 8105f1ebbe5..174b4affd64 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -14,12 +14,14 @@ import docs from 'docs:@react-aria/table';
 import collectionsDocs from 'docs:@react-types/shared/src/collections.d.ts';
 import selectionDocs from 'docs:@react-stately/selection';
 import statelyDocs from 'docs:@react-stately/table';
+import focusDocs from 'docs:@react-aria/focus';
+import checkboxDocs from 'docs:@react-aria/checkbox';
 import {HeaderInfo, FunctionAPI, TypeContext, InterfaceType, TypeLink} from '@react-spectrum/docs';
 import packageData from '@react-aria/table/package.json';
 import Anatomy from './TableAnatomy.svg';
 
 ```jsx import
-import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableRowGroup, useTableRowHeader, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
+import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableHeaderRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
 ```
 
 ---
@@ -33,7 +35,7 @@ keywords: [table, aria, grid]
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['useTable', 'useTableCell', 'useTableColumnHeader', 'useTableRow', 'useTableRowGroup', 'useTableRowHeader', 'useTableSelectAllCheckbox', 'useTableSelectionCheckbox']}
+  componentNames={['useTable', 'useTableCell', 'useTableColumnHeader', 'useTableRow', 'useTableHeaderRow', 'useTableRowGroup', 'useTableSelectAllCheckbox', 'useTableSelectionCheckbox']}
   sourceData={[
     {type: 'W3C', url: 'https://www.w3.org/TR/wai-aria-practices/#grid'}
   ]} />
@@ -41,30 +43,35 @@ keywords: [table, aria, grid]
 ## API
 
 <FunctionAPI function={docs.exports.useTable} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableRowGroup} links={docs.links} />
+<FunctionAPI function={docs.exports.useTableHeaderRow} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableColumnHeader} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableRow} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableRowGroup} links={docs.links} />
-<FunctionAPI function={docs.exports.useTableRowHeader} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableCell} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableSelectionCheckbox} links={docs.links} />
 <FunctionAPI function={docs.exports.useTableSelectAllCheckbox} links={docs.links} />
 
 ## Features
 
-A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), [&lt;thead&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead),
-[&lt;tbody&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody), and other table specific HTML elements, but is very limited in functionality especially when it comes to user interactions.
+A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table), [&lt;tr&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr),
+[&lt;td&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td), and other table specific HTML elements, but is very limited in functionality especially when it comes to user interactions.
+HTML tables are meant for static content, rather than tables with rich interactions like focusable elements within cells, keyboard navigation, row selection, sorting, etc.
 `useTable` helps achieve accessible and interactive table components that can be styled as needed.
 
 * Exposed to assistive technology as a `grid` using ARIA
-* Support for single, multiple, or no row selection
-* Support for disabled rows
-* Labeling support for accessibility
-* Support for mouse, touch, and keyboard interactions
-* Support for keyboard navigation between columns, rows, cells, and in-cell focusable items
-* Column sorting
-* Multiple [row header](https://www.w3.org/TR/wai-aria-1.1/#rowheader) support
-* Automatic scrolling support during keyboard navigation
+* Keyboard navigation between columns, rows, cells, and in-cell focusable elements via the arrow keys
+* Single, multiple, or no row selection via mouse, touch, or keyboard interactions
+* Support for disabled rows, which cannot be selected
+* Optional support for checkboxes in each row for selection, as well as in the header to select all rows
+* Column sorting support
+* Async loading, infinite scrolling, filtering, and sorting support
+* Support for column groups via nested columns
 * Typeahead to allow focusing rows by typing text
+* Automatic scrolling support during keyboard navigation
+* Labeling support for accessibility
+* Support for marking columns as [row headers](https://www.w3.org/TR/wai-aria-1.1/#rowheader), which will be read when navigating the rows with a screen reader
+* Ensures that selections are announced using an ARIA live region
+* Support for using HTML table elements, or custom element types (e.g. `<div>`) for layout flexibility
 * Virtualized scrolling support for performance with large tables
 
 ## Anatomy
@@ -72,61 +79,12 @@ A table can be built using the [&lt;table&gt;](https://developer.mozilla.org/en-
 <Anatomy />
 
 A table consists of a container element, with columns and rows of cells containing data inside. The cells within a table may contain focusable elements or plain text content.
-If the table supports row selection, each row includes a selection checkbox in the first column. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
-
-`useTable`, `useTableCell`, `useTableColumnHeader`, `useTableRow`, and `useTableRowHeader` handle keyboard, mouse, and other interactions to support
-row selection, in table navigation, and overall focus behavior. Those hooks, along with `useTableRowGroup`, also handle exposing the table and its contents
-to assistive technology using ARIA. `useTableSelectAllCheckbox` and `useTableSelectionCheckbox` handle row selection and associating each checkbox with its respective rows
-for assistive technology.
-
-`useTable` returns props that you should spread onto the table container element:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTable.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableColumnHeader` returns props for an individual table column header:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableColumnHeader.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableRow` returns props for an individual table row:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableRow.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableRowGroup` returns props for a element containing one or more rows of column headers or cells. This is often equivalent
-to the header, body, and footer of the table:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableRowGroup.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableRowHeader` returns props for the table cell that serves as a row's header:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableRowHeader.return.id].properties} />
-</TypeContext.Provider>
+If the table supports row selection, each row can optionally include a selection checkbox in the first column. Additionally, a "select all" checkbox is displayed as the first column header if the table supports multiple row selection.
 
-`useTableCell` returns props for an individual table cell:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableCell.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableSelectionCheckbox` returns props for an individual table row selection checkbox:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableSelectionCheckbox.return.id].properties} />
-</TypeContext.Provider>
-
-`useTableSelectAllCheckbox` returns props for the table's "select all" checkbox:
-
-<TypeContext.Provider value={docs.links}>
-  <InterfaceType properties={docs.links[docs.exports.useTableSelectAllCheckbox.return.id].properties} />
-</TypeContext.Provider>
+The <TypeLink links={docs.links} type={docs.exports.useTable} />, <TypeLink links={docs.links} type={docs.exports.useTableRow} />, <TypeLink links={docs.links} type={docs.exports.useTableCell} />, and <TypeLink links={docs.links} type={docs.exports.useTableColumnHeader} /> hooks handle keyboard, mouse, and other interactions to support
+row selection, in table navigation, and overall focus behavior. Those hooks, along with <TypeLink links={docs.links} type={docs.exports.useTableRowGroup} /> and <TypeLink links={docs.links} type={docs.exports.useTableHeaderRow} />, also handle exposing the table and its contents
+to assistive technology using ARIA. <TypeLink links={docs.links} type={docs.exports.useTableSelectAllCheckbox} /> and <TypeLink links={docs.links} type={docs.exports.useTableSelectionCheckbox} /> handle row selection and associating each checkbox with its respective rows
+for assistive technology. Each of these hooks returns props to be spread onto the appropriate HTML element.
 
 State is managed by the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
 hook from `@react-stately/table`. The state object should be passed as an option to each of the above hooks where applicable.
@@ -145,6 +103,9 @@ but <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState}
 See [Collection Components](/react-stately/collections.html) for more information,
 and [Collection Interface](/react-stately/Collection.html) for internal details.
 
+Data is defined using the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.TableHeader} />, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.Column} />, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.TableBody} />, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.Row} />, and <TypeLink links={statelyDocs.links} type={statelyDocs.exports.Cell} /> components, which support both static and dynamic data.
+See the examples in the [usage](#usage) section below for details on how to use these components.
+
 In addition, <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} />
 manages the state necessary for multiple selection and exposes
 a <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} />,
@@ -153,278 +114,208 @@ For more information, see [Selection](/react-stately/selection.html).
 
 ## Example
 
-This example uses HTML `<div>` elements to construct the table. It uses `useTableState` to construct the table's collection of rows and columns,
-applying the appropriate attributes to each `<div>` using the various table hooks listed above paired with the div's role in the table.
-The table follows the [Collection Components API](../react-stately/collections.html), accepting both static and dynamic collections.
+Tables are complex [collection components](../react-stately/collections.html) that are built up from many child elements
+including columns, rows, and cells. In this example, we'll use the standard HTML table elements along with hooks from React
+Aria for each child. You may also use other elements like `<div>` to render these components as appropriate.
+Since there are many pieces, we'll walk through each of them one by one.
 
-The example below shows a static collection, which can be used when the full set of table contents is known ahead of time. Be sure to note the usage of
-`Cell`, `Column`, `Row`, `TableBody`, and `TableHeader` to construct the table structure. These elements are similar to `Item` and `Section` used in other components
-following the [Collection Components API](../react-stately/collections.html) mentioned previously, serving as node generators for the table collection.
-See [useTableState](/react-stately/useTableState.html) for more info on the props they support.
+The <TypeLink links={docs.links} type={docs.exports.useTable} /> hook will be used to render the outer most table element. It uses
+the <TypeLink links={statelyDocs.links} type={statelyDocs.exports.useTableState} /> hook to construct the table's collection of rows and columns,
+and manage state such as the focused row/cell, selection, and sort column/direction. We'll use the collection to iterate through
+the rows and cells of the table and render the relevant components, which we'll define below.
 
-```tsx example export=true
+```tsx example export=true render=false
 import {Cell, Column, Row, TableBody, TableHeader, useTableState} from '@react-stately/table';
 import {mergeProps} from '@react-aria/utils';
-import {useCheckbox} from '@react-aria/checkbox';
-import {useContext, useRef} from 'react';
+import {useRef} from 'react';
 import {useFocusRing} from '@react-aria/focus';
-import {useToggleState} from '@react-stately/toggle';
-const TableContext = React.createContext(null);
-function useTableContext() {
-  return useContext(TableContext);
-}
+
 function Table(props) {
-  let state = useTableState({...props, showSelectionCheckboxes: true});
+  let state = useTableState({...props, showSelectionCheckboxes: props.selectionMode === 'multiple'});
   let ref = useRef();
-  let scrollViewRef = useRef();
   let {collection} = state;
-  let {gridProps} = useTable({
-    ...props,
-    ref: ref
-  }, state);
-  let headerRows = collection.rows.filter(item => item.type === 'headerrow' && item);
-  let rows = collection.rows.filter(item => item.type === 'item' && item);
-  let renderColumnNode = (node) => {
-    if (node.props.isSelectionCell) {
-      return <TableSelectAllCell column={node} />;
-    }
-    return <TableColumnHeader column={node} />;
-  };
-  let renderRowNode = (node) => {
-    if (node.props.isSelectionCell) {
-      return <TableCheckboxCell cell={node} />;
-    }
-    if (collection.rowHeaderColumnKeys.has(node.column.key)) {
-      return <TableRowHeader cell={node} />;
-    }
-    return <TableCell cell={node} />;
-  };
+  let {gridProps} = useTable(props, state, ref);
+
   return (
-    <TableContext.Provider value={state}>
-      <div {...gridProps} style={{...props.style, display: 'flex', flexDirection: 'column'}} ref={ref}>
-        <TableHeaderGroup>
-          {[...headerRows].map(headerRow => (
-            <TableHeaderRow item={headerRow}>
-              {[...headerRow.childNodes].map((column) => renderColumnNode(column))}
-            </TableHeaderRow>
-          ))}
-        </TableHeaderGroup>
-        <div
-          style={{
-            borderTop: '2px solid black',
-            borderBottom: '2px solid black',
-            padding: '0px 1px 0px 1px',
-            flex: '1 1 0%',
-            overflow: 'auto'
-          }}>
-          <TableRowGroup>
-            {[...rows].map(row => (
-              <TableRow item={row}>
-                {[...row.childNodes].map((node) => renderRowNode(node))}
-              </TableRow>
-            ))}
-          </TableRowGroup>
-        </div>
-      </div>
-    </TableContext.Provider>
+    <table {...gridProps} ref={ref} style={{borderCollapse: 'collapse'}}>
+      <TableRowGroup type="thead" style={{borderBottom: '2px solid var(--spectrum-global-color-gray-800)'}}>
+        {collection.headerRows.map(headerRow => (
+          <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
+            {[...headerRow.childNodes].map(column =>
+              column.props.isSelectionCell
+                ? <TableSelectAllCell key={column.key} column={column} state={state} />
+                : <TableColumnHeader key={column.key} column={column} state={state} />
+            )}
+          </TableHeaderRow>
+        ))}
+      </TableRowGroup>
+      <TableRowGroup type="tbody">
+        {[...collection.body.childNodes].map(row => (
+          <TableRow key={row.key} item={row} state={state}>
+            {[...row.childNodes].map(cell =>
+              cell.props.isSelectionCell
+                ? <TableCheckboxCell key={cell.key} cell={cell} state={state} />
+                : <TableCell key={cell.key} cell={cell} state={state} />
+            )}
+          </TableRow>
+        ))}
+      </TableRowGroup>
+    </table>
   );
 }
-function TableHeaderGroup({children, ...otherProps}) {
+```
+
+### Table header
+
+A <TypeLink links={docs.links} type={docs.exports.useTableRowGroup} /> hook will be used to group the rows in the table header and table body. In this example,
+we're using HTML table elements, so this will be either a `<thead>` or `<tbody>` element, as passed from the
+above `Table` component via the `type` prop.
+
+```tsx example export=true render=false
+function TableRowGroup({type: Element, style, children}) {
   let {rowGroupProps} = useTableRowGroup();
   return (
-    <div {...rowGroupProps} {...otherProps}>
+    <Element {...rowGroupProps} style={style}>
       {children}
-    </div>
+    </Element>
   );
 }
-function TableColumnHeader({column}) {
+```
+
+The <TypeLink links={docs.links} type={docs.exports.useTableHeaderRow} /> hook will be used to render a header row. Header rows are similar to other rows,
+but they don't support user interaction like selection. In this example, there's only one header
+row, but there could be multiple in the case of nested columns. See the [example below](#nested-columns) for details.
+
+```tsx example export=true render=false
+function TableHeaderRow({item, state, children}) {
+  let ref = useRef();
+  let {rowProps} = useTableHeaderRow({node: item}, state, ref);
+
+  return (
+    <tr {...rowProps} ref={ref}>
+      {children}
+    </tr>
+  );
+}
+```
+
+The <TypeLink links={docs.links} type={docs.exports.useTableColumnHeader} /> hook will be used to render each column header. Column headers act as a label
+for all of the cells in that column, and can optionally support user interaction to sort by the column
+and change the sort order.
+
+The `allowsSorting` property of the column object can be used to determine
+if the column supports sorting at all.
+
+The `sortDescriptor` object stored in the `state` object indicates which column the table is currently sorted by,
+as well as the sort direction (ascending or descending). This is used to render an arrow icon to visually
+indicate the sort direction. When not sorted by this column, we use `visibility: hidden` to ensure that
+we reserve space for this icon at all times. That way the table's layout doesn't shift when we change the
+column we're sorting by. See the [example below](#sorting) of all of this in action.
+
+Finally, we use the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} /> hook to ensure that a focus ring is rendered when
+the cell is navigated to with the keyboard.
+
+```tsx example export=true render=false
+function TableColumnHeader({column, state}) {
   let ref = useRef();
-  let state = useTableContext();
-  let {columnHeaderProps} = useTableColumnHeader({
-    node: column,
-    ref,
-    colspan: column.colspan
-  }, state);
+  let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
-  let columnProps = column.props;
   let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
+
   return (
-    <div
+    <th
       {...mergeProps(columnHeaderProps, focusProps)}
+      colSpan={column.colspan}
       style={{
-        height: '16px',
-        lineHeight: '16px',
-        width: '100px',
-        padding: '10px 10px 10px 10px',
-        outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
+        textAlign: column.colspan > 1 ? 'center' : 'left',
+        padding: '5px 10px',
+        outline: isFocusVisible ? '2px solid orange' : 'none',
+        cursor: 'default'
       }}
       ref={ref}>
       {column.rendered}
-      {columnProps.allowsSorting && state.sortDescriptor?.column === column.key &&
-        <span aria-hidden="true" style={{padding: '0 2px'}}>
+      {column.props.allowsSorting &&
+        <span aria-hidden="true" style={{padding: '0 2px', visibility: state.sortDescriptor?.column === column.key ? 'visible' : 'hidden'}}>
           {arrowIcon}
         </span>
       }
-    </div>
+    </th>
   );
 }
-function TableSelectAllCell({column}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
-  let {columnHeaderProps} = useTableColumnHeader({
-    node: column,
-    ref,
-    colspan: column.colspan,
-    isDisabled: isSingleSelectionMode
-  }, state);
-  let {checkboxProps} = useTableSelectAllCheckbox(state);
-  let inputRef = useRef(null);
-  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);
-  return (
-    <div
-      {...columnHeaderProps}
-      style={{
-        height: '16px',
-        padding: '10px 10px 10px 10px'
-      }}
-      aria-disabled={isSingleSelectionMode}
-      ref={ref}>
-      <input
-        {...inputProps}
-        ref={inputRef}
-        disabled={isSingleSelectionMode}
-        style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
-    </div>
-  );
-}
-function TableRowGroup({children, ...otherProps}) {
-  let {rowGroupProps} = useTableRowGroup();
-  return (
-    <div {...rowGroupProps} {...otherProps}>
-      {children}
-    </div>
-  );
-}
-function TableRow({item, children, ...otherProps}) {
+```
+
+### Table body
+
+Now that we've covered the table header, let's move on to the body. We'll use
+the <TypeLink links={docs.links} type={docs.exports.useTableRow} /> hook to render each row in the table.
+Table rows can be focused and navigated to using the keyboard via the arrow keys. In addition, table rows
+can optionally support selection via mouse, touch, or keyboard. Clicking, tapping, or pressing the <kbd>Space</kbd>
+key anywhere in the row selects it.
+
+We'll use the <TypeLink links={selectionDocs.links} type={selectionDocs.exports.SelectionManager} /> object exposed
+by the `state` to determine if a row is selected, and render a pink background if so. We'll also use the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} />
+hook to render a focus ring when the user navigates to the row with the keyboard.
+
+```tsx example export=true render=false
+function TableRow({item, children, state}) {
   let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(item.key);
-  let isSelected = state.selectionManager.isSelected(item.key) && !isDisabled;
-  let {rowProps} = useTableRow({
-    node: item,
-    isSelected,
-    ref,
-    isDisabled
-  }, state);
-  let props = mergeProps(
-    rowProps,
-    otherProps
-  );
+  let isSelected = state.selectionManager.isSelected(item.key);
+  let {rowProps} = useTableRow({node: item}, state, ref);
+  let {isFocusVisible, focusProps} = useFocusRing();
+
   return (
-    <div
+    <tr
       style={{
-        display: 'flex',
-        flexDirection: 'row',
-        padding: '1px 1px 2px 1px',
-        borderTop: '1px solid lightgrey'
+        background: isSelected
+          ? 'blueviolet'
+          : item.index % 2
+            ? 'var(--spectrum-alias-highlight-hover)'
+            : 'none',
+        color: isSelected ? 'white' : null,
+        outline: isFocusVisible ? '2px solid orange' : 'none'
       }}
-      {...props}
+      {...mergeProps(rowProps, focusProps)}
       ref={ref}>
       {children}
-    </div>
-  );
-}
-function TableHeaderRow({item, children, ...otherProps}) {
-  return (
-    <div role="row" aria-rowindex={item.index + 1} {...otherProps} style={{display: 'flex', flexDirection: 'row', paddingBottom: '4px'}}>
-      {children}
-    </div>
-  );
-}
-function TableCheckboxCell({cell}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {gridCellProps} = useTableCell({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-  let {checkboxProps} = useTableSelectionCheckbox(
-    {
-      key: cell.parentKey,
-      isDisabled
-    },
-    state
-  );
-  let inputRef = useRef(null);
-  let {inputProps} = useCheckbox({...checkboxProps, isDisabled}, useToggleState(checkboxProps), inputRef);
-  return (
-    <div
-      {...gridCellProps}
-      style={{
-        height: '16px',
-        padding: '10px 10px 10px 10px'
-      }}
-      ref={ref}>
-      {state.selectionManager.selectionMode !== 'none' &&
-        <input {...inputProps} />
-      }
-    </div>
-  );
-}
-function TableCell({cell}) {
-  let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {gridCellProps} = useTableCell({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-  return (
-    <TableCellBase
-      {...gridCellProps}
-      cell={cell}
-      cellRef={ref} />
+    </tr>
   );
 }
-function TableRowHeader({cell}) {
+```
+
+Finally, we'll use the <TypeLink links={docs.links} type={docs.exports.useTableCell} /> hook to render each cell.
+Users can use the left and right arrow keys to navigate to each cell in a row, as well as any focusable elements
+within a cell. This is indicated by the focus ring, as created with the <TypeLink links={focusDocs.links} type={focusDocs.exports.useFocusRing} />
+hook. The cell's contents are available in the `rendered` property of the cell <TypeLink links={collectionsDocs.links} type={collectionsDocs.exports.Node} />
+object.
+
+```tsx example export=true render=false
+function TableCell({cell, state}) {
   let ref = useRef();
-  let state = useTableContext();
-  let isDisabled = state.disabledKeys.has(cell.parentKey);
-  let {rowHeaderProps} = useTableRowHeader({
-    node: cell,
-    ref,
-    isDisabled
-  }, state);
-  return (
-    <TableCellBase
-      {...rowHeaderProps}
-      cell={cell}
-      cellRef={ref} />
-  );
-}
-function TableCellBase({cell, cellRef, ...otherProps}) {
+  let {gridCellProps} = useTableCell({node: cell}, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
+
   return (
-    <div
-      {...mergeProps(otherProps, focusProps)}
+    <td
+      {...mergeProps(gridCellProps, focusProps)}
       style={{
-        height: '16px',
-        lineHeight: '16px',
-        width: '100px',
-        padding: '10px 10px 10px 10px',
-        outline: isFocusVisible ? '2px solid -webkit-focus-ring-color' : 'none'
+        padding: '5px 10px',
+        outline: isFocusVisible ? '2px solid orange' : 'none',
+        cursor: 'default'
       }}
-      ref={cellRef}>
-      <span style={{overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis'}}>
-        {cell.rendered}
-      </span>
-    </div>
+      ref={ref}>
+      {cell.rendered}
+    </td>
   );
 }
+```
+
+With all of the above components in place, we can render an example of our Table in action.
+This example shows a static collection, where all of the data is hard coded. [See below](#dynamic-collections)
+for examples of using this Table component with dynamic collections (e.g. from a server).
+
+Try tabbing into the table and navigating using the arrow keys.
+
+```tsx example
 <Table aria-label="Example static collection table" style={{height: '210px', maxWidth: '400px'}}>
   <TableHeader>
     <Column>Name</Column>
@@ -456,58 +347,75 @@ function TableCellBase({cell, cellRef, ...otherProps}) {
 </Table>
 ```
 
-## Usage
+### Adding selection
 
-### Dynamic collections
+Next, let's add support for selection. For multiple selection, we'll want to add a column of checkboxes to the left
+of the table to allow the user to select rows. This is done using the <TypeLink links={docs.links} type={docs.exports.useTableSelectionCheckbox} />
+hook. It is passed the `parentKey` of the cell, which refers to the row the cell is contained within. When the user
+checks or unchecks the checkbox, the row will be added or removed from the Table's selection.
 
-Dynamic collections, as shown below, can be used when the table data comes from an external data source such as an API call, or update over time.
-In the example below, both the columns and the rows are provided to the table via a render function.
+In this example, we pass the result of the `checkboxProps` into the <TypeLink links={checkboxDocs.links} type={checkboxDocs.exports.useCheckbox} />
+hook and render an `<input>` element directly, but it's likely you'll have a `Checkbox` component in your component library that uses these hooks already.
+See the [useCheckbox docs](useCheckbox.html) for more information.
+
+```tsx example export=true render=false
+import {useToggleState} from '@react-stately/toggle';
+import {useCheckbox} from '@react-aria/checkbox';
+
+function TableCheckboxCell({cell, state}) {
+  let ref = useRef();
+  let {gridCellProps} = useTableCell({node: cell}, state, ref);
+  let {checkboxProps} = useTableSelectionCheckbox({key: cell.parentKey}, state);
+
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);
 
-```tsx example
-function Example() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Type', key: 'type'},
-    {name: 'Date Modified', key: 'date'}
-  ];
-  let rows = [
-    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
-    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
-    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
-    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
-  ];
   return (
-    <Table aria-label="Example dynamic collection table" style={{height: '210px', maxWidth: '400px'}}>
-      <TableHeader columns={columns}>
-        {(column) => (
-          <Column key={column.key}>
-            {column.name}
-          </Column>
-        )}
-      </TableHeader>
-      <TableBody items={rows}>
-        {(item) => (
-          <Row key={item.id}>
-            {/* Note this key is equal to the key of the the column,
-            not the key set on the Row prior */}
-            {(key) => <Cell>{item[key]}</Cell>}
-          </Row>
-        )}
-      </TableBody>
-    </Table>
+    <td
+      {...gridCellProps}
+      ref={ref}>
+      <input {...inputProps} />
+    </td>
   );
 }
 ```
 
-### Selection
+We also want the user to be able to select all rows in the table at once. This is possible using the <kbd>⌘ Cmd</kbd> + <kbd>A</kbd>
+keyboard shortcut, but we'll also add a checkbox into the table header to do this and represent the selection state visually.
+This is done using the <TypeLink links={docs.links} type={docs.exports.useTableSelectAllCheckbox} /> hook. When all rows are selected,
+the checkbox will be shown as checked, and when only some rows are selected, the checkbox will be rendered in an indeterminate state.
+The user can check or uncheck the checkbox to select all or clear the selection, respectively.
 
-By default, `useTableState` doesn't allow row selection but this can be modified using the `selectionMode` prop. Use `defaultSelectedKeys` to provide a default set of selected rows.
-Note that the value of the selected keys must match the `key` prop of the row.
+```tsx example export=true render=false
+function TableSelectAllCell({column, state}) {
+  let ref = useRef();
+  let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
+  let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
+
+  let {checkboxProps} = useTableSelectAllCheckbox(state);
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);
+
+  return (
+    <th
+      {...columnHeaderProps}
+      ref={ref}>
+      <input
+        {...inputProps}
+        ref={inputRef}
+        style={{visibility: isSingleSelectionMode ? 'hidden' : 'visible'}} />
+    </th>
+  );
+}
+```
 
-The example below uses `defaultSelectedKeys` to select the row with key equal to "2".
+The following example shows how to enable multiple selection support using the Table component we built above.
+It's as simple as setting the `selectionMode` prop to `"multiple"`. Because we set the `showSelectionCheckboxes`
+option of `useTableState` to true when multiple selection is enabled, an extra column for these checkboxes is
+automatically added for us.
 
 ```tsx example
-<Table aria-label="Example table with single selection (uncontrolled)" selectionMode="single" defaultSelectedKeys={['2']} style={{height: '210px', maxWidth: '400px'}}>
+<Table aria-label="Table with selection" selectionMode="multiple">
   <TableHeader>
     <Column>Name</Column>
     <Column>Type</Column>
@@ -538,38 +446,47 @@ The example below uses `defaultSelectedKeys` to select the row with key equal to
 </Table>
 ```
 
-To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected row will
-be passed into the callback when the row is pressed, allowing you to update `selectedKeys` accordingly.
+And that's it! We now have a fully interactive table component that can support keyboard navigation, single or multiple selection,
+as well as column sorting. In addition, it is fully accessible for screen readers and other assistive technology. See below for more
+examples of how to use the Table component that we've built.
 
-Here is how you would control selection for the above example.
+## Usage
+
+### Dynamic collections
+
+So far, our examples have shown static collections, where the data is hard coded.
+Dynamic collections, as shown below, can be used when the table data comes from an external data source such as an API, or updates over time.
+In the example below, both the columns and the rows are provided to the table via a render function. You can also make the columns static and
+only the rows dynamic.
 
 ```tsx example export=true
-function PokemonTable(props) {
+function ExampleTable(props) {
   let columns = [
-    {name: 'Name', uid: 'name'},
-    {name: 'Type', uid: 'type'},
-    {name: 'Level', uid: 'level'}
+    {name: 'Name', key: 'name'},
+    {name: 'Type', key: 'type'},
+    {name: 'Date Modified', key: 'date'}
   ];
+
   let rows = [
-    {id: '1', name: 'Charizard', type: 'Fire, Flying', level: '67'},
-    {id: '2', name: 'Blastoise', type: 'Water', level: '56'},
-    {id: '3', name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-    {id: '4', name: 'Pikachu', type: 'Electric', level: '100'}
+    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
+    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
+    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
+    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
   ];
-  let [selected, setSelected] = React.useState(new Set(['2']));
+
   return (
-    <Table aria-label="Example table with single selection (controlled)" selectionMode="single" selectedKeys={selected} onSelectionChange={setSelected} style={{height: '210px', maxWidth: '400px'}} {...props}>
+    <Table aria-label="Example dynamic collection table" {...props}>
       <TableHeader columns={columns}>
         {column => (
-          <Column key={column.uid}>
+          <Column>
             {column.name}
           </Column>
         )}
       </TableHeader>
       <TableBody items={rows}>
         {item => (
-          <Row key={item.id}>
-            {key => <Cell>{item[key]}</Cell>}
+          <Row>
+            {columnKey => <Cell>{item[columnKey]}</Cell>}
           </Row>
         )}
       </TableBody>
@@ -578,49 +495,105 @@ function PokemonTable(props) {
 }
 ```
 
+### Single selection
+
+By default, `useTableState` doesn't allow row selection but this can be enabled using the `selectionMode` prop. Use `defaultSelectedKeys` to provide a default set of selected rows.
+Note that the value of the selected keys must match the `key` prop of the row.
+
+The example below enables single selection mode, and uses `defaultSelectedKeys` to select the row with key equal to "2".
+A user can click on a different row to change the selection, or click on the same row again to deselect it entirely.
+
+```tsx example
+// Using the example above
+<ExampleTable selectionMode="single" defaultSelectedKeys={[2]} />
+```
+
+### Multiple selection
+
 Multiple selection can be enabled by setting `selectionMode` to `multiple`.
 
 ```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="multiple" />
+// Using the example above
+<ExampleTable selectionMode="multiple" defaultSelectedKeys={[2, 4]} />
 ```
 
+### Disallow empty selection
+
 Table also supports a `disallowEmptySelection` prop which forces the user to have at least one row in the Table selected at all times.
+In this mode, if a single row is selected and the user presses it, it will not be deselected.
 
 ```tsx example
-// Using the same table as above
-<PokemonTable selectionMode="single" disallowEmptySelection />
+// Using the example above
+<ExampleTable selectionMode="single" defaultSelectedKeys={[2]} disallowEmptySelection />
+```
+
+### Controlled selection
+
+To programmatically control row selection, use the `selectedKeys` prop paired with the `onSelectionChange` callback. The `key` prop from the selected rows will
+be passed into the callback when the row is pressed, allowing you to update state accordingly.
+
+```tsx example export=true
+function PokemonTable(props) {
+  let columns = [
+    {name: 'Name', uid: 'name'},
+    {name: 'Type', uid: 'type'},
+    {name: 'Level', uid: 'level'}
+  ];
+
+  let rows = [
+    {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
+    {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
+    {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+    {id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
+  ];
+
+  let [selectedKeys, setSelectedKeys] = React.useState(new Set([2]));
+
+  return (
+    <Table aria-label="Table with controlled selection" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} {...props}>
+      <TableHeader columns={columns}>
+        {column => (
+          <Column key={column.uid}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody items={rows}>
+        {item => (
+          <Row>
+            {columnKey => <Cell>{item[columnKey]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+  );
+}
 ```
 
 ### Disabled rows
 
 You can disable specific rows by providing an array of keys to `useTableState` via the `disabledKeys` prop. This will prevent rows from being selectable as shown in the example below.
-Note that you are responsible for the styling of disabled rows.
+Note that you are responsible for the styling of disabled rows, however, the selection checkbox will be automatically disabled.
 
 ```tsx example
 // Using the same table as above
-<PokemonTable selectionMode="multiple" disabledKeys={['2']} />
+<PokemonTable selectionMode="multiple" disabledKeys={[3]} />
 ```
 
 ### Sorting
 
 Table supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
-the `allowsSorting` prop. The Table accepts a `SortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
-When the user presses a column's sort icon, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
-the `SortDescriptor` appropriately.
+the `allowsSorting` prop. The Table accepts a `sortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
+When the user presses a sortable column header, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
+the `sortDescriptor` appropriately.
 
 This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
 See the docs for more information on how to perform server side sorting.
 
 ```tsx example
 import {useAsyncList} from '@react-stately/data';
+
 function AsyncSortTable() {
-  let columns = [
-    {name: 'Name', key: 'name'},
-    {name: 'Height', key: 'height'},
-    {name: 'Mass', key: 'mass'},
-    {name: 'Birth Year', key: 'birth_year'}
-  ];
   let list = useAsyncList({
     async load({signal}) {
       let res = await fetch(`https://swapi.dev/api/people/?search`, {signal});
@@ -630,38 +603,33 @@ function AsyncSortTable() {
       };
     },
     async sort({items, sortDescriptor}) {
-      let sorted = items.sort((a, b) => {
-        let cmp;
-        let first = a[sortDescriptor.column].replace("BBY", "");
-        let second = b[sortDescriptor.column].replace("BBY", "");
-        if (+first || +second) {
-          cmp = +first < +second ? -1 : 1;
-        } else {
-          cmp = first <= second ? -1 : 1;
-        }
-        if (sortDescriptor.direction === 'descending') {
-          cmp *= -1;
-        }
-        return cmp;
-      });
       return {
-        items: sorted
+        items: items.sort((a, b) => {
+          let first = a[sortDescriptor.column];
+          let second = b[sortDescriptor.column];
+          let cmp = (parseInt(first) || first) < (parseInt(second) || second) ? -1 : 1;
+          if (sortDescriptor.direction === 'descending') {
+            cmp *= -1;
+          }
+          return cmp;
+        })
       };
     }
   });
+
   return (
-    <Table aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort} style={{height: '300px', maxWidth: '600px'}}>
-      <TableHeader columns={columns}>
-        {(column) => (
-          <Column allowsSorting>
-            {column.name}
-          </Column>
-        )}
+    <Table aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
+      <TableHeader>
+        <Column key="name" allowsSorting>Name</Column>
+        <Column key="height" allowsSorting>Height</Column>
+        <Column key="mass" allowsSorting>Mass</Column>
+        <Column key="birth_year" allowsSorting>Birth Year</Column>
       </TableHeader>
-      <TableBody
-        items={list.items}>
-        {(item) => (
-          <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
+      <TableBody items={list.items}>
+        {item => (
+          <Row key={item.name}>
+            {columnKey => <Cell>{item[columnKey]}</Cell>}
+          </Row>
         )}
       </TableBody>
     </Table>
@@ -669,13 +637,107 @@ function AsyncSortTable() {
 }
 ```
 
+### Nested columns
+
+Columns can be nested to create column groups. This will result in more than one header row to be created, with the `colspan`
+attribute of each column header cell set to the appropriate value so that the columns line up. Data for the leaf columns
+appears in each row of the table body.
+
+This example also shows the use of the `isRowHeader` prop for `Column`, which controls which columns are included in the
+accessibility name for each row. By default, only the first column is included, but in some cases more than one column may
+be used to represent the row. In this example, the first and last name columns are combined to form the ARIA label for the row.
+Only leaf columns may be marked as row headers.
+
+```tsx example
+<Table aria-label="Example table with nested columns">
+  <TableHeader>
+    <Column title="Name">
+      <Column isRowHeader>First Name</Column>
+      <Column isRowHeader>Last Name</Column>
+    </Column>
+    <Column title="Information">
+      <Column>Age</Column>
+      <Column>Birthday</Column>
+    </Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>Sam</Cell>
+      <Cell>Smith</Cell>
+      <Cell>36</Cell>
+      <Cell>May 3</Cell>
+    </Row>
+    <Row>
+      <Cell>Julia</Cell>
+      <Cell>Jones</Cell>
+      <Cell>24</Cell>
+      <Cell>February 10</Cell>
+    </Row>
+    <Row>
+      <Cell>Peter</Cell>
+      <Cell>Parker</Cell>
+      <Cell>28</Cell>
+      <Cell>September 7</Cell>
+    </Row>
+    <Row>
+      <Cell>Bruce</Cell>
+      <Cell>Wayne</Cell>
+      <Cell>32</Cell>
+      <Cell>December 18</Cell>
+    </Row>
+  </TableBody>
+</Table>
+```
+
+### Dynamic nested columns
+
+Nested columns can also be defined dynamically using the function syntax and the `childColumns` prop.
+The following example is the same as the example above, but defined dynamically.
+
+```tsx example
+let columns = [
+  {name: 'Name', key: 'name', children: [
+    {name: 'First Name', key: 'first', isRowHeader: true},
+    {name: 'Last Name', key: 'last', isRowHeader: true}
+  ]},
+  {name: 'Information', key: 'info', children: [
+    {name: 'Age', key: 'age'},
+    {name: 'Birthday', key: 'birthday'}
+  ]}
+];
+
+let rows = [
+  {id: 1, first: 'Sam', last: 'Smith', age: 36, birthday: 'May 3'},
+  {id: 2, first: 'Julia', last: 'Jones', age: 24, birthday: 'February 10'},
+  {id: 3, first: 'Peter', last: 'Parker', age: 28, birthday: 'September 7'},
+  {id: 4, first: 'Bruce', last: 'Wayne', age: 32, birthday: 'December 18'}
+];
+
+<Table aria-label="Example table with dynamic nested columns">
+  <TableHeader columns={columns}>
+    {column => (
+      <Column isRowHeader={column.isRowHeader} childColumns={column.children}>
+        {column.name}
+      </Column>
+    )}
+  </TableHeader>
+  <TableBody items={rows}>
+    {item => (
+      <Row>
+        {columnKey => <Cell>{item[columnKey]}</Cell>}
+      </Row>
+    )}
+  </TableBody>
+</Table>
+```
+
 ## Internationalization
 
 `useTable` handles some aspects of internationalization automatically.
 For example, type to select is implemented with an
 [Intl.Collator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator)
-for internationalized string matching. You are responsible for localizing all text content within the table.
-Make sure that some types of content (e.g. file extensions) are not translated.
+for internationalized string matching, and keyboard navigation is mirrored in right-to-left languages.
+You are responsible for localizing all text content within the table.
 
 ### RTL
 
diff --git a/packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js b/packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js
index 84526ee9771..0e32c313d9f 100644
--- a/packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js
+++ b/packages/dev/parcel-transformer-mdx-docs/MDXTransformer.js
@@ -65,11 +65,13 @@ module.exports = new Transformer({
               provider = 'ExampleThemeSwitcher';
             }
 
-            if (/^\s*function (.|\n)*}\s*$/.test(code)) {
-              let name = code.match(/^\s*function (.*?)\s*\(/)[1];
-              code = `${code}\nReactDOM.render(<${provider}><${name} /></${provider}>, document.getElementById("${id}"));`;
-            } else if (/^<(.|\n)*>$/m.test(code)) {
-              code = code.replace(/^(<(.|\n)*>)$/m, `ReactDOM.render(<${provider}>$1</${provider}>, document.getElementById("${id}"));`);
+            if (!options.includes('render=false')) {
+              if (/^\s*function (.|\n)*}\s*$/.test(code)) {
+                let name = code.match(/^\s*function (.*?)\s*\(/)[1];
+                code = `${code}\nReactDOM.render(<${provider}><${name} /></${provider}>, document.getElementById("${id}"));`;
+              } else if (/^<(.|\n)*>$/m.test(code)) {
+                code = code.replace(/^(<(.|\n)*>)$/m, `ReactDOM.render(<${provider}>$1</${provider}>, document.getElementById("${id}"));`);
+              }
             }
 
             if (!options.includes('export=true')) {
@@ -78,6 +80,11 @@ module.exports = new Transformer({
 
             exampleCode.push(code);
 
+            if (options.includes('render=false')) {
+              node.meta = null;
+              return transformExample(node, preRelease);
+            }
+
             if (meta === 'snippet') {
               node.meta = null;
               return [

From 4e5d96c59862ccc164ab22dbadc494d40dd370f7 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 17 Jun 2021 17:57:24 -0700
Subject: [PATCH 53/62] Fix keys

---
 packages/@react-aria/table/docs/useTable.mdx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/table/docs/useTable.mdx b/packages/@react-aria/table/docs/useTable.mdx
index 174b4affd64..e36b75a2281 100644
--- a/packages/@react-aria/table/docs/useTable.mdx
+++ b/packages/@react-aria/table/docs/useTable.mdx
@@ -468,10 +468,10 @@ function ExampleTable(props) {
   ];
 
   let rows = [
-    {id: '1', name: 'Games', date: '6/7/2020', type: 'File folder'},
-    {id: '2', name: 'Program Files', date: '4/7/2021', type: 'File folder'},
-    {id: '3', name: 'bootmgr', date: '11/20/2010', type: 'System file'},
-    {id: '4', name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
+    {id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
+    {id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder'},
+    {id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file'},
+    {id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document'}
   ];
 
   return (

From 1cd39f79be54e57ecb207d2d686ae6541198865e Mon Sep 17 00:00:00 2001
From: danni <danniintheus@gmail.com>
Date: Mon, 21 Jun 2021 13:25:28 -0700
Subject: [PATCH 54/62] updating table docs

---
 .../@react-spectrum/table/docs/TableView.mdx  | 87 ++-----------------
 1 file changed, 6 insertions(+), 81 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index 5b6ff53ce58..f0dac1181b4 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -122,7 +122,7 @@ let rows = [
 ```
 
 ### Internationalization
-To internationalize a TableView, all text content within the TableView should be replaced with localized strings. This includes the `aria-label` provided to the TableView if any.
+To internationalize a TableView, all text content within the TableView should be localized. This includes the `aria-label` provided to the TableView if any.
 For languages that are read right-to-left (e.g. Hebrew and Arabic), the layout of TableView is automatically flipped.
 
 ## Labeling
@@ -327,8 +327,7 @@ In this mode, if a single row is selected and the user presses it, it will not b
 
 ### Disabled rows
 
-You can disable specific rows by providing an array of keys to TableView via the `disabledKeys` prop. This will prevent rows from being
-selectable as shown in the example below.
+You can disable specific rows by providing an array of keys to TableView via the `disabledKeys` prop. This will prevent rows from being selectable as shown in the example below.
 
 ```tsx example
 // Using the same table as above
@@ -339,8 +338,7 @@ selectable as shown in the example below.
 
 TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with
 the `allowsSorting` prop. The TableView accepts a `sortDescriptor` prop that defines the current column key to sort by and the sort direction (ascending/descending).
-When the user presses a sortable column header, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update
-the `sortDescriptor` appropriately.
+When the user presses a sortable column header, the column's key and sort direction is passed into the `onSortChange` callback, allowing you to update the `sortDescriptor` appropriately.
 
 This example performs client side sorting by passing a `sort` function to the [useAsyncList](../react-stately/useAsyncList.html) hook.
 See the docs for more information on how to perform server side sorting.
@@ -477,7 +475,7 @@ function AsyncSortTable() {
 ```
 
 ### Column widths
-Columns support three different width props: `minWidth`, `width`, and `maxWidth`.
+Columns support three different width props: `minWidth`, `width`, and `maxWidth`. Each of these props accepts fixed values or percentages. TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns.
 
 ```tsx example
 <Flex flexGrow={1} maxWidth="size-4600">
@@ -550,78 +548,6 @@ Columns support three different width props: `minWidth`, `width`, and `maxWidth`
 </Flex>
 ```
 
-### Focusable cells
-Cells accept any renderable node, allowing you to have focusable children within the TableView.
-
-```tsx example
-import Edit from '@spectrum-icons/workflow/Edit';
-import Delete from '@spectrum-icons/workflow/Delete';
-
-<Flex maxWidth="size-3000" flexGrow={1}>
-  <TableView aria-label="Example table for focusable cells" width="100%" height="100%">
-    <TableHeader>
-      <Column>Name</Column>
-      <Column hideHeader>Add</Column>
-      <Column hideHeader>Delete</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>Red Panda</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Harbor Seal</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Groundhog</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-      <Row>
-        <Cell>Otter</Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Edit />
-          </ActionButton>
-        </Cell>
-        <Cell>
-          <ActionButton isQuiet>
-            <Delete />
-          </ActionButton>
-        </Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
-```
-
 ### Hide header
 Individual column headers can be hidden by providing the `hideHeader` prop to the Column. A tooltip is rendered when the column header is focused
 to compensate for the lack of a visual title. Note that the `hideHeader` prop is specifically intended for columns that contain ActionButtons instead
@@ -708,14 +634,13 @@ Use the `renderEmptyState` prop to customize what the TableView will display if
 ```tsx example
 import {Content} from '@react-spectrum/view';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
+import NotFound from '@spectrum-icons/illustrations/NotFound';
 import {Heading} from '@react-spectrum/text';
 
 function renderEmptyState() {
   return (
     <IllustratedMessage>
-      <svg width="150" height="103" viewBox="0 0 150 103">
-        <path d="M133.7,8.5h-118c-1.9,0-3.5,1.6-3.5,3.5v27c0,0.8,0.7,1.5,1.5,1.5s1.5-0.7,1.5-1.5V23.5h119V92c0,0.3-0.2,0.5-0.5,0.5h-118c-0.3,0-0.5-0.2-0.5-0.5V69c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v23c0,1.9,1.6,3.5,3.5,3.5h118c1.9,0,3.5-1.6,3.5-3.5V12C137.2,10.1,135.6,8.5,133.7,8.5z M15.2,21.5V12c0-0.3,0.2-0.5,0.5-0.5h118c0.3,0,0.5,0.2,0.5,0.5v9.5H15.2z M32.6,16.5c0,0.6-0.4,1-1,1h-10c-0.6,0-1-0.4-1-1s0.4-1,1-1h10C32.2,15.5,32.6,15.9,32.6,16.5z M13.6,56.1l-8.6,8.5C4.8,65,4.4,65.1,4,65.1c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l8.6-8.5l-8.6-8.5c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l8.6,8.5l8.6-8.5c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L15.8,54l8.6,8.5c0.6,0.6,0.6,1.5,0,2.1c-0.3,0.3-0.7,0.4-1.1,0.4c-0.4,0-0.8-0.1-1.1-0.4L13.6,56.1z" />
-      </svg>
+      <NotFound />
       <Heading>No results</Heading>
       <Content>No results found</Content>
     </IllustratedMessage>

From 1be9ab1b62f8d3724d3bd5ba20cd2a810b3cb538 Mon Sep 17 00:00:00 2001
From: danni <danniintheus@gmail.com>
Date: Mon, 21 Jun 2021 13:35:16 -0700
Subject: [PATCH 55/62] update content

---
 .../@react-spectrum/table/docs/TableView.mdx  | 73 +++++++++----------
 1 file changed, 35 insertions(+), 38 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index f0dac1181b4..c058471365c 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -40,49 +40,46 @@ keywords: [table, grid]
 
 ## Example
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table with static contents" width="100%" height="100%">
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column align="end">Date Modified</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>Games</Cell>
-        <Cell>File folder</Cell>
-        <Cell>6/7/2020</Cell>
-      </Row>
-      <Row>
-        <Cell>Program Files</Cell>
-        <Cell>File folder</Cell>
-        <Cell>4/7/2021</Cell>
-      </Row>
-      <Row>
-        <Cell>bootmgr</Cell>
-        <Cell>System file</Cell>
-        <Cell>11/20/2010</Cell>
-      </Row>
-      <Row>
-        <Cell>log.txt</Cell>
-        <Cell>Text Document</Cell>
-        <Cell>1/18/2016</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
+<TableView aria-label="Example table with static contents" width="100%" height="100%" selectionMode="multiple">
+  <TableHeader>
+    <Column>Name</Column>
+    <Column>Type</Column>
+    <Column align="end">Date Modified</Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>Games</Cell>
+      <Cell>File folder</Cell>
+      <Cell>6/7/2020</Cell>
+    </Row>
+    <Row>
+      <Cell>Program Files</Cell>
+      <Cell>File folder</Cell>
+      <Cell>4/7/2021</Cell>
+    </Row>
+    <Row>
+      <Cell>bootmgr</Cell>
+      <Cell>System file</Cell>
+      <Cell>11/20/2010</Cell>
+    </Row>
+    <Row>
+      <Cell>log.txt</Cell>
+      <Cell>Text Document</Cell>
+      <Cell>1/18/2016</Cell>
+    </Row>
+  </TableBody>
+</TableView>
 ```
+fix this hey <TypeLink links={docs.links} type={docs.exports.TableHeader} />,
 
 ## Content
-TableView expects a TableHeader and a TableBody as children. In turn, TableHeader and TableBody follow the [Collection Components](../react-stately/collections.html) API.
-The TableHeader accepts either static Columns or a `columns` prop with a renderer function for dynamic rendering. Similarly, TableBody accepts either static Rows or a `items` prop with a renderer function.
-Row follows the same pattern, accepting Cells as children instead.
+TableView is a complex [collection component](../react-stately/collections.html) that is built up from many child elements including columns, rows, and cells. Columns are defined within a TableHeader element and rows are defined within a TableBody element. Rows contain Cell elements that correspond to each column. Cells accept any element, allowing you to have focusable children within the TableView.
+
+Basic usage of TableView, seen in the example above, shows the use of a static collection where the contents of the TableView is hard coded. Dynamic collections, as shown below, can be used when the options come from an external data source such as an API, or update over time. Providing the data in this way allows TableView to automatically cache the rendering of each item, which dramatically improves performance.
 
-Basic usage of TableView, seen in the example above, shows multiple Columns and Rows populated with strings and Cells respectively. Static collections, as in this example, can be used when the contents of the TableView is known ahead of time.
+Columns and rows can be statically defined as children, or generated dynamically using a function based on the data passed to the `columns` or `items` prop respectively. Cells can also be statically defined as children, or generated dynamically based on the columns defined in the TableHeader.
 
-Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time. Providing the data in this way allows TableView to automatically cache the rendering of each item,
-which dramatically improves performance. Make sure that each rendered property in the Row object matches with a Column's key. In the example below, the `uid` of each Column is set as its key and matches with a
-property within each Row object.
+Each column and row has a unique key defined by the data. In the example below, the `uid` property of the column object is used as the `key` for the Column element within the TableHeader. The `key` of each row element is implicitly defined by the id property of the row object. See [collections](../react-stately/collections.html#unique-keys) to learn more keys in dynamic collections.
 
 ```tsx example
 let columns = [

From c2646c51896a28ec1130186a68fe1b111f3a784f Mon Sep 17 00:00:00 2001
From: danni <danniintheus@gmail.com>
Date: Mon, 21 Jun 2021 14:14:14 -0700
Subject: [PATCH 56/62] tables?

---
 .../@react-spectrum/table/docs/TableView.mdx  | 191 +++++++++++++++---
 1 file changed, 162 insertions(+), 29 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index c058471365c..0c44264a217 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -40,7 +40,7 @@ keywords: [table, grid]
 
 ## Example
 ```tsx example
-<TableView aria-label="Example table with static contents" width="100%" height="100%" selectionMode="multiple">
+<TableView aria-label="Example table with static contents" selectionMode="multiple">
   <TableHeader>
     <Column>Name</Column>
     <Column>Type</Column>
@@ -70,7 +70,6 @@ keywords: [table, grid]
   </TableBody>
 </TableView>
 ```
-fix this hey <TypeLink links={docs.links} type={docs.exports.TableHeader} />,
 
 ## Content
 TableView is a complex [collection component](../react-stately/collections.html) that is built up from many child elements including columns, rows, and cells. Columns are defined within a TableHeader element and rows are defined within a TableBody element. Rows contain Cell elements that correspond to each column. Cells accept any element, allowing you to have focusable children within the TableView.
@@ -97,7 +96,6 @@ let rows = [
 
 <TableView
   aria-label="Example table with dynamic content"
-  height="size-3000"
   maxWidth="size-6000">
   <TableHeader columns={columns}>
     {column => (
@@ -117,6 +115,143 @@ let rows = [
   </TableBody>
 </TableView>
 ```
+### Layout
+```tsx example
+///- begin collapse -///
+let columns = [
+  {name: 'First name', id: 'first_name'},
+  {name: 'Last name', id: 'last_name'},
+  {name: 'City', id: 'city'}
+];
+
+let rows = [
+{"id":1,"first_name":"Andras","last_name":"Rodmell","city":"Tilburg"},
+{"id":2,"first_name":"Hansiain","last_name":"Muino","city":"Hollola"},
+{"id":3,"first_name":"Northrop","last_name":"Adnet","city":"Lai Cách"},
+{"id":4,"first_name":"Giana","last_name":"Phython","city":"Laspezia"},
+{"id":5,"first_name":"Maud","last_name":"Jaram","city":"Tipaz"},
+{"id":6,"first_name":"Gasparo","last_name":"Wiggin","city":"Feuknoni"},
+{"id":7,"first_name":"Phillie","last_name":"Lezemere","city":"Krajan Sidodadi"},
+{"id":8,"first_name":"Kailey","last_name":"Du Plantier","city":"Shangping"},
+{"id":9,"first_name":"Brady","last_name":"Oxtarby","city":"Bang Mun Nak"},
+{"id":10,"first_name":"Ekaterina","last_name":"Crennan","city":"Santo Antônio do Amparo"},
+{"id":11,"first_name":"Jaine","last_name":"Trembey","city":"Manūjān"},
+{"id":12,"first_name":"Emmey","last_name":"Dunguy","city":"Garhi Yāsīn"},
+{"id":13,"first_name":"Camille","last_name":"Millwall","city":"Orion"},
+{"id":14,"first_name":"Staci","last_name":"Glusby","city":"Alofi"},
+{"id":15,"first_name":"Ned","last_name":"Crumbleholme","city":"Ban Bueng"},
+{"id":16,"first_name":"Tana","last_name":"Beardsworth","city":"Puerto Aisén"},
+{"id":17,"first_name":"Dewain","last_name":"Fladgate","city":"London"},
+{"id":18,"first_name":"Thurstan","last_name":"Trembath","city":"Orléans"},
+{"id":19,"first_name":"Vaclav","last_name":"Fitzpayn","city":"Huangchen"},
+{"id":20,"first_name":"Keven","last_name":"Monkeman","city":"Medenychi"},
+{"id":21,"first_name":"Talia","last_name":"Ryman","city":"Piteå"},
+{"id":22,"first_name":"Percy","last_name":"Le Teve","city":"Terny"},
+{"id":23,"first_name":"Jackson","last_name":"Anten","city":"Beiling"},
+{"id":24,"first_name":"Jakob","last_name":"Goullee","city":"Pelym"},
+{"id":25,"first_name":"Dru","last_name":"Klainer","city":"Zavrč"},
+{"id":26,"first_name":"Lucie","last_name":"Donahue","city":"Kiryū"},
+{"id":27,"first_name":"Marc","last_name":"McPeck","city":"Nong Muang Khai"},
+{"id":28,"first_name":"Vivianna","last_name":"Allport","city":"Kajatian"},
+{"id":29,"first_name":"Drud","last_name":"Hurn","city":"Bambuí"},
+{"id":30,"first_name":"Trever","last_name":"Ambrodi","city":"Xiangtan"},
+{"id":31,"first_name":"Gwennie","last_name":"Kingswold","city":"San Benito"},
+{"id":32,"first_name":"Karlan","last_name":"Tilby","city":"Patrída"},
+{"id":33,"first_name":"Heddie","last_name":"Sneath","city":"Esperanza"},
+{"id":34,"first_name":"Harlen","last_name":"Sandells","city":"Harrismith"},
+{"id":35,"first_name":"Gavan","last_name":"Halward","city":"Al Ḩayfah"},
+{"id":36,"first_name":"Andre","last_name":"Everest","city":"Bahui"},
+{"id":37,"first_name":"Merilyn","last_name":"Rowbrey","city":"Imishli"},
+{"id":38,"first_name":"Abe","last_name":"Pecht","city":"Pangkalan Kasai"},
+{"id":39,"first_name":"Britt","last_name":"Collingridge","city":"Érd"},
+{"id":40,"first_name":"Leticia","last_name":"Thorndycraft","city":"Paita"},
+{"id":41,"first_name":"Eward","last_name":"Tigwell","city":"Aral"},
+{"id":42,"first_name":"Torrie","last_name":"Curzon","city":"Stockholm"},
+{"id":43,"first_name":"Jenifer","last_name":"Swalwel","city":"Jinniu"},
+{"id":44,"first_name":"Marianna","last_name":"Radley","city":"Hedi"},
+{"id":45,"first_name":"Antoine","last_name":"Tyers","city":"Hewa"},
+{"id":46,"first_name":"Darline","last_name":"Gallehawk","city":"København"},
+{"id":47,"first_name":"Rikki","last_name":"Rosenzveig","city":"Affery"},
+{"id":48,"first_name":"Debera","last_name":"Vedenichev","city":"Żywiec"},
+{"id":49,"first_name":"Morena","last_name":"Hewins","city":"Las Lajas"},
+{"id":50,"first_name":"Cordy","last_name":"Reimer","city":"Derbent"},
+{"id":51,"first_name":"Quint","last_name":"Thoresbie","city":"Guyang"},
+{"id":52,"first_name":"Christean","last_name":"Deere","city":"Waegwan"},
+{"id":53,"first_name":"Moyra","last_name":"Battelle","city":"Villa Presidente Frei, Ñuñoa, Santiago, Chile"},
+{"id":54,"first_name":"Fayth","last_name":"Gallafant","city":"Kedungharjo"},
+{"id":55,"first_name":"Thedrick","last_name":"Duddy","city":"Thị Trấn Mường Lát"},
+{"id":56,"first_name":"George","last_name":"Rickerd","city":"Zarqa"},
+{"id":57,"first_name":"Nikos","last_name":"Rideout","city":"Yuanqiao"},
+{"id":58,"first_name":"Alejandra","last_name":"Le Port","city":"Il’ichëvo"},
+{"id":59,"first_name":"Eleonora","last_name":"Gibberd","city":"Sua"},
+{"id":60,"first_name":"Archibaldo","last_name":"Place","city":"Sidayu"},
+{"id":61,"first_name":"Helen","last_name":"Brenton","city":"Kuressaare"},
+{"id":62,"first_name":"Leyla","last_name":"Armstead","city":"Haifa"},
+{"id":63,"first_name":"Bridget","last_name":"Strotone","city":"Karasuk"},
+{"id":64,"first_name":"Jarid","last_name":"Packer","city":"Студеничани"},
+{"id":65,"first_name":"Christos","last_name":"Natt","city":"Nova Russas"},
+{"id":66,"first_name":"Alwyn","last_name":"Mingaud","city":"Conde"},
+{"id":67,"first_name":"Archy","last_name":"Thorneywork","city":"Gulu"},
+{"id":68,"first_name":"Iolanthe","last_name":"Spurgeon","city":"Ayrihuanca"},
+{"id":69,"first_name":"Rossy","last_name":"Axford","city":"Ledeč nad Sázavou"},
+{"id":70,"first_name":"Consuela","last_name":"Lillegard","city":"Finote Selam"},
+{"id":71,"first_name":"Salomon","last_name":"Buckney","city":"Kampokpok"},
+{"id":72,"first_name":"Celene","last_name":"Espley","city":"Sinubong"},
+{"id":73,"first_name":"Kristos","last_name":"Denyukhin","city":"Las Palmas"},
+{"id":74,"first_name":"Bertha","last_name":"Mallabon","city":"Vera"},
+{"id":75,"first_name":"Jorry","last_name":"Yuryev","city":"Carletonville"},
+{"id":76,"first_name":"Holly-anne","last_name":"Wagstaffe","city":"Sukadana"},
+{"id":77,"first_name":"Lara","last_name":"Shears","city":"Gambēla"},
+{"id":78,"first_name":"Romonda","last_name":"Glanville","city":"Donglu"},
+{"id":79,"first_name":"Felice","last_name":"Pryde","city":"Sapadun"},
+{"id":80,"first_name":"Nick","last_name":"Kidney","city":"Chernigovka"},
+{"id":81,"first_name":"Hermina","last_name":"Dooley","city":"New Agutaya"},
+{"id":82,"first_name":"Ketty","last_name":"FitzGeorge","city":"Abaza"},
+{"id":83,"first_name":"Patrizio","last_name":"Bovingdon","city":"‘Ayn al ‘Arab"},
+{"id":84,"first_name":"Caitrin","last_name":"Braine","city":"Il’inskiy"},
+{"id":85,"first_name":"Ian","last_name":"De Few","city":"Jatinagara"},
+{"id":86,"first_name":"Eben","last_name":"Adan","city":"Bolong"},
+{"id":87,"first_name":"Peder","last_name":"Innott","city":"Gampaha"},
+{"id":88,"first_name":"Selie","last_name":"Cruise","city":"Mariscala"},
+{"id":89,"first_name":"Melania","last_name":"Meredyth","city":"La’ershan"},
+{"id":90,"first_name":"Antonina","last_name":"Proby","city":"Shantoudian"},
+{"id":91,"first_name":"Sabra","last_name":"Dreng","city":"Dzhankoy"},
+{"id":92,"first_name":"Sibeal","last_name":"Hall-Gough","city":"Mengxi"},
+{"id":93,"first_name":"Fidel","last_name":"Maisey","city":"Gus’-Khrustal’nyy"},
+{"id":94,"first_name":"Alejandro","last_name":"Devey","city":"Charata"},
+{"id":95,"first_name":"Norina","last_name":"Stoyle","city":"Malaya Dubna"},
+{"id":96,"first_name":"Lari","last_name":"Kiezler","city":"Guaíba"},
+{"id":97,"first_name":"Percival","last_name":"Geffinger","city":"Ngeni"},
+{"id":98,"first_name":"Jo","last_name":"Spoure","city":"Karata"},
+{"id":99,"first_name":"Karlie","last_name":"Gooddy","city":"Pelem"},
+{"id":100,"first_name":"Edmon","last_name":"Alsopp","city":"Sandu"}];
+///- end collapse -///
+
+// Table data hidden for example
+// Display table in flex with actiongroup above. without height
+<Flex height="size-2000" width="100%" direction="column">
+  <div>sdghsfgiudsfglibdfilbfg</div>
+  <TableView
+    flex
+    aria-label="Example table with dynamic content">
+    <TableHeader columns={columns}>
+      {column => (
+        <Column
+          key={column.id}>
+          {column.name}
+        </Column>
+      )}
+    </TableHeader>
+    <TableBody items={rows}>
+      {item => (
+        <Row>
+          {columnKey => <Cell>{item[columnKey]}</Cell>}
+        </Row>
+      )}
+    </TableBody>
+  </TableView>
+</Flex>
+```
 
 ### Internationalization
 To internationalize a TableView, all text content within the TableView should be localized. This includes the `aria-label` provided to the TableView if any.
@@ -132,32 +267,30 @@ to one or more Columns, allowing you to customize which columns should label the
 The example below applies `isRowHeader` to the "First Name" and "Last Name" columns so that each row is announced with the person's full name (e.g. "John Doe").
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-3000">
-  <TableView aria-label="Example table with static contents" width="100%" height="100%">
-    <TableHeader>
-      <Column isRowHeader>First Name</Column>
-      <Column isRowHeader>Last Name</Column>
-      <Column align="end">Age</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>John</Cell>
-        <Cell>Doe</Cell>
-        <Cell>45</Cell>
-      </Row>
-      <Row>
-        <Cell>Jane</Cell>
-        <Cell>Doe</Cell>
-        <Cell>37</Cell>
-      </Row>
-      <Row>
-        <Cell>Joe</Cell>
-        <Cell>Schmoe</Cell>
-        <Cell>67</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
+<TableView aria-label="Example table with static contents">
+  <TableHeader>
+    <Column isRowHeader>First Name</Column>
+    <Column isRowHeader>Last Name</Column>
+    <Column align="end">Age</Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>John</Cell>
+      <Cell>Doe</Cell>
+      <Cell>45</Cell>
+    </Row>
+    <Row>
+      <Cell>Jane</Cell>
+      <Cell>Doe</Cell>
+      <Cell>37</Cell>
+    </Row>
+    <Row>
+      <Cell>Joe</Cell>
+      <Cell>Schmoe</Cell>
+      <Cell>67</Cell>
+    </Row>
+  </TableBody>
+</TableView>
 ```
 
 ## Asynchronous loading

From 4ff7aedf5393e71a8aa0a6b1616cde077cf0c5c8 Mon Sep 17 00:00:00 2001
From: danni <danniintheus@gmail.com>
Date: Mon, 21 Jun 2021 14:46:19 -0700
Subject: [PATCH 57/62] minheight 0

---
 packages/@react-spectrum/table/docs/TableView.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index 0c44264a217..d7a57396dd5 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -116,6 +116,11 @@ let rows = [
 </TableView>
 ```
 ### Layout
+TableViews are often contained within a page layout that defines the size of the table. For example, a page might have a header or toolbar with a TableView below that fills the remaining vertical space. TableView is designed to scroll internally while the column headers remain fixed. Because of this, TableViews should not be placed within a scrollable container.
+
+The example below shows how to use a Flex component with to size a TableView, filling the remainder of the available space.
+
+
 ```tsx example
 ///- begin collapse -///
 let columns = [
@@ -233,6 +238,7 @@ let rows = [
   <div>sdghsfgiudsfglibdfilbfg</div>
   <TableView
     flex
+    minHeight={0}
     aria-label="Example table with dynamic content">
     <TableHeader columns={columns}>
       {column => (

From 279cacc83d6068b17634517b93518d192572eb0c Mon Sep 17 00:00:00 2001
From: danni <danniintheus@gmail.com>
Date: Mon, 21 Jun 2021 15:36:18 -0700
Subject: [PATCH 58/62] remove flex from examples

---
 .../@react-spectrum/table/docs/TableView.mdx  | 309 +++++++++---------
 1 file changed, 150 insertions(+), 159 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index d7a57396dd5..f03e5f00dc5 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -20,6 +20,7 @@ import {ActionButton} from '@react-spectrum/button';
 import Add from '@spectrum-icons/workflow/Add';
 import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table';
 import {Flex} from '@react-spectrum/layout';
+import {ActionGroup, Item} from '@react-spectrum/actiongroup'
 ```
 
 ---
@@ -118,7 +119,7 @@ let rows = [
 ### Layout
 TableViews are often contained within a page layout that defines the size of the table. For example, a page might have a header or toolbar with a TableView below that fills the remaining vertical space. TableView is designed to scroll internally while the column headers remain fixed. Because of this, TableViews should not be placed within a scrollable container.
 
-The example below shows how to use a Flex component with to size a TableView, filling the remainder of the available space.
+The example below shows how to use a [Flex](Flex.html) component to achieve the layout described above. Note the TableView uses the `flex` prop to fill the remainder of the available space.
 
 
 ```tsx example
@@ -232,10 +233,12 @@ let rows = [
 {"id":100,"first_name":"Edmon","last_name":"Alsopp","city":"Sandu"}];
 ///- end collapse -///
 
-// Table data hidden for example
-// Display table in flex with actiongroup above. without height
-<Flex height="size-2000" width="100%" direction="column">
-  <div>sdghsfgiudsfglibdfilbfg</div>
+<Flex height="size-5000" width="100%" direction="column" gap="size-150">
+  <ActionGroup>
+    <Item key="add">Add</Item>
+    <Item key="delete">Delete</Item>
+    <Item key="edit">Edit</Item>
+  </ActionGroup>
   <TableView
     flex
     minHeight={0}
@@ -334,25 +337,23 @@ function AsyncTable() {
   });
 
   return (
-    <Flex height="size-2000" flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="example async loading table" height="100%" width="100%">
-        <TableHeader columns={columns}>
-          {(column) => (
-            <Column align={column.key !== 'name' ? 'end' : 'start'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody
-          items={list.items}
-          loadingState={list.loadingState}
-          onLoadMore={list.loadMore}>
-          {(item) => (
-            <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
-          )}
-        </TableBody>
-      </TableView>
-    </Flex>
+    <TableView aria-label="example async loading table" height="size-3000">
+      <TableHeader columns={columns}>
+        {(column) => (
+          <Column align={column.key !== 'name' ? 'end' : 'start'}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody
+        items={list.items}
+        loadingState={list.loadingState}
+        onLoadMore={list.loadMore}>
+        {(item) => (
+          <Row key={item.name}>{(key) => <Cell>{item[key]}</Cell>}</Row>
+        )}
+      </TableBody>
+    </TableView>
   );
 }
 ```
@@ -366,7 +367,7 @@ Use `defaultSelectedKeys` to provide a default set of selected rows. Note that t
 The example below enables multiple selection mode, and uses `defaultSelectedKeys` to select the rows with keys "2" and "4".
 
 ```tsx example
-<TableView aria-label="Example table with multiple selection" maxWidth="size-6000" height="size-3000" selectionMode="multiple" defaultSelectedKeys={['2', '4']}>
+<TableView aria-label="Example table with multiple selection" selectionMode="multiple" defaultSelectedKeys={['2', '4']}>
   <TableHeader>
     <Column>Name</Column>
     <Column>Type</Column>
@@ -422,7 +423,7 @@ function PokemonTable(props) {
   let [selectedKeys, setSelectedKeys] = React.useState(new Set([2]));
 
   return (
-    <TableView aria-label="Table with controlled selection" maxWidth="size-6000" height="size-3000" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} {...props}>
+    <TableView aria-label="Table with controlled selection" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys} {...props}>
       <TableHeader columns={columns}>
         {column => (
           <Column key={column.uid} align={column.uid === 'level' ? 'end' : 'start'}>
@@ -505,7 +506,7 @@ function AsyncSortTable() {
   });
 
   return (
-    <TableView aria-label="Example table with client side sorting" height="size-3000" maxWidth="size-6000" sortDescriptor={list.sortDescriptor} onSortChange={list.sort}>
+    <TableView aria-label="Example table with client side sorting" sortDescriptor={list.sortDescriptor} onSortChange={list.sort} height="size-3000">
       <TableHeader>
         <Column key="name" allowsSorting>Name</Column>
         <Column key="height" allowsSorting>Height</Column>
@@ -577,111 +578,105 @@ function AsyncSortTable() {
 [View guidelines](https://spectrum.adobe.com/page/table/#Usage-guidelines)
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column alignment" width="100%" height="100%">
-    <TableHeader>
-      <Column align="start">Name</Column>
-      <Column align="center">Type</Column>
-      <Column align="end">Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
+<TableView aria-label="Example table for column alignment">
+  <TableHeader>
+    <Column align="start">Name</Column>
+    <Column align="center">Type</Column>
+    <Column align="end">Size</Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>2021406_Proposal</Cell>
+      <Cell>PDF</Cell>
+      <Cell>86 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Budget Template</Cell>
+      <Cell>XLS</Cell>
+      <Cell>120 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Onboarding</Cell>
+      <Cell>PPT</Cell>
+      <Cell>472 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Welcome</Cell>
+      <Cell>TXT</Cell>
+      <Cell>24 KB</Cell>
+    </Row>
+  </TableBody>
+</TableView>
 ```
 
 ### Column widths
 Columns support three different width props: `minWidth`, `width`, and `maxWidth`. Each of these props accepts fixed values or percentages. TableView prioritizes columns with defined widths and divides the remaining space evenly amongst the other columns.
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column widths" width="100%" height="100%">
-    <TableHeader>
-      <Column maxWidth={300} align="start">Name</Column>
-      <Column width={80}>Type</Column>
-      <Column minWidth={100} align="end">Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
+<TableView aria-label="Example table for column widths">
+  <TableHeader>
+    <Column maxWidth={300} align="start">Name</Column>
+    <Column width={80}>Type</Column>
+    <Column minWidth={100} align="end">Size</Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>2021406_Proposal</Cell>
+      <Cell>PDF</Cell>
+      <Cell>86 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Budget Template</Cell>
+      <Cell>XLS</Cell>
+      <Cell>120 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Onboarding</Cell>
+      <Cell>PPT</Cell>
+      <Cell>472 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Welcome</Cell>
+      <Cell>TXT</Cell>
+      <Cell>24 KB</Cell>
+    </Row>
+  </TableBody>
+</TableView>
 ```
 
 ### Column dividers
 [View guidelines](https://spectrum.adobe.com/page/table/#Column-dividers)
 
 ```tsx example
-<Flex flexGrow={1} maxWidth="size-4600">
-  <TableView aria-label="Example table for column dividers" width="100%" height="100%">
-    <TableHeader>
-      <Column align="start" showDivider>Name</Column>
-      <Column showDivider>Type</Column>
-      <Column align="end" showDivider>Size</Column>
-    </TableHeader>
-    <TableBody>
-      <Row>
-        <Cell>2021406_Proposal</Cell>
-        <Cell>PDF</Cell>
-        <Cell>86 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Budget Template</Cell>
-        <Cell>XLS</Cell>
-        <Cell>120 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Onboarding</Cell>
-        <Cell>PPT</Cell>
-        <Cell>472 KB</Cell>
-      </Row>
-      <Row>
-        <Cell>Welcome</Cell>
-        <Cell>TXT</Cell>
-        <Cell>24 KB</Cell>
-      </Row>
-    </TableBody>
-  </TableView>
-</Flex>
+<TableView aria-label="Example table for column dividers">
+  <TableHeader>
+    <Column align="start" showDivider>Name</Column>
+    <Column showDivider>Type</Column>
+    <Column align="end" showDivider>Size</Column>
+  </TableHeader>
+  <TableBody>
+    <Row>
+      <Cell>2021406_Proposal</Cell>
+      <Cell>PDF</Cell>
+      <Cell>86 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Budget Template</Cell>
+      <Cell>XLS</Cell>
+      <Cell>120 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Onboarding</Cell>
+      <Cell>PPT</Cell>
+      <Cell>472 KB</Cell>
+    </Row>
+    <Row>
+      <Cell>Welcome</Cell>
+      <Cell>TXT</Cell>
+      <Cell>24 KB</Cell>
+    </Row>
+  </TableBody>
+</TableView>
 ```
 
 ### Hide header
@@ -707,31 +702,29 @@ function TableExample(props) {
   ];
 
   return (
-    <Flex flexGrow={1} maxWidth="size-6000">
-      <TableView aria-label="Example table with hidden headers" width="100%" height="100%" {...props}>
-        <TableHeader columns={columns}>
-          {column => (
-            <Column
-              hideHeader={column.key === 'addInfo'}
-              align={column.key === 'age' ? 'end' : 'start'}
-              showDivider={column.key === 'addInfo'}>
-              {column.name}
-            </Column>
-          )}
-        </TableHeader>
-        <TableBody items={rows}>
-          {item =>
-            (<Row key={item.id}>
-              {key =>
-                key === 'addInfo'
-                ? <Cell><ActionButton isQuiet><Add /></ActionButton></Cell>
-                : <Cell>{item[key]}</Cell>
-              }
-            </Row>)
-          }
-        </TableBody>
-      </TableView>
-    </Flex>
+    <TableView aria-label="Example table with hidden headers" {...props}>
+      <TableHeader columns={columns}>
+        {column => (
+          <Column
+            hideHeader={column.key === 'addInfo'}
+            align={column.key === 'age' ? 'end' : 'start'}
+            showDivider={column.key === 'addInfo'}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody items={rows}>
+        {item =>
+          (<Row key={item.id}>
+            {key =>
+              key === 'addInfo'
+              ? <Cell><ActionButton isQuiet><Add /></ActionButton></Cell>
+              : <Cell>{item[key]}</Cell>
+            }
+          </Row>)
+        }
+      </TableBody>
+    </TableView>
   );
 }
 ```
@@ -783,18 +776,16 @@ function renderEmptyState() {
   );
 }
 
-<Flex height="size-6000" flexGrow={1} maxWidth="size-6000">
-  <TableView aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
-    <TableHeader>
-      <Column>Name</Column>
-      <Column>Type</Column>
-      <Column>Size</Column>
-    </TableHeader>
-    <TableBody>
-      {[]}
-    </TableBody>
-  </TableView>
-</Flex>
+<TableView aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
+  <TableHeader>
+    <Column>Name</Column>
+    <Column>Type</Column>
+    <Column>Size</Column>
+  </TableHeader>
+  <TableBody>
+    {[]}
+  </TableBody>
+</TableView>
 ```
 
 ### Nested columns
@@ -802,7 +793,7 @@ function renderEmptyState() {
 TableView supports nesting columns, allowing you to create column groups, or "tiered" column headers.
 
 ```tsx example
-<TableView aria-label="Example table for nested columns" maxWidth="size-6000" height="size-3000">
+<TableView aria-label="Example table for nested columns">
   <TableHeader>
     <Column title="Name">
       <Column isRowHeader>First Name</Column>
@@ -864,7 +855,7 @@ let rows = [
   {id: 4, first: 'Bruce', last: 'Wayne', age: 32, birthday: 'December 18'}
 ];
 
-<TableView aria-label="Example table for nested columns" maxWidth="size-6000" height="size-3000">
+<TableView aria-label="Example table for nested columns">
   <TableHeader columns={columns}>
     {column => (
       <Column isRowHeader={column.isRowHeader} childColumns={column.children}>

From d1e6d46303cf0384a5340e947f6814089b9548f1 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 21 Jun 2021 16:08:37 -0700
Subject: [PATCH 59/62] minor updates

---
 packages/@react-spectrum/table/docs/TableView.mdx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index f03e5f00dc5..685fd30dfa1 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -73,7 +73,7 @@ keywords: [table, grid]
 ```
 
 ## Content
-TableView is a complex [collection component](../react-stately/collections.html) that is built up from many child elements including columns, rows, and cells. Columns are defined within a TableHeader element and rows are defined within a TableBody element. Rows contain Cell elements that correspond to each column. Cells accept any element, allowing you to have focusable children within the TableView.
+TableView is a complex [collection component](../react-stately/collections.html) that is built up from many child elements including columns, rows, and cells. Columns are defined within a TableHeader element and rows are defined within a TableBody element. Rows contain Cell elements that correspond to each column. Cells can contain any element, allowing you to have focusable children within the TableView.
 
 Basic usage of TableView, seen in the example above, shows the use of a static collection where the contents of the TableView is hard coded. Dynamic collections, as shown below, can be used when the options come from an external data source such as an API, or update over time. Providing the data in this way allows TableView to automatically cache the rendering of each item, which dramatically improves performance.
 
@@ -697,8 +697,7 @@ function TableExample(props) {
     {id: '1', firstName: 'John', lastName: 'Doe', age: '45'},
     {id: '2', firstName: 'Jane', lastName: 'Doe', age: '37'},
     {id: '3', firstName: 'Joe', lastName: 'Schmoe', age: '67'},
-    {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'},
-    {id: '5', firstName: 'Longggggggggggg Wrapping', lastName: 'Name', age: '56'}
+    {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'}
   ];
 
   return (
@@ -776,7 +775,7 @@ function renderEmptyState() {
   );
 }
 
-<TableView aria-label="Example table for empty state" width="100%" height="100%" renderEmptyState={renderEmptyState}>
+<TableView aria-label="Example table for empty state" height="size-3000" renderEmptyState={renderEmptyState}>
   <TableHeader>
     <Column>Name</Column>
     <Column>Type</Column>
@@ -790,7 +789,7 @@ function renderEmptyState() {
 
 ### Nested columns
 
-TableView supports nesting columns, allowing you to create column groups, or "tiered" column headers.
+TableView supports nesting columns, allowing you to create column groups, or "tiered" column headers. Data for the leaf columns appears in each row of the table body.
 
 ```tsx example
 <TableView aria-label="Example table for nested columns">

From bd83d16519c097d1827c22a95716f7613cf969ab Mon Sep 17 00:00:00 2001
From: danni <danniintheus@gmail.com>
Date: Mon, 21 Jun 2021 16:29:47 -0700
Subject: [PATCH 60/62] add action button

---
 packages/@react-spectrum/table/docs/TableView.mdx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index f03e5f00dc5..fb69940ed2d 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -20,7 +20,6 @@ import {ActionButton} from '@react-spectrum/button';
 import Add from '@spectrum-icons/workflow/Add';
 import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table';
 import {Flex} from '@react-spectrum/layout';
-import {ActionGroup, Item} from '@react-spectrum/actiongroup'
 ```
 
 ---
@@ -234,14 +233,10 @@ let rows = [
 ///- end collapse -///
 
 <Flex height="size-5000" width="100%" direction="column" gap="size-150">
-  <ActionGroup>
-    <Item key="add">Add</Item>
-    <Item key="delete">Delete</Item>
-    <Item key="edit">Edit</Item>
-  </ActionGroup>
+  <ActionButton alignSelf="start">Add</ActionButton>
   <TableView
     flex
-    minHeight={0}
+    minHeight={0} //wait for merge
     aria-label="Example table with dynamic content">
     <TableHeader columns={columns}>
       {column => (

From f73967406c3fdbad6194160f31855aef9666c9e3 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Mon, 21 Jun 2021 17:09:38 -0700
Subject: [PATCH 61/62] Add a longer name that wraps

---
 packages/@react-spectrum/table/docs/TableView.mdx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index 0b5b028118c..15f1132de23 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -692,11 +692,12 @@ function TableExample(props) {
     {id: '1', firstName: 'John', lastName: 'Doe', age: '45'},
     {id: '2', firstName: 'Jane', lastName: 'Doe', age: '37'},
     {id: '3', firstName: 'Joe', lastName: 'Schmoe', age: '67'},
-    {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'}
+    {id: '4', firstName: 'Joe', lastName: 'Bloggs', age: '12'},
+    {id: '5', firstName: 'Taylor', lastName: 'Rodriguez Lloyd-Atkinson', age: '83'}
   ];
 
   return (
-    <TableView aria-label="Example table with hidden headers" {...props}>
+    <TableView aria-label="Example table with hidden headers" maxWidth="size-6000" {...props}>
       <TableHeader columns={columns}>
         {column => (
           <Column

From 0fd1a503a05119eb1a2b32b54f899800868ca760 Mon Sep 17 00:00:00 2001
From: danni <danniintheus@gmail.com>
Date: Mon, 21 Jun 2021 17:32:26 -0700
Subject: [PATCH 62/62] remove minheight

---
 packages/@react-spectrum/table/docs/TableView.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@react-spectrum/table/docs/TableView.mdx b/packages/@react-spectrum/table/docs/TableView.mdx
index 15f1132de23..b10abf9ce98 100644
--- a/packages/@react-spectrum/table/docs/TableView.mdx
+++ b/packages/@react-spectrum/table/docs/TableView.mdx
@@ -236,7 +236,6 @@ let rows = [
   <ActionButton alignSelf="start">Add</ActionButton>
   <TableView
     flex
-    minHeight={0} //wait for merge
     aria-label="Example table with dynamic content">
     <TableHeader columns={columns}>
       {column => (