Table

Use a TypeScript application with a CSS-capable bundler. Install @blukavantui/community@1.1.0 from npm, or install the matching downloaded archive.

// In your test application’s package.json dependencies:
"@blukavantui/community": "1.1.0"

Run npm install in that test application to install the component package. Load the theme once and the component stylesheet shown in the adapter. Create an empty host in your view:

<div id="example"></div>

This reusable adapter follows the Button and TimePicker guide pattern. Its types come from the factory, so required options stay required. Attach the host first; mount once per view and retain the handle.

import { createTable, type TableOptions, type TableEvents } from '@blukavantui/community/table'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/table.css'

export function mount<Row extends object>(host: HTMLElement, options: TableOptions<Row>, events: TableEvents<Row> = {}) {
  const instance = createTable<Row>(host, options, events)
  return { instance, update: (patch: Partial<TableOptions<Row>>) => instance.update(patch), destroy: () => instance.destroy() }
}

Table sorts and pages the supplied rows. Your application owns requests, authorization, saving and failure feedback. Read getState() after updates: sorting resets the page and data changes can clamp it without a PageChanged callback.

Use a typed Row model and unique stable row identifiers. Formatting affects visible text; numeric sorting uses the original numeric values. The example loader returns sample data until you inject your API adapter.

Use: Columns, Rows, PageSize, SortChanged, getState

Use TableOptions<Row> and keyed columns. Format changes display text; sorting compares raw values. Table sorts/paginates the supplied array only. Sorting resets Page to 1; read getState() after sorting and data changes.

Use: RowKey, Actions, RowAction

Use a unique stable RowKey for accessible action labels and focus. Disabled can be a Boolean or predicate. RowAction gives your application the action key and row object; route or save using your own application logic.

Use: Loading, Rows, EmptyMessage

Set Loading around your own request. This example accepts an injected loader and ignores late results after disposal or a newer request. Show safe failure feedback, retain existing rows and allow retry. No built-in server paging, editing or persistence is implied.

Save this as table.ts, import its mount function and pass your attached host. It includes application state, interactive controls and a destroy handler. Pass your async loader as the second argument to exercise loading, retry and stale-response handling.

Download the editable TypeScript example ↓

import { createTable, type TableOptions } from '@blukavantui/community/table'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/table.css'

export interface Customer { Id: string; Name: string; Balance: number; Active: boolean }
const initialRows: Customer[] = [
  { Id: 'C-101', Name: 'Aster Studio', Balance: 1200, Active: true },
  { Id: 'C-102', Name: 'Birch Goods', Balance: 85, Active: false },
  { Id: 'C-103', Name: 'Cedar Works', Balance: 240, Active: true },
]
// Inject your own API adapter. The default loader only returns local sample data.
export function mount(host: HTMLElement, load: () => Promise<Customer[]> = async () => initialRows) {
  const root = document.createElement('section')
  const refresh = document.createElement('button')
  refresh.type = 'button'; refresh.textContent = 'Refresh customers'
  const empty = document.createElement('button')
  empty.type = 'button'; empty.textContent = 'Show empty state'
  const status = document.createElement('p'); status.setAttribute('role', 'status')
  const target = document.createElement('div')
  root.append(refresh, empty, status, target); host.append(root)
  const options: TableOptions<Customer> = {
    Caption: 'Customer balances', RowKey: 'Id', Rows: initialRows,
    Columns: [
      { Key: 'Name', Header: 'Customer', Sortable: true },
      { Key: 'Balance', Header: 'Balance', Sortable: true, Align: 'Right',
        Format: value => typeof value === 'number' ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value) : '' },
    ],
    Actions: [{ Key: 'open', Label: 'Open', Disabled: row => !row.Active }],
    PageSize: 2, Striped: true, EmptyMessage: 'No customers match this view.',
  }
  const instance = createTable<Customer>(target, options, {
    RowAction(key, row) { status.textContent = `${key}: ${row.Id} — ${row.Name}` },
    SortChanged() { renderState() }, PageChanged() { renderState() },
  })
  function renderState() {
    const state = instance.getState()
    status.textContent = `Page ${state.Page}; sort ${state.SortKey || 'input order'} ${state.SortDirection}`
  }
  let disposed = false, request = 0
  const listeners = new AbortController()
  async function reload() {
    const current = ++request
    instance.update({ Loading: true }); status.textContent = 'Loading customers…'
    try {
      const rows = await load()
      if (disposed || current !== request) return
      instance.update({ Rows: rows, Loading: false }); renderState()
    } catch {
      if (disposed || current !== request) return
      instance.update({ Loading: false }) // Retain previous rows and allow retry.
      status.textContent = 'Could not load customers. Try Refresh again.'
    }
  }
  refresh.addEventListener('click', () => { void reload() }, { signal: listeners.signal })
  empty.addEventListener('click', () => {
    ++request; instance.update({ Rows: [], Loading: false }); renderState()
  }, { signal: listeners.signal })
  renderState()
  return { instance, reload, destroy() {
    disposed = true; ++request; listeners.abort(); instance.destroy(); root.remove()
  } }
}

• Tab reaches sortable headings, row actions and paging buttons. Activate a focused button with Enter or Space.
• Check empty/loading/error states, disabled row actions, sorting and page clamping. Test a late response after the view is removed.
• Call the example handle’s destroy() when the view is removed. Abort your application listeners and requests; ignore any asynchronous result after disposal.
• Mount again and confirm there is one instance and one callback per interaction.

In Manage Dependencies, select Table from BluKavantUi_Community_Data, together with the structures and public actions used by its API. Refresh existing references before publishing your consumer. Inherit the shared Community theme in your application's theme.

ExampleScreen — Screen (your application)
└─ ExistingLayout — referenced Layout Block instance (child of ExampleScreen)
   └─ Content — existing slot on ExistingLayout
      └─ ComponentRegion — Container (child of that slot)
         └─ MainComponent — BluKavantUi_Community_Data.Table Block instance (child of ComponentRegion)

Reuse your screen’s existing Layout and its content slot; do not add a second layout. If your Layout names that slot differently, use its actual content slot. ComponentRegion is a new Container; MainComponent is a referenced Block instance.

Create local variables on ExampleScreen for the values your application changes. Use the exact native types below; lists are typed OutSystems Lists, while inputs ending in Json are Text containing the documented JSON. Bind each MainComponent.Input to its matching StateInput local. Constants can instead use the default directly. Fill required data from your Aggregate or Data Action before enabling interaction.

For each event you use, create the named screen Client Action below. Add its listed input parameters with the exact types. Select that action on MainComponent's event property, then enter each mapping explicitly. Event arguments and screen locals are different scopes.

Inputs ending in Json are Text containing JSON. Define the matching application Structure/List, then use JSON Serialize. The JSON below is payload content, not an OutSystems expression literal.

[
  {
    "Key": "Id",
    "Header": "ID"
  },
  {
    "Key": "Name",
    "Header": "Customer",
    "Sortable": true
  }
]

[
  {
    "Id": "C-101",
    "Name": "Northwind"
  },
  {
    "Id": "C-102",
    "Name": "Alpine"
  }
]

[
  {
    "Key": "open",
    "Label": "Open",
    "Disabled": false
  }
]

Publish the consumer, supply representative data, trigger each connected event and inspect the mapped arguments. Check a failed request, a retry and leaving/reopening the screen. The table describes the native contract; the Web recipes can contain capabilities with different native names or availability. Use these native names and the API tab as the authority for Service Studio.