BiddingTable

Naming Convention

Auction = the complete sequence of bids for a deal (domain entity). Bid = an individual bid/call. Bidding = UI/process/activity (components, hooks, interactions).

Import from @workspace/bridge-react/bidding/table/*.

Demo

object

Overview

The BiddingTable module provides a compound component for rendering an auction sequence as a 4-column grid (one column per player). It supports display-only and interactive (comment editing) modes.

Display-only

import { BiddingTable } from '@workspace/bridge-react/bidding/table/bidding-table';
import { groupBidsIntoRows } from '@workspace/bridge-react/bidding/table/utils';

const bids = [
  { bid: '1NT', player: 'N', index: 0 },
  { bid: 'Pass', player: 'E', index: 1 },
  { bid: '3NT', player: 'S', index: 2 },
  { bid: 'Pass', player: 'W', index: 3 },
];

const rows = groupBidsIntoRows(bids, 'N');

<BiddingTable.Root dealer="N" vulnerability="ALL">
  <BiddingTable.Table>
    <BiddingTable.Header />
    <BiddingTable.Content>
      {rows.map((row, i) => (
        <BiddingTable.Row key={i}>
          {row.map((cell, j) =>
            cell ? (
              <BiddingTable.BidCell key={cell.index} bid={cell.bid} />
            ) : (
              <BiddingTable.EmptyCell key={j} />
            )
          )}
        </BiddingTable.Row>
      ))}
    </BiddingTable.Content>
  </BiddingTable.Table>
</BiddingTable.Root>

With Comment Editing

<BiddingTable.Root dealer="N">
  <BiddingTable.Table>
    <BiddingTable.Header />
    <BiddingTable.Content>
      {rows.map((row, i) => (
        <BiddingTable.Row key={i}>
          {row.map((cell, j) =>
            cell ? (
              <BiddingTable.CommentCell
                key={cell.index}
                bid={cell.bid}
                index={cell.index}
                comment={cell.comment}
                isAlerted={cell.isAlerted}
                onComment={handleComment}
                onAlert={handleAlert}
              />
            ) : (
              <BiddingTable.EmptyCell key={j} />
            )
          )}
        </BiddingTable.Row>
      ))}
    </BiddingTable.Content>
  </BiddingTable.Table>
</BiddingTable.Root>

Compound API

Component	Description
`BiddingTable.Root`	Context provider (no DOM), provides dealer, vulnerability, etc.
`BiddingTable.Table`	Styled container (`div` with border, rounded corners)
`BiddingTable.Header`	Player column headers with vulnerability styling
`BiddingTable.Content`	Content area wrapping rows
`BiddingTable.Row`	Grid row container
`BiddingTable.BidCell`	Display-only bid cell
`BiddingTable.CommentCell`	Interactive bid cell with comment popover
`BiddingTable.EmptyCell`	Empty cell placeholder

BiddingTable.Root

Props

Prop

Type

BiddingTable.Header

Displays player column headers with vulnerability-based styling. Headers are clickable to change the dealer (when onPlayerClick is provided on Root).

Props

Prop

Type

BiddingTable.BidCell

Display-only bid cell showing the bid as a styled button.

Props

Prop

Type

BiddingTable.CommentCell

Interactive bid cell with a comment popover and alert toggle.

Props

Prop

Type

Utilities

groupBidsIntoRows

Groups a flat bid sequence into rows of 4 cells (one per player), inserting null for empty cells.

import { groupBidsIntoRows } from '@workspace/bridge-react/bidding/table/utils';

const rows = groupBidsIntoRows(bids, dealer);
// Returns: (BiddingTableBidCell | null)[][]

getColumnOrder

Returns the player column order based on the dealer position.

import { getColumnOrder } from '@workspace/bridge-react/bidding/table/utils';

getColumnOrder('N');  // ['N', 'E', 'S', 'W']
getColumnOrder('E');  // ['E', 'S', 'W', 'N']

useBiddingTable

Hook to access the BiddingTable context from within child components.

import { useBiddingTable } from '@workspace/bridge-react/bidding/table/context';

function CustomCell() {
  const { dealer, vulnerability, columnOrder } = useBiddingTable();
}

Prop

Type

Domain Hooks

useAreAuctionsEnabled

Hook to determine whether auctions are enabled based on teaching configuration.

import { useAreAuctionsEnabled } from '@workspace/bridge-react/bidding/hooks/use-are-auctions-enabled';

const enabled = useAreAuctionsEnabled({ auctionMode, teachDummy });

Prop

Type

usePedagogyModeGroups

Hook that provides default pedagogy mode groups with translations for PedagogyModeSelect.

import { usePedagogyModeGroups } from '@workspace/bridge-react/bidding/hooks/use-pedagogy-mode-groups';

const groups = usePedagogyModeGroups();

usePedagogyModeWithRules

Hook that wraps a pedagogy mode onChange to also update the bridge rules variant automatically.

import { usePedagogyModeWithRules } from '@workspace/bridge-react/bidding/hooks/use-pedagogy-mode-with-rules';

const handleModeChange = usePedagogyModeWithRules(setPedagogyMode);

On this page