ACF UI

Demo Table

Add rows to the table dynamically.

Name	Actions
No rows added yet

Installation

CLI

npx shadcn@latest add "https://acfui.com/r/table-field"

pnpm dlx shadcn@latest add "https://acfui.com/r/table-field"

yarn dlx shadcn@latest add "https://acfui.com/r/table-field"

bun x shadcn@latest add "https://acfui.com/r/table-field"

Manual

Install the following dependencies:

npm install lucide-react class-variance-authority

pnpm add lucide-react class-variance-authority

yarn add lucide-react class-variance-authority

bun add lucide-react class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

import { TableField } from "@/components/ui/table-field"

<TableField
  value={data}
  onChange={setData}
/>

Examples

Basic

A basic editable table with dynamic columns and rows.

Demo Table

Add rows to the table dynamically.

Name	Actions
No rows added yet

Add a new column to the right

Editable values, with default rows. Only columns can be added dynamically.

Add Column Demo

Columns are predefined. Add rows with the new phone column.

Name	Email	Phone	Actions
No rows added yet

Add a new row to the bottom

Editable values, with default columns. Only rows can be added dynamically.

Add Row Demo

Add a new row to the bottom. Columns are fixed.

Name	Email	Actions
No rows added yet

Add both new rows and columns dynamically

Editable. Both rows and columns can be added/removed.

Dynamic Demo

Add rows dynamically with text and textarea columns.

Name	Description	Actions
No rows added yet

Data Structure

TableFieldData

interface TableFieldData {
  columns: TableFieldColumn[]
  rows: TableFieldRow[]
}

interface TableFieldColumn {
  id: string
  label: string
  type?: "text" | "number" | "date" | "boolean" | "select"
  options?: Array<{ value: string; label: string }>
  required?: boolean
  defaultValue?: any
}

interface TableFieldRow {
  id: string
  data: Record<string, any>
}

API Reference

TableField

Prop	Type	Default
`data?`	`any`	-
`setSelectedIndex?`	`((index: number) => void)`	-
`selectedIndex?`	`number`	-
`languages?`	`{ code: string; name: string; }[]`	-
`itemIndex?`	`number`	-
`errors?`	`Record<string, string>`	-
`setValue`	`(name: string, value: string) => void`	-
`max?`	`number`	-
`min?`	`number`	-
`columns?`	`TableFieldColumn[]`	-
`caption?`	`string`	-
`required?`	`boolean`	-
`value?`	`string`	-
`label`	`string`	-
`name`	`string`	-

TableFieldColumn

interface TableFieldColumn {
  id: string
  label: string
  type?: "text" | "number" | "date" | "boolean" | "select"
  options?: Array<{ value: string; label: string }>
  required?: boolean
  defaultValue?: any
}

TableFieldRow

interface TableFieldRow {
  id: string
  data: Record<string, any>
}

Accessibility

The TableField component follows accessibility best practices:

Keyboard Navigation - Full keyboard support for all interactions
Screen Reader Support - Proper ARIA labels and descriptions
Focus Management - Clear focus indicators and logical tab order
High Contrast - Supports high contrast mode
Reduced Motion - Respects prefers-reduced-motion settings

TableField

On this page