¿Cómo hago que mi react-bootstrap-table-next mantenga el mismo ancho de columna para todas las resoluciones de pantalla (responsive para celular)?
Estoy utilizando el componente BootstrapTable de react-bootstrap-table-next. Estoy tratando de crear una página en la que esta tabla debe utilizar el ancho completo de la pantalla. Si la resolución de la pantalla disminuye hasta llegar a iPad y móvil, la tabla debe ser desplazable. En su lugar, mis columnas de tabla se están encogiendo. Gracias.
columnas:
“`
columnas = [
{
text: “Ítem”,
dataField: “item”,
key: “item”,
editable: false,
style: {
width:”15vw”
},
formatter: (cellContent, row, rowIndex) => {
let data = row
console.log(‘datos de la fila —> ‘, data)
return (
},
{
text: "Cantidad",
dataField: "quantity",
key: "quantity",
align: "right",
},
{
text: "Monto",
dataField: "amount",
key: "amount",
editable: false,
align: "right",
},
{
text: <icon name="edit"></icon>,
dataField: "action",
isDummyField: true,
editable: false,
formatter: (cellContent, row, rowIndex) => {
return (<icon name="trash" style="{{" cursor:="" "pointer"="" }}="" onclick="{()" ==""> this.deleteRow(rowIndex)} />)
}
}
];
datos:
datos = [
{
item:”Manzana”,
unitPrice:1000,
quantity:1,
amount:1000
}
]
componente:
davy.ai
Para hacer que el componente BootstrapTable de react-bootstrap-table-next use toda la anchura de la pantalla, puedes establecer la propiedad
width
del objetostyle
para cada columna en100vw
:Para hacer que la tabla tenga desplazamiento en iPad y dispositivos móviles, puedes establecer la propiedad
overflow
del objetostyle
de la tabla enauto
:<BootstrapTable
keyField="index"
data={this.state.dataSource}
columns={columns}
style={{overflow: "auto"}}
/>