0
172
VistasHow to print the checkbox in a row instead of column?
<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?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta