@ied/cell-table

CellTable

Install

yarn add @ied/cell-table

Use

import { CellTable, CellRow } from '@ied/cell-table'

const App = () => (
  <CellTable>
    <CellRow>
      <input />
      <input />
      <input />
      <input />
    </CellRow>
    <CellRow>
      <input />
      <input />
      <input />
      <input />
    </CellRow>
    <CellRow>
      <input />
      <input />
      <input />
      <input />
    </CellRow>
  </CellTable>
)

Use with exposed methode

import { CellTable, CellRow } from '@ied/cell-table'

class App extends React.Component {
  render () {
    <CellTable>
      {({ getNext }) => (
        <>
          <CellRow>
            <button onClick={() => getNext(this.input, 'ArrowRight')}>Go next<button>
            <input ref={elm => this.input = elm}/>
            <input />
            <input />
          </CellRow>
          <CellRow>
            <input />
            <input />
            <input />
            <input />
          </CellRow>
          <CellRow>
            <input />
            <input />
            <input />
            <input />
          </CellRow>
        </>
      )}
    </CellTable>
  }
}

To avoid some inputs during navigation

import { CellTable, CellRow } from '@ied/cell-table'

class App extends React.Component {
  render () {
    <CellTable>
      {({ getNext }) => (
        <>
          <CellRow>
            <input />
            <input className="ied-cell-table-avoid-el" tabIndex="-1" />
            <input />
          </CellRow>
          <CellRow>
            <input />
            <input />
            <input />
            <input />
          </CellRow>
          <CellRow>
            <input />
            <input />
            <input />
            <input />
          </CellRow>
        </>
      )}
    </CellTable>
  }
}

Types

type Props = {
  children: React$Node || ({getNext: (input:HTMLInputElement, action: Action) => void }) => React$Node,
  className?: string,
  style?: {},
}

enum Action = {
  "Enter"
  "ArrowRight"
  "Escape"
  "ArrowLeft"
  "ArrowDown"
  "ArrowUp"
}