diff --git a/demo/src/components/ComponentMenu.vue b/demo/src/components/ComponentMenu.vue index 5efafc9..ad7b7cb 100644 --- a/demo/src/components/ComponentMenu.vue +++ b/demo/src/components/ComponentMenu.vue @@ -26,6 +26,15 @@ NVE-Table med egne komponenter for celler + + + + NVE-Table med sticky første kolonne + diff --git a/demo/src/router/index.ts b/demo/src/router/index.ts index e5f3368..963eb9d 100644 --- a/demo/src/router/index.ts +++ b/demo/src/router/index.ts @@ -23,6 +23,11 @@ const router = createRouter({ name: "nve-table-custom-components", component: () => import("../views/NveTableDemoWithCustomComponents.vue"), }, + { + path: "/nve-table-sticky", + name: "nve-table-sticky", + component: () => import("../views/NveTableDemoStickyFirstColumn.vue"), + }, ], }); diff --git a/demo/src/views/NveTableDemoStickyFirstColumn.vue b/demo/src/views/NveTableDemoStickyFirstColumn.vue new file mode 100644 index 0000000..f7f588c --- /dev/null +++ b/demo/src/views/NveTableDemoStickyFirstColumn.vue @@ -0,0 +1,339 @@ + + + + + diff --git a/src/components/NveTable/NveTable.vue b/src/components/NveTable/NveTable.vue index e831a6b..6577481 100644 --- a/src/components/NveTable/NveTable.vue +++ b/src/components/NveTable/NveTable.vue @@ -30,6 +30,7 @@ const props = withDefaults(defineProps(), { rowClass: undefined, itemId: (_, index: number) => index, hideAllFilters: false, + stickyFirstColumn: false, }); function isAsyncTable( @@ -282,6 +283,7 @@ const getCellClass = ( cellborder: cellBorder, hoverrow: hoverRowEffect, hideunderline: hideUnderline, + stickyfirstcolumn: stickyFirstColumn, }, ]" :style="`--_numcolumns: ${ @@ -494,7 +496,7 @@ table { transition: background-color 0.3s; } & tr:hover { - background: var(--_row-hover-color); + --_row-color: var(--_row-hover-color); } } } @@ -720,4 +722,25 @@ table.hideunderline { } } } + +.stickyfirstcolumn { + max-width: 100%; + overflow: auto; + & th:first-child, + & td:first-child { + position: sticky; + + z-index: 2; + container-type: scroll-state; + inset-inline: 0; + /* legger på en skygge for å indikere at det er mer innhold til høyre */ + box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.2); + } + & td:first-child { + background: var(--_row-color); + } + & th:first-child { + background: var(--neutrals-background-canvas); + } +} diff --git a/src/components/NveTable/table.types.ts b/src/components/NveTable/table.types.ts index c126c1a..70bb2bd 100644 --- a/src/components/NveTable/table.types.ts +++ b/src/components/NveTable/table.types.ts @@ -46,6 +46,7 @@ export type TableProps = { tableBorder?: boolean /* (!) Dersom cellBorder er satt har tableBorder ingen effekt */; cellBorder?: boolean; hideUnderline?: boolean; + stickyFirstColumn?: boolean; }; export type SyncTableProps = TableProps & {