keep focus in one column of table

Question

Here is my STACKBLITZ

<table class="example-focus-monitor" cdkTrapFocus>
  <tr>  
    <th><button>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button></th>
  </tr>
  <tr>
    <th><button>dont focus</button></th>
    <th><button>focus</button><button>also focus</button></th>
  </tr>
</table>

• I want to keep the focus only on the right column. So it should go from top to bottom if I keep pressing tab.
• I basically want to SKIP focus on 'dont focus'-buttons

How can I do this?

Answer 1

You can use tabindex='-1' . A negative value indicate that element is not reachable via sequential keyboard navigation.

 <p>my Table</p> <table class="example-focus-monitor" cdkTrapFocus> <tr> <th><button tabIndex='-1'>dont focus</button></th> <th><button>focus</button></th> </tr> <tr> <th><button tabIndex='-1'>dont focus</button></th> <th><button>focus</button><button>also focus</button></th> </tr> <tr> <th><button tabIndex='-1'>dont focus</button></th> <th><button>focus</button></th> </tr> <tr> <th><button tabIndex='-1'>dont focus</button></th> <th><button>focus</button><button>also focus</button></th> </tr> </table> <button>should never be focused when using tab and focus inside table</button>

Answer 2

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating). Assigning a negative value will make it unfocusable.

Try like this:

  <tr>  
    <th><button tabindex="-1">dont focus</button></th>
    <th><button tabindex="1">focus</button></th>
  </tr>
  <tr>
    <th><button  tabindex="-1">dont focus</button></th>
    <th><button tabindex="2">focus</button><button>also focus</button></th>
  </tr>

Working Demo