DataTableForObservableQuery

Displays data from observable queries that automatically refresh when the underlying data changes.

Purpose

DataTableForObservableQuery displays data from observable queries that automatically update in real-time.

Key Features

• Automatic data updates
• Real-time synchronization
• Single row selection
• Global filtering
• Custom column templates
• Same API as DataTableForQuery

Basic Usage

import { DataTableForObservableQuery } from '@cratis/components/DataTables';
import { Column } from '@cratis/components/DataTables';
import { MyObservableQuery } from './queries';

function MyTable() {
    return (
        <DataTableForObservableQuery
            query={MyObservableQuery}
            emptyMessage="No data available"
            dataKey="id"
        >
            <Column field="name" header="Name" sortable />
            <Column field="lastUpdated" header="Last Updated" />
        </DataTableForObservableQuery>
    );
}

Props

Same as DataTableForQuery, but the query must extend IObservableQueryFor.

Required Props

• query: Observable query constructor (extends IObservableQueryFor)
• emptyMessage: Message when no data is found

Optional Props

• queryArguments: Optional arguments for the query
• dataKey: Unique identifier field
• selection: Currently selected row
• onSelectionChange: Callback when selection changes
• globalFilterFields: Fields searched on the loaded page
• globalSearchPlaceholder: Search-input placeholder. Falls back to the CratisComponentsProvider’s messages.dataTable.search, then 'Search…'
• globalSearchAriaLabel: Accessible search-input name; localize independently from the placeholder. Falls back to the provider’s messages.dataTable.searchAriaLabel, then 'Search table'
• selectionAriaLabel: Accessible name for a single-selection row control. Falls back to the provider’s messages.dataTable.selectRow, then 'Select row'
• defaultFilters: Initial filter configuration (a DataTableFilterMeta)
• clientFiltering: Deprecated compatibility prop; accepted but ignored because filtering is always scoped to the loaded page
• paginatorClassName / paginatorAriaLabels: styling and explicit localization overrides for the paginator; accessible names default from CratisComponentsProvider messages
• children: Column definitions

Filtered columns use the same filterLabels localization and filterElement custom-editor seams as DataTableForQuery. See Column Configuration. Filters are applied client-side to the currently loaded observable-query page, while pagination continues to use the server-reported totals.

The deprecated clientFiltering prop remains accepted only for source compatibility and does not change that scope. Complete-result filtering must be applied by the server before paging, with filter values passed in queryArguments; see Filtering scope and server pagination.

While the first observable result is still performing, an empty default data array renders a silent table body rather than emptyMessage. Once the query settles, a genuinely empty result renders the configured message normally.

Observable Behavior

The table automatically subscribes to the observable query and updates the display when:

• New items are added
• Existing items are modified
• Items are removed

This makes it ideal for real-time dashboards and live data monitoring.

Real-Time Dashboard Example

function LiveDashboard() {
    return (
        <DataTableForObservableQuery
            query={ActiveOrdersQuery}
            emptyMessage="No active orders"
            dataKey="id"
        >
            <Column
                field="orderNumber"
                header="Order #"
            />
            <Column
                field="status"
                header="Status"
                body={(row) => <StatusBadge status={row.status} />}
            />
            <Column
                field="lastUpdated"
                header="Updated"
                body={(row) => formatTimeAgo(row.lastUpdated)}
            />
        </DataTableForObservableQuery>
    );
}

With Selection

const [selectedOrder, setSelectedOrder] = useState(null);

<DataTableForObservableQuery
    query={OrdersQuery}
    selection={selectedOrder}
    onSelectionChange={(e) => setSelectedOrder(e.value)}
    emptyMessage="No orders"
>
    <Column field="orderNumber" header="Order #" />
    <Column field="customerName" header="Customer" />
    <Column field="status" header="Status" />
</DataTableForObservableQuery>

Performance Considerations

Observable queries continuously listen for updates. Consider:

1. Subscription cleanup: Handled automatically by the component
2. Update frequency: Design queries to minimize unnecessary updates
3. Data size: Observable queries work best with moderate-sized datasets
4. Network traffic: Updates are pushed, reducing polling overhead

Use Cases

Perfect for:

• Real-time dashboards
• Live monitoring systems
• Chat applications
• Notification feeds
• Collaborative editing tools
• IoT device status
• Stock tickers
• Order tracking systems

Integration

Integrates with:

• @cratis/arc/queries for observable query support
• @cratis/arc.react/queries for React observable hooks
• semantic Cratis data table

See Also

• Column Configuration - Customizing columns
• DataTableForQuery - Standard query alternative