[table] configurable columns

[nellicus]

Add configurable column visibility to Table component

This PR adds the ability for users to show/hide optional columns in the Table component, with preferences automatically persisted to storage.

New Features

• Column visibility toggle: Settings icon in the table header opens a popover to configure visible columns
• Mandatory columns: Mark columns as mandatory: true to prevent them from being hidden
• Persistent preferences: Column visibility choices are automatically saved and restored

New Props

TableHeaderType:

• id?: string - Unique identifier for the column (auto-generated if not provided)
• required?: boolean - If true, column cannot be hidden by the user
• selected?: boolean - alternative to required: if true, the non-required column will be rendered as optional and selected

Table:

• enableColumnVisibility?: boolean - Enables the column visibility feature (default: false)
• tableId?: string - Unique identifier for storing preferences (required when enableColumnVisibility is true)
• onLoadColumnVisibility?: (tableId: string) => Record<string, boolean> - Optional custom function to load preferences (defaults to localStorage)
• onSaveColumnVisibility?: (tableId: string, visibility: Record<string, boolean>) => void - Optional custom function to save preferences (defaults to localStorage)

Usage

<Table
  headers={[
    { id: "name", label: "Name", mandatory: true }, // Always visible
    { id: "email", label: "Email" },                // User can hide
    { id: "role", label: "Role" }                   // User can hide
  ]}
  rows={rows}
  enableColumnVisibility={true}
  tableId="users-table"
/>

By default, preferences are saved to localStorage with key click-ui-table-column-visibility-{tableId}. Optionally provide custom storage functions for alternative storage mechanisms (API, IndexedDB, sessionStorage, etc.).

Backward Compatibility

✅ Fully backward compatible - existing tables continue to work unchanged. The feature is opt-in via enableColumnVisibility prop.

click-ui-table-column-visibility.webm

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
click-ui	Ready	Preview	Comment	Oct 15, 2025 3:58pm