Skip to content
Paramanu v0.1.0-alpha.0

Data Table

Data Table extends the basic Table with toolbar, sorting headers, pagination, and row selection capabilities.

Basic Usage

Search
Name
Alice
Page 1
import { Datatable, DatatableToolbar, DatatableHeaderCell, DatatableRow, DatatableCell, DatatablePagination } from "@paramanu/data-display-react"


export default function App() {
return (
  <Datatable>
    <DatatableToolbar>Search</DatatableToolbar>
    <table>
      <thead>
        <DatatableRow>
          <DatatableHeaderCell sortable sortDirection="asc">Name</DatatableHeaderCell>
        </DatatableRow>
      </thead>
      <tbody>
        <DatatableRow><DatatableCell>Alice</DatatableCell></DatatableRow>
      </tbody>
    </table>
    <DatatablePagination>Page 1</DatatablePagination>
  </Datatable>
)
}
<div class="pm-datatable pm-datatable--simple pm-datatable--md">
<div class="pm-datatable__toolbar">Search</div>
<table class="pm-datatable__table">
  <thead>
    <tr class="pm-datatable__row">
      <th class="pm-datatable__header-cell">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="pm-datatable__row">
      <td class="pm-datatable__cell">Alice</td>
    </tr>
  </tbody>
</table>
<div class="pm-datatable__pagination">Page 1</div>
</div>