Is there a way to reposition the delete action to the final column within an ng2 smart table?

Is there a way to move the delete action to the last column in an 'ng2' smart table?

I am looking to have the delete action appear only in the last column of my table in the ng2 smart table. Can anyone provide assistance with this matter?

Below are the settings and code for the table I am currently using:

this.settings = {
                add: {
                    confirmCreate: true,
                    addButtonContent: '<i class="fa fa-plus" title="Add"></i>',
                    createButtonContent: '<i class="fa fa-save" title="Save"></i>',
                    cancelButtonContent: '<i class="fa fa-remove" title="Cancel"></i>'
                },
                delete: {
                    confirmDelete: true,
                    deleteButtonContent: '<i class="fa fa-trash" title="Delete"></i>'
                },
                edit: {
                    confirmSave: true,
                    editButtonContent: '<i class="fa fa-edit" title="Edit"></i>',
                    saveButtonContent: '<i class="fa fa-save" title="Save"></i>',
                    cancelButtonContent: '<i class="fa fa-remove" title="Cancel"></i>'
                },
                columns: {
                    logDate: {
                        title: 'Log Date*',
                        filter: false,
                        type: 'custom',
                        width: '5%',
                        renderComponent: DatePickerRenderComponent,
                        editor: {
                            type: 'custom',
                            component: DatePickerEditorComponent,
                        },
                    },
                    category: {
                        filter: false,
                        title: 'Category*',
                        type: 'html',
                        editor: {
                            type: 'list',
                            config: {
                                list: this.customerList,
                            },
                        },
                    },
                    partId: {
                        filter: false,
                        title: 'PN/ID#*'
                    },
                    description: {
                        filter: false,
                        title: 'Description'
                    },

                    ws: {
                        filter: false,
                        title: 'WS',
                        type: 'custom',
                        renderComponent: CheckboxRenderComponent,
                        editor: {
                            type: 'custom',
                            component: CheckboxEditorComponent
                        }
 };

Answer №1

Refer to the documentation for information on using the actions.position property.

actions.position 'left'|'right' Indicates the desired position of the actions column

For example:

actions.position: 'right',
add: {
    confirmCreate: true,
    addButtonContent: '<i class="fa fa-plus" title="Add"></i>',
    createButtonContent: '<i class="fa fa-save" title="Save"></i>',
    cancelButtonContent: '<i class="fa fa-remove" title="Cancel"></i>'
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to position an element at the bottom of a div?

In the div, there are elements like h1, p, and a. The goal is to have the h1 at the top, the a at the bottom, and the p in the middle regardless of its height. Check out the jsfiddle for a live demo. Here is the source code: HTML <div class="box"> ...

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as: .mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures { background:rgba(0, 0, 0, .30); float:left; position:relative; overf ...

How can I implement a search box on my HTML website without relying on Google Custom Search?

Greetings to all! I am currently managing a website filled with HTML content. I am looking to incorporate a search box into the site. After researching on Google, most of the results point towards using Google Custom Search. However, I require a search box ...

Tips for interfacing with Angular ColorPicker elements using Selenium WebDriver

Is there a way to automate interactions with Angular ColorPicker components using Selenium WebDriver? Since there is no text field input for hex codes, it relies solely on mouse clicks. For reference, you can check out this example: https://www.primeface ...

Having issues with Angular 2/4 unable to read an object within the initForm() function

In the process of creating an edit form using Angular, I am facing a problem with understanding the lifecycle of the object retrieved from my backend server. After making a call to my service in ngOnInit(), I receive valid data. However, when I assign this ...

The click() function in jQuery executing only once inside a "for" loop

This is an example of my HTML code: <!DOCTYPE html> <head> <title>Chemist</title> <link href="stylesheet.css" rel="stylesheet"> </head> <body> <h2 id="money"></h2> <table border="1px ...

Reading and storing HTML source code in Python line by line

Recently, I embarked on the journey of learning Python 3. As I delved into my Python book, I found myself pondering some questions... One of my challenges is to extract key words from HTML source code. I managed to write code that allows me to open a URL ...

PHP - Truncated html string when appending

I have a situation where I am using PHP to generate HTML for the MPDF library in order to create a PDF file. However, when I include a loop within my PHP-generated HTML, it seems to be cutting off the initial part of the string. Below is the code snippet: ...

Tips for capturing changes in a "count" variable and executing actions based on its value

I have a counter on my webpage and I'm trying to change the style of an element based on the count variable. I tried using the .change action but I haven't been able to get it working. It might not be the right solution. Can anyone provide some ...

Automatically switch tabs upon pressing/scanning the Return key (using PHP, MySQL, and JavaScript)

Seeking assistance to resolve an ongoing issue that has been troubling me for the past few weeks. I am maintaining a basic web-based database to keep track of product serial numbers leaving our warehouse. The system is secure behind our firewall, so I&apo ...

Unable to retrieve values from nested objects in component.html

Hey fellow tech enthusiasts, I'm currently dealing with a complex nested JSON object retrieved from an API. Here's a snippet of the object: profile : { title:"Mr", personalInfo:{ fullNames: "John Doe", id ...

The function is unable to access the 'FacebookAuthProvider' property as it is undefined

I'm having trouble using Angular Firebase to connect with Facebook. I keep encountering this error: AppComponent.html:2 ERROR TypeError: Cannot read property 'FacebookAuthProvider' of undefined at AuthService.signInWithFacebook (auth.servic ...

Issue with using variables in nodejs, express, and EJS: Undefined

Having some trouble with EJS here. I am using response.render('agent.html', {name: 'aaaa'});, and in my HTML script, I attempt to access <%= this.name %>. Unfortunately, I keep getting a ReferenceError: aaaa is not defined. Any su ...

Where should the API call be placed in the app.component to halt the system until the response is received and injected into the body, instead of using ngOnInit?

I am currently exploring Angular and experimenting with various features. Recently, I encountered an issue that requires me to take certain actions based on the results returned by a service before the application fully loads. Currently, I am making a cal ...

Tips for notifying a user about leaving a page without saving their information

I created a small table where users can input product names and numbers. My question is, how can I notify the user if they try to leave the page without saving the entered information? <form action="index.php" method="post"> <input type="text" ...

Utilizing JSON data to generate an HTML webpage showcasing a collection of community districts through the power of JavaScript

As a beginner in javascript, I am working with a JSON file that contains an array of objects. Each object includes two properties: a borough and mappings. Mappings have two sub-properties called macro and neighborhoods. The macro represents a larger neighb ...

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

Struggling with the following issue: I have a button with a downward-pointing arrow in its description. When I hover over the button (or any content within it), I want the arrow to point upwards. However, currently, the arrow only points up when I hover ...

"Unusual HTML and jQuery quirk causing a perplexing issue: a function that keeps looping inexp

A unique code written in javascript using jQuery allows users to create a "box" on a website with each click of a button, triggering an alert message upon clicking the box. The process is as follows: 1) Clicking the "Add (#addBox)" button appends a new li ...

Error encountered with Paypal code. Being redirected to error code 400

Hello everyone, I am currently working on creating a simple webpage and practicing how to integrate PayPal into our website. However, I seem to be encountering an issue where it is redirecting me to a 400 error page. Below is the code snippet that I have ...

What could be the reason for the selection box in my form not changing the items when togg

I'm having an issue with my form selection box code that used to work but is now not functioning properly. Could someone please help me identify where the error lies? Essentially, I have a form with the ID #main and a select box named #chart-type. Th ...