diff --git a/docs/components/table.md b/docs/components/table.md index 52955b14..1bb576ea 100644 --- a/docs/components/table.md +++ b/docs/components/table.md @@ -364,7 +364,7 @@ const options = useTable({ Below are the complete list of options you may pass to the text type cell. ```ts -export interface TableCellNumber { +export interface TableCellText { // Type of the cell. Must be `text`. type: 'text' @@ -467,6 +467,61 @@ export type TableCellValueColor = | 'danger' ``` +### Actions cell + +Actions type cell displays any number of actions as a clickable button in the cell by defining `type: 'actions'`. Usually, place actions at the end of the column. + +```ts +import IconNotePencil from '@iconify-icons/ph/note-pencil' +import IconTrash from '@iconify-icons/ph/trash' + +const options = useTable({ + orders: ['actions'], + columns: { + age: { + cell: { + type: 'actions', + actions: [ + { icon: IconNotePencil, onClick: () => {} }, + { icon: IconTrash, onClick: () => {} } + ] + } + } + } +}) +``` + +Below are the complete list of options you may pass to the actions type cell. Each action is a `` instances. You may pass options such as `mode` or `label` to them. + +```ts +import { type IconifyIcon } from '@iconify/vue/dist/offline' + +interface TableCellActions { + // Type of the cell. Must be `actions`. + type: 'number' + + // Options for button stylings. Refer to `` docs + // for more details. Note that for actions, `type` is fixed + // to `text`, and `mode` defaults to `mute`. + mode?: ColorModes + icon?: IconifyIcon + iconMode?: ColorModes + label?: string + labelMode?: ColorModes + + // Callback function when the button is clicked. + onClick(value: any, record: any): void +} + +type ColorModes = + | 'neutral' + | 'mute' + | 'info' + | 'success' + | 'warning' + | 'danger' +``` + ### Summary row You may define `summary` option to display a summary row at the bottom of the table. It's useful to display information such as the total of each column. diff --git a/lib/components/STableCell.vue b/lib/components/STableCell.vue index 74af2144..fbff8c99 100644 --- a/lib/components/STableCell.vue +++ b/lib/components/STableCell.vue @@ -1,6 +1,7 @@ + + + + diff --git a/lib/components/STableHeader.vue b/lib/components/STableHeader.vue index c96398a3..e12d2d9d 100644 --- a/lib/components/STableHeader.vue +++ b/lib/components/STableHeader.vue @@ -1,6 +1,6 @@