I am working with Data Grid from Material UI. I am able to succesfully pin the column, however, with overload of data from other columns, the header and the cell width of the pinned column are a little bit different. When some columns are hidden, the sizing is correct.
I only happens when they are pinned to the right, which I want to achieve.
Changing the alignment of the content in the pinned column doesn't help.
First image
Second image
use minWidth in column data like this :
{
field: 'user',
headerName: 'Adviser',
flex: 1,
minWidth: 200,
headerAlign: "left",
align: 'left',
sortable: false,
renderCell: (params) => (
<Grid justifyContent={'flex-start'} alignItems={'center'}>
<Grid sx={{mb: 0.5}}>
{params.value?.['first_name']}
{params.value?.['last_name']}
</Grid>
<Grid>
{lastLogin(params.value?.['last_login'])}
</Grid>
</Grid>
),
},
Related
I know that I can use the flex attribute on a column def if I want that column to take up the remaining space of a grid, like this:
public columnDefs: ColDef[] = [
{ field: 'name', flex: 1 },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
And I know that I can pin a column to the left (or right) so that it doesn't scroll with the rest of the columns:
public columnDefs: ColDef[] = [
{ field: 'name', pinned: 'left' },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
But I have a case where I want the first column to both be pinned AND fill the remaining space:
public columnDefs: ColDef[] = [
{ field: 'name', flex: 1, pinned: 'left' },
{ field: 'medals.gold', headerName: 'Gold' },
{ field: 'person.age' },
];
And when I do this (pinned + flex) the grid seems to ignore the flex attribute and always renders the column with the default width. I've been through the AG-Grid docs and don't see anything that explicitly says pinning and flex columns are incompatible, but maybe I'm missing it.
Here's a plunker to play with. Try removing the pinned attribute to see the flex column work.
Has anyone been able to combine these attributes on one column?
OK, I've found a solution. I'm not sure if this is a workaround, or if this is the way you're supposed to do it, so...
It was a combination of handling the gridReady event and calling Grid API api.sizeColumnsToFit().
In my case, I also set the width and suppressSizeToFit=true for the non-pinned columns.
Updated plunker.
Does anybody have experience with configuring the autoGroupColumnDef property for AG Grid? I am simply trying to make the default Group Column for my treeData grid to only show the expand/collapse chevron (with no group text). Below is my autoGroupColumnDef config and the current visual state:
const gridOptions: GridOptions = {
treeData: true,
getDataPath: (data) => data.hierarchy as string[],
autoGroupColumnDef: {
headerName: "",
width: 30, // <-- gets completely ignored??
valueFormatter: () => "",
cellRenderer: "agGroupCellRenderer",
cellRendererParams: {
suppressCount: true,
},
},
}
As you can see, I am left with a large amount of whitespace between the chevron in the group column and the data columns despite my setting an explicit width: 30 in the config. How can I get rid of this whitespace?
Use maxWidth instead of width.
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>
As we can see on https://www.ag-grid.com/javascript-grid-column-menu/, when the user checks/unchecks a column from the menu, the grid animates the other columns.
I'm introducing some columns dynamically, by using columnDefs:
this.columnDefs = [
{ headerName: 'Name', field: 'name', width: 200 },
{ headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true },
...
];
I've bound the hide/show flag to buttons on the UI that will bring a set of columns into the grid when needed. Although the columns show up appropriately, they simply appear instead of animating into the grid. I understand this is because I'm simply updating the columnDefs for the whole grid every time the user clicks the button.
Is there a way for me to display these columns on the click of the button while at the same time triggering the animation?
Unless you have this grid property suppressColumnMoveAnimation=true, the columns should have animation on by default.
As per docs
Column animations are on by default, row animations are off by
default. This is to keep with what is expected to be the most common
configuration as default.
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>