Function TabNavTable

packages/@react-spectrum/s2/test/TableView.test.tsx:299–359

(props)

  describe('tab keyboard navigation', () => {
    function TabNavTable(props) {
      let {dragAndDropHooks} = useDragAndDrop({
        getItems: keys => [...keys].map(key => ({'text/plain': `${key}`}))
      });
      return (
        <TableView
          aria-label="Tab mode table"
          keyboardNavigationBehavior="tab"
          selectionMode="multiple"
          dragAndDropHooks={dragAndDropHooks}
          {...props}>
          <TableHeader>
            <Column
              isRowHeader
              menuItems={
                <MenuSection>
                  <MenuItem>
                    <Text slot="label">Filter</Text>
                  </MenuItem>
                </MenuSection>
              }>
              Name
            </Column>
            <Column
              menuItems={
                <MenuSection>
                  <MenuItem>
                    <Text slot="label">Filter</Text>
                  </MenuItem>
                </MenuSection>
              }>
              Type
            </Column>
            <Column>Notes</Column>
          </TableHeader>
          <TableBody>
            <Row id="1" textValue="Foo 1">
              <Cell>Foo 1</Cell>
              <Cell>Bar 1</Cell>
              <Cell>
                <input type="text" aria-label="Foo 1 notes" />
              </Cell>
            </Row>
            <Row id="2" textValue="Foo 2">
              <Cell>Foo 2</Cell>
              <Cell>Bar 2</Cell>
              <Cell>
                <input type="text" aria-label="Foo 2 notes" />
              </Cell>
            </Row>
            <Row id="3" textValue="Foo 3">
              <Cell>Foo 3</Cell>
              <Cell>Bar 3</Cell>
              <Cell>
                <input type="text" aria-label="Foo 3 notes" />
              </Cell>
            </Row>
          </TableBody>