Filter and Sort

A WireBootstrap DataTable contains methods that allow its data to be filtered.

Basic Filters

In the example below, the row containing the user pdougherty is pulled out of the data table. The first method at the end of the filter chain evaluates the filter and returns the first row that meets the filter's criteria.

let users = [
    { UserName: "jkratz", FullName: "Jamie Kratz", Active: true },
    { UserName: "pdougherty", FullName: "Pat Dougherty" Active: true },
    { UserName: "mchermela", FullName: "Mike Chermela", Active: false }
];

let userTable = new wire.data.DataTable(rows);

const pat = userTable.where().eq("UserName", "pdougherty").first();

In the example below, all user rows are pulled except for the one containing the user pdougherty. This is done using the ne method instead of the eq method used in the previous example. The rows method at the end of the filter chain evaluates the filter and returns all rows that meets the filter's criteria.

...

const users = userTable.where().ne("UserName", "pdougherty").rows();

Filters can be combined in a data table. The filter operations can also be broken at any point in the method chain to build conditional filters.

In the example below, users are filtered to those that are active and further filtered to jkratz but only if the variable jamieOnly is true.

...

userTable.where().eq("Actve", true);

if(jamieOnly)
   userTable.eq("UserName", "jkratz");
   
const users = userTable.rows();

Note, to clear any any previous filters, use the where method. This method starts a filter chain over again.

Custom Filters

Custom filters are supported on data tables using the filter function. Use this boolean method with a delegate to determine whether a given row should be included in the filter.

In the example below, the filter returns users that are active or not mchermela.

...

const users = userTable.where().filter((user) => {
    return user.Active || user.UserName != "mchermela";
}).rows();

Group By

Group by is implicit. Adding columns to a select automatically groups any aggregates by those columns.

The example below totals Sales by Product.

const sales = [
    { Product: "apples", Sales: 11 },
    { Product: "apples", Sales: 15 },
    { Product: "oranges", Sales: 44 }
];

const salesTable = new wire.data.DataTable(sales);

const salesAgg = salesTable.select("Product").sum("Sales").rows();

/*
  salesAgg - >

  [
    {Product: "apples", Sales: 26 }.
    {Product: "oranges", Sales: 44 } 
  ]

/*

Order By

Ordering and returning top N rows can be achieved as illustrated below.

The following example filters to active users and orders the rows by FullName.

...

const users = userTable.where().eq("Active", true)
    .orderBy("FullName")
    .rows();

Sorting using orderBy defaults to ascending order. To sort descending, set the second parameter to true.

...

const users = userTable.where().eq("Active", true)
    .orderBy("FullName", true)
    .rows();

To filter the top N rows, use the top method.

...

const users = userTable
    .top(2)
    .where().eq("Active", true)
    .orderBy("FullName")
    .rows();

For more on data table filters, visit the DataTables reference page.