What is the process for clearing a selection from a table?

I have been facing this issue for some time now. I am working with a basic table where selecting a row highlights it. However, I want to enhance my button functionality by adding a "Remove Selection" feature. When clicked, I need the selected row to lose its highlight. Could someone please guide me on what I might be overlooking? Thank you in advance!

Below is the code snippet: LIVE DEMO

<p-table [value]="tableData" selectionMode="single" metaKeySelection="true">
<ng-template pTemplate="header">
    <tr>
        <th>Company</th>
        <th>First Name</th>
        <th>Email</th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
    <tr [pSelectableRow]="rowData">
        <td>{{rowData.first_name}}</td>
        <td>{{rowData.last_name}}</td>
        <td>{{rowData.email}}</td>
    </tr>
</ng-template>
</p-table>

<button (click)="removeSelection()">Remove Selection</button>

Answer №1

To bind the selected row to the variable you have defined, make sure to include [(selection)]="selectedRow" within the p-table:

<p-table [value]="tableData" selectionMode="single" metaKeySelection = "true" [(selection)]="selectedRow">
<ng-template pTemplate="header">
    <tr>
        <th>Company</th>
        <th>First Name</th>
        <th>Email</th>
    </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
    <tr [pSelectableRow]="rowData">
       <td>{{rowData.first_name}}</td>
       <td>{{rowData.last_name}}</td>
       <td>{{rowData.email}}</td>
    </tr>
</ng-template>
</p-table>

<button (click)= "removeSelection()">Remove Selection</button>

Additionally, ensure to add this.selectedRow = null; inside the removeSelection() method:

removeSelection() {
    this.selectedRow = null;
}

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

Exporting a value from a class in Angular 2 using TypeScript

import {TranslateService, LangChangeEvent} from "@ngx-translate/core"; class CustomLanguageExporter { public currentLang : string; constructor(private translate : TranslateService) { } public static setLanguage(): string { this.tr ...

declare wrong TypeScript type in external library

I am currently using winston 3.0 in combination with the @types/winston types. Unfortunately, it seems that these types are not completely compatible, leading to an error in the types that I am unsure how to rectify. Below is the code snippet in question: ...

Why is TypeScript resorting to using 'any' for specific prop type definitions in React?

Having some trouble with my props typing: export interface ITouchable { isDisabled?: boolean; margin?: Margin; height?: number; bgColor?: string; } The definition of Margin is as follows: type Margin = | { top?: number; bottom?: nu ...

Ensure the information remains secure within the Ionic provider

In my Ionic 3 project, I am sending an API request and displaying the response on a page called Home.ts by using a Provider. I want to ensure that the data remains in the provider after the initial request so that all pages utilizing this Provider can acce ...

Warning: Ionic 4 has encountered error code ITMS-90809, indicating the use of deprecated API. Apple has announced they will no longer accept app submissions that utilize

Greetings from the Apple team, It has come to our attention that there are certain issues with your recent app delivery for "Project 66" version 0.0.9. Your delivery was successful, however, we advise you to address the following problem in your upcoming ...

Establish the predefined date for the air-datepicker

I am currently utilizing the air-datepicker inline feature. My objective is to establish the starting date for it. Below is the script detailing my attempt: export function load_datepickers_inline():void { const search_legs_0_datepicker = $("#search_leg ...

Encountered an error while loading resource: net::ERR_CONNECTION_REFUSED in Nodejs

I am currently working on a form in my angular 6 app with nodejs, utilizing nodemailer for sending emails. Unfortunately, I am encountering an error that reads: Failed to load resource: net::ERR_CONNECTION_REFUSED : :3000/contact/send:1 Below is the form ...

The 'Set-Cookie' response header failed to be recognized for a subsequent HTTP request

When a user successfully logs in, their information is stored in a cookie using the "Set-Cookie" response header. However, I am facing an issue where the cookie seems to get lost when making subsequent requests from the client. As a result, the server trea ...

Bringing in SCSS using Typescript, React, and Webpack

I am trying to utilize .scss classes by importing them and applying them to the className property of a React component. Here is the structure of my project : root/ ... config/ ... webpack.config.js src/ ... global.d.ts app/ ...

Limit function parameters to only accept values with matching keys

I am relatively new to using TypeScript and am currently working on a project that involves handling various shapes of data from different sources. My goal is to pass this data to different aggregator classes, with one aggregator class corresponding to eac ...

Angular2 Component: Evaluating the modification of the input value in a form

I'm currently working with a text input and monitoring for any changes that occur. mycomponent.ts ngOnInit() { this.searchInput = new Control(); this.searchInput.valueChanges .distinctUntilChanged() .subscribe(newValue => ...

When you use map to transform the value, Observable will consistently return as undefined

Can anyone help me figure out why, when I transform the observable, it returns undefined in the console log even though there are assigned values? HTTP Request getLibraryCardPeople(bookName: String): Observable<people[]> { return this.http.get<Li ...

When trying to console log a selected date, the output displays as undefined

<div class='col-sm-6'> <input [(ngModel)]="date" id="date" name="date" class="form-control" required/> </div> $(function () { $('#date').datetimepicker({ format: 'DD/MM/YYYY hh:mm' } ...

A guide on eliminating repetitions from an array of objects by utilizing the spread operator

I am working with an object array that has a unique key called "id": var test = [ {id: 1, PlaceRef: "*00011", Component: "BATH", SubLocCode: "BAT", BarCode: ""}, {id: 2, PlaceRef: "*00022", Component: "BAXI10R", SubLocCode: "KIT", BarCode:""}, {id: ...

The term "define" is not recognized when constructing a Next.js application

Currently, I am working with Next version 10.0.1 and React 17.0.2. While attempting to build my Next app, I encountered the following error: ReferenceError: define is not defined at Object.<anonymous> (/Users/username/Desktop/project/node_module ...

Is it possible for a TypeScript function to be used as a React prop even if it conflicts with the function signature's in

Why does the TypeScript type checker allow a prop with a function parameter that does not strictly match the definition? For example, I have a function called callbackImpl = (str: string): number, which is passed as a React prop parameter defined as callb ...

Creating multiple CRUD components in Angular 2: which is better, using routing or a parent component

My application consists of multiple sections that act as independent CRUD components. There are two approaches that I am aware of: Utilize a parent component with ngIfs to manage the view/edit/add operations of child components Implement subrouting wit ...

What is the best way to deploy a docker image from my computer to the office server?

I have an Angular project that has been Dockerized on my personal computer. I am now looking to deploy it on my company's server without having superuser permissions. What steps should I take to achieve this? ...

Tips for indicating ngbDatepicker as valid in a form even without selecting a value

In my Angular2 project, I am utilizing ng-bootstrap's ngbDatepicker within a Reactive Form. The dates in this form are not required, but the problem is that ngbDatepicker always considers the form as Invalid unless a date is chosen. Is there a method ...

What is the process for creating a new Object based on an interface in Typescript?

I am dealing with an interface that looks like this: interface Response { items: { productId: string; productName: string; price: number; }[] } interface APIResponse { items: { productId: string; produc ...