AG Grid columns styling and layout - ag-grid

I am trying to achieve this below table layout using AG Grid. But, I am not able to figure out the best way to do it. (Required Layout).
Here the "Administrator", "Technician" and "Engineer" columns will constant always.
The "Dashboard", "Control Panel" columns and all the rows data will be dynamically fetched.
How can I achieve this layout with AG Grid?

Related

Ag Grid pass column width in column definition

I am using Ag Grid with React. I have a page with a dropdown which renders different tables according to the dropdown choice.
Some columns of these tables have content that overflows their width. To deal with this, I have a custom tooltip implemented, which displays the full text content on hover.
The issue is that since I have multiple tables inside a single page, the column widths of my target columns keep changing. I want to pass the column width of the target column as props to cell renderer component in colDef so that I can compare the columnWidth and the text scrollWidth to decide if the text overflows. Let me know any leads for this.

ag-grid column headers will not resize by dragging

I have copied the code column definitions and all attributes pertaining to resizing columns from the ag-grid examples for re-sizing columns in ag-grid vue, however I cannot resize my columns... the cursor will not even change to the "arrow" when I hover over the left or right edges of the columns.
Has anyone ever run into this?
If you are using ag-grid version 19.1.2 you can enable column resizing by setting [enableColResize]=true to ag-grid component

Keeping multiple area chart width's fixed

Is there a way to fix an area graph's width? So when I have multiple columns, they don't shrink. How can I have a normal scroller, similar to a text tables.
Just 5 Columns:
Multiple Columns in same panel width:
Scroller:
Thanks!
On your dashboard, from the sheet dropdown menu:
Fit > Standard
Here is an article from Tableau that references the issue:
https://kb.tableau.com/articles/issue/view-on-dashboard-is-scrunched-and-has-no-scrollbar

How to fit with column to content

I need to fit the column width to the content of the column and allow scrolling horizontally.
I am using ag-grid with JavaScript
exist a way to do this? I always fund example using gridOptions.api.sizeColumnsToFit() but this will fit to the grid.
any help link?
Use columnApi.autoSizeColumns() not api.sizeColumnsToFit()

SWT/JFace Column and Line Span in TableViewer

I need to span some column and rows in a TableViewer. The image bellow pretty much speaks for itself.
http://postimage.org/image/28l8re8lg/
I was thinking of implementing this by making some line invisible(white) but I don't think you can set individual border options for individual cells. Even if i managed this I would stil have to fix the alignment problem of the text in the spanned columns/rows ("Line Span" and "Column Span" in the picture).
I know about the Nebula Grid component, but I can use 3rd party components only as a last resort.
If anybody has any suggestions please share them:).
Thanks in advance.