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, optional accessor (a row key or render function), optional cell(row), align, and sortable. cell takes precedence over accessor.
• data: array of row objects.
• empty: React content for the built-in empty-state title; defaults to “No records found”.
• loading: displays skeleton rows.
• getRowId(row, index): provides a stable row key.
• dense, sort, and onSortChange are supported. Sorting state is reported to the caller; sort the supplied data in application code.

#Styling

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