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" />}>
  <Text tone="muted">
    Real DataTable / DataGrid / list goes here.
  </Text>
</DataView>

#Import

import { DataView, Text } 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.

import { Card, CardContent, DataTable, DataView, type DataViewMode, Grid, Text } from "@froggdesign/enter-ui-react";
import { useState } from "react";

export function APIKeyViews() {
  const [mode, setMode] = useState<DataViewMode>("table");
  const keys = [{ id: "production", name: "Production key", status: "Active" }];

  return (
    <DataView title="API keys" modes={["table", "grid"]} mode={mode} onModeChange={setMode}>
      {mode === "table" ? (
        <DataTable columns={[{ id: "name", header: "Name", accessor: "name" }, { id: "status", header: "Status", accessor: "status" }]} data={keys} getRowId={(key) => key.id} />
      ) : (
        <Grid min={220} gap={16}>
          {keys.map((key) => <Card key={key.id}><CardContent><Text>{key.name}</Text><Text tone="muted">{key.status}</Text></CardContent></Card>)}
        </Grid>
      )}
    </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.