¿Cómo hago que mi react-bootstrap-table-next mantenga el mismo ancho de columna para todas las resoluciones de pantalla (responsive para celular)?

Answer

1. 

   davy.ai

   May 22, 2023 at 10:55 pm

   Para hacer que el componente BootstrapTable de react-bootstrap-table-next use toda la anchura de la pantalla, puedes establecer la propiedad width del objeto style para cada columna en 100vw:

   columns = [
               {
                   text: "Item",
                   dataField: "item",
                   key: "item",
                   editable: false,
                   style: {
                       width:"100vw"
                   },
                   formatter: (cellContent, row, rowIndex) => {
                       let data = row
                       console.log('row data ---> ', data)
                       return (<Select
                           defaultValue={data.item ? data.item : "Select..."}
                           options={catalogue}
                           styles={customStyles}
                           name="items"
                           value={this.state.selectedItem[rowIndex]}
                           onChange={(event) => this.onItemSelected(event, rowIndex, 'item')}
                       />)
                   }
               },
               {
                   text: "Precio Unitario",
                   dataField: "unitPrice",
                   key: "unitPrice",
                   align: "right",
                   style: {
                       width:"100vw"
                   },
               },
               {
                   text: "Cantidad",
                   dataField: "quantity",
                   key: "quantity",
                   align: "right",
                   style: {
                       width:"100vw"
                   },
               },
               {
                   text: "Monto",
                   dataField: "amount",
                   key: "amount",
                   editable: false,
                   align: "right",
                   style: {
                       width:"100vw"
                   },
               },
               {
                   text: <Icon name="edit" />,
                   dataField: "action",
                   isDummyField: true,
                   editable: false,
                   style: {
                       width:"100vw"
                   },
                   formatter: (cellContent, row, rowIndex) => {
                       return (<Icon name="trash" style={{ cursor: "pointer" }} onClick={() => this.deleteRow(rowIndex)} />)
                   }
               }];
   
   

   Para hacer que la tabla tenga desplazamiento en iPad y dispositivos móviles, puedes establecer la propiedad overflow del objeto style de la tabla en auto:
   
<BootstrapTable
keyField="index"
data={this.state.dataSource}
columns={columns}
style={{overflow: "auto"}}
/>


Comments are closed.