How to print the checkbox in a row instead of column?

Question

  <div>
    <div>
      <IndeterminateCheckbox {...getToggleHideAllColumnsProps()} /> Toggle
      All
    </div>
    {allColumns.map((column) => (
      <div key={column.id}>
        <label>
          <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
          {column.id}
        </label>
      </div>
    ))}

  </div>

My code is print out like
the checkbox for hide and show column is print in column

How to make it to print the checkbox in a row?

Answer 1

You need to achieve this with applying styling. You can add display inline-block to inner div.

  <div>
    <div>
      <IndeterminateCheckbox {...getToggleHideAllColumnsProps()} /> Toggle
      All
    </div>
    {allColumns.map((column) => (
      <div key={column.id} style={{display: 'inline-block'}}>
        <label>
          <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
          {column.id}
        </label>
      </div>
    ))}

  </div>

Or you can add display flex for the container div

 <div>
    <div>
      <IndeterminateCheckbox {...getToggleHideAllColumnsProps()} /> Toggle
      All
    </div>
    <div style={{display: 'flex'}}>
    {allColumns.map((column) => (
      <div key={column.id}>
        <label>
          <input type="checkbox" {...column.getToggleHiddenProps()} />{' '}
          {column.id}
        </label>
      </div>
    ))}
    </div>
  </div>