xw-browse is a lightweight (ca. 26KB) list-control (read-only grid-control) for displaying
tabular lists (provided as XML-data). It allows (multi-) selection of rows, sorting, formatting
and more; xw-browse is especially suitable for XML-driven
"single-page applications", but can also be easily used in conventional websites (like this one).
The xw-browse serves the performant rendering of XML-data; it has
a special API and needs a small helper-plugin for initialization for this reason.
At runtime required are the libraries jQuery and jQuery UI . jquery UI-Themes are supported in header and footer,
the look can be widely controlled with CSS.
If xw-browse is initialized without resizing of browse and columns and without sortable columns,
jQuery UI is not needed.
Buttons can be placed right or top. The CSS-classes "sel1" and "sel1n" control
the enabled-status of the buttons, dependent on selection:
Class "sel1": only enabled, if exactly one row is selected. Class "sel1n": only enabled, if at least one row is selected.
Features and Restrictions
XML-data for column definitions and browse content is directly passed.
Sortable rows (one or two-tiered, the latter can be achieved by clicking the first
sort-arrow to lock the column-sorting and then double click the second column header).
Data types for columns allow correct sorting and formatting. With an own
formatting-function passed during initialization, cell content can be formatted almost
Optional: order of columns can be changed per drag and drop, columns and/or browse
can be configured as resizable.
Complete control on styling per CSS (header and footer can be influenced by
jQuery UI-Themes), also column widths are set with CSS.
Wide support for keydown-events for navigation and selection (arrow and other navigation keys,
also with Ctrl- and Shift-Key, Ctrl-A, etc.)
(jQuery UI-) buttons can be "connected" to make their enabled-status dependent to the browse
selection (controlled by CSS-class at button-element: always enabled, only enabled, if exactly
on row is selected or enabled, if at least one row is selected; also, the enabled-status can be
programmed per button by passing a function, which can decide the status depending on selected
The first button is defined as the "standard button"; if enabled, it will be "clicked", if
return-key is pressed or a row is being double clicked.
xw-browse is fast, because only the visible content of XML-data is actually rendered
("virtual scrolling"). However performance decreases with large count of rows,
especially, when rows are sorted.
xw-browse supports a minimalistic concept of business entities: if a datatype (like "customer") is provided at browse initialization and
one or more columns are defined as "key" in column-meta-infos, our XML-events
"entities-deleted" and "entity-updated" are getting evaluated by the browse for
contained suitable data rows (the xw-browse deletes rows or updates rows content).
Restriction: row height can be defined by CSS, but all rows must be defined with
Editing of cell content is not possible, xw-browse is a read-only grid-control.