omverse-ui for Enterprise

Overview

A list-report floorplan standardizes table-first workflows: search, filter, review, and export.

Keep row density and action density balanced so people can process many rows quickly without losing query or selection context.

Treat filter, sort, pagination, visible columns, and export scope as one durable report state that can be shared, restored, and audited.

Query, configure, and export a governed report

Live preview

Filter and sort records, change density and visible columns, select rows across the report, inspect export scope, and page through results.

GOVERNANCE REPORT

Access requests

Review policy-sensitive requests across every operational team.

Live snapshot

Access request governance report
Select all rows						Updated
Select row 1	Customer data exportREQ-2916	Privacy	Priya Shah	High	Policy check	34 min ago
Select row 2	Production access exceptionREQ-2918	Security	Maya Chen	High	In review	8 min ago
Select row 3	Retention policy exceptionREQ-2914	Legal	Asha Mehta	Medium	Open	2 hrs ago
Select row 4	Vendor renewal assessmentREQ-2917	Finance	Jon Bell	Medium	Open	21 min ago
Select row 5	Workspace role changeREQ-2915	Platform	Liam Garcia	Low	Approved	1 hr ago

Anatomy

Use each piece in this order to keep interpretation and automation consistent.

Search requestsStatusRisk

RequestOwnerStatus

12345

1
Filter header
Primary controls for scope and query intent.
2
Report toolbar
Exports, density, and display mode controls.
3
Data grid
Main content row rendering with row-level and bulk actions.
4
Pager
Pagination with summary and jump points.
5
Footer meta
Totals, generation details, and refresh state.

The ordering here is not visual-only; it reflects interaction priority and expected user cognition. Keep this order unless policy demands a specific domain exception.

When to use

Use this pattern when the user needs guided consistency, state, and reuse at scale.

When not to use

Avoid forcing this pattern where simpler, direct interactions are sufficient.

Avoid

Single item editors
Use detail floors for complex mutation flows.
Informational pages
Use cards and callouts for static content.
High-frequency events
Use streaming views for real-time logs.

Variants

A small number of variants helps teams choose correctly without adding complexity.

Analytic

Denser row model for internal operations.

Configurable

Column and filter customization.

Minimal

Reduced columns for quick triage.

States

States communicate readiness, risk, and expected user behavior.

State	Trigger	Visual response	Interaction
Initial	Page load	Filter placeholders and skeleton	Collect filters before rendering heavy rows.
Filtered	User applies query	Updated row subset and totals	Preserve selected rows when possible.
Empty result	Valid query returns no rows	Filter-aware recovery guidance inside the table region	Allow users to clear or revise criteria without leaving the report.
Partial failure	Rows or metadata cannot be resolved	Keep independent controls and identify the affected source	Offer retry without discarding the query.
Export ready	Export command	Export confirmation and filename preview	Offer download and audit trace IDs.

Behavior

Behavior should remain predictable across devices, permissions, and async edges.

Durable query state

Keep filter, sort, column, density, and page state deterministic and URL-compatible.

Governed export

Confirm scope, format, policy masking, and audit identity before file generation.

Selection memory

Keep selection state by immutable ID across pagination and explain when a query change clears it.

Accessibility

Keep interaction clarity high and ensure assistive technologies get the same meaning.

Key	Action
`Ctrl/CmdA`	Select all rows in page or active result set when supported.
`PageDown`	Move to next row set where paging is keyboard accessible.
`Ctrl/CmdE`	Trigger report export flow.

Ensure table headers are exposed and sortable semantics are clear.
Keep action buttons announced and grouped by row context.
Give horizontally scrollable table regions keyboard access on narrow screens.
Announce result totals, selection changes, export completion, and data errors.
Keep column order consistent between headers and every data row.

Content guidelines

Consistency is achieved by language standards, not by design only.

Row naming

Use entity-first naming for quick scanning.

ExampleREQ-1024 · Payout request

Totals

Place totals where users expect them.

ExampleShowing 15–30 of 248 items

Export language

Use explicit retention and scope language.

ExampleExport current filtered list

Examples

Reference implementation style, payloads, and practical behavior.

Compose a controlled report

