Guide on transferring data from one table to another by choosing one or multiple rows with the help of Angular 2

Question

Guide on transferring data from one table to another by choosing one or multiple rows with the help of Angular 2

https://i.sstatic.net/CF1Xo.pngHello, I'm currently facing an issue with my requirements. I'm attempting to display two tables.

Data for Table One:

TableOne =[
  {
    "Id": 1,
    "Name": "ONLINE",
    "Status": false,
    "Track": false,
  },
  {
    "Id": 2,
    "Name": "ONLINE",
    "Status": false,
    "Track": true,
  },
  {
    "Id": 3,
    "Name": "DEAL",
    "Status": true,
    "Track": false,

  },
  {
    "Id": 4,
    "Name": "OFFLINE",
    "Status": false,
    "Track": false,

  },

]

Data for Table Two:

Tab =[
  {
    "Id": 1,
    "Name": "ONLINE",
    "Status": false,
    "Track": false,
  },
  {
    "Id": 2,
    "Name": "ONLINE",
    "Status": true,
    "Track": false,
  },
  {
    "Id": 3,
    "Name": "DEAL",
    "Status": true,
    "Track": false,

  },
]

Table one:

Id  Name    Status  Track
1   ONLINE      false
2   ONLINE      true
3   DEAL        false
4   OFFLINE     false
Table two:

Id  Name    Status  Track
1   ONLINE      false
2   ONLINE      false
3   DEAL        false

The issue I am encountering is: How can I retrieve values from selected table rows using checkbox selection? And how can I transfer the selected values from table one to table two by clicking a button? Also

Selecting rows from table one and moving them to table two
If table one has the name "Online" and table two has the name "Offline" with the same id number, will it overwrite?
Upon clicking the button, how can I access the values of the selected row(s)?

Below is the link to my StackBlitz project.

angular typescript ionic2

Answer 1

Answer №1

Revised as per feedback:

1

To begin with, we need to establish arrays that will hold the selected items from each table:

  readonly TableOneSelections = [];
  readonly TabSelections = [];

Once a user checks or unchecks a record, a function will be invoked to add or remove the record from the selection list

  <input type="checkbox" (change)="onSelectionChanged($event, D, TableOne)"></td> //first table
  <input type="checkbox" (change)="onSelectionChanged($event, D, Tab)"></td> //second table

Function logic:

  onSelectionChanged(event, record, table) {
    const selections = table === this.TableOne ? this.TableOneSelections : this.TabSelections;
    event.target.checked
      ? selections.push(record)
      : selections.splice(selections.findIndex(selection => selection.Id === record.Id), 1)
  }

Following that, buttons can be created for moving selected records. When clicked, each button will trigger the moveSelectedRecords function to transfer the selected records to another table.

<button (click)="moveSelectedRecords(TableOne, Tab)">Move down</button> //first table
<button (click)="moveSelectedRecords(Tab, TableOne)">Move up</button> //second table

Implementation of moveSelectedRecords function:

  moveSelectedRecords(fromTable: any[], toTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    selections.forEach(selectedRecord => {
      const removedRecordIndex = fromTable.findIndex(record => record === selectedRecord);
      const removedRecord = fromTable.splice(removedRecordIndex, 1)[0];
      toTable.push(removedRecord);
    });
    selections.length = 0;
  }

2

If there is a need to overwrite records with the same Id, a slightly modified function named moveAndOverwriteSelectedRecords can be used:

  moveAndOverwriteSelectedRecords(fromTable: any[], toTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    selections.forEach(selectedRecord => {
      const removedRecordIndex = fromTable.findIndex(record => record === selectedRecord);
      const removedRecord = fromTable.splice(removedRecordIndex, 1)[0];
      const indexInSecondTable = toTable.findIndex(record => record.Id === removedRecord.Id);
      indexInSecondTable !== -1
        ? toTable[indexInSecondTable] = removedRecord
        : toTable.push(removedRecord)
    });
    selections.length = 0;
  }

3

Additionally, buttons can be created to invoke the getSelectedRecords function for a specific table:

<button (click)="getSelectedRecords(TableOne)">Get selected records</button> //first table
<button (click)="getSelectedRecords(Tab)">Get selected records</button> // second table

Within the function, you can access the selection arrays

  getSelectedRecords(fromTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    console.log(selections)
  }

