问题
I'm using the Material Table library that is officially recommended by Google Material UI as a data table library and having troubles with configuring the width of columns.
Column width
property is working until our content fits the cell: CodeSandbox
Is there any solution to fix that?
回答1:
If you want to set specific width to each column, I believe that you need to specify the option tableLayout: fixed . The docs refers to it like this:
tableLayout | auto or fixed | To make columns width algorithm auto or fixed
So your code could be something like this:
const tableColumns = [
{ title: "Lorem ipsum", field: "lorem", width: "10%" },
{ title: "Name", field: "name", width: "80%" },
{ title: "Custom status", field: "customStatus", width: "10%" }]
<MaterialTable
tableRef={tableRef}
columns={tableColumns}
data={tableData}
onRowClick={(evt, selectedRow) =>
setSelectedRow(selectedRow.tableData.id)
}
title="Remote Data Example"
options={{
rowStyle: rowData => ({
backgroundColor:
selectedRow === rowData.tableData.id ? "#EEE" : "#FFF"
}),
tableLayout: "fixed"
}}
/>
Here is the sandbox.
Good luck!
来源:https://stackoverflow.com/questions/62539462/material-table-how-change-width-of-the-columns