Material UI V1 - Set Table Column Widths

Material-table: How change width of the columns?

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%" }, // fixed column width
{ 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!

(Material-table)Unable to fetch my option list to lookup field of the table column

Because initialize of columns.columns[0].lookup state have set by value of optionList. In the first render, this state recieve a {} until useEffect call, inside useEffect setOptionList was called to change optionList state, optionList had change but column state not change cause this component not re-render to show what you want to see.

If you want fix it, just add useEffect with dependencies includes optionList and have function setColumns:

const [optionList, setOptionList] = useState({});

const [columns, setColumns] = useState({
columns: [
{
title: 'Image_ID',
field: 'image_ID',
lookup: optionList,
},
]
});

useEffect(() => {
const getOption = async () => {
let data = [];
let options = {};
const response = await axios.get(sampleUrl);
const { data: { image_sample } } = response;
image_sample.map((item) => {
data.push(item.image_ID);
});
data.forEach(item => options[item] = item);
setOptionList(JSON.stringify(options));
}
getOption();
}, [])

useEffect(() => { // <== Add this useEffect
setColumns({
columns: [
{
title: 'Image_ID',
field: 'image_ID',
lookup: optionList,
},
]
})
}, [optionList])

material-ui-next table exceeds container width and it's not scrollable

Can you try adding overflowX: "auto" in your paper container?

JSX:

return (
<Paper className={classes.paperContainer}>
<Fragment>
<CommonToolbar reload={getAnns} />
<Typography variant="title">Announces</Typography>
<Table className={classes.table}>
<TableHead>

Your styles:

const styles = {
root: {
flexGrow: 1,
padding: 10,
margin: 10
},
flex: {
flex: 1,
},
input: {
marginRight: 10
},
select: {
marginRight: 10
},
paperContainer: { margin: "10px", overflowX: "auto" }
}


Related Topics



Leave a reply



Submit