Skip to content
Frauthy Brand
Frauthy index

Go anywhere.

0 resultsOpen full search →

    No exact contract found. Try a component family, product name, prop, or keyboard key.

    ↑↓ move↵ openesc close

    08 · Data & navigation

    alpha

    DataGrid

    An interactive, selectable grid with cell-level roving focus, RTL-aware navigation, disabled rows, and form submission.

    Since
    1.0.0-next.0
    Owner
    Brand Core
    Export
    PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED/DataGrid
    Release
    Documentation version
    Deterministic fixture · default state

    Component studio

    light · comfortable · LTR
    Recent decisions3 events
    1. allow user:ada → portal:docs
    2. deny user:lin → key:prod
    3. allow service:sync → schema:main
    §01

    Contract

    Semantics first

    Anatomy

    Uses a labelled table with grid, row, columnheader, and gridcell roles; one cell is tabbable and row selection is distinct from focus.

    Consumer classes, styles, and data attributes may extend the surface, but required roles, IDs, relationships, and handlers remain owned by the component.

    Keyboard

    • Tab enters at the current grid cell.
    • Arrow keys move by row and column; horizontal direction follows LTR/RTL.
    • Home/End move to row boundaries; Ctrl+Home/End move to grid boundaries.
    • Enter or Space toggles row selection when selectionMode permits.
    §02

    Public surface

    API & styling

    Props

    id
    Explicit IDs override stable generated IDs.
    class / style
    Consumer additions compose with required styles.
    ref
    Element or callback where focus control is expected.
    children
    Typed content; raw HTML strings are never rendered.

    Slots & events

    children
    Primary content slot.
    onChange
    Typed value plus a small reason object when state changes.
    native events
    Composed without overwriting required handlers.

    State attributes

    • data-fui-data-grid-wrap
    • data-fui-data-grid
    • data-selection-mode
    • data-fui-key
    • data-fui-cell
    • data-fui-selected
    • data-fui-disabled

    CSS tokens

    • --fui-data-grid-*
    • --fui-table-*
    • --fui-focus-color
    §03

    Consumption

    Solid, Vite & Astro

    Solid / VitePRIVATE_BETA_PACKAGE_COORDINATE_REDACTED/DataGrid
    import DataGrid from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED/DataGrid';

<DataGrid>Frauthy content</DataGrid>
    Astroisland
    ---
import DataGrid from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED/DataGrid';
---

<DataGrid client:visible>Frauthy content</DataGrid>
    §04

    Verification

    Evidence record

    Scheduled

    Automated

    Batch D grid tests cover dynamic rows/columns, controlled selection modes, disabled rows, two-axis/RTL movement, boundaries, reset, and hidden form values.

    Target
    Brand 1.0.0-next.0 matrix
    Last verified
    Pending integrated G2 run
    Required

    Assistive technology

    Pending VoiceOver/Safari and NVDA/Firefox grid navigation and row-selection verification; manual evidence blocks beta.

    Desktop
    VoiceOver/Safari · NVDA/Firefox
    Touch
    Not required for beta
    Open

    Known issues

    • Cell editing, range selection, sorting, column resizing, and virtualization are intentionally out of scope.
    • Large datasets must use a product composition with an explicit performance strategy.
    §05

    Editorial guidance

    Do / don’t

    Do

    Use only when users need cell navigation or row selection; provide terse headers and stable row/column keys.

    Don’t

    Do not replace a readable static Table with DataGrid merely for striping or density.

    Release activity

    DataGrid · Brand Core

    1 recorded change · 26 weeks
    1. 1.0.0-next.3

      Baseline public component contract.

    Version & provenance

    New in the v2 architecture

    There is no stable predecessor for this explicit compiled subpath. The v1 compatibility layer remains tested separately; visual and API diffs begin with the next prerelease.

    Current
    1.0.0-next.0
    Previous
    compatibility surface
    Deprecation
    none
    Replacement
    not applicable
    Next in Data & navigationTree