Check out the live demo: https://stackblitz.com/edit/angular-d1smii

Answer 2

Revised as per feedback:

1

To begin with, we need to establish arrays that will hold the selected items from each table:

  readonly TableOneSelections = [];
  readonly TabSelections = [];

Once a user checks or unchecks a record, a function will be invoked to add or remove the record from the selection list

  <input type="checkbox" (change)="onSelectionChanged($event, D, TableOne)"></td> //first table
  <input type="checkbox" (change)="onSelectionChanged($event, D, Tab)"></td> //second table

Function logic:

  onSelectionChanged(event, record, table) {
    const selections = table === this.TableOne ? this.TableOneSelections : this.TabSelections;
    event.target.checked
      ? selections.push(record)
      : selections.splice(selections.findIndex(selection => selection.Id === record.Id), 1)
  }

Following that, buttons can be created for moving selected records. When clicked, each button will trigger the moveSelectedRecords function to transfer the selected records to another table.

<button (click)="moveSelectedRecords(TableOne, Tab)">Move down</button> //first table
<button (click)="moveSelectedRecords(Tab, TableOne)">Move up</button> //second table

Implementation of moveSelectedRecords function:

  moveSelectedRecords(fromTable: any[], toTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    selections.forEach(selectedRecord => {
      const removedRecordIndex = fromTable.findIndex(record => record === selectedRecord);
      const removedRecord = fromTable.splice(removedRecordIndex, 1)[0];
      toTable.push(removedRecord);
    });
    selections.length = 0;
  }

2

If there is a need to overwrite records with the same Id, a slightly modified function named moveAndOverwriteSelectedRecords can be used:

  moveAndOverwriteSelectedRecords(fromTable: any[], toTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    selections.forEach(selectedRecord => {
      const removedRecordIndex = fromTable.findIndex(record => record === selectedRecord);
      const removedRecord = fromTable.splice(removedRecordIndex, 1)[0];
      const indexInSecondTable = toTable.findIndex(record => record.Id === removedRecord.Id);
      indexInSecondTable !== -1
        ? toTable[indexInSecondTable] = removedRecord
        : toTable.push(removedRecord)
    });
    selections.length = 0;
  }

3

Additionally, buttons can be created to invoke the getSelectedRecords function for a specific table:

<button (click)="getSelectedRecords(TableOne)">Get selected records</button> //first table
<button (click)="getSelectedRecords(Tab)">Get selected records</button> // second table

Within the function, you can access the selection arrays

  getSelectedRecords(fromTable: any[]) {
    const selections = fromTable === this.TableOne ? this.TableOneSelections : this.TabSelections;
    console.log(selections)
  }

Check out the live demo: https://stackblitz.com/edit/angular-d1smii

Guide on transferring data from one table to another by choosing one or multiple rows with the help of Angular 2

Answer №1

Similar questions

Having trouble accessing input value when using FormArrayName with FormBuilder?

Record modified fields using Angular Reactive Forms and store them in a list

What is the best way to integrate Nextjs Link Component with framer motion in a Typescript environment?

Steps to trigger pipe activation in Angular when the model is updated:1. Execute the

Looping through NavItems component using JavaScript or Angular

The Typescript error "Attempting to call a function that does not have any callable signatures.(2349)"

How to import an HTML file using TypeScript

Verify web connectivity in an Angular2 (non-Ionic) Cordova application

Looking to conceal the input div without compromising the functionality in Angular 14

Retrieve the non-empty attributes of a JSON object

After saving any HTML, SCSS, or TS file, Angular 12 does not compile immediately

In the domain of React and Typescript, a minimum of '3' arguments is anticipated; nonetheless, the JSX factory 'React.createElement' is only equipped with a maximum of '2' arguments. This incongruity is signaled by the

Achieving JSON element sorting in the most effective way

Angular HTTP post call is failing to redirect to the correct URL

The FullCalendarModule does not have a property named 'registerPlugins' in its type definition

Is the Angular 7 router '**' wildcard feature failing to work properly when used in conjunction with lazy loaded modules and child routes?

Warning: The gulp_jspm module is now deprecated and will be removed

What steps can be taken to resolve the error message "Module '../home/featuredRooms' cannot be found, or its corresponding type declarations"?

Is Webpack CLI causing issues when trying to run it on a .ts file without giving any error

How to properly handle sending an empty post request in Angular 2