DataTable

DataTable defines how EnterUI handles a small data table wrapper for simple product datasets, including default structure, accessible states, and token-driven styling.

#Default usage

<DataTable
  dense
  columns={[
    { id: "component", header: "Component", accessor: "component" },
    { id: "scope", header: "Scope", accessor: "scope" },
    { id: "status", header: "Status", accessor: "status" },
  ]}
  data={[
    { component: "Dialog", scope: "Overlay", status: "Ready" },
    { component: "DataTable", scope: "Data", status: "Preview" },
    { component: "AppShell", scope: "Layout", status: "Ready" },
  ]}
/>

#Import

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

#Patterns

#Accessibility

DataTable renders semantic table primitives. Sorting controls are buttons when a sortable column and sort handler are provided.

#API

• columns: column definitions with id, header, accessor, optional align, and optional sortable.
• data: array of row objects.
• dense, emptyContent, sort, and onSortChange are supported.

#Styling

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