const [pageSize, setPageSize] = useState<number>(10);
<DataGrid
pageSize={pageSize}
autoHeight
...
/>
The DataGrid is autoHeight. The default pageSize is set to 10. After invoke the `setPageSize`, the pageSize will changed, and the DataGrid conent and height will change dynamically.
Is there any way to make the transition effect in height in DataGrid after the pageSize value is changed. Thanks.
Related
When trying out the Material-UI basic example for Tree View (#mui/lab/TreeView), I do not know how to remove the horizontal scrollbar when using the overflowY: "auto" (The same effect even if I use overflow: "auto") option in the sx prop of the TreeView component. The horizontal scrollbar appears no matter how much space is available to the right. I want to keep the overflowY option in case of vertical overflow.
For example please see the basic tree view example from the official Material-UI page in StackBlitz or CodeSandbox.
How to remove the horizontal scrollbar when it's not needed?
This happens because the CSS classes .MuiTreeItem-content and its child .MuiTreeItem-label are set to 100% width by default, therefore, the .MuiTreeItem-content's 8px padding on x axis (also default) get in the way, adding 16px too many. You can easily override this by setting .MuiTreeItem-content's class padding to 0.
// ...
import MuiTreeItem from "#mui/lab/TreeItem";
import { styled } from "#mui/material/styles";
const TreeItem = styled(MuiTreeItem)(({ theme }) => ({
"& .MuiTreeItem-content": {
padding: 0,
},
}));
// ...
To remove the horizontal scrollbar completely you can hide the overflow over the X axis.
in css
.TreeView {
overflow-x: hidden;
}
or in jsx
<TreeView
sx={{ overflowX: "hidden" }}
...
>
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>
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>
So I have 100% of screen width header image at the top of the page and text element below the image. Below the text element I tried to make sticky navigation bar with this code:
$(function(){
var stickyRibbonTop = $('#stickyribbon').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#stickyribbon').css({position: 'fixed', top: '0px'});
} else {
$('#stickyribbon').css({position: 'static', top: '0px'});
}
});
});
Problem is that sticky nav bar jumps to the top of the page already when I scroll down the height of the text element. So it totally ignores the header image. I have height auto for this image but it obviously does nothing.
Solved it by myself. Solution was to make div with no height and padding-bottom as percentage of header image's height to its width and put the image in that div.
I can't find this anywhere. In a sap.ui.table.Table control is it possible to tell it to resize all column widths so that their contents are fully visible? I don't see any property/method either on the table or column instances.
Is it not supported?
Many thanks.
You can use autoResizeColumn(colIndex) method
Option 1: setting fixed sizes of columns
var oTable = new sap.ui.table.Table({
width : "100%",
selectionMode : sap.ui.table.SelectionMode.None,
enableColumnFreeze : true,
});
oTable.addColumn(new sap.ui.table.Column({
template : new sap.ui.commons.TextView({
text : "{Title}",
wrapping : true,
textAlign : sap.ui.core.TextAlign.Begin,
}),
enableColumnFreeze : true,
width : '350px', // also possible in % -> e.g. in ur case '100%'
}));
Option 2: resizable, but showing full column width, I would try to use these properties
width : sap.ui.core.CSSSize
flexible : boolean (default: true)
resizable : boolean (default: true)
like this
oTable.addColumn(new sap.ui.table.Column({
template : new sap.ui.commons.TextView({
text : "{Title}",
wrapping : true,
textAlign : sap.ui.core.TextAlign.Begin,
}),
width : '100%',
resizable : false,
flexible : false,
}));
I think its a challenge, I also made it via fixed sizes .. eventually you can define fixed sizes depending on the screen size .. hope to help you.
I tried several ways but none was really working on 1.52.23 so I analyzed the way auto-resize is working on the double-click on the column separator. And found the hidden treasure: sap.ui.table.TablePointerExtension
This code does the trick for me:
var oTpc = new sap.ui.table.TablePointerExtension(oTable);
var aColumns = oTable.getColumns();
for (var i = 0; i < aColumns.length; i++) {
oTpc.doAutoResizeColumn(i);
}
This works for me:
my colums are:
flexible: true,
resizable: true,
autoResizable: true,
width : 'auto'
$($.find('.sapUiTableColRsz')).trigger("click");
For me, I need to do the call to "autoResizeColumn" after the data is received. You can attach to the binding dataReceived event
While facing the same issue, I found the solution in the sap.m.Table control. Using the "fixed layout" option (set value to false, see documentation attached), you can force the columns/cells to resize according to its content (same effect like in ALV grid controls). The feature is described very well in the API reference: sap.m.Table / setFixedLayout
var oTable = new sap.m.Table({
fixedLayout: false
});
Defines the algorithm to be used to layout the table cells, rows, and columns. By default, a table is rendered with fixed layout algorithm. This means the horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells. Cells in subsequent rows do not affect column widths. This allows a browser to layout the table faster than the auto table layout since the browser can begin to display the table once the first row has been analyzed.
When this property is set to false, sap.m.Table is rendered with auto layout algorithm. This means, the width of the table and its cells depends on the contents of the cells. The column width is set by the widest unbreakable content inside the cells. This can make the rendering slow, since the browser needs to read through all the content in the table before determining the final layout. Note: Since sap.m.Table does not have its own scrollbars, setting fixedLayout to false can force the table to overflow, which may cause visual problems. It is suggested to use this property when a table has a few columns in wide screens or within the horizontal scroll container (e.g sap.m.Dialog) to handle overflow. In auto layout mode the width property of sap.m.Column is taken into account as a minimum width.