Field Types

Fifteen type-safe, Airtable-style field types — display renderers, Intl formatters, header icons, and clipboard/CSV serialization, all built in.

Installation

A single build works for both Base UI and Radix shadcn projects — Table Fields renders plain HTML/shadcn primitives with no base-ui/Radix-specific imports of its own.

npx shadcn@latest add @kotsas-ui/table-fields

Usage

The typical entry point is defineColumns (installed as part of Data Table), which returns a typed col builder closed over your row type — each method only accepts a key whose value type matches the field.

Works with:Data Table

employee-table.tsx

import { useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table"
import { defineColumns } from "@/components/data-table"

type Employee = { id: string; name: string; email: string; salary: number; active: boolean }

const col = defineColumns<Employee>()

const columns = [
  col.text("name"),
  col.email("email"),
  col.currency("salary", { currency: "USD" }),
  col.checkbox("active"),
]

function EmployeeTable({ data }: { data: Employee[] }) {
  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })
  // ...render table.getRowModel().rows with flexRender, same as any TanStack table
}

Field catalogue

Every col.* method, rendered live. The first argument is always a key of your row type; the last is an options object — see "API Reference" below for the options every field shares.

Text

string

Single-line text.

Acme Robotics Inc

Globex Trading Ltd

Long text

string

Multi-line text.

Migrate the auth service to OAuth2 and retire the legacy session cookies.

URL

string

Renders as a clickable link.

ui.kotsas.com

github.com

Email

string

Renders as a mailto: link.

hello@kotsas.com

Phone

string

Renders as a tel: link, formatted via libphonenumber-js.

+1 415 555 2671

Numeric

Number

number

Intl-formatted number. Options: locale?, maximumFractionDigits?

1,234.5

Currency

number

Intl currency formatting. Options: currency? (default USD), locale?

$4,200.00

$118,500.00

Percent

number

Renders a fraction (0.42) as a percentage (42%).

42%

90%

Duration

number

Renders a duration in seconds/ms, e.g. "1h 30m". Options: unit?, maxUnits?

1h 30m

Choice

Single select

string

One value from a fixed option list, rendered as a colored chip.

High

Urgent

Multi select

string[]

Multiple values from a fixed option list, rendered as chips.

DesignUrgent

Backend

Checkbox

boolean

A checkbox cell.

True

False

Other

Rating

number

A star rating. Options: max? (default 5)

Date

Date | string

A formatted date, optionally with time. Options: withTime?, locale?

Jul 4, 2026

Aug 20, 2026

Button

—

An action column (no data accessor) that renders a button and calls onClick(row).

API Reference

Common options — every field method accepts these, in addition to its own type-specific options:

Prop	Type	Default	Description
header?	string	key name	Overrides the auto-generated column label.
editable?	boolean	table default	Per-column override of the table-level editable default.
enableSorting?	boolean	true	Click-to-sort on the column header.
enableHiding?	boolean	true	Visibility checkbox in the Columns menu.
enablePinning?	boolean	true	Freeze-left/right buttons in the Columns menu.
enableResizing?	boolean	true	Drag handle on the header's right edge.
size?	number	150	Starting width in px.

Display-only usage

Every field's underlying FieldType is exported directly too (numberField, textField, singleSelectField, …), each with a display renderer usable as a plain ColumnDef cell — no editing, no DataTable runtime required. Convenience *Cell functions (currencyCell, dateCell, …) wrap that pattern for one-line use inside a raw ColumnDef— this is how you'd use Table Fields inside Grouped Data Table today.