Get Started
Data & FeedbackUpdated May 3, 2026

DataTable

A small data table wrapper for simple product datasets.

#Default usage

Data tableColumns can map directly to object keys.
ComponentScopeStatus
DialogOverlayReady
DataTableDataPreview
AppShellLayoutReady

#Usage

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

export function Example() {
  return (
    <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" },
      ]}
    />
  );
}

#Patterns

Empty stateUse emptyContent for calm zero-result states.
Name

No records found

Try adjusting filters or create a new item.

#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.

Edit this page