Collection Preferences Column Presets

ProNew

Named column presets (Essentials, Finance, Everything) as a radio group that sets the visible columns, with a Custom state when the set no longer matches any preset.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

children

Guide and examples

When to use it

Use this when the same table serves different jobs (support, finance, ops) and each job wants a different set of columns.

Do not use it when people need their own named saved views (persist full view definitions instead).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`columns`	`CollectionColumnOption[]`	required	-
`presets`	`ColumnPreset[]`	required	-
`children`	`(visible: string[]) => React.ReactNode`	required	-

Accessibility

Presets are a radiogroup; Custom appears only when the columns match none.
Preferences dialog keeps its own keyboard and focus handling.
The visible columns are always available as text through the children render prop.

Testing

The pattern ships with a Testing Library test (collection-preferences-column-presets.test.tsx) that covers the initial preset, applying one, Custom after editing and Custom after reordering.

Guide and examples

When to use it

Use this when the same table serves different jobs (support, finance, ops) and each job wants a different set of columns.

Do not use it when people need their own named saved views (persist full view definitions instead).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`columns`	`CollectionColumnOption[]`	required	-
`presets`	`ColumnPreset[]`	required	-
`children`	`(visible: string[]) => React.ReactNode`	required	-

Accessibility

Presets are a radiogroup; Custom appears only when the columns match none.
Preferences dialog keeps its own keyboard and focus handling.
The visible columns are always available as text through the children render prop.

Testing

The pattern ships with a Testing Library test (collection-preferences-column-presets.test.tsx) that covers the initial preset, applying one, Custom after editing and Custom after reordering.