Is the following format possible with ag-grid:
Merged header with blank name
Merged header with name in 2 lines ("Original Values")
Parent header centered ("Header with children")
Thank you, for the question I know it is been too late for the answer but just to help another people know it.
Yes, it is possible with an updated version of ag-grid, please check it out.
`var columnDefs = [ {
headerName: 'Athlete Details',
children: [
{
headerName: 'Athlete',
field: 'athlete',
width: 150,
suppressSizeToFit: true,
enableRowGroup: true,
rowGroupIndex: 0,
},
{
headerName: 'Age',
field: 'age',
width: 90,
minwidth: 75,
maxWidth: 100,
enableRowGroup: true,
}
]
}];
`
https://plnkr.co/edit/?p=preview&preview
I'm struggling with this for quite a while, but i can not find a good solution. Anyway i figured out a solution (at least for my self).
In my case, the headers are dynamic. Only some headers have children.
Here is the solution:
Figure out how many rowspan should a header have
Apply class to header
In your columnDefs, use 'headerClass'
const rowSpanClass = ..... // This is calculated base on the data you have or set it static
columnDefs = {
....
....
headerClass: rowSpanClass, // In my case, if it is 2 rowspan, i call it 'header-row-span-2'
......
}
Apply style on the custom header class
.header-row-span-2 {
position: fixed;
top: 50px;
height: 100px;
}
.header-row-span-3 {
position: fixed;
top: 100px;
height: 150px;
}
The value of 'top' and 'height' need to be changed accordingly (ag-grid header height is 50px by default)
Just to share. I think this is not possible using the headers in ag-grid. So, instead, I set the headerheight to 0 and use the row cells to achieve the header format.
Related
Ag-grid has a sizeColumnsToFit function that sizes the columns to fit the screen, but what I want is to size the columns to fit the data. In other words I want each column's width to be the minimum required to fit its content (without truncating strings and adding ellipses) even if that means I have to scroll horizontally to see some of the columns.
The autoSizeColumns function seems to be making all the columns equal width, disregarding the width of the contents.
You can see both of these functions in the "Resizing Example" demo on this page.
For the "size to fit" option you can see truncated strings in some columns, but not the first column, presumably because it has "suppressSizeToFit: true". But adding that option to all column defs doesn't solve the problem; there's still some truncation in some columns, while others are wider than they need to be for the content.
Here's the code from that example:
const columnDefs = [
{ field: 'athlete', width: 150, suppressSizeToFit: true },
{
field: 'age',
headerName: 'Age of Athlete',
width: 90,
minWidth: 50,
maxWidth: 150,
},
{ field: 'country', width: 120 },
{ field: 'year', width: 90 },
{ field: 'date', width: 110 },
{ field: 'sport', width: 110 },
{ field: 'gold', width: 100 },
{ field: 'silver', width: 100 },
{ field: 'bronze', width: 100 },
{ field: 'total', width: 100 },
];
const gridOptions = {
defaultColDef: {
resizable: true,
},
columnDefs: columnDefs,
rowData: null,
onColumnResized: (params) => {
console.log(params);
},
};
function sizeToFit() {
gridOptions.api.sizeColumnsToFit();
}
function autoSizeAll(skipHeader) {
const allColumnIds = [];
gridOptions.columnApi.getAllColumns().forEach((column) => {
allColumnIds.push(column.getId());
});
gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', () => {
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((response) => response.json())
.then((data) => gridOptions.api.setRowData(data));
});
Any help?
I'm actually trying to get this working with JustPy using run_api, and I have that (sort of) working, except that the sizeColumnsToFit function doesn't do what I expected.
Most columns of my data consist of fixed-width strings (different widths, but the same width for all strings in a column), so I guess my "plan B" is to commit to a monospace font and font size and try to use trial and error to come up with a width calculation formula based on string lengths.
But sizing columns to fit data is a pretty common thing to want (isn't that what autofit does in Excel?), so I'm hoping there's a more robust solution.
I think you'll find autoSizeColumns does what you need it to.
Take a look at this demo.
What is the best practice to output a block of code on a styled object in Emotion?
A simple boolean statement looks like this:
const StyledComponent = styled('div')(({ check }) => ({
position: check ? 'relative' : undefined
})
But what is the best solution for a block of code like the following example if I don't want to check each line of code?
const StyledComponent = styled('div')(({ check }) => ({
// some style here
// ...
// only load pseud element if "check" is true
'&::before': {
content: `''`,
position: 'absolute',
left: '0%',
top: '0%',
width: '100%',
height: '100%',
background: 'blue'
}
}))
I have some solutions in mind.
Add the if statement on the content: as without content the rest won't show. It is not my favourite because the rest of the code still getting loaded.
Add the if statement to load a new div inside this component. This way I can target this specific div instead of using the pseudo-class before.
I gave it some thought and got to this solution:
const StyledComponent = styled('div')(
{
// some style here
position: 'relative'
},
({ check }) =>
// only load pseudo element if "check" is true
check
? {
'&::before': {
content: `''`,
position: 'absolute',
left: '0%',
top: '0%',
width: '100%',
height: '100%'
}
}
: undefined
)
Please refer to the image shown below. (The highlighted part is the ROW header that I need in AG-Grid)
I am not sure about the functional use case of this first column for you.
Nevertheless you can achieve this by adding it to column definition as shown below.
var gridOptions = {
// define grid columns
columnDefs: [
// using default ColDef
{
headerName: ' ',
field: '__',
width: 15,
sortable: false,
cellStyle: {
// you can use either came case or dashes, the grid converts to whats needed
backgroundColor: 'lightgrey', // whatever cell color you want
},
},
...
}
Created working sample plnkr here.
As far as I know ag-grid doesn't have any built-in support for row headers, but as a workaround you can make your first column appear as row headers. I recommend making the whole column look a little different compared to the other columns (including the column header if it's not blank) so it can clearly be seen they are column headers, not standard row data.
Example column definitions:
ColumnDefs: [
{ headerName: 'Column Title 1', field: 'Column1', minWidth: 100, headerClass: "upperLeftCell", cellStyle: {
backgroundColor: 'AliceBlue', //make light blue
fontWeight: 'bold' //and bold
}
},
{ headerName: 'Column Title 2', field: 'Column2', minWidth: 100 },
{ headerName: 'Column Title 3', field: 'Column3', minWidth: 100 }
]
You can also style in SCSS as shown here with the upper left cell:
::ng-deep .ag-header-cell.upperLeftCell {
background-color: aliceblue;
font-weight: bold;
}
In your data rows: you have to enter in the first column the title you want for each row.
Add this as your first colDef. It will render a index column that is unmovable. I have a separate IndexColumnCellRender so won't look exact the same, fill in cellStyle to fit your needs, or make a dedicated cell render like me.
const rowIndexColumn: ColDef = {
valueGetter: ({ node }) => {
const rowIndex = node?.rowIndex;
return rowIndex == null ? "" : rowIndex + 1;
},
width: columnWidth,
headerName: "",
colId: "some-id",
field: "some-id",
suppressNavigable: true,
suppressPaste: true,
suppressMovable: true,
suppressAutoSize: true,
suppressMenu: true,
lockPosition: true,
cellStyle: { padding: 0 },
};
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',
},
});
I am using Ag-grid and I need merge particular cells in a row.
How can I do this?
This example demonstrates merging of "First name" and "Last name" fields to form "Name" Field
columnDefs: [
{
headerName: 'Name',
field: 'name',
filter: true,
width: 210,
valueGetter:function(params){
return params.data.fname+" "+params.data.lname
}
},
...
]
ag-Grid calls this "Column Spanning." In the good old' days of HTML tables, we'd call this colspan, and rowspan for the closely-related action of merging cells vertically.
Anyway, here is the ag-Grid reference:
https://www.ag-grid.com/javascript-grid-column-spanning/
You can add this to your colDef for the particular column
cellClass: function(params) {
if(params.data.someConditionForCellsToBeMerged) {
return params.data.someConditionForCellToKeep ? "top-row-span": "bottom-row-span";
}
}
And then in your css:
.ag-neo .ag-cell.top-row-span {
border-bottom: 0px;
}
.ag-neo .ag-cell.bottom-row-span {
border-top: 0px;
text-indent: -100em; // you can use this to hide the content of the bottom cell
}