Keep query state application-owned so the URL, request, saved view, and export share one contract.
Use stable row identifiers to preserve selection across server-side pages.
Generate visible columns from the same ordered definition used for persisted preferences.

AccessRequestReport.tsx

tsx

1import { DataTable, FilterBar, Pagination } from 'omverse-ui'
2 
3export function AccessRequestReport({ result, query, onQueryChange }) {
return (
  <main aria-labelledby="report-title">
    <h1 id="report-title">Access requests</h1>
    <FilterBar
      searchValue={query.search}
      onSearchChange={(search) => onQueryChange({ ...query, search, page: 1 })}
      filters={buildReportFilters(query, onQueryChange)}
      resultCount={result.total}
      onReset={() => onQueryChange(defaultQuery)}
    />
    <DataTable
      caption="Access request governance report"
      columns={visibleColumns}
      data={result.rows}
      getRowId={(row) => row.id}
      selectable
      selectedRowIds={query.selectedIds}
      onSelectionChange={(selectedIds) => onQueryChange({ ...query, selectedIds })}
    />
    <Pagination
      page={query.page}
      totalPages={result.totalPages}
      onPageChange={(page) => onQueryChange({ ...query, page })}
    />
  </main>
)
30}

Persist an auditable query contract

Store domain field names and sort directions instead of component-internal state.
Version visible-column and filter schemas before restoring older saved reports.
Record the exact query, policy mask, source timestamp, and requester in the export audit event.

report-query.json

json

1{
"schemaVersion": 2,
"filters": { "status": ["open", "in_review"], "risk": ["high"] },
"sort": { "field": "updatedAt", "direction": "desc" },
"columns": ["request", "team", "owner", "risk", "status"],
"page": 1,
"pageSize": 50,
"exportPolicy": "mask_identity_fields"
9}

Open linked component reference for implementation patterns

Props / API

Use these API entries as a baseline contract and validate them against your domain layer.

These names are implementation-oriented and should map to your local contracts.

Props

PropTypeDefaultDescription

rowsreadonly ReportRow[]requiredRows rendered in the main report body.

columnsreadonly ReportColumn[]requiredConfigurable columns and accessibility labels.

queryReportQueryrequiredControlled filter, sort, pagination, density, and visible-column state.

selectionreadonly Key[][]Selected immutable record IDs preserved across compatible pages.

exportEnabledbooleantrueFeature flag for export controls.

onExport(request: ExportRequest) => Promise<ExportResult>requiredPrepares a policy-masked export and returns its audit identity.

onPageChange(page: number) => voidrequiredPage navigation state update.

Overview

A list-report floorplan standardizes table-first workflows: search, filter, review, and export.

Keep row density and action density balanced so people can process many rows quickly without losing query or selection context.

Treat filter, sort, pagination, visible columns, and export scope as one durable report state that can be shared, restored, and audited.

Query, configure, and export a governed report

Live preview

Filter and sort records, change density and visible columns, select rows across the report, inspect export scope, and page through results.

GOVERNANCE REPORT

Access requests

Review policy-sensitive requests across every operational team.

Live snapshot

Access request governance report
Select all rows						Updated
Select row 1	Customer data exportREQ-2916	Privacy	Priya Shah	High	Policy check	34 min ago
Select row 2	Production access exceptionREQ-2918	Security	Maya Chen	High	In review	8 min ago
Select row 3	Retention policy exceptionREQ-2914	Legal	Asha Mehta	Medium	Open	2 hrs ago
Select row 4	Vendor renewal assessmentREQ-2917	Finance	Jon Bell	Medium	Open	21 min ago
Select row 5	Workspace role changeREQ-2915	Platform	Liam Garcia	Low	Approved	1 hr ago

Anatomy

Use each piece in this order to keep interpretation and automation consistent.

Search requestsStatusRisk

RequestOwnerStatus

12345

1
Filter header
Primary controls for scope and query intent.
2
Report toolbar
Exports, density, and display mode controls.
3
Data grid
Main content row rendering with row-level and bulk actions.
4
Pager
Pagination with summary and jump points.
5
Footer meta
Totals, generation details, and refresh state.

