Question

How to implement a Select All, column filter in a Table Control ?

Answer 1

The UI Toolkit table gives you multi-select with a header checkbox and column filtering with a few options, and code for the rest:

• Select all: Selection mode = Multiple adds a checkbox column with a select all checkbox in the header on newer toolkits; on older ones add a button:

// Button "Select all" > On click
var t = ${Orders}, n = t.getData().length;
for (var i = 0; i < n; i++) t.selectIndex ? t.selectIndex(i) : t.setSelectedIndex(i, true);     // API name differs per toolkit level
// Button "Clear": t.clearSelection ? t.clearSelection() : t.setSelectedIndices([]);
// use: var chosen = t.getSelectedRecords();

• Column filter: the table's Show filter option gives one search box over all columns; for a per-column filter, put a Text control above the table (or in a header row of a layout) and filter the bound list, keeping the full list in a hidden variable:

// Text "StatusFilter" > On change
var all = ${AllOrdersHidden}.getData() || [];                       // full list bound to a hidden Text/Data control or kept in a variable
var status = (me.getData() || "").toLowerCase(), region = (${RegionFilter}.getData() || "").toLowerCase();
${Orders}.setData(all.filter(function (o) {
  return (!status || (o.status || "").toLowerCase().indexOf(status) >= 0) && (!region || (o.region || "").toLowerCase().indexOf(region) >= 0);
}));

Notes: filtering by replacing the bound list clears the selection - store selected ids before and re-select after when needed; server-side filtering (a Service Call with the filter values) is the right approach above a few thousand rows; newer toolkit versions offer per-column filter inputs in the header (Column filtering option) - check your level's documentation before coding. Sorting is built in (sortable columns).

References

• BPM UI Toolkit - Table control (selection, filtering, methods)