diff --git a/packages/components/table/src/table.ts b/packages/components/table/src/table.ts
index e773f799..17538ca6 100644
--- a/packages/components/table/src/table.ts
+++ b/packages/components/table/src/table.ts
@@ -30,6 +30,7 @@ export interface PuikTableHeader {
align?: 'left' | 'center' | 'right'
width?: string
sortable?: boolean
+ preventExpand?: boolean
}
export const tableProps = buildProps({
diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
index 6f1ba93d..f2884a44 100644
--- a/packages/components/table/src/table.vue
+++ b/packages/components/table/src/table.vue
@@ -144,6 +144,10 @@
`puik-table__body__row__item puik-table__body__row__item--${
header.align ?? 'left'
}`,
+ {
+ 'puik-table__body__row__item--expand-row':
+ expandable && !header?.preventExpand,
+ },
{ 'puik-table__body__row__item--sticky': isSticky(colIndex) },
{
'puik-table__body__row__item--sticky-scroll':
@@ -162,6 +166,9 @@
ScrollBarPosition == PuikTableScrollBarPosistion.Right,
},
]"
+ @click="
+ expandable && !header?.preventExpand ? expandRow(rowIndex) : ''
+ "
>
diff --git a/packages/components/table/stories/table.stories.ts b/packages/components/table/stories/table.stories.ts
index 8dbf3bab..1783411e 100644
--- a/packages/components/table/stories/table.stories.ts
+++ b/packages/components/table/stories/table.stories.ts
@@ -53,22 +53,23 @@ export default {
width: string | undefined
align: 'left' | 'center' | 'right' | undefined
sortable: boolean | undefined
+ preventExpand: boolean | undefined
}
`,
},
},
},
- selectable: {
+ expandable: {
control: 'boolean',
- description: 'Makes rows selectable',
+ description: 'Makes rows expandable',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' },
},
},
- expandable: {
+ selectable: {
control: 'boolean',
- description: 'Makes rows expandable',
+ description: 'Makes rows selectable',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'false' },
@@ -241,6 +242,7 @@ const Template: StoryFn = (args: Args) => ({
{
value: 'actions',
size: 'sm',
+ preventExpand: true,
},
]
return { args, headers, items, selection }
@@ -656,6 +658,7 @@ export const Expandable: StoryObj = {
{
value: 'actions',
size: 'sm',
+ preventExpand: true,
},
]
@@ -688,10 +691,10 @@ export const Expandable: StoryObj = {
keyboard_arrow_down
-
lastname0 |
-
firstname0 |
-
40 |
-
lastname0.firstname0@email.com |
+
lastname0 |
+
firstname0 |
+
40 |
+
lastname0.firstname0@email.com |
|
-
lastname1 |
-
firstname1 |
-
40 |
-
lastname1.firstname1@email.com |
+
lastname1 |
+
firstname1 |
+
40 |
+
lastname1.firstname1@email.com |
|
-
lastname2 |
-
firstname2 |
-
40 |
-
lastname2.firstname2@email.com |
+
lastname2 |
+
firstname2 |
+
40 |
+
lastname2.firstname2@email.com |
|