Skip to content
Nim UI

DataTable

The DataTable component provides a set of composable, semantic HTML table primitives for displaying structured data. Each sub-component maps to a native table element with consistent styling, hover states, and dark mode support.

Import

import {
  DataTable,
  DataTableHeader,
  DataTableBody,
  DataTableFooter,
  DataTableRow,
  DataTableHead,
  DataTableCell,
} from '@nim-ui/components';

Basic Usage

Basic Table

View Code 
<DataTable>
  <DataTableHeader>
    <DataTableRow>
      <DataTableHead>Name</DataTableHead>
      <DataTableHead>Email</DataTableHead>
      <DataTableHead>Role</DataTableHead>
    </DataTableRow>
  </DataTableHeader>
  <DataTableBody>
    <DataTableRow>
      <DataTableCell>Alice Johnson</DataTableCell>
      <DataTableCell>alice@example.com</DataTableCell>
      <DataTableCell>Admin</DataTableCell>
    </DataTableRow>
    <DataTableRow>
      <DataTableCell>Bob Smith</DataTableCell>
      <DataTableCell>bob@example.com</DataTableCell>
      <DataTableCell>Editor</DataTableCell>
    </DataTableRow>
    <DataTableRow>
      <DataTableCell>Carol Davis</DataTableCell>
      <DataTableCell>carol@example.com</DataTableCell>
      <DataTableCell>Viewer</DataTableCell>
    </DataTableRow>
  </DataTableBody>
</DataTable>

Use DataTableFooter to add summary rows such as totals or aggregates.

Table with Footer

View Code 
<DataTable>
  <DataTableHeader>
    <DataTableRow>
      <DataTableHead>Product</DataTableHead>
      <DataTableHead>Qty</DataTableHead>
      <DataTableHead>Price</DataTableHead>
    </DataTableRow>
  </DataTableHeader>
  <DataTableBody>
    <DataTableRow>
      <DataTableCell>Widget A</DataTableCell>
      <DataTableCell>3</DataTableCell>
      <DataTableCell>$30.00</DataTableCell>
    </DataTableRow>
    <DataTableRow>
      <DataTableCell>Widget B</DataTableCell>
      <DataTableCell>1</DataTableCell>
      <DataTableCell>$45.00</DataTableCell>
    </DataTableRow>
  </DataTableBody>
  <DataTableFooter>
    <DataTableRow>
      <DataTableCell>Total</DataTableCell>
      <DataTableCell>4</DataTableCell>
      <DataTableCell>$75.00</DataTableCell>
    </DataTableRow>
  </DataTableFooter>
</DataTable>

Props

DataTable

Name Type Default Description
className string - Additional CSS classes to apply to the table element
children * ReactNode - DataTableHeader, DataTableBody, and DataTableFooter components

DataTableHeader

Name Type Default Description
className string - Additional CSS classes for the thead element
children * ReactNode - DataTableRow components containing DataTableHead cells

DataTableBody

Name Type Default Description
className string - Additional CSS classes for the tbody element
children * ReactNode - DataTableRow components containing DataTableCell cells

DataTableFooter

Name Type Default Description
className string - Additional CSS classes for the tfoot element
children * ReactNode - DataTableRow components for footer content

DataTableRow

Name Type Default Description
className string - Additional CSS classes for the tr element
children * ReactNode - DataTableHead or DataTableCell components

DataTableHead

Name Type Default Description
className string - Additional CSS classes for the th element
children * ReactNode - Header cell content

DataTableCell

Name Type Default Description
className string - Additional CSS classes for the td element
children * ReactNode - Cell content

Usage Examples

Dynamic Data Rendering

interface User {
  id: string;
  name: string;
  email: string;
  role: string;
}


function UsersTable({ users }: { users: User[] }) {
  return (
    <DataTable>
      <DataTableHeader>
        <DataTableRow>
          <DataTableHead>Name</DataTableHead>
          <DataTableHead>Email</DataTableHead>
          <DataTableHead>Role</DataTableHead>
        </DataTableRow>
      </DataTableHeader>
      <DataTableBody>
        {users.map((user) => (
          <DataTableRow key={user.id}>
            <DataTableCell>{user.name}</DataTableCell>
            <DataTableCell>{user.email}</DataTableCell>
            <DataTableCell>{user.role}</DataTableCell>
          </DataTableRow>
        ))}
      </DataTableBody>
    </DataTable>
  );
}

Order Summary Table

function OrderSummary({ items, total }: { items: OrderItem[]; total: string }) {
  return (
    <DataTable>
      <DataTableHeader>
        <DataTableRow>
          <DataTableHead>Item</DataTableHead>
          <DataTableHead>Qty</DataTableHead>
          <DataTableHead>Price</DataTableHead>
        </DataTableRow>
      </DataTableHeader>
      <DataTableBody>
        {items.map((item) => (
          <DataTableRow key={item.id}>
            <DataTableCell>{item.name}</DataTableCell>
            <DataTableCell>{item.quantity}</DataTableCell>
            <DataTableCell>{item.price}</DataTableCell>
          </DataTableRow>
        ))}
      </DataTableBody>
      <DataTableFooter>
        <DataTableRow>
          <DataTableCell colSpan={2}>Total</DataTableCell>
          <DataTableCell>{total}</DataTableCell>
        </DataTableRow>
      </DataTableFooter>
    </DataTable>
  );
}
  • DataCard - Metric display card for KPIs
  • Badge - Status indicators for table cells
  • CartItem - Shopping cart line items