I want to add react components like antd Icon, Progressbar, Tag etc. to antd table
In the online docs, there isn't any demo on this, is it possible?
There would be a LOT of demos if there was to be a demo of everything possible :-) !!!
Of course it is possible, you should look (in the docs you linked to) at the render property of Table.Column. It allows you to return the cell content with any React Components, based on the table row/item which is provided in its arguments. The docs have weird names for the argument, I like to think of the render function as
(cell, row, index) => { return (<any jsx>) }
... where cell is the standard cell content if you hadn't provided a render function, row is the data you supplied to the table for this particular row, and indexis the row index.
Related
I'm trying to make a row show more information that belong to the same table using antd and react (the data nested still belongs to the table, but it is collapsed) as is shown on image below. Searching on antd table documentation, I found a example to nest another table in the main table. Howerver, the second table also needs to have a Header besides it does not fallow the alignment of the first one. Could someone please explain me how I reach there?
example
antd table example
I am trying to pass data to my ng-bootstrap tooltip template. Following this example https://ng-bootstrap.github.io/#/components/tooltip/examples#tplwithcontext , I am now stuck at adding the #t1="ngbTooltip" part. Because my elements are created by iterating over an array, I cannot manually add the #t1 part.
This is my best try:
https://stackblitz.com/edit/ngbs-tooltip-dyn
When hovering over one of the "cell *" table cells, I want the tooltip to render the appropriate template with the cell's data from tooltipData.
Any considerations and help are appreciated.
Ok, so I have solved this, and posting this for reference.
The reason why I was struggling is that I was thinking that the content would be pulled dynamically. Opposed to that, the way it works is to render all the tooltips.
I have updated my Stackblitz https://stackblitz.com/edit/ngbs-tooltip-dyn for reference.
I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.
Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.
---UPDATE 1----
This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site)
Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.
What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.
Here is a working Plunker where is used this flag.
Is it possible to fill a cell with data from another cell based off the content of a different cell? I have a drop down menu in one cell, and when I select something from that menu, I would like the cell next to it to search a database on that sheet that the drop down is based off of. it has a second row with different values I would like to appear in the next column. I think about it, and it should seem easy, but I'm having troubles explaining it.
You could use VLOOKUP() to search the list based on the dropdown cell value. Ref
I want to display a Doors table with a different style for the first row using RPE.
for example, make the first row have a diferent background color, or other border style.
is there any simple way to do that?
Thanks,
Boris.
My solution was to use a variable called "firstRow" which is Assigned to True in an empty Container before the table, then on the row of the table it is assigned to False.
Then in the background properties I have a script that looks something like:
if (firstRow == "True") {
"SpecialColour";
} else {
"NormalColour";
}
A variation of this script needs to be used for each different property that changes, for example if the first row was centered, with a blue background and bold text, this would need three duplicates of the script. Alternatively if you are exporting to Word you can set a table style in the stylesheet, although I am not quite sure how to explain this without going through it myself again.
Hope that helped!