DataTable

A data table component with sorting, selection, and pagination.

Installation

bash

npx @smicolon/fasla-ui@latest add data-table

Run init once per project before adding components. See Installation.

Preview

Name	Email	Role
Layla Haddad	[email protected]	Admin
Omar Khalil	[email protected]	Editor
Sara Nasser	[email protected]	Viewer

Pagination

Loading State

Name	Email	Role

Empty State

Name	Email	Role

No users found

Props

Prop	Type	Default	Description
`data`	`T[]`	—	Rows to display.
`columns`	`Column<T>[]`	—	Column definitions; each `align` is `start`, `center` or `end` of the reading direction.
`getRowKey`	`(row) => string \| number`	—	Unique key for each row.
`loading`	`boolean`	`false`	Shows the loading state.
`emptyState`	`ReactNode`	—	Shown when there are no rows.
`onRowClick`	`(row) => void`	—	Called when a row is clicked.
`selectedKey`	`string \| number`	—	Key of the selected row.
`stickyHeader`	`boolean`	`false`	Keeps the header visible on scroll.
`Pagination`	`{ page, totalPages, onPageChange, labels }`	—	Pages through rows; `labels` translates its text.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

"use client"

import { useState } from "react"
import { DataTable, type Column } from "@/components/blocks/data-table"

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

const users: User[] = [
  { id: 1, name: "Layla Haddad", email: "[email protected]", role: "Admin" },
  { id: 2, name: "Omar Khalil", email: "[email protected]", role: "Editor" },
  { id: 3, name: "Sara Nasser", email: "[email protected]", role: "Viewer" },
]

const columns: Column<User>[] = [
  { id: "name", header: "Name", cell: (row) => row.name },
  { id: "email", header: "Email", cell: (row) => row.email },
  { id: "role", header: "Role", cell: (row) => row.role },
]

export function UsersTable() {
  const [selected, setSelected] = useState<number>()

  return (
    <DataTable
      data={users}
      columns={columns}
      getRowKey={(row) => row.id}
      selectedKey={selected}
      onRowClick={(row) => setSelected(row.id)}
    />
  )
}