I am using the BootstrapTable component from react-bootstrap-table-next. I am trying to create a page where this table must use the entire width of the screen. If the screen resolution drops down to iPad and mobile, the table must be scrollable. Instead, my table columns are shrinking. Thanks.
columns:
columns = [
{
text: "Item",
dataField: "item",
key: "item",
editable: false,
style: {
width:"15vw"
},
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: "Unit Price",
dataField: "unitPrice",
key: "unitPrice",
align: "right",
},
{
text: "Quantity",
dataField: "quantity",
key: "quantity",
align: "right",
},
{
text: "Amount",
dataField: "amount",
key: "amount",
editable: false,
align: "right",
},
{
text: <Icon name="edit" />,
dataField: "action",
isDummyField: true,
editable: false,
formatter: (cellContent, row, rowIndex) => {
return (<Icon name="trash" style={{ cursor: "pointer" }} onClick={() => this.deleteRow(rowIndex)} />)
}
}
];
data:
data = [
{
item:"Apple",
unitPrice:1000,
quantity:1,
amount:1000
}
]
component:
<BootstrapTable
keyField="index"
data={this.state.dataSource}
columns={columns}
/>
