WireBootstrap
HomeDocsBuySupport
  • Introduction
  • Overview
  • Getting Started
  • Installation
  • Connecting to Data
    • Data Connectors
      • SQL Data
      • Custom Web Services
      • Local Data
      • Other Sources
    • Data Sources
    • Discovery
    • Building a Data Connector
  • Working With Queries
    • Select Queries
      • Query Extensions
    • Stored Procedures
    • Custom Web Services
    • Executing Queries
    • ORM
  • Writing Data
  • Updates
  • Deletes
  • Working with DataTables
    • Introduction
    • Filter and Sort
    • Select and Calculate
    • Joins
    • Rows
    • Columns
  • Working with DataSets
  • Introduction
  • Executing Queries
  • Transforms
  • Writing Data
  • Data Events
  • Working with Components
    • Introduction
    • Encapsulation
    • Configuration
      • Data
      • Events
      • Observables
      • Validation
      • Display
      • Vendor
      • Custom
    • Component
    • Web Frameworks
    • Building a Component
      • Hello World
      • Data Events
      • DataSets
  • Working With Data Events
    • Introduction
    • Event Basics
    • Event Data
    • Event Actions
  • Working with Themes
    • Introduction
    • Sample Data
    • Libraries
    • Pages
    • Building a Theme Project
  • Utilities
    • Formatting
    • Expressions
    • Collections
    • Spinners
    • Copy and Merge
    • Validation
    • Loading Assets
    • Service Calls
    • Download Files
    • Browser Location
    • Types
    • Promise
  • Reference
    • wire
      • wire.Collection
      • wire.download
      • wire.validate
    • wire.data
      • wire.data.DataEvent
      • wire.data.DataModel
      • wire.data.DataPromise
      • wire.data.DataSet
      • wire.data.DataSource
      • wire.data.DataTable
        • Columns
        • Rows
      • wire.data.StoredProcedure
      • wire.data.TableQuery
    • wire.ui
      • wire.ui.Component
      • wire.ui.validate
Powered by GitBook
On this page
  • Add Rows
  • Update Rows
  • Delete Rows

Was this helpful?

  1. Working with DataTables

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 filter function with update to increase all quantity rows by 20%.

... 
 
table.update("quantity").filter((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 filter function.

...

table.delete().filter((row) => {
    return row["product"] == "apple";
});
PreviousJoinsNextColumns

Last updated 1 year ago

Was this helpful?

For more on maintaining rows in a data table, visit the reference page.

DataTables