diff options
Diffstat (limited to 'docs/guide')
-rw-r--r-- | docs/guide/components/table/index.md | 81 | ||||
-rw-r--r-- | docs/guide/components/table/table-row-actions.png | bin | 0 -> 101413 bytes |
2 files changed, 80 insertions, 1 deletions
diff --git a/docs/guide/components/table/index.md b/docs/guide/components/table/index.md index aca509c2..8398ace6 100644 --- a/docs/guide/components/table/index.md +++ b/docs/guide/components/table/index.md @@ -259,7 +259,86 @@ export default { </script> ``` +## Row actions + +To add table row actions, add a column for the action buttons in the table. Then in the array of table items, add a corresponding array of actions for each item. The array should have each desired row action with a `value` and `title` property. + +Import the `<table-row-action>` component. Provide the `value` and `title` props to the component and use the named `#icons` slot to include an icon. The component will emit a `@click-table-action` with the event value. + + + +```vue +<template> + <b-table + hover + responsive="md" + :items="itemsWithActions" + :fields="fields" + > + <template #cell(actions)="row"> + <table-row-action + v-for="(action, index) in row.item.actions" + :key="index" + :value="action.value" + :title="action.title" + @click-table-action="onTableRowAction($event, row.item)" + /> + <template #icon> + <icon-edit v-if="action.value === 'edit'"/> + <icon-delete v-if="action.value === 'delete'"/> + </template> + </table-row-action> + </template> + </b-table> +</template> +<script> +import IconDelete from '@carbon/icons-vue/es/trash-can/20'; +import IconEdit from '@carbon/icons-vue/es/edit/20'; +import TableRowAction from '@/components/Global/TableRowAction'; + +export default { + components: { IconDelete, IconEdit, TableRowAction }, + data() { + return { + items: [...], + fields: [ + ..., + { + key: 'actions', + label: '', + tdClass: 'text-right text-nowrap', + } + ], + } + }, + computed: { + itemsWithActions() { + return this.items.map((item) => { + return { + ...item, + actions: [ + { + value: 'edit', + title: this.$t('global.action.edit'), + }, + { + value: 'delete', + title: this.$t('global.action.delete'), + }, + ], + }; + }); + } + }, + methods: { + onTableRowAction(event, row) { + // row action callback + } + } +} +</script> +``` + <!-- ## Pagination --> -<!-- ## Row actions --> <!-- ## Batch actions --> <!-- ## Filter --> diff --git a/docs/guide/components/table/table-row-actions.png b/docs/guide/components/table/table-row-actions.png Binary files differnew file mode 100644 index 00000000..4574570e --- /dev/null +++ b/docs/guide/components/table/table-row-actions.png |