Data Table

Grid and sticky header

import { Badge, DataTable } from "@glinui/ui"
const columns = [
  { id: "project", header: "Project", accessor: "project" },

import { Badge, DataTable } from "@glinui/ui"


const columns = [
  { id: "project", header: "Project", accessor: "project" },
  {
    id: "status",
    header: "Status",
    accessor: "status",
    cell: ({ value }) => <Badge variant={value === "Active" ? "soft" : "outline"}>{String(value)}</Badge>
  },
  { id: "mrr", header: "MRR", accessor: "mrr", align: "right" }
]


const data = [
  { id: "p1", project: "Glin UI", status: "Active", mrr: 18400 },
  { id: "p2", project: "Glin Docs", status: "Monitoring", mrr: 7920 },
  { id: "p3", project: "Registry", status: "Active", mrr: 12340 },
  { id: "p4", project: "CLI", status: "Paused", mrr: 2310 }
]


export function Demo() {
  return (
    <DataTable
      columns={columns}
      data={data}
      selectable
      striped
      stickyHeader
      grid
      variant="soft"
      pageSize={3}
      getRowId={(row) => row.id}
    />
  )
}

Compact Board With Sticky Header

import { DataTable } from "@glinui/ui"

export function DataTableCompactDemo() {
  return (
    <DataTable
      columns={[
        { id: "account", header: "Account", accessor: "account", sortable: true },
        { id: "stage", header: "Stage", accessor: "stage", sortable: true },
        { id: "owner", header: "Owner", accessor: "owner", sortable: true },
        { id: "arr", header: "ARR", accessor: "arr", sortable: true, align: "right" },
      ]}
      data={[
        { id: "op-4012", account: "Northwind", stage: "Qualified", owner: "Maya", arr: "$42,000" },
        { id: "op-4015", account: "Stellar Forge", stage: "Proposal", owner: "Ilya", arr: "$18,500" },
        { id: "op-4018", account: "Blue Harbor", stage: "Won", owner: "Rae", arr: "$63,200" },
        { id: "op-4021", account: "Arcadia Labs", stage: "Discovery", owner: "Nico", arr: "$11,900" },
        { id: "op-4022", account: "Halcyon", stage: "Qualified", owner: "Leah", arr: "$27,600" },
      ]}
      getRowId={(row) => row.id}
      variant="matte"
      size="sm"
      stickyHeader
      containerClassName="max-h-72"
      pageSize={5}
      searchable
    />
  )
}

Selection + Column Controls

Enable `selectable` and hide low-priority columns with `hidden`/`canHide` to keep dense dashboards readable.

import { DataTable } from "@glinui/ui"

export function DataTableSelectionDemo() {
  return (
    <DataTable
      columns={[
        { id: "account", header: "Account", accessor: "account", sortable: true },
        { id: "stage", header: "Stage", accessor: "stage", sortable: true },
        { id: "owner", header: "Owner", accessor: "owner", sortable: true, hidden: true, canHide: true },
        { id: "arr", header: "ARR", accessor: "arr", sortable: true, align: "right" },
      ]}
      data={[
        { id: "op-4012", account: "Northwind", stage: "Qualified", owner: "Maya", arr: "$42,000" },
        { id: "op-4015", account: "Stellar Forge", stage: "Proposal", owner: "Ilya", arr: "$18,500" },
        { id: "op-4018", account: "Blue Harbor", stage: "Won", owner: "Rae", arr: "$63,200" },
        { id: "op-4021", account: "Arcadia Labs", stage: "Discovery", owner: "Nico", arr: "$11,900" },
      ]}
      selectable
      variant="outline"
      pageSize={4}
    />
  )
}

Server Data Pattern

For large datasets, fetch and paginate on the server, then pass only the current page to `DataTable`. Use this pattern when your API owns filtering, sorting, and pagination.

"use client"

import * as React from "react"
import { DataTable } from "@glinui/ui"

const columns = [
  { id: "account", header: "Account", accessor: "account", sortable: true },
  { id: "stage", header: "Stage", accessor: "stage", sortable: true },
  { id: "arr", header: "ARR", accessor: "arr", sortable: true, align: "right" }
]

export function DataTableServerPattern() {
  const [rows, setRows] = React.useState([])
  const [query, setQuery] = React.useState("")
  const [page, setPage] = React.useState(1)

  React.useEffect(() => {
    const params = new URLSearchParams({ q: query, page: String(page) })
    fetch(`/api/pipeline?${params.toString()}`)
      .then((res) => res.json())
      .then((payload) => setRows(payload.items))
  }, [query, page])

  return (
    <DataTable
      columns={columns}
      data={rows}
      searchable={false}
      pageSize={20}
      variant="glass"
      emptyMessage="No matching records."
    />
  )
}

Keyboard Interactions

ARIA Attributes

• `aria-label` for search and selection controls
• `role="checkbox"` for selectable rows
• Native table semantics from the base table primitive

Affected properties