I am using the Table component available in material-ui in my React JS code with a single row. I have an "Add" icon button for adding desired number of rows. How can I expand and shrink the table height, depending on the number of rows. If the number of rows (excluding header and footer) exceed 20, then I want to put a scroll on the right. How can I handle this?
Please take a look at this solution:
https://codesandbox.io/s/basictable-material-demo-with-scroll-jsxwk?file=/demo.js.
It has a default row size of 4 that can be changed by a text field and will automatically resize the table accordingly, the scroller appears depending on the content, you don't have to worry about it.
The trick is customizing the TableContainer and Table's CSS:
const useStyles = makeStyles({
tableContainer: {
overflowY: "auto"
},
table: { //...
height: "100%",
overflowY: "scroll"
}, //...
});
And control the table container's height here:
const classes = useStyles();
const [maxRows, setMaxRows] = useState(4);
//...
return <TableContainer
component={Paper}
className={classes.tableContainer}
style={{
maxHeight: maxRows * ROW_HEIGHT + HEAD_ROW_HEIGHT
}}
>
<Table stickyHeader className={classes.table}>
{/*...*/}
</Table>
</TableContainer>
Related
This question is related to Ag-Grid row height on Angular 4 Project. Please see the below scenario:-
I have an Ag-Gird having 3 columns respectively:-
Id (resizable column from UI)
Name (resizable column from UI)
Address (resizable column from UI)
I do not have any limitations( like the limited number of character or words is allowed) on Address column. Users can type any number of characters or words they want to.
Issues:-
How to increase the row height, when Address column width is completely filled-up with words or when users press Enter or Shift + Enter?
How to adjust height automatically when users resize the Address column?
Please help me with these issues.
Thanks
There are multiple things to be taken care.
Have a look at the updated Stackblitz
Have cellClass: "cell-wrap-text" attribute in the ColDef for Address column and have the appropriate CSS
Handle columnResized event so that this.gridApi.resetRowHeights() can be called to adjust the height of the rows whenever the column is resized
Also handle cellEditingStopped event, so that when the data for the column is updated, the row height also gets updated accordingly.
onColumnResized() {
this.gridApi.resetRowHeights();
}
onCellEditingStopped() {
this.onColumnResized();
}
Provide autoHeight: true property in the defaultColDef
defaultColDef = { autoHeight: true };
Update:
provide cellEditor: 'agLargeTextCellEditor' if you want to have textarea like control for this field.
Check this StackBlitz
I was facing the same issue in react I wanted to increase the height of row according to the content of the text area and on enter it should go to next line in text area instead of not turning into read only, so what I did i used the suppressKeyboardEvent of ag-grid and wrote the code into it, here is my code
cellClass: "description-cell",
width: 200,
cellRendererFramework: (params) =>{
return <pre> {params.data.description}</pre>
},
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: (params) => {
return {
maxLength: '1000',
cols: this.props.cols,
rows: 2
}
},
suppressKeyboardEvent: (params) => {
const KEY_ENTER = 13;
const keyCode = params.event.keyCode;
const gridShouldDoNothing = params.event.target.value && params.editing && keyCode === KEY_ENTER;
params.event.target.style.height = 'inherit';
params.event.target.style.height = `${params.event.target.scrollHeight}px`;
params.node.setRowHeight(params.event.target.scrollHeight); // adjust it according to your requirement
this.gridApi && this.gridApi.onRowHeightChanged();
return gridShouldDoNothing;
}
I hope this could help you or someone who is looking for it :)
What helped me was to call redrawRows()
Typescript + React example:
const onCellEditingStopped = (event: CellEditingStoppedEvent<any>) => {
event.api.redrawRows();
};
I am new to React and Material UI. I am struggling with how much vertical space the components take up. One thing I would like to do is decrease the height of the toolbar.
I have tried specifying the style:
<Toolbar style={{ height: '36px' }}>
I have also tried doing it this way:
const styles = {
root: {
height: 36,
}
};
<Toolbar className={classes.root} >
but neither works. Is there a different way to do this?
I tried changing the Toolbar height before too but it didn't work.
I end up just setting Toolbar variant to dense which still give me a shorter height Toolbar compared to the regular one.
<Toolbar variant="dense">
You need to change the min-height to adjust the height, as min-height is specified in material-ui.css as 64px.
const styles = {
customizeToolbar: {
minHeight: 36
}
};
<Toolbar className={classes.customizeToolbar} >
Hope this will help you.
To change height of Toolbar globally, configure this in MUI theme:
const theme = createTheme({
components: {
MuiToolbar: {
styleOverrides: {
dense: {
height: 32,
minHeight: 32
}
}
}
},
})
Then use this theme:
<ThemeProvider theme={theme}>
...
</ThemeProvider>
This way you can tune look of many Mui components in theme, and this will be applied for all elements in the <ThemeProvider/> react block.
No css tweaks for individual elements, rather do it correctly in one place by modifying theme.
It is because the default height is 64px.
To change the height you have to actually change the minHeight property.
To do that, I have used inline styling but it works with other methods too.
const toolbarStyle = {
minHeight: '80px',
};
Then in your component simply specify the stylename using style attribute
<Toolbar style={toolbarStyle}>
Hope this helps!!
i too run into a similar issue after some time i put the
min height in AppBar instead of tool bar and it worked here is my code.
return (
<AppBar position="static" sx={{ height: '70px' }} >
<Container >
<Toolbar disableGutters >
</Toolbar>
</Container>
</AppBar>
)
}
Assign minHeight value:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
toolbar: {
minHeight: '10px',
backgroundColor: 'IndianRed'
}
}));
const classes = useStyles();
Simply specify className in your component:
<Toolbar className={classes.toolbar}>
I had buttons in my toolbar with default margin. That was preventing the Toolbar to get a height of less than 64px. After setting the button margins to 0 the problem was solved for me.
I'm beginning to evaluate material-ui as an alternative for a project and I would like to know what is the recommended way to change the font size for a table.
Currently I'm playing with the component's sandbox (available at https://codesandbox.io/s/9onokxxn5w) but I couldn't find what to change in order to enlarge the font size.
I tried to change the theme in demo.js adding a fontSize key to the table element, as follows, but it didn't work:
const styles = theme => ({
root: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
table: {
minWidth: 700,
fontSize: '40pt'
},
});
Thanks in advance for any help in figuring this out.
It seems that it does not work for Table but it works for the TabelRow or for the TableCell.
Add a class to the TableRow element and set the fontSize param on it
...
<TableRow key={n.id} className={classes.tablecell}>
...
const styles = theme => ({
tablecell: {
fontSize: '40pt',
},
});
How to create table with scroll overflow in Material UI v1 (v1-beta currently)? In component demos in MUI documentation there is no such example.
In all of the Table examples, there is a class applied to the div containing the Table that configures horizontal scrolling. It isn't apparent unless you're viewing the documentation with a sufficiently small viewport. (see BasicTable.js):
const styles = theme => ({
paper: {
width: '100%',
marginTop: theme.spacing.unit * 3,
overflowX: 'auto',
},
});
The paper class is applied to the root element:
function BasicTable(props) {
const classes = props.classes;
return (
<Paper className={classes.paper}>
<Table>
...
If you want a vertical scroll, you'll need to specify a height and include considerations for overflow-y. If you want both horizontal and vertical scrolling, you can set overflow and both axes will be configured:
const styles = theme => ({
paper: {
height: 300,
width: '100%',
marginTop: theme.spacing.unit * 3,
overflow: 'auto',
},
});
Note: This will not fix your column headings, because it is applied to the container. This adjustment will apply scrollbars to the entire table - heading, body, footer, etc.
In order to have the table header fixed and scroll just the table body I've come up with this solution.
First I added to each of the table components the component="div" property in order to get rid of the table skeleton completely.
Then I've added to Table, TableHead, TableBody and TableCell the display: block rule to override the material rules.
TableRows will get display: flex.
TableBody will get the desired fixed (max-)height, plus overflow: auto.
Of course by using divs instead of table tags the header and body cells lose the table alignment. In my case I solved this by setting to the first cells a fixed width, same for the first cells in the header and the first cells in body (or you can go for percentages as well) plus a flex-shrink: 0.
The second cells got flex-grow: 1
Note: Material UI v1 used
Use the "stickyHeader" property on table such as <Table stickyHeader>...</Table>
From this link the author suggested:
table.setWidth("100%", true);
table.setColumnWidth(nameColumn, 35.0, Unit.PCT);
table.setColumnWidth(addressColumn, 65.0, Unit.PCT);
for CellTable column width to work, however in my project the nameColumn contain an extra long text, then this column will occupy almost all browser view, apparently the column width does not work, Could anybody shed some light on this?
The nameColumn defined as below:
TextColumn<Person> nameColumn = new TextColumn<Person>()
{
#Override
public String getValue( Person object )
{
return object.getUserName();
}
};
You can use following method to set custom style on the column cell:
nameColumn.setCellStyleNames("name-cell");
The following structure is generated(in DOM) for the cell:
<td class="xxxxxxxx xxxxxx name-cell">
<div style="outline:none;">Very long name ...</div>
</td>
So you have to define following css classes to set the wanted style and limit the cell and text size:
.name-cell {
...
}
.name-cell div {
...
}
Update
I tested the method table.setColumnWidth( and works well for me.
Here is how I do it:
Table constructed by UI binder
Create columns
Set table width
add columns to the table
set column width (with table.setColumnWidth )
When you calculate the cell width don't forget to take padding into account.
Used GWT 2.4