DataGrid

DataGrid extends DataTable with row selection, bulk selection, column visibility, sticky header, and dedicated loading/error states. Use DataTable for read-only or simple tabular data and DataGrid when the surface owns selection or bulk actions.

#Default usage

<DataGrid
  columns={[
    { id: "name", header: "Name", accessor: "name", sortable: true },
    { id: "size", header: "Size", accessor: "size", align: "end" }
  ]}
  data={[
    { id: "a", name: "Alpha", size: 12 },
    { id: "b", name: "Beta", size: 8 }
  ]}
/>

#Import

import { DataGrid, type DataGridColumn } from "@froggdesign/enter-ui-react";

#Accessibility

DataGrid renders a semantic <table> plus <th> headers, uses checkboxes with explicit aria-label for row and bulk selection, and exposes data-loading="true" while loading rows render. Pair with BulkActionBar so selection actions stay keyboard-reachable.

#API

• columns: ordered list of DataGridColumn entries with id, header, optional accessor, cell, align, sortable, width, and hidden.
• data: row array.
• selection + onSelectionChange: pass both to enable row + bulk selection.
• sort + onSortChange: pass both to enable sortable headers.
• loading: render skeleton rows. loadingRows controls count.
• error: render a row-spanning error slot.
• stickyHeader: pin the table header to the top of its scroll container.
• rowActions(row): render an end-aligned action cell per row.

#Styling

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