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