DataView

DataView is the page-level shell for product data. It does not replace DataGrid or DataTable — instead it bundles title, description, actions, search, filters, sort, view-mode switch, and content states (loading, error, empty) so admin pages share one rhythm.

#Default usage

<DataView title="API keys" search={<SearchInput placeholder="Search keys" />}>
  <p style={{ color: "var(--eui-foreground-muted)", margin: 0 }}>
    Real DataTable / DataGrid / list goes here.
  </p>
</DataView>

#Import

import { DataView } from "@froggdesign/enter-ui-react";

#Patterns

Pass modes and a controlled mode to drive a switcher between table, grid, and list. Set hideViewSwitch to suppress the switcher when only one mode applies.

<DataView
  modes={["table", "grid"]}
  mode={mode}
  onModeChange={setMode}
  toolbar={toolbar}
>
  {mode === "table" ? <DataTable {...} /> : <CardGrid {...} />}
</DataView>

#States

state toggles which slot is shown:

• idle (default) renders children.
• loading renders the loading slot.
• error renders the error slot.
• empty renders the empty slot.

#Accessibility

The view-mode switcher renders a labelled role="group" of toggle buttons with aria-pressed. The wrapper element defaults to <section>; pass as="div" when nesting inside a landmarked region.

#API

• state, mode, defaultMode, onModeChange, modes, hideViewSwitch.
• Header props: title, description, actions.
• Slot props: search, sort, toolbar, filters, loading, error, empty, children.
• modeSwitchLabel overrides the switcher's accessible label.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.