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
CSS Table Border Spacing Inside Only
What Does The 'P-N' and Its Variants Represent in Bootstrap V4
Bootstrap: Multiple Nested Rows Within Row
Symfony2 - Formbuilder - Add a Class to The Field and Input
Refinerycms: Apply Bootstrap Styles to Navigation Menu
How to Use CSS Variables in Twitter-Bootstrap 4 $Theme-Colors Array
Regression Testing for Styling and Layout of Web Applications
Separate Sentence to One Word Per Line
Is There a Working Implementation of CSS3 Grid Layout for Webkit
Position: Relative Appearing Over Position:Absolute
Make Flex Item Full Width After It's Been Wrapped Without Using Media Queries
Change Font Sizes with Style Sheets for Rstudio Presentation
Angular2 Get Window Width Onresize
How to Clear The Last <Li> Tag Within a <Ul>
CSS How to Position an Element in a Middle (Half Height/Vertical 50%) of Another Element