Skip to content
Paramanu v0.1.0-alpha.0

Data Grid

Data Grid uses CSS Grid with display: contents rows for high-performance data display with column headers, resizable columns, and virtualization support.

Basic Usage

Name
Role
Alice
Engineer
import { Datagrid, DatagridRow, DatagridCell, DatagridColumnHeader } from "@paramanu/data-display-react"


export default function App() {
return (
  <Datagrid style={{ gridTemplateColumns: "1fr 1fr" }}>
    <DatagridRow>
      <DatagridColumnHeader>Name</DatagridColumnHeader>
      <DatagridColumnHeader>Role</DatagridColumnHeader>
    </DatagridRow>
    <DatagridRow>
      <DatagridCell>Alice</DatagridCell>
      <DatagridCell>Engineer</DatagridCell>
    </DatagridRow>
  </Datagrid>
)
}
<div class="pm-datagrid pm-datagrid--md" role="grid" style="grid-template-columns: 1fr 1fr">
<div class="pm-datagrid__row" role="row">
  <div class="pm-datagrid__column-header" role="columnheader">Name</div>
  <div class="pm-datagrid__column-header" role="columnheader">Role</div>
</div>
<div class="pm-datagrid__row" role="row">
  <div class="pm-datagrid__cell" role="gridcell">Alice</div>
  <div class="pm-datagrid__cell" role="gridcell">Engineer</div>
</div>
</div>