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

Code before:
      {(column) => (
        <Column width={150} minWidth={150} isRowHeader={column.isRowHeader}>{column.name}</Column>
      )}
    </TableHeader>
    <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}
          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;

Review comment (suggestion):
Bit strange that this doesn't actually accept a `<Menu>`. We should discuss options for the API here.

Code after:
    <TableHeader columns={columns}>
      {(column) => (
        <Column width={150} minWidth={150} isRowHeader={column.isRowHeader}>{column.name}</Column>
      )}
    </TableHeader>
    <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>
);