Rows

A WireBootstrap data table contains methods for maintaining the objects inside an array of data.  This array can accessed directly via the Rows property on a data table.
Add Rows
The newRow method on a data table will return an empty row with the same schema as the existing rows.  Each of the values will be null.
Below product and quantity values are set on a new row and inserted into the table using the insert method.
let table = new eb.data.DataTable([ 
    {product: "apples", order: "PRN001", quantity: 10},
    {product: "oranges", order: "PRN002", quantity: 15},
    {product: "apples", order: "PRN003", quantity: 20}    
]);
 
let row = table.newRow();
 
row["product"] = "pears";
row["quantity"] = 30;
 
table.insert(row);
The insert method on the data table can also take an array of rows and will by default add them to the end of the array of existing rows.  Passing true in as the second parameter will add them to the top of the array.
let rows = [];
​
...
 
table.insert(rows, true);
Update Rows
The example below updates the product column for all rows in the data table to jello using the update method.
...
​
table.update("product", "jello");
The following example uses custom logic via the calc function with update to increase all quantity rows by 20%.
... 
 
table.update("quantity").calc((row) => {
    return row["quantity"] * 1.2;
});
Delete Rows
The example below deletes all rows where product is equal to apples using the delete method.
...
​
table.delete().eq("product", "apples");
The example does the same thing using custom logic in the boolean calc function.
...
​
table.delete().calc((row) => {
    return row["product"] == "apple";
});
For more on maintaining rows in a data table, visit the DataTables reference page.
Last modified 1yr ago