Skip to content
Paramanu v0.1.0-alpha.0

Table

Table wraps standard HTML table elements with styling for variants, sizes, hoverable rows, bordered cells, and sticky headers.

Basic Usage

Name Role
Alice Engineer 
import { Table, TableContainer, TableHead, TableBody, TableRow, TableHeaderCell, TableCell } from "@paramanu/data-display-react"


export default function App() {
return (
  <TableContainer>
    <Table variant="simple">
      <TableHead>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Role</TableHeaderCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          <TableCell>Alice</TableCell>
          <TableCell>Engineer</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </TableContainer>
)
}
<div class="pm-table__container">
<table class="pm-table pm-table--simple pm-table--md pm-table--layout-auto">
  <thead class="pm-table__head">
    <tr class="pm-table__row">
      <th class="pm-table__header-cell">Name</th>
      <th class="pm-table__header-cell">Role</th>
    </tr>
  </thead>
  <tbody class="pm-table__body">
    <tr class="pm-table__row">
      <td class="pm-table__cell">Alice</td>
      <td class="pm-table__cell">Engineer</td>
    </tr>
  </tbody>
</table>
</div>