docs: Adding S2 TableView docs to new docs site

Makefile

@@ -143,6 +143,8 @@ s2-api-diff:
 	node scripts/api-diff.js --skip-same --skip-style-props
 
 s2-docs:
+	node packages/dev/s2-docs/scripts/generateMarkdownDocs.mjs
+	node packages/dev/s2-docs/scripts/generateOGImages.mjs
 	node scripts/extractStarter.mjs
 	REGISTRY_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs/registry node scripts/buildRegistry.mjs
 	REGISTRY_URL=https://reactspectrum.blob.core.windows.net/reactspectrum/$$(git rev-parse HEAD)/s2-docs/registry yarn build:s2-docs --public-url /reactspectrum/$$(git rev-parse HEAD)/s2-docs/

packages/@react-spectrum/s2/src/TableView.tsx

@@ -507,6 +507,7 @@ const columnStyles = style({
 });
 
 export interface ColumnProps extends Omit<RACColumnProps, keyof GlobalDOMAttributes> {
+  // TODO: this prop doesn't seem to work, is it supposed to be supported?
   /** Whether the column should render a divider between it and the next column. */
   showDivider?: boolean,
   /** Whether the column allows resizing. */

packages/dev/s2-docs/pages/react-aria/Table.mdx

@@ -121,7 +121,7 @@ import {Table, TableHeader, TableBody, Column, Row, Cell, Button, Checkbox, Resi
 
 ## Content
 
-`Table` follows the **Collection Components API**, accepting both static and dynamic collections. 
+Table follows the **Collection Components API**, accepting both static and dynamic collections.
 In this example, both the columns and the rows are provided to the table via a render function, enabling the user to hide and show columns and add additional rows.
 
 ```tsx render
@@ -290,7 +290,7 @@ function AsyncSortTable() {
 
 ### Links
 
-Use the `href` prop on a `<Row>` to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link interactions vary depending on the selection behavior.  See the [selection guide](selection.html) for more details.
+Use the `href` prop on a Row to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link interactions vary depending on the selection behavior.  See the [selection guide](selection.html) for more details.
 
 ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Bookmarks', selectionMode: 'multiple'}} wide
 "use client";
@@ -408,7 +408,7 @@ function Example(props) {
 
 ## Sorting
 
-Set the `allowsSorting` prop on a `<Column>` to make it sortable. When the column header is pressed, the table will call `onSortChange` with a <TypeLink type={docs.exports.SortDescriptor} links={docs.links} /> including the sorted column and direction (ascending or descending). Use this to sort the data accordingly, and pass the `sortDescriptor` prop to the `<Table>` to display the sorted column.
+Set the `allowsSorting` prop on a Column to make it sortable. When the column header is pressed, the table will call `onSortChange` with a <TypeLink type={docs.exports.SortDescriptor} links={docs.links} /> including the sorted column and direction (ascending or descending). Use this to sort the data accordingly, and pass the `sortDescriptor` prop to the `<Table>` to display the sorted column.
 
 ```tsx render
 "use client";
@@ -441,7 +441,7 @@ function SortableTable() {
   }
 
   return (
-    <Table 
+    <Table
       aria-label="Favorite pokemon"
       ///- begin highlight -///
       sortDescriptor={sortDescriptor}
@@ -469,7 +469,7 @@ function SortableTable() {
 
 ## Column resizing
 
-Wrap the `<Table>` with a `<ResizableTableContainer>`, and add a `<ColumnResizer>` to each column to make it resizable. Use the `defaultWidth`, `width`, `minWidth`, and `maxWidth` props on a `<Column>` to control resizing behavior. These accept pixels, percentages, or fractional values (the [fr](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit) unit). The default column width is `1fr`.
+Wrap the `<Table>` with a `<ResizableTableContainer>`, and add a `<ColumnResizer>` to each column to make it resizable. Use the `defaultWidth`, `width`, `minWidth`, and `maxWidth` props on a Column to control resizing behavior. These accept pixels, percentages, or fractional values (the [fr](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit) unit). The default column width is `1fr`.
 
 ```tsx render
 "use client";
@@ -519,7 +519,7 @@ const rows = [
 
 ### Resize events
 
-The ResizableTableContainer's `onResize` event is called when a column resizer is moved by the user. The `onResizeEnd` event is called when the user finishes resizing. These receive a `Map` containing the widths of all columns in the Table. This example persists the column widths in `localStorage`.
+The `ResizableTableContainer`'s `onResize` event is called when a column resizer is moved by the user. The `onResizeEnd` event is called when the user finishes resizing. These receive a `Map` containing the widths of all columns in the Table. This example persists the column widths in `localStorage`.
 
 ```tsx render
 "use client";
@@ -562,14 +562,14 @@ export default function ResizableTable() {
       <Table aria-label="Table with resizable columns">
         <TableHeader columns={columns} dependencies={[columnWidths]}>
           {column => (
-            <Column 
+            <Column
               isRowHeader={column.id === 'file'}
               ///- begin highlight -///
               width={columnWidths.get(column.id)}
               ///- end highlight -///
             >
               <div style={{display: 'flex', alignItems: 'center'}}>
-                <span tabIndex={-1} className="column-name">File Name</span>
+                <span tabIndex={-1} className="column-name">{column.name}</span>
                 <ColumnResizer />
               </div>
             </Column>