OrderbookTable

The OrderbookTable component renders bid and ask data in a tabular format with support for custom columns, styling, and depth visualization.

Basic Usage

import { OrderbookTable } from '@krono/kit'

export const TableBasic = () => {
  return <OrderbookTable.Root data={data} type="bids" maxTotal={1000} />
}

Anatomy

import { OrderbookTable } from '@krono/kit'

<OrderbookTable.Root>
  <OrderbookTable.Header />
  <OrderbookTable.Body>
    <OrderbookTable.Row>
      <OrderbookTable.Cell />
    </OrderbookTable.Row>
  </OrderbookTable.Body>
</OrderbookTable.Root>

// Or use individual components

<OrderbookTable.Column>
  <OrderbookTable.Header />
  <OrderbookTable.Body />
</OrderbookTable.Column>

Examples

Custom Column Configuration

Define how each column renders and formats data.

import { OrderbookTable, formatDigits, formatPrice } from '@krono/kit'

export const TableCustomColumns = () => {
  const columns = {
    price: {
      label: 'Price (USD)',
      children: ({ value }) => formatPrice(value.price),
      className: 'font-bold',
    },
    quantity: {
      label: 'Size',
      children: ({ value }) => formatDigits(value.quantity, { decimals: 4 }),
    },
    total: {
      label: 'Total',
      children: ({ value }) => formatDigits(value.total, { decimals: 2 }),
    },
  }

  return (
    <OrderbookTable.Root
      data={data}
      type="bids"
      columns={columns}
      maxTotal={maxTotal}
    />
  )
}

With Color Coding

Apply different styling for bids and asks.

import { OrderbookTable, type ColumnDef } from '@krono/kit'

export const TableColorCoded = () => {
  const columns: ColumnDef[] = [
    {
      id: 'price',
      header: 'Price',
      cell: ({ value }) => value.price.toFixed(2),
      cellClassName: ({ type }) =>
        type === 'bids'
          ? 'text-green-600 dark:text-green-500'
          : 'text-red-600 dark:text-red-500',
    },
    {
      id: 'quantity',
      header: 'Quantity',
      cell: ({ value }) => value.quantity.toFixed(8),
    },
  ]

  return (
    <OrderbookTable.Root
      columns={columns}
      data={data}
      type="bids"
      maxTotal={maxTotal}
    />
  )
}

Depth Visualization

Show cumulative depth with background bars.

import { OrderbookTable, defaultBarColorMap } from '@krono/kit'

export const TableWithDepth = () => {
  return (
    <OrderbookTable.Root
      data={data}
      type="asks"
      maxTotal={1000}
      rowProps={{
        barProps: {
          enabled: true,
          color: defaultBarColorMap.asks,
        },
      }}
    />
  )
}

Right-to-Left Layout

Display the table with right-to-left text direction.

import { OrderbookTable } from '@krono/kit'

export const TableRTL = () => {
  return (
    <OrderbookTable.Root
      data={data}
      type="bids"
      direction="rtl"
      maxTotal={maxTotal}
    />
  )
}

Without Header

Hide the table header for a cleaner look.

import { OrderbookTable } from '@krono/kit'

export const TableNoHeader = () => {
  return (
    <OrderbookTable.Root
      data={data}
      type="bids"
      showHeader={false}
      maxTotal={maxTotal}
    />
  )
}

Custom Row Rendering

Provide complete control over row rendering.

import { OrderbookTable } from '@krono/kit'

export const TableCustomRow = () => {
  return (
    <OrderbookTable.Root
      data={data}
      type="bids"
      maxTotal={maxTotal}
      renderRow={({ value, index, type }) => (
        <div className="flex justify-between p-2 hover:bg-accent">
          <span className="text-green-500">{value.price}</span>
          <span>{value.quantity}</span>
          <span className="text-muted-foreground">{value.total}</span>
        </div>
      )}
    />
  )
}

Skeleton Loading

Display a loading skeleton while data is being fetched.

import { OrderbookTable } from '@krono/kit'

export const TableSkeleton = () => {
  return <OrderbookTable.Skeleton rows={20} />
}

Building Custom Tables

Use individual table components for complete customization.

import { OrderbookTable } from '@krono/kit'

export const CustomTable = () => {
  return (
    <OrderbookTable.Column>
      <OrderbookTable.Header
        columns={{
          price: { label: 'Price' },
          quantity: { label: 'Size' },
          total: { label: 'Total' },
        }}
        type="bids"
      />
      <OrderbookTable.Body
        data={data}
        type="bids"
        maxTotal={maxTotal}
      />
    </OrderbookTable.Column>
  )
}

Props

Root

PriceLevel[]

required

Array of price level objects containing price, quantity, and total.

'bids' | 'asks'

The type of orderbook side to display.Default: 'bids'

'ltr' | 'rtl'

