Column types

Every column in <MonkeyTable> has a type that controls its editor, renderer, sort behavior, and copy format. The default type is Text.

<MonkeyTable
  columns={[
    { id: 'Name' },                            // Text (default)
    { id: 'Price',  type: 'Number' },
    { id: 'Active', type: 'Boolean' },
    { id: 'Due',    type: 'Date' },
    { id: 'Status', type: 'SingleSelect', options: {
      options: [
        { value: 'open',   label: 'Open',   color: '#dbeafe' },
        { value: 'closed', label: 'Closed', color: '#dcfce7' },
      ],
    }},
  ]}
  rows={rows}
/>

Text

Plain text. Can be single-line, multiline, rich-text (Markdown), or JSON.

{ id: 'Notes', type: 'Text', options: {
  multiline: true,
  richText:  true,        // Write/Preview toggle in the popup editor
  maxLength: 500,
  placeholder: 'Add a note…',
  popupWidth:     '50vw', // popup editor width
  popupMinHeight: '120px',
}}

Number

Numeric values with formatting.

{ id: 'Revenue', type: 'Number', options: {
  format:             'currency',
  currencyCode:       'USD',
  currencyDisplay:    'symbol',
  precision:          2,
  thousandsSeparator: true,
  min: 0,
}}

Boolean

A checkbox, toggle, yes/no text, or custom icon pair.

{ id: 'Shipped', type: 'Boolean', options: {
  displayAs:  'toggle',      // 'checkbox' | 'toggle' | 'yesno' | 'icon'
  trueLabel:  'Shipped',
  falseLabel: 'Pending',
}}

For icon mode, pass image URLs:

{ id: 'Verified', type: 'Boolean', options: {
  displayAs:  'icon',
  trueIcon:   '/icons/check.svg',
  falseIcon:  '/icons/x.svg',
  trueColor:  '#22c55e',
  falseColor: '#d1d5db',
}}

Date

Date, datetime, or time. ISO 8601 strings in storage; locale-aware display.

{ id: 'CreatedAt', type: 'Date', options: {
  format:     'datetime',   // 'date' | 'datetime' | 'time'
  use24Hour:  true,
  dateFormat: 'MM/DD/YYYY', // custom display format
}}

Control how dates display globally with the dateDisplayFormat prop on <MonkeyTable>:

• 'iso' — 2026-06-15 (default)
• 'locale' — June 15, 2026 (uses locale prop)
• 'relative' — 3 days ago

SingleSelect

A dropdown with named, colored options. Users can pick one value.

{ id: 'Priority', type: 'SingleSelect', options: {
  options: [
    { value: 'p0', label: 'Critical', color: '#fecaca' },
    { value: 'p1', label: 'High',     color: '#fed7aa' },
    { value: 'p2', label: 'Normal',   color: '#e2e8f0' },
  ],
}}

Each option is { value: string, label: string, color?: string }. The color is a CSS background color for the chip.

Row coloring integrates directly: set colorBy="Priority" on <MonkeyTable> to tint each row using the option's color.

MultiSelect

Same as SingleSelect but stores an array of values. Users can pick multiple options.

{ id: 'Tags', type: 'MultiSelect', options: {
  options: [
    { value: 'frontend', label: 'Frontend', color: '#dbeafe' },
    { value: 'backend',  label: 'Backend',  color: '#fce7f3' },
    { value: 'design',   label: 'Design',   color: '#f3e8ff' },
  ],
  maxSelections: 3,
}}

Email / URL / Phone

Rendered as clickable links (mailto:, external link, tel:).

{ id: 'Email',   type: 'Email' }
{ id: 'Website', type: 'URL' }
{ id: 'Mobile',  type: 'Phone' }

URL columns accept plain strings or { url: string, label?: string } objects for a labeled link.

Image

Thumbnail gallery with support for multiple images per cell. Supports drag-and-drop and clipboard paste.

{ id: 'Photos', type: 'Image', options: {
  maxImages:   5,
  maxFileSize: 5 * 1024 * 1024, // 5 MB
  displaySize: 'medium',         // 'small' | 'medium' | 'large'
}}

Use the onUpload prop on <MonkeyTable> to upload to your storage and return a permanent URL. Without it, images are stored as base64 data URLs.

Attachment

Generic file attachments. Stores an array of Attachment objects.

{ id: 'Files', type: 'Attachment', options: {
  maxFiles:     10,
  maxFileSize:  20 * 1024 * 1024,
  allowedTypes: ['application/pdf', 'image/*'],
}}

Audio / Video

Inline media players. Audio renders a playback bar; Video renders a player with YouTube/Vimeo smart embed support.

{ id: 'Recording', type: 'Audio' }
{ id: 'Demo',      type: 'Video' }

Color

A color swatch with a hex, RGB, or HSL value. Opens a color picker with presets.

{ id: 'BrandColor', type: 'Color', options: {
  format: 'hex',   // 'hex' | 'rgb' | 'hsl'
}}

Rating

Star, heart, or circle rating. Keyboard-navigable (arrow keys + Enter).

{ id: 'Stars', type: 'Rating', options: {
  max:  5,
  icon: 'star',   // 'star' | 'heart' | 'circle'
}}

Computed

Read-only. Derives its value from other columns using a registered function. The formula builder UI lets users pick a function and its input columns.

{ id: 'FullName', type: 'Computed', options: {
  functionName: 'concat',
  inputFieldIds: ['FirstName', 'LastName'],
  params: { separator: ' ' },
}}

27 functions are built in across math, text, date, and logic categories. Add custom ones via the functions prop — see Extending.

Column configuration options

Beyond type and options, every column accepts these layout and behavior fields: