co-data-table

This content is not available in your language yet.

Demo

Ver código

<co-data-table></co-data-table>

API

Props

Prop	Atributo	Tipo	Default	Descripción
`columns`	`columns`	`CoDataTableColumn[] \| string`	`'[]'`	Column definitions (JSON string or array)
`emptyActionIcon`	`empty-action-icon`	`string \| undefined`	`—`	Optional left icon (Phosphor name) for the prop-driven empty-action button.
`emptyActionLabel`	`empty-action-label`	`string \| undefined`	`—`	Empty-state action button, rendered BY the component (not via slot). Prefer this over the `empty-action` slot: a non-shadow component relocates slotted light-DOM nodes, so projecting togglable framework content (e.g. a Vue `v-if` button) corrupts that framework's virtual DOM. Leave empty to fall back to the `empty-action` slot.
`emptyActionVariant`	`empty-action-variant`	`"danger" \| "ghost" \| "primary" \| "secondary" \| "stroke" \| "success"`	`'stroke'`	Variant for the prop-driven empty-action button.
`emptyIcon`	`empty-icon`	`string`	`'magnifying-glass'`	Empty state icon (Phosphor icon name).
`emptyMessage`	`empty-message`	`string`	`'No records found'`	Empty state secondary message (description).
`emptyTitle`	`empty-title`	`string`	`''`	Empty state title (bold heading). Optional — falls back to just the message.
`filteredFields`	`filtered-fields`	`string \| string[]`	`'[]'`	Fields with an active column filter (funnel filled + always visible). JSON string or array.
`indirectFilteredFields`	`indirect-filtered-fields`	`string \| string[]`	`'[]'`	Fields filtered by OTHER filter layers (funnel dimmed hint). JSON string or array.
`loading`	`loading`	`boolean`	`false`	Show loading skeleton
`resizable`	`resizable`	`boolean`	`true`	Enable column resizing
`rowKey`	`row-key`	`string`	`'_id'`	Field used as unique row identifier
`rows`	`rows`	`any[] \| string`	`'[]'`	Row data (JSON string or array)
`selectable`	`selectable`	`boolean`	`false`	Enable row selection with checkboxes
`selectedKeys`	`selected-keys`	`string \| string[]`	`'[]'`	Keys of currently selected rows (JSON string or array)
`skeletonRows`	`skeleton-rows`	`number`	`10`	Number of skeleton rows to display
`sortField`	`sort-field`	`string`	`''`	Current sort field
`sortOrder`	`sort-order`	`"" \| "asc" \| "desc"`	`''`	Current sort direction

Eventos

Evento	Detail	Bubbles	Cancelable	Descripción
`coColumnPin`	`{ field: string; }`	✓	✓	Emitted when a column pin (sticky) is requested
`coColumnResize`	`{ field: string; width: number; }`	✓	✓	Emitted when a column is resized
`coEmptyAction`	`void`	✓	✓	Fired when the prop-driven empty-action button (`emptyActionLabel`) is clicked.
`coHeaderFilter`	`{ field: string; rect: { top: number; left: number; bottom: number; right: number; width: number; height: number; }; }`	✓	✓	Emitted when a column's filter icon is clicked (rect = icon bounding box for anchoring).
`coRowClick`	`{ row: any; index: number; }`	✓	✓	Emitted when a row is clicked
`coRowDblClick`	`{ row: any; index: number; }`	✓	✓	Emitted when a row is double-clicked
`coRowSelect`	`{ key: string; selected: boolean; }`	✓	✓	Emitted when a row is selected/deselected
`coSelectAll`	`{ selected: boolean; }`	✓	✓	Emitted when select-all checkbox toggles
`coSort`	`{ field: string; order: "" \| "desc" \| "asc"; }`	✓	✓	Emitted when a column sort is requested

Slots

Slot	Descripción
`(default)`	Default slot for custom row content (advanced usage)

CSS Parts

Part	Descripción
`::part(empty)`

CSS Custom Properties

Este componente no expone CSS custom properties.