Collection Preferences

ProNew

The settings dialog of a data table: page size, density, wrap lines, striped rows, and column visibility with reordering, applied on confirm.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac/collection-preferences

It builds on the button, checkbox, dialog, label, radio-group, switch components, which the CLI installs for you.

Prop	Type	Default	Description
`value`	`CollectionPreferencesValue`	`-`	pageSize, wrapLines, stripedRows, density, columns.
`onConfirm`	`(value) => void`	`-`	Called with the draft on Confirm.
`columnOptions`	`{ id, label, alwaysVisible? }[]`	`-`	All columns.
`pageSizes`	`number[]`	`[10, 20, 50, 100]`	Page size choices.
`title`	`string`	`"Preferences"`	Dialog title.
`triggerLabel`	`string`	`"Preferences"`	Accessible name of the opening button.

Role: dialog.

A modal dialog with a title and description; focus returns to the trigger.
Nothing is applied until Confirm, so previewing never leaves a table half changed.
Columns reorder with real Move up and Move down buttons, so no drag is needed.

Guide and examples


pnpm dlx shadcn@latest add @tealmac/collection-preferences

It builds on the button, checkbox, dialog, label, radio-group, switch components, which the CLI installs for you.

Prop	Type	Default	Description
`value`	`CollectionPreferencesValue`	`-`	pageSize, wrapLines, stripedRows, density, columns.
`onConfirm`	`(value) => void`	`-`	Called with the draft on Confirm.
`columnOptions`	`{ id, label, alwaysVisible? }[]`	`-`	All columns.
`pageSizes`	`number[]`	`[10, 20, 50, 100]`	Page size choices.
`title`	`string`	`"Preferences"`	Dialog title.
`triggerLabel`	`string`	`"Preferences"`	Accessible name of the opening button.

Role: dialog.

A modal dialog with a title and description; focus returns to the trigger.
Nothing is applied until Confirm, so previewing never leaves a table half changed.
Columns reorder with real Move up and Move down buttons, so no drag is needed.