Repository: adobe/react-spectrum
File: packages/@react-spectrum/s2/stories/TableView.stories.tsx (TypeScript)

Code before:
      {item => (
        <Row id={item.id} columns={columns}>
          {(column) => {
            return <Cell>{item[column.id]}</Cell>;
          }}
        </Row>
      )}
    </TableBody>
  </TableView>
);


const DynamicTableWithCustomMenus = (args: any) => (
  <TableView aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
    <TableHeader columns={columns}>
      {(column) => (
        <Column
          width={150}
          minWidth={150}
          isRowHeader={column.isRowHeader}
          menu={
            <>
              <MenuSection>
                <MenuItem onAction={action('filter')}><Filter /><Text slot="label">Filter</Text></MenuItem>
              </MenuSection>
              <MenuSection>
                <MenuItem onAction={action('hide column')}><Text slot="label">Hide column</Text></MenuItem>
                <MenuItem onAction={action('manage columns')}><Text slot="label">Manage columns</Text></MenuItem>
              </MenuSection>
            </>
          }>{column.name}</Column>
      )}
    </TableHeader>
    <TableBody items={items}>
      {item => (
        <Row id={item.id} columns={columns}>
          {(column) => {
            return <Cell>{item[column.id]}</Cell>;
          }}
        </Row>
      )}
    </TableBody>
  </TableView>
);

let sortItems = items;
const DynamicSortableTableWithCustomMenus = (args: any) => {
  let [items, setItems] = useState(sortItems);
  let [sortDescriptor, setSortDescriptor] = useState({});
  let onSortChange = (sortDescriptor: SortDescriptor) => {
    let {direction = 'ascending', column = 'name'} = sortDescriptor;

Review comment (suggestion):
The line as the first `MenuItem` from a `MenuSection` when it's the first section and there is no `Header` looks weird. I checked our `Menu` stories and they all have `Header`s. Is this because a `MenuSection` is [wrapping](https://github.com/adobe/react-spectrum/pull/7617/files#diff-2e5e770823421d95998aca9927fff4ed25401c995f89a8612ab797ca7870ebd5R794) the `Collection` where the `MenuItem`s are inserted into the `TableHeader`'s column cell?
![image](https://github.com/user-attachments/assets/1bd32f71-bf2d-4c31-844e-a40da78026d4)


Code after:
    <TableBody items={items}>
      {item => (
        <Row id={item.id} columns={columns}>
          {(column) => {
            return <Cell>{item[column.id]}</Cell>;
          }}
        </Row>
      )}
    </TableBody>
  </TableView>
);


const DynamicTableWithCustomMenus = (args: any) => (
  <TableView aria-label="Dynamic table" {...args} styles={style({width: 320, height: 208})}>
    <TableHeader columns={columns}>
      {(column) => (
        <Column
          width={150}
          minWidth={150}
          isRowHeader={column.isRowHeader}
          UNSTABLE_menuItems={
            <>
              <MenuSection>
                <MenuItem onAction={action('filter')}><Filter /><Text slot="label">Filter</Text></MenuItem>
              </MenuSection>
              <MenuSection>
                <MenuItem onAction={action('hide column')}><Text slot="label">Hide column</Text></MenuItem>
                <MenuItem onAction={action('manage columns')}><Text slot="label">Manage columns</Text></MenuItem>
              </MenuSection>
            </>
          }>{column.name}</Column>
      )}
    </TableHeader>
    <TableBody items={items}>
      {item => (
        <Row id={item.id} columns={columns}>
          {(column) => {
            return <Cell>{item[column.id]}</Cell>;
          }}
        </Row>
      )}
    </TableBody>
  </TableView>
);

let sortItems = items;
const DynamicSortableTableWithCustomMenus = (args: any) => {
  let [items, setItems] = useState(sortItems);
  let [sortDescriptor, setSortDescriptor] = useState({});
  let onSortChange = (sortDescriptor: SortDescriptor) => {