Table

Sortable data table with optional striped rows and bordered cells. Column definitions support a custom cell render function.

Import

tsx

import { Table } from '@velocityuikit/velocityui'

Preview

Sortable

Name	Role	Status	Joined
Alice Brown	Engineer	Active	2022-03
Bob Chen	Designer	Inactive	2021-07
Carol Davis	Manager	Active	2020-11
Dan Evans	Engineer	Active	2023-01

Striped and bordered

Name	Role	Status
Alice Brown	Engineer	Active
Bob Chen	Designer	Inactive
Carol Davis	Manager	Active
Dan Evans	Engineer	Active

Props

Prop	Type	Default	Description
columns	`{ key: string; header: string; sortable?: boolean; render?: (value, row, index) => ReactNode }[]`	—	Column definitions.
data	`T[]`	—	Array of row data objects.
sortKey	`string`	—	The column key currently sorted.
sortDir	`'asc' \| 'desc'`	—	The current sort direction.
onSort	`(key: string, dir: SortDirection) => void`	—	Callback fired when a sortable header is clicked.
striped	`boolean`	`false`	Alternates row background colors.
bordered	`boolean`	`false`	Adds borders to individual cells.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Controls cell padding and font size.

Examples

Basic sortable table

tsx

import { Table } from '@velocityuikit/velocityui'
import { useState } from 'react'

const data = [
  { name: 'Alice', role: 'Engineer', status: 'Active' },
  { name: 'Bob', role: 'Designer', status: 'Inactive' },
  { name: 'Carol', role: 'Manager', status: 'Active' },
]

export default function Example() {
  const [sortKey, setSortKey] = useState('')
  const [sortDir, setSortDir] = useState('asc')

  const sorted = [...data].sort((a, b) => {
    if (!sortKey) return 0
    const cmp = a[sortKey] < b[sortKey] ? -1 : a[sortKey] > b[sortKey] ? 1 : 0
    return sortDir === 'asc' ? cmp : -cmp
  })

  return (
    <Table
      columns={[
        { key: 'name', header: 'Name', sortable: true },
        { key: 'role', header: 'Role', sortable: true },
        { key: 'status', header: 'Status' },
      ]}
      data={sorted}
      sortKey={sortKey}
      sortDir={sortDir}
      onSort={(key, dir) => { setSortKey(key); setSortDir(dir) }}
    />
  )
}

Striped and bordered

tsx

import { Table } from '@velocityuikit/velocityui'

const data = [
  { id: 1, product: 'Widget A', price: '$12.00' },
  { id: 2, product: 'Widget B', price: '$8.50' },
  { id: 3, product: 'Widget C', price: '$24.99' },
]

export default function Example() {
  return (
    <Table
      columns={[
        { key: 'id', header: '#' },
        { key: 'product', header: 'Product' },
        { key: 'price', header: 'Price' },
      ]}
      data={data}
      striped
      bordered
    />
  )
}

Theming

Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:

css

/* Pick any named theme */
<body class="vui-theme-ocean">

/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">

/* Available themes */
/* default  midnight  ocean  tangerine */
/* construction  glass  soft  high-contrast  monochrome-red */

/* Available densities */
/* vui-density-compact  vui-density-comfortable  vui-density-spacious */