Datatables responsive - column not collapsible to child row - javascript

I use DataTables. Each row in all tables has it's own actions in a separate column (smtn like "edit item", "delete item" and so).
I use the Responsive extension and it shrinks the table to width of a view and columns that do not fit that area are put into the "child row" (set of values visible on-demand under the plus button).
I would like to keep my actions column visible but on the right side of table. Is it possible? And how?

Yes its possible
Datatables gives you the option to set priority to any column using columnDefs
https://datatables.net/extensions/responsive/priority
Default priority for columns is 10000. So you can assign a lower value for the action column so that its not hidden before others.

Related

How to change jqGrid plusicon for subgrid position?

I have a jqGrid, which has a subgrid opening at the 3rd column of main grid. However, my plusicon are displaying in the beggining of each row (as 1st column).
Is there a way so that I can show the plusicon at 3rd column?
You can use remapColumnsByName or remapColumns methods to reorder the position of the column, with "+" icons, used to expand/collapse the subgrid.
See the demo, which uses
$("#list").jqGrid("remapColumnsByName", ["rn", "act", "name", "subgrid"], true);
to reorder first columns of the grid. See the below picture, where I marked in red color the icons of subgrid column.
The approach works on free jqGrid, because it's code is independent on the exact position of subgrid or multiselect column. The code of old jqGrid requires that subgrid column are placed at the beginning.

Is it a way to put border around a Grafana row?

I made a Grafana's dashboard who is created by JavaScript and now I think I should add a border around each row to make reading easier.
That's the actual view:
but as you can see we can't see easily which row is for which "name".
So what I want to do is something like this:
There is no border option but you could use row titles and row height to separate the rows visually:
The option for row options can be found in the row menu on the left hand side. Here are the row options:
There you can choose the title size and you can set the height to create some space between rows.

how to give two ng-repeat values in single column in ng-grid in angularjs

I using table which contains 10 column. This table should have both horizontal and vertical header. First column under heading should merge two values one is color and another one value is string. The first column should be fixed and first column horizontal header should not contain any value (Empty Value). Can we achieve these functionalities by using ng-grid or we have to use some other plugin. any help is appreciated.

Change Datatables options through jQuery

So, I have a table using the Datatables plugin. This table has a left fixed column to start with as well. Each one of my columns has a button to 'anchor' its column from scrolling, so fixing it in place.
You can change how many left columns you have fixed in the initialization with
new FixedColumns( oTable, {
"iLeftColumns": 1
} );
or "iLeftColumns": 2 and so on.
I already have my programming set to push the column to the far left, so now i just need to overwrite the iLeftColumns accordingly. How would I go about overwriting the datatables initialization with jQuery, on the anchor button click? With one column anchor clicked, iLeftColumns would be 2, but maybe the user anchors another column and makes it 3 and so on.

How to Fix position of headers in subgrid of JQGrid?

I've a sub-grid and height of sub-grid is set to auto.
height:"auto"
Here, I need to fix the position of headers, When i scroll down. But there is no scroll bar for sub-grid. Because i don't want multiple scroll bars in side my grid. Only one scroll bar.
Thanks in advance.
If the column headers of the subgrid will be fixed during scrolling of the main grid the headers will be overlapped with the contain of the next row of the main grid. In any way it is not possible what you want.
One tip as a workaround which I can suggest you: you can overwrite default tooltips shown if the mouse cursor is over the cells of subgrid. The default tooltips are the same as the cell contain. You can change behavior using cellattr (see the answer and another one as an example). The colModel element in the subgrid having
cellattr: function () { return ' title="My column name"'; }
will display the text "My column name" as the tooltip. I personally use the way for all columns having formatter: 'checkbox'. If you have many such columns and you want to examine some column in the middle of grid then it helps to determine to which column the cell belongs. In your case you have the same problem. So you can use the same cellattr property of the column.

Categories