Text direction for the table layout.Default: 'ltr'

OrderbookTableColumns

Column configuration object defining how data is displayed.

Show columns properties

OrderbookColumnProps

Configuration for the price column.

OrderbookColumnProps

Configuration for the quantity column.

OrderbookColumnProps

Configuration for the total/cumulative column.

number

Maximum total value for calculating depth bar widths.

boolean

Whether to display the table header row.Default: true

(context) => ReactNode

Custom render function for table rows.

OrderbookTableRowProps

Props to pass to each row component.

Show rowProps properties

object

Configuration for depth visualization bars.

Show barProps properties

boolean

Enable depth bars. Default: true

string

CSS color for the depth bar.

number

Normalized depth value (0-1).

'ltr' | 'rtl'

Direction of depth bar growth.

OrderbookTableHeaderProps

Props to pass to the header component.

OrderbookTableBodyProps

Props to pass to the body component.

string

Additional CSS classes to apply.

Column

ReactNode

required

Table components to render within the column.

string

Additional CSS classes to apply.

OrderbookTableColumns

Column configuration for header labels.

'bids' | 'asks'

Orderbook side type.

'ltr' | 'rtl'

Text direction.

string

Additional CSS classes to apply.

Body

PriceLevel[]

required

Array of price levels to render.

'bids' | 'asks'

Orderbook side type.

number

Maximum total for depth calculations.

OrderbookTableColumns

Column configuration.

(context) => ReactNode

Custom row renderer.

OrderbookTableRowProps

Props to pass to each row.

'ltr' | 'rtl'

Text direction.

Row

ReactNode

required

Cell components to render.

OrderbookTableRowBarProps

Depth bar configuration.

'ltr' | 'rtl'

Text direction.

string

Additional CSS classes to apply.

Cell

ReactNode

required

Content to render in the cell.

string

Additional CSS classes to apply.

Skeleton

number

Number of skeleton rows to display.Default: 20

Formatting Utilities

The OrderbookTable includes utility functions for formatting numeric values.

formatPrice

Format numbers as USD currency.

import { formatPrice } from '@krono/kit'

formatPrice(1234.56) // "1,234.56"
formatPrice(0.99, 4) // "0.9900"

Parameters:

value: number - The number to format
decimals?: number - Number of decimal places (default: 2)

formatDigits

Format numbers with specific decimal precision.

import { formatDigits } from '@krono/kit'

formatDigits(0.00000123, { decimals: 8 }) // "0.00000123"
formatDigits(0.00000001, { decimals: 8, minVal: 1e-7 }) // "< 0.00000010"
formatDigits(1234.5678, { decimals: 2, useGrouping: true }) // "1,234.57"

Parameters:

value: number - The number to format
options: object - Formatting options
decimals?: number - Decimal places (default: 8)
minVal?: number - Threshold for ”< X” display (default: 1e-8)
useGrouping?: boolean - Use thousand separators (default: true)

defaultBarColorMap

Default colors for depth visualization bars.

import { defaultBarColorMap } from '@krono/kit'

const bidColor = defaultBarColorMap.bids // 'rgba(34, 197, 94, 0.2)'
const askColor = defaultBarColorMap.asks // 'rgba(239, 68, 68, 0.2)'

Notes

The table automatically calculates depth percentages based on the maxTotal prop. Ensure this value represents the maximum cumulative total for accurate visualization.

For optimal performance with large datasets, consider limiting the number of rendered rows using the responsive breakpoint feature in the Orderbook component.

When using custom renderRow, you’re responsible for implementing depth visualization and proper styling for bids vs asks.

Introduction

Configuration

Components

OrderbookTable

Basic Usage

Anatomy

Examples

Custom Column Configuration

With Color Coding

Depth Visualization

Right-to-Left Layout

Without Header

Custom Row Rendering

Skeleton Loading

Building Custom Tables

Props

Root

Column

Header

Body

Row

Cell

Skeleton

Formatting Utilities

formatPrice

formatDigits

defaultBarColorMap

Notes

​Basic Usage

​Anatomy

​Examples

​Custom Column Configuration

​With Color Coding

​Depth Visualization

​Right-to-Left Layout

​Without Header

​Custom Row Rendering

​Skeleton Loading

​Building Custom Tables

​Props

​Root

​Column

​Header

​Body

​Row

​Cell

​Skeleton

​Formatting Utilities

​formatPrice

​formatDigits

​defaultBarColorMap

​Notes

Basic Usage

Anatomy

Examples

Custom Column Configuration

With Color Coding

Depth Visualization

Right-to-Left Layout

Without Header

Custom Row Rendering

Skeleton Loading

Building Custom Tables

Props

Root

Column

Header

Body

Row

Cell

Skeleton

Formatting Utilities

formatPrice

formatDigits

defaultBarColorMap

Notes