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>
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" }}
...
>
This is a follow-up question to this question. Basically, I have the same problem as described there where the table does not have as many rows as possible, there is more space there but it is unused.
I got it working for my table with the help of the answers in the last question. Now I had to adda horizontal Scroll-Container (the height is fixed) arround this table. Then the problem came up again.
I built a demo version with which you can see the problem and try arround with here.
The wanted result is just like as if you removed the ScrollContainer, then the table fills the entire page.
The same problem occurs when using this table inside of an IconTabBar but I was able to find an ugly work-around which does not work here. After the table was rendered I added the style height: 100% manually to the html-parents of the table (these are generated divs of the IconTabBar). This enabled the Table to receive the full height from its parents. With the ScrollContainer this tactic does not seem to work.
You can fix it like this:
onInit: function () {
this.oTable = this.byId("TableID");
this.oTable.onAfterRendering = function () {
const table = this.getTable();
const aColumns = table.getColumns();
for (let i = 0; i < aColumns.length; i++) {
aColumns[i].setProperty("width", "auto");
}
this.setHeight("100%");
};
}
And you may try these properties:
flexible: true/false,
resizable: true/false,
autoResizable: true/false,
width : "auto"
Please have a look at the restrictions of visibleRowCountMode="Auto"
https://ui5.sap.com/#/api/sap.ui.table.Table%23methods/getVisibleRowCountMode
See here the the layoutData definition for the HBox so that it gains the height from its parent
<layoutData>
<FlexItemData growFactor="1" />
</layoutData>
and also height: 100% style for the ScrollContainer's inner element which also let the table know the height of its container.
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>
i'm using AG Grid Angular to create a log view, i will add a lot of entries per second to the grid, typically this type of view's has the newest entry at the bottom, so it would be great if there is a good way where the scrolling will stick at the bottom, so i can always see the latest entry. A bonus would be, if i can manually scroll up and the scrolling will stay at this position.
Here's one way to do it:
handle rowDataChanged in your markup:
<ag-grid-angular
class="ag-dark"
[rowData]="messages"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
(bodyScroll)="handleScroll($event)"
(rowDataChanged)="handleRowDataChanged($event)">
</ag-grid-angular>
In the handler for rowDataChanged, call ensureVisibleIndex to scroll to the last row added:
gridOptions: GridOptions = {
suppressScrollOnNewData: true,
}
handleRowDataChanged(event) {
const index = this.messages.length - 1;
this.gridOptions.api.ensureIndexVisible(index, 'bottom');
}
Demo:
https://stackblitz.com/edit/angular-ag-grid-stuck-to-bottom
In that code there is also some logic around when to keep the table scrolled to the end or not based on the scroll position.
Ag-grid has nice documentation about grid auto-height:
https://www.ag-grid.com/javascript-grid-width-and-height/
But I can't understand how to make the ag-header fixed in the case when my table height is bigger than the viewport height. I scroll down through the table but header stays in the top.
You can see the same case when you choose 50 rows auto-height in the last example of the documentation page.
How to fix header in that case?
Add the css below to have fixed header in ag grid with auto height.
CSS
.ag-theme-alpine .ag-header {
top: 0;
position: fixed;
width: auto;
display: table;
z-index: 99;
}
.ag-theme-alpine .ag-root-wrapper {
border: none!important;
}
Refer the code attached : Auto Height - Fixed Header