09 / NAVRENZA GUIDE

Tables, filters and CSV

Connect plain records to reusable search, sorting and export controls.

Native HTML table

Create an empty div with id=records and call this after core.js:

Navrenza.table(document.querySelector('#records'), {
  label: 'Records',
  rows: [{ id: '1', name: 'Example', amount: 120 }],
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'amount', label: 'Amount' }
  ]
});

The helper supplies filters, Clear filters, columns, sorting, pagination and CSV. The legacy Projects table keeps its simpler layout and session-only create flow.

Server-side data

These tables filter local arrays. Large datasets need API endpoints for pagination, search and sorting. Send page size and filter state explicitly and return total count plus stable IDs. Export only fields and records the current user is allowed to access.

Column values

Each row needs a stable unique id. The column render callback controls HTML presentation. Escape dynamic values. An optional value callback supplies a plain searchable/sortable/exportable value. Table helpers filter local arrays; server pagination needs a separate request/data flow.