The ordering here is not visual-only; it reflects interaction priority and expected user cognition. Keep this order unless policy demands a specific domain exception.

When to use

Use this pattern when the user needs guided consistency, state, and reuse at scale.

When not to use

Avoid forcing this pattern where simpler, direct interactions are sufficient.

Avoid

Single item editors
Use detail floors for complex mutation flows.
Informational pages
Use cards and callouts for static content.
High-frequency events
Use streaming views for real-time logs.

Variants

A small number of variants helps teams choose correctly without adding complexity.

Analytic

Denser row model for internal operations.

Configurable

Column and filter customization.

Minimal

Reduced columns for quick triage.

States

States communicate readiness, risk, and expected user behavior.

State	Trigger	Visual response	Interaction
Initial	Page load	Filter placeholders and skeleton	Collect filters before rendering heavy rows.
Filtered	User applies query	Updated row subset and totals	Preserve selected rows when possible.
Empty result	Valid query returns no rows	Filter-aware recovery guidance inside the table region	Allow users to clear or revise criteria without leaving the report.
Partial failure	Rows or metadata cannot be resolved	Keep independent controls and identify the affected source	Offer retry without discarding the query.
Export ready	Export command	Export confirmation and filename preview	Offer download and audit trace IDs.

Behavior

Behavior should remain predictable across devices, permissions, and async edges.

Durable query state

Keep filter, sort, column, density, and page state deterministic and URL-compatible.

Governed export

Confirm scope, format, policy masking, and audit identity before file generation.

Selection memory

Keep selection state by immutable ID across pagination and explain when a query change clears it.

Accessibility

Keep interaction clarity high and ensure assistive technologies get the same meaning.

Key	Action
`Ctrl/CmdA`	Select all rows in page or active result set when supported.
`PageDown`	Move to next row set where paging is keyboard accessible.
`Ctrl/CmdE`	Trigger report export flow.

Ensure table headers are exposed and sortable semantics are clear.
Keep action buttons announced and grouped by row context.
Give horizontally scrollable table regions keyboard access on narrow screens.
Announce result totals, selection changes, export completion, and data errors.
Keep column order consistent between headers and every data row.

Content guidelines

Consistency is achieved by language standards, not by design only.

Row naming

Use entity-first naming for quick scanning.

ExampleREQ-1024 · Payout request

Totals

Place totals where users expect them.

ExampleShowing 15–30 of 248 items

Export language

Use explicit retention and scope language.

ExampleExport current filtered list

Examples

Reference implementation style, payloads, and practical behavior.

Compose a controlled report

Keep query state application-owned so the URL, request, saved view, and export share one contract.
Use stable row identifiers to preserve selection across server-side pages.
Generate visible columns from the same ordered definition used for persisted preferences.

AccessRequestReport.tsx

tsx

1import { DataTable, FilterBar, Pagination } from 'omverse-ui'
2 
3export function AccessRequestReport({ result, query, onQueryChange }) {
return (
  <main aria-labelledby="report-title">
    <h1 id="report-title">Access requests</h1>
    <FilterBar
      searchValue={query.search}
      onSearchChange={(search) => onQueryChange({ ...query, search, page: 1 })}
      filters={buildReportFilters(query, onQueryChange)}
      resultCount={result.total}
      onReset={() => onQueryChange(defaultQuery)}
    />
    <DataTable
      caption="Access request governance report"
      columns={visibleColumns}
      data={result.rows}
      getRowId={(row) => row.id}
      selectable
      selectedRowIds={query.selectedIds}
      onSelectionChange={(selectedIds) => onQueryChange({ ...query, selectedIds })}
    />
    <Pagination
      page={query.page}
      totalPages={result.totalPages}
      onPageChange={(page) => onQueryChange({ ...query, page })}
    />
  </main>
)
30}

Persist an auditable query contract

Store domain field names and sort directions instead of component-internal state.
Version visible-column and filter schemas before restoring older saved reports.
Record the exact query, policy mask, source timestamp, and requester in the export audit event.

report-query.json

json

1{
"schemaVersion": 2,
"filters": { "status": ["open", "in_review"], "risk": ["high"] },
"sort": { "field": "updatedAt", "direction": "desc" },
"columns": ["request", "team", "owner", "risk", "status"],
"page": 1,
"pageSize": 50,
"exportPolicy": "mask_identity_fields"
9}

Open linked component reference for implementation patterns

Props / API

Use these API entries as a baseline contract and validate them against your domain layer.

These names are implementation-oriented and should map to your local contracts.

Props

PropTypeDefaultDescription

rowsreadonly ReportRow[]requiredRows rendered in the main report body.

columnsreadonly ReportColumn[]requiredConfigurable columns and accessibility labels.

queryReportQueryrequiredControlled filter, sort, pagination, density, and visible-column state.

selectionreadonly Key[][]Selected immutable record IDs preserved across compatible pages.

exportEnabledbooleantrueFeature flag for export controls.

onExport(request: ExportRequest) => Promise<ExportResult>requiredPrepares a policy-masked export and returns its audit identity.

onPageChange(page: number) => voidrequiredPage navigation state update.

Overview

A list-report floorplan standardizes table-first workflows: search, filter, review, and export.

Keep row density and action density balanced so people can process many rows quickly without losing query or selection context.

Treat filter, sort, pagination, visible columns, and export scope as one durable report state that can be shared, restored, and audited.

Query, configure, and export a governed report

Live preview

Filter and sort records, change density and visible columns, select rows across the report, inspect export scope, and page through results.

GOVERNANCE REPORT

Access requests

Review policy-sensitive requests across every operational team.

Live snapshot

Access request governance report
Select all rows						Updated
Select row 1	Customer data exportREQ-2916	Privacy	Priya Shah	High	Policy check	34 min ago
Select row 2	Production access exceptionREQ-2918	Security	Maya Chen	High	In review	8 min ago
Select row 3	Retention policy exceptionREQ-2914	Legal	Asha Mehta	Medium	Open	2 hrs ago
Select row 4	Vendor renewal assessmentREQ-2917	Finance	Jon Bell	Medium	Open	21 min ago
Select row 5	Workspace role changeREQ-2915	Platform	Liam Garcia	Low	Approved	1 hr ago

Anatomy

Use each piece in this order to keep interpretation and automation consistent.

Search requestsStatusRisk

RequestOwnerStatus

12345

1
Filter header
Primary controls for scope and query intent.
2
Report toolbar
Exports, density, and display mode controls.
3
Data grid
Main content row rendering with row-level and bulk actions.
4
Pager
Pagination with summary and jump points.
5
Footer meta
Totals, generation details, and refresh state.

The ordering here is not visual-only; it reflects interaction priority and expected user cognition. Keep this order unless policy demands a specific domain exception.

When to use

Use this pattern when the user needs guided consistency, state, and reuse at scale.

When not to use

Avoid forcing this pattern where simpler, direct interactions are sufficient.

Avoid

Single item editors
Use detail floors for complex mutation flows.
Informational pages
Use cards and callouts for static content.
High-frequency events
Use streaming views for real-time logs.

Variants

A small number of variants helps teams choose correctly without adding complexity.

Analytic

Denser row model for internal operations.

Configurable

Column and filter customization.

Minimal

Reduced columns for quick triage.

States

States communicate readiness, risk, and expected user behavior.

State	Trigger	Visual response	Interaction
Initial	Page load	Filter placeholders and skeleton	Collect filters before rendering heavy rows.
Filtered	User applies query	Updated row subset and totals	Preserve selected rows when possible.
Empty result	Valid query returns no rows	Filter-aware recovery guidance inside the table region	Allow users to clear or revise criteria without leaving the report.
Partial failure	Rows or metadata cannot be resolved	Keep independent controls and identify the affected source	Offer retry without discarding the query.
Export ready	Export command	Export confirmation and filename preview	Offer download and audit trace IDs.

Behavior

Behavior should remain predictable across devices, permissions, and async edges.

Durable query state

Keep filter, sort, column, density, and page state deterministic and URL-compatible.

Governed export

Confirm scope, format, policy masking, and audit identity before file generation.

Selection memory

Keep selection state by immutable ID across pagination and explain when a query change clears it.

Accessibility

Keep interaction clarity high and ensure assistive technologies get the same meaning.

Key	Action
`Ctrl/CmdA`	Select all rows in page or active result set when supported.
`PageDown`	Move to next row set where paging is keyboard accessible.
`Ctrl/CmdE`	Trigger report export flow.

Ensure table headers are exposed and sortable semantics are clear.
Keep action buttons announced and grouped by row context.
Give horizontally scrollable table regions keyboard access on narrow screens.
Announce result totals, selection changes, export completion, and data errors.
Keep column order consistent between headers and every data row.

Content guidelines

Consistency is achieved by language standards, not by design only.

Row naming

Use entity-first naming for quick scanning.

ExampleREQ-1024 · Payout request

Totals

Place totals where users expect them.

ExampleShowing 15–30 of 248 items

Export language

Use explicit retention and scope language.

ExampleExport current filtered list

Examples

Reference implementation style, payloads, and practical behavior.

Compose a controlled report

Keep query state application-owned so the URL, request, saved view, and export share one contract.
Use stable row identifiers to preserve selection across server-side pages.
Generate visible columns from the same ordered definition used for persisted preferences.

AccessRequestReport.tsx

tsx

1import { DataTable, FilterBar, Pagination } from 'omverse-ui'
2 
3export function AccessRequestReport({ result, query, onQueryChange }) {
return (
  <main aria-labelledby="report-title">
    <h1 id="report-title">Access requests</h1>
    <FilterBar
      searchValue={query.search}
      onSearchChange={(search) => onQueryChange({ ...query, search, page: 1 })}
      filters={buildReportFilters(query, onQueryChange)}
      resultCount={result.total}
      onReset={() => onQueryChange(defaultQuery)}
    />
    <DataTable
      caption="Access request governance report"
      columns={visibleColumns}
      data={result.rows}
      getRowId={(row) => row.id}
      selectable
      selectedRowIds={query.selectedIds}
      onSelectionChange={(selectedIds) => onQueryChange({ ...query, selectedIds })}
    />
    <Pagination
      page={query.page}
      totalPages={result.totalPages}
      onPageChange={(page) => onQueryChange({ ...query, page })}
    />
  </main>
)
30}

Persist an auditable query contract

Store domain field names and sort directions instead of component-internal state.
Version visible-column and filter schemas before restoring older saved reports.
Record the exact query, policy mask, source timestamp, and requester in the export audit event.

report-query.json

json

1{
"schemaVersion": 2,
"filters": { "status": ["open", "in_review"], "risk": ["high"] },
"sort": { "field": "updatedAt", "direction": "desc" },
"columns": ["request", "team", "owner", "risk", "status"],
"page": 1,
"pageSize": 50,
"exportPolicy": "mask_identity_fields"
9}

Open linked component reference for implementation patterns

Props / API

Use these API entries as a baseline contract and validate them against your domain layer.

These names are implementation-oriented and should map to your local contracts.

Props

PropTypeDefaultDescription

rowsreadonly ReportRow[]requiredRows rendered in the main report body.

columnsreadonly ReportColumn[]requiredConfigurable columns and accessibility labels.

queryReportQueryrequiredControlled filter, sort, pagination, density, and visible-column state.

selectionreadonly Key[][]Selected immutable record IDs preserved across compatible pages.

exportEnabledbooleantrueFeature flag for export controls.

onExport(request: ExportRequest) => Promise<ExportResult>requiredPrepares a policy-masked export and returns its audit identity.

onPageChange(page: number) => voidrequiredPage navigation state update.

List report

Recommended

Avoid

Analytic

Configurable

Minimal

Durable query state

Governed export

Selection memory

Row naming

Totals

Export language

Compose a controlled report

Persist an auditable query contract

List report

Recommended

Avoid

Analytic

Configurable

Minimal

Durable query state

Governed export

Selection memory

Row naming

Totals

Export language

Compose a controlled report

Persist an auditable query contract

List report

Recommended

Avoid

Analytic

Configurable

Minimal

Durable query state

Governed export

Selection memory

Row naming

Totals

Export language

Compose a controlled report

Persist an auditable query contract