Remove table rows

[fimarapp]

I’m using this great Smart.Table (web component) to show a basic database of users.
I would like to remove selected rows base on user’s id but without painting the user’s id column. It’s possible?
[ ]  | Name | Color   | Pixels  | Status |
[x] | Alice  | Yellow | 324233 |   On    |
[ ]  | Bob    | White  | 111111  |   Off   |
[Delete] [Add]
 
After checking your API I know I can get selected rows using:
table.getSelection().forEach(row => console.log(table.getValue(row, 'id')))
but cannot hide that first user’s id column:
table td:nth-child(1) { display:none; }
neither remove that specific row from my already created tablet.
 
Any help will be really appreciated. Thank you so much in advance for your time and knowledge!

[yavordashew]

Hi Johnny,
Yes the functionality you want to achieved can be done relatively simply like in the code snippet below.
The following will remove the specific row based on the ‘id’.
In your JS file :
const table = document.getElementById(‘table’);
let userId = 0; // for example
table.selected=[userId] //selecting the userId row
document.getElementById(‘remove’).onclick = function () {
if (table.dataSource.length > 0) {
table.dataSource.removeAt(userId);
}
};
And in your HTML:
<div class=”option”><smart-button id=”remove”>Remove</smart-button></div>
<smart-table id=”table” selection> </smart-table>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[fimarapp]

Thank you so much Yavor, that was really helpful ^^
but the problem is that if I check “select all” and then click on “Delete” I get an error ->Uncaught Error: Invalid Item Index
[x]  | Name | Color   | Pixels  | Status |
[x] | Alice  | Yellow | 324233 |   On    |
[x]  | Bob    | White  | 111111  |   Off   |
…
[Delete] [Add]
function del() {
table.getSelection().forEach(row=> {
if (table.dataSource.length > 0) table.dataSource.removeAt(row)
})
table.selected = []
}
Thank u so much for your time in advance
Yavor Dashev

[yavordashew]

Hi Johnny Johnny,
We have prepared a complete solution for your specific case.
This is the code snippet of the solution with it you can delete selected rows(multiple or all selected):
document.getElementById(‘remove’).onclick = function () {
if (table.dataSource.length > 0) {
let selectedIds = table.getSelection().slice();
for(let i=0; i<selectedIds.length;i++){
const selectedId = selectedIds[i];
const rowIndex = Array.from(document.querySelectorAll(‘tr[row-id]’)).findIndex(tr => tr.getAttribute(‘row-id’) === selectedId + ”);
table.dataSource.removeAt(rowIndex)
}
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[fimarapp]

That solution is awesome Yavor, I didn’t know I have to copy the array and coudn’t find the removeAt method in the docs : (
Even it fits perfectly when the rowIndex is different from the row-id (what I’m looking for). My last question and I promise I don’t bother you anymore. How can I set my database id in each row-id.
[
{id: 234, name: ‘Alice’, color: ‘yellow’},
{id: 67, name: ‘Bob’, color: ‘white’},
]
I’m trying to do it with dataRowId. I want to remove it from my database as well using the real db id without painting that in an extra column.
Any idea will be so appreciated!
And thank u again for your great help and your fast responses if you are in https://opencollective.com/ I will be more than happy that make a donation, you save me hours of my time
Johnny

[yavordashew]

Hi Johnny Johnny,
If you are going to connect the ‘table’ component with a database I would suggest you to take a look at the following examples which also include CRUD operations:
https://www.htmlelements.com/demos/table/server-side-crud/
https://www.htmlelements.com/demos/table/remote-data/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[fimarapp]

Thank you so much, really helpful Yavor ^^ you are the best one, enjoy the rest of your day!

[yavordashew]

Thank you! Enjoy your day too and all the best from Smart UI Team!
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts