Tagged: , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #101330
    fimarapp
    Member
    Up
    0
    Down

    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!

    #101331
    yavordashew
    Member
    Up
    0
    Down

    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/

    #101336
    fimarapp
    Member
    Up
    0
    Down

    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

    #101342
    yavordashew
    Member
    Up
    0
    Down

    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/

    #101345
    fimarapp
    Member
    Up
    0
    Down

    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

    #101350
    yavordashew
    Member
    Up
    0
    Down

    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/

    #101351
    fimarapp
    Member
    Up
    0
    Down

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

    #101352
    yavordashew
    Member
    Up
    0
    Down

    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/

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.