hjalmers
Adding a button to every row.
Is there a way to add a custom button to every row of the table and call a my own function on the button click? Just for information, I will be using the button for moving that particular row UP or DOWN. Please do let me know if you need any clarification with what exactly i am trying to achieve here. Thank you.
There are multiple ways in which this could be implemented I guess, one would be to use the click function of a column to alter the value of another column on which the table is sorted. Once the value is updated the table needs to be redrawn (trigger a refresh). This would however require two separate columns one for up and one for down, not a big deal really but the other option as of now would be to use the custom column example and create a component with two buttons in it and listen for their events using a service. I'm abroad at the moment without access to a computer but I'll be back in a few days and it shouldn't take long to setup a small example using plunker:)
@onkar-joshi-invimatic and @echoIshwor, I've added an example on how to use column click, which could be used for changing row order and a lot of other things, hope it helps. Let me know if this is what you tried to achieve. Please not that I've made small changes to the code too so make sure you update to the latest version v4.3.1.
@hjalmers , Thank you for the reply!! , I added the action buttons in the table the way you described, everything's working as expected but the problem is I am unable to add custom style to thead and action buttons in the table. The gap between the action buttons is way too large. I think its because each button is wrapped inside each td element, not sure though. Is there any possible way to add any number of buttons inside one single td with custom css or reduce the gap between these action buttons??
This was what I was trying to accomplish:
@echoIshwor each column gets a unique class name (object key turned into dash string followed by -column) e.g. emailAddress would get the following class email-address-column applied to it. Or you could provide your own class name using the classNames property.
Style headings (thead) using tr th.email-address-column and body rows using tr td.email-address-column.
You could then set the padding and width to be whatever you want it to be for the columns containing buttons.
You could also try applying bootstrap classes to your columns e.g. px-0 to remove the padding to the left and to the right of your buttons. Since tables naturally want to distribute the width evenly, you need to force it down by setting width to 0.
If you want to add multiple buttons into one column please check the custom component example:)
@hjalmers , I think i am doing something wrong with my own component. when I give default bootstrap classes to classNames property it works, but if i try to assign my own custom css class to same classNames property it doesn't work. Same thing with styling thead element and all.
I am not able to override style with my own. I have used <generic-table tag inside my own component and none of the style from inside this component is working. idk why.
Perhaps you're adding the style to your component without turning off ViewEncapsulation? Unless you turn it off your styles will only apply to the specific component and not it's children (there are other ways without making the styles global but haven't tried them out myself) eg. angular.io/guide/component-styles.
@hjalmers I turned ViewEncapsulation to None and everything worked. Thank you for all the help :))