@dbcdk/react-components 0.0.9 → 0.0.12

package/dist/components/table/Table.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { JSX, ReactNode } from 'react';
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
 import { Severity } from '../../constants/severity.types';
 import { PageChangeEvent } from '../../components/pagination/Pagination';
 import { ViewMode } from '../../hooks/useTableSettings';
@@ -19,13 +19,14 @@ export interface ColumnItem<T> {
     allowWrap?: boolean;
     emptyPlaceholder?: ReactNode;
     width?: number | string;
+    canHide?: boolean;
 }
 type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
 export type TableVariant = 'primary' | 'embedded';
-export interface TableProps<T extends Record<string, any>> {
+export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLTableElement>, 'onClick'> & {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
@@ -42,6 +43,10 @@ export interface TableProps<T extends Record<string, any>> {
     headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
     columnStyles?: Partial<Record<string, React.CSSProperties>>;
     headerBelowRow?: ReactNode;
+    /**
+     * NEW: optional toolbar area above the table (right now used for column selector)
+     */
+    toolbar?: ReactNode;
     striped?: boolean;
     fillViewport?: boolean;
     viewportBottomOffset?: number;
@@ -58,6 +63,6 @@ export interface TableProps<T extends Record<string, any>> {
     showFirstLast?: boolean;
     viewMode?: ViewMode;
     emptyConfig?: TableEmptyConfig;
-}
-export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, }: TableProps<T>): JSX.Element;
+} & Omit<HTMLAttributes<HTMLTableElement>, 'onClick'>;
+export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, selectionMode, onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, toolbar, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, paginationPlacement, totalItemsCount, onPageChange, loading, variant, size, getRowSeverity, showFirstLast, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }: TableProps<T>): JSX.Element;
 export {};

package/dist/components/table/Table.js

@@ -9,7 +9,7 @@ import { Pagination } from '../../components/pagination/Pagination';
 import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import { TableEmptyState } from './components/empty-state/EmptyState';
 import styles from './Table.module.css';
-export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, striped, fillViewport = false, viewportBottomOffset = 0, viewportMin = 120, viewportIncludeMarginTop = false, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, }) {
+export function Table({ data, columns, selectedRows, onRowSelect, selectionMode = 'single', onSortChange, onRowClick, sortById, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, toolbar, striped, fillViewport = false, viewportBottomOffset = 0, viewportMin = 120, viewportIncludeMarginTop = false, take, skip, paginationPlacement = 'bottom', totalItemsCount, onPageChange, loading, variant = 'primary', size = 'md', getRowSeverity, showFirstLast = false, allRowsSelected, onSelectAllRows, viewMode, emptyConfig, ...rest }) {
     const filteredColumns = useMemo(() => columns.filter(c => !c.hidden), [columns]);
     const handlePageChange = useCallback((e) => {
         onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(e);
@@ -31,7 +31,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
         min: viewportMin,
         includeMarginTop: viewportIncludeMarginTop,
     });
-    const tableEl = (_jsxs(_Fragment, { children: [_jsxs("table", { className: `${styles.table} ${styles[variant]} ${styles[size]}`, children: [_jsxs("thead", { children: [_jsxs("tr", { children: [selectedRows && onRowSelect && dataKey && (_jsx("th", { className: `${styles.fitContent} ${styles.th}`, children: selectionMode === 'multiple' ? (_jsx(Checkbox, { size: "sm", variant: "primary", checked: allRowsSelected, onChange: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null })), filteredColumns.map((column, index) => {
+    const tableEl = (_jsxs(_Fragment, { children: [toolbar ? _jsx("div", { style: { marginBottom: 12 }, children: toolbar }) : null, _jsxs("table", { ...rest, className: `${styles.table} ${styles[variant]} ${styles[size]} ${getRowSeverity ? styles.severityTable : ''}`, children: [_jsxs("thead", { children: [_jsxs("tr", { children: [selectedRows && onRowSelect && dataKey && (_jsx("th", { className: `${styles.fitContent} ${styles.th} $`, children: selectionMode === 'multiple' ? (_jsx(Checkbox, { size: "sm", variant: "primary", checked: allRowsSelected, onChange: checked => onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(checked) })) : null })), filteredColumns.map((column, index) => {
                                         const isActiveSort = sortById === column.id;
                                         const ariaSort = column.sortable && isActiveSort
                                             ? sortDirection === 'asc'
@@ -73,12 +73,9 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                                         e.stopPropagation();
                                         const isSelected = selectedRows.has(rowId);
                                         if (selectionMode === 'single') {
-                                            // In single mode, treat modifier-click as "select this row"
-                                            // (toggle if already selected)
                                             onRowSelect(rowId, !isSelected);
                                         }
                                         else {
-                                            // multiple mode: toggle selection
                                             onRowSelect(rowId, !isSelected);
                                         }
                                         return;
@@ -88,11 +85,11 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                                     ['--row-severity-color']: rowSeverity
                                         ? SeverityBgColor[rowSeverity]
                                         : undefined,
-                                }, className: `${onRowClick ? styles.clickableRow : ''} ${(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: "fitContent", onClick: e => e.stopPropagation(), children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(row[dataKey]), size: "sm", onChange: () => onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey])) }) })), filteredColumns.map(column => {
+                                }, className: `${onRowClick ? styles.clickableRow : ''} ${(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ''} ${rowSeverity ? styles.severity : ''}`, children: [selectedRows && onRowSelect && dataKey && (_jsx("td", { className: `fitContent ${styles.selectionCell}`, onClick: e => e.stopPropagation(), children: _jsx(Checkbox, { variant: "primary", checked: selectedRows.has(row[dataKey]), size: "sm", onChange: () => onRowSelect === null || onRowSelect === void 0 ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey])) }) })), filteredColumns.map(column => {
                                         var _a, _b;
                                         return (_jsx("td", { style: getColStyle(column.id, column.align, column.verticalAlign, column.width), className: `${styles.tableCell} ${column.fitContent ? 'fitContent' : ''} ${column.allowWrap ||
                                                 (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.has(row[dataKey])) ||
-                                                viewMode === 'comfortable'
+                                                viewMode === 'wrapped'
                                                 ? styles.allowWrap
                                                 : styles.nowrap} `, children: column.render
                                                 ? column.render(row) || ((_a = column.emptyPlaceholder) !== null && _a !== void 0 ? _a : '')
@@ -108,7 +105,7 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
                 gap: '20px',
                 flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
                 position: 'relative',
-            }, children: [_jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }), onPageChange && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast }))] }));
+            }, children: [_jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }), onPageChange && data.length > 0 && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange, showFirstLast: showFirstLast }))] }));
     }
     return (_jsxs("div", { style: {
             display: 'flex',
@@ -116,5 +113,5 @@ export function Table({ data, columns, selectedRows, onRowSelect, selectionMode
             gap: '20px',
             flexFlow: paginationPlacement === 'top' ? 'column-reverse' : 'column',
             position: 'relative',
-        }, children: [tableEl, onPageChange && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange }))] }));
+        }, children: [tableEl, onPageChange && data.length > 0 && (_jsx(Pagination, { itemsCount: totalItemsCount, take: take, skip: skip, onPageChange: handlePageChange }))] }));
 }

package/dist/components/table/Table.module.css

@@ -1,3 +1,7 @@
+/* =========================
+   Base table
+   ========================= */
+
 .table {
   inline-size: 100%;
   max-inline-size: 100%;
@@ -9,68 +13,64 @@
   background: var(--color-bg-surface);
 }
 
-.table.sm tr td {
-  padding-block: var(--spacing-xs);
-  padding-inline: var(--spacing-md);
-  font-size: var(--font-size-xs);
+.tableScroll {
+  position: relative;
+  overflow: auto;
+  max-inline-size: 100%;
+  -webkit-overflow-scrolling: touch;
 }
 
-.table.sm th {
-  padding-inline: var(--spacing-md);
-}
+/* =========================
+   Header
+   ========================= */
 
 .table thead {
   position: sticky;
   inset-block-start: 0;
-  background-color: var(--color-bg-surface);
   z-index: 10;
+  background-color: var(--color-bg-surface);
 }
 
 .table.primary thead {
   box-shadow: var(--shadow-md);
 }
 
-.clickableRow {
-  cursor: pointer;
-}
+.table .th {
+  position: relative;
 
-.allowWrap {
-  word-break: break-all !important;
-  overflow-wrap: anywhere !important;
-}
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
+  padding-right: var(--spacing-lg);
 
-.clickableRow:hover {
-  background-color: var(--color-bg-contextual);
-}
+  text-align: left;
+  vertical-align: middle;
 
-.selectedRow {
-  background-color: var(--color-bg-selected);
-}
-.selectedRow:hover {
-  background-color: var(--color-bg-selected-hover);
-}
+  background: inherit;
 
-.nowrap {
+  /* Typography */
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+
+  color: var(--color-fg-subtle);
+
+  /* Truncation */
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+
+  /* Width control */
+  min-width: 0;
+  max-width: var(--card-label-width);
 }
 
-.table .th {
-  color: var(--color-fg-muted);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  position: relative;
-  padding-block: var(--spacing-xs);
+/* Small variant: header padding */
+.table.sm .th {
   padding-inline: var(--spacing-md);
-  text-align: start;
-  background: inherit;
-  white-space: nowrap;
-  min-width: unset;
-  max-width: unset;
-  vertical-align: middle;
 }
 
+/* Sortable header behavior */
 .th.sortable {
   cursor: pointer;
   user-select: none;
@@ -78,10 +78,12 @@
     background-color var(--transition-fast) var(--ease-standard),
     color var(--transition-fast) var(--ease-standard);
 }
+
 .th.sortable:hover,
 th.sortable:hover {
   background-color: var(--color-bg-contextual);
 }
+
 .th.sortable:focus-visible,
 th.sortable:focus-visible {
   outline: none;
@@ -95,6 +97,7 @@ th.sortable:focus-visible {
 .sortIndicator {
   display: flex;
 }
+
 .sortIndicator svg {
   inline-size: var(--icon-size-sm);
   block-size: var(--icon-size-sm);
@@ -103,6 +106,7 @@ th.sortable:focus-visible {
 .th > .thInner {
   display: inline-block;
 }
+
 .th > .thInner > span {
   display: inline-flex;
   align-items: center;
@@ -110,53 +114,120 @@ th.sortable:focus-visible {
   inline-size: 100%;
 }
 
+/* =========================
+   Body + cells
+   ========================= */
+
 .tBody::before {
   content: '';
   height: var(--spacing-xs);
   display: block;
 }
 
-.tBody tr td,
-.tbody tr td {
+.tBody tr td {
   position: relative;
   padding-block: var(--spacing-xs);
   padding-inline: var(--spacing-sm);
+
   border-block-end: var(--border-width-thin) solid var(--color-border-default);
+
   text-align: start;
   vertical-align: top;
+
   overflow-wrap: break-word;
   word-break: normal;
 }
 
-.tBody tr.severity {
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  background-position: left top;
-  background-image: linear-gradient(to right, var(--row-severity-color) 0 3px, transparent 3px);
+/* Small variant applies to all cells by default */
+.table.sm .tBody tr td {
+  padding-block: var(--spacing-xxs);
+  padding-inline: var(--spacing-md);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-normal);
 }
 
-.striped tr:nth-child(even):not(.selectedRow):not(:hover) {
-  background-color: var(--color-bg-surface-subtle);
+/* =========================
+   Selection column
+   ========================= */
+
+/*
+  Default (no severity rails):
+  Remove ALL inline padding for selection/checkbox cells in both header + body.
+
+  We deliberately use padding-inline (shorthand) so it reliably beats other
+  padding-inline shorthands (like .table.sm .tBody tr td).
+*/
+
+/* Body selection cells (covers td with .selectionCell even if markup differs) */
+.tBody tr td.selectionCell,
+.table .tBody tr td.selectionCell,
+.table td.selectionCell {
+  padding-inline: var(--spacing-xxs);
 }
 
-.td--numeric {
-  text-align: end;
+/* Header selection cells:
+   - covers your .th class
+   - AND real <th> elements that might not have the .th class */
+.table .th.selectionCell,
+.table th.selectionCell,
+th.selectionCell {
+  padding-inline: var(--spacing-xxs);
 }
-.td--muted {
-  color: var(--color-fg-muted);
+
+/* Override the .table.sm .tBody tr td padding-inline (must be as-specific or more) */
+.table.sm .tBody tr td.selectionCell,
+.table.table.sm .tBody tr td.selectionCell {
+  padding-inline: var(--spacing-xxs);
 }
 
-.td .error {
-  color: var(--color-danger);
+/* If severity rails are enabled, reserve a left gutter (still no right padding) */
+.table.severityTable .tBody tr td.selectionCell,
+.table.severityTable td.selectionCell,
+.table.severityTable .th.selectionCell,
+.table.severityTable th.selectionCell {
+  padding-inline: var(--spacing-xxs);
+  padding-inline-start: 14px;
+}
+
+/* Ensure severityTable also wins in sm */
+.table.sm.severityTable .tBody tr td.selectionCell,
+.table.table.sm.severityTable .tBody tr td.selectionCell,
+.table.sm.severityTable .th.selectionCell,
+.table.table.sm.severityTable .th.selectionCell,
+.table.sm.severityTable th.selectionCell {
+  padding-inline: var(--spacing-xxs);
+  padding-inline-start: 14px;
+}
+
+/* =========================
+   Rows (interaction + states)
+   ========================= */
+
+.clickableRow {
+  cursor: pointer;
+}
+
+.clickableRow:hover {
+  background-color: var(--color-bg-contextual);
+}
+
+.selectedRow {
+  background-color: var(--color-bg-selected);
 }
+
+.selectedRow:hover {
+  background-color: var(--color-bg-selected-hover);
+}
+
 .tr--hover:hover {
   background-color: var(--color-bg-contextual);
 }
 
-.table .tbody tr:focus-within {
-  outline: none;
-  box-shadow: none;
+.striped tr:nth-child(even):not(.selectedRow):not(:hover) {
+  background-color: var(--color-bg-surface-subtle);
 }
+
+/* Focus ring */
 .table .tbody tr:focus-within {
   outline: none;
   box-shadow:
@@ -166,9 +237,59 @@ th.sortable:focus-visible {
     inset 0 -2px 0 var(--color-brand);
 }
 
-.tableScroll {
+/* =========================
+   Content utilities
+   ========================= */
+
+.nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.allowWrap {
+  word-break: break-all !important;
+  overflow-wrap: anywhere !important;
+}
+
+.td--numeric {
+  text-align: end;
+}
+
+.td--muted {
+  color: var(--color-fg-muted);
+}
+
+.td .error {
+  color: var(--color-danger);
+}
+
+/* =========================
+   Severity rail
+   ========================= */
+
+.tBody tr.severity td:first-child {
   position: relative;
-  overflow: auto;
-  max-inline-size: 100%;
-  -webkit-overflow-scrolling: touch;
+}
+
+/* Only render the rail when the table actually uses severity rails */
+.table.severityTable .tBody tr.severity td:first-child::before {
+  content: '';
+  position: absolute;
+
+  left: 4px;
+  top: 4px;
+  bottom: 4px;
+  width: 5px;
+
+  background-color: var(--row-severity-color);
+  border-radius: 3px;
+
+  z-index: 0;
+}
+
+/* keep checkbox/content above the rail */
+.table.severityTable .tBody tr.severity td:first-child > * {
+  position: relative;
+  z-index: 1;
 }

package/dist/components/table/components/empty-state/EmptyState.d.ts

@@ -8,7 +8,7 @@ export type TableEmptyConfig = {
     /**
      * Title + description text (defaults are your current Danish copy)
      */
-    title?: ReactNode;
+    title?: string;
     description?: ReactNode;
     /**
      * Optional custom actions area. If provided, it will be rendered first.

package/dist/components/table/components/empty-state/EmptyState.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowLeft, RefreshCw, SearchX } from 'lucide-react';
-import styles from './EmptyState.module.css';
-import { Button } from '../../../button/Button';
-import { Headline } from '../../../headline/Headline';
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '../../../../components/button/Button';
+import { StatePage } from '../../../../components/state-page/StatePage';
 const defaultEmptyConfig = {
     enabled: true,
-    title: (_jsx(Headline, { disableMargin: true, size: 3, children: "Hov, der er ingen data" })),
+    title: 'Ingen resultater',
     description: _jsx("span", { children: "Pr\u00F8v at \u00E6ndre dine filtre eller tilf\u00F8je data." }),
     showBack: true,
     showRefresh: true,
     backLabel: (_jsxs(_Fragment, { children: [_jsx(ArrowLeft, {}), "Tilbage"] })),
-    refreshLabel: (_jsxs(_Fragment, { children: [_jsx(RefreshCw, {}), "Indl\u00E6s igen"] })),
+    refreshLabel: _jsx(_Fragment, { children: "Indl\u00E6s igen" }),
     className: 'dbc-flex dbc-flex-column dbc-justify-center dbc-items-center dbc-flex-grow ',
 };
 export function TableEmptyState({ config }) {
@@ -23,5 +22,5 @@ export function TableEmptyState({ config }) {
     const showBack = merged.showBack && typeof merged.onBack === 'function';
     const showRefresh = merged.showRefresh && typeof merged.onRefresh === 'function';
     const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh;
-    return (_jsxs("div", { className: `${merged.className} ${styles.container}`, children: [_jsxs("span", { className: "dbc-flex dbc-flex-column dbc-gap-sm dbc-items-center", children: [_jsx(SearchX, { className: styles.icon }), merged.title, merged.description] }), hasAnyActions && (_jsxs("div", { className: "dbc-flex dbc-gap-sm", children: [merged.actions, showBack && (_jsx(Button, { onClick: merged.onBack, className: "dbc-mr-xxs", children: merged.backLabel })), showRefresh && _jsx(Button, { onClick: merged.onRefresh, children: merged.refreshLabel })] }))] }));
+    return (_jsx(StatePage, { type: "empty", header: merged.title, actions: _jsxs("div", { children: [hasAnyActions && (_jsxs("div", { className: "dbc-flex dbc-gap-sm", children: [showBack && (_jsx(Button, { type: "button", onClick: merged.onBack, children: merged.backLabel })), showRefresh && (_jsx(Button, { type: "button", onClick: merged.onRefresh, children: merged.refreshLabel }))] })), merged.actions] }), children: merged.description }));
 }

package/dist/components/table/components/table-settings/TableSettings.d.ts

@@ -1,8 +1,18 @@
-import type { JSX } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import type { JSX, ReactNode } from 'react';
 import { ViewMode } from '../../../../hooks/useTableSettings';
-interface TableSettingsProps {
+import { ButtonSize } from '../../../button/Button';
+interface TableSettingsProps<T extends Record<string, any>> {
     handleChangeViewMode: (mode: ViewMode) => void;
     viewMode: ViewMode;
+    columns?: ColumnDef<T>[];
+    visibleColumnIds?: string[];
+    onVisibleColumnIdsChange?: (nextVisibleIds: string[]) => void;
+    columnsLabel?: string;
+    allPresetLabel?: string;
+    standardPresetLabel?: string;
+    buttonSize?: ButtonSize;
+    additionalSettings?: (close?: () => void) => ReactNode;
 }
-export declare function TableSettings({ viewMode, handleChangeViewMode }: TableSettingsProps): JSX.Element;
+export declare function TableSettings<T extends Record<string, any>>({ viewMode, handleChangeViewMode, columns, visibleColumnIds, onVisibleColumnIdsChange, columnsLabel, allPresetLabel, standardPresetLabel, buttonSize, additionalSettings, }: TableSettingsProps<T>): JSX.Element;
 export {};

package/dist/components/table/components/table-settings/TableSettings.js

@@ -1,12 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ListChevronsDownUp, Settings } from 'lucide-react';
+import { useMemo } from 'react';
 import { Button } from '../../../button/Button';
 import { Menu } from '../../../menu/Menu';
 import { Popover } from '../../../popover/Popover';
-export function TableSettings({ viewMode, handleChangeViewMode }) {
+export function TableSettings({ viewMode, handleChangeViewMode, columns = [], visibleColumnIds = [], onVisibleColumnIdsChange, columnsLabel = 'Kolonner', allPresetLabel = 'Alle', standardPresetLabel = 'Standard', buttonSize = 'sm', additionalSettings, }) {
     const handleViewModeChange = (mode, close) => {
-        handleChangeViewMode(mode === 'compact' ? 'compact' : 'comfortable');
+        handleChangeViewMode(mode === 'wrapped' ? 'compact' : 'wrapped');
         close === null || close === void 0 ? void 0 : close();
     };
-    return (_jsx(Popover, { trigger: (onClick, icon) => (_jsxs(Button, { onClick: onClick, children: [_jsx(Settings, {}), icon] })), children: close => (_jsx(Menu, { children: _jsx(Menu.Item, { active: viewMode === 'compact', children: _jsxs("button", { type: "button", onClick: () => handleViewModeChange('compact', close), children: [_jsx(ListChevronsDownUp, {}), "Kompakt"] }) }) })) }));
+    const hideableColumns = useMemo(() => columns.filter(c => c.enableHiding !== false), [columns]);
+    const allPresetIds = useMemo(() => hideableColumns.map(c => c.id), [hideableColumns]);
+    const standardPresetIds = useMemo(() => hideableColumns.filter(c => { var _a; return ((_a = c.meta) === null || _a === void 0 ? void 0 : _a.hidden) !== true; }).map(c => c.id), [hideableColumns]);
+    const visibleSet = useMemo(() => new Set(visibleColumnIds), [visibleColumnIds]);
+    const visibleCount = useMemo(() => {
+        return hideableColumns.reduce((acc, c) => { var _a; return acc + (visibleSet.has((_a = c.id) !== null && _a !== void 0 ? _a : '') ? 1 : 0); }, 0);
+    }, [hideableColumns, visibleSet]);
+    const setVisibleIds = (nextIds) => {
+        if (!onVisibleColumnIdsChange)
+            return;
+        const safe = nextIds.length > 0 ? nextIds : standardPresetIds.length > 0 ? standardPresetIds : allPresetIds;
+        onVisibleColumnIdsChange(safe.filter((id) => typeof id === 'string' && Boolean(id)));
+    };
+    const toggleColumn = (id, nextVisible) => {
+        const next = new Set(visibleColumnIds);
+        if (nextVisible)
+            next.add(id);
+        else
+            next.delete(id);
+        setVisibleIds(Array.from(next));
+    };
+    const isAllActive = useMemo(() => {
+        if (!hideableColumns.length)
+            return false;
+        return hideableColumns.every(c => c.id && visibleSet.has(c.id));
+    }, [hideableColumns, visibleSet]);
+    const isStandardActive = useMemo(() => {
+        if (!hideableColumns.length)
+            return false;
+        const std = new Set(standardPresetIds);
+        return hideableColumns.every(c => c.id && visibleSet.has(c.id) === std.has(c.id));
+    }, [hideableColumns, visibleSet, standardPresetIds]);
+    // Required by your RadioButton component
+    const presetRadioName = 'table-columns-preset';
+    return (_jsx(Popover, { trigger: (onClick, icon) => (_jsxs(Button, { size: buttonSize, onClick: onClick, type: "button", children: [_jsx(Settings, {}), icon] })), children: close => (_jsxs(Menu, { children: [additionalSettings === null || additionalSettings === void 0 ? void 0 : additionalSettings(close), _jsx(Menu.Item, { active: viewMode === 'wrapped', children: _jsxs("button", { type: "button", onClick: () => handleViewModeChange(viewMode, close), children: [_jsx(ListChevronsDownUp, {}), "Ombryd tekst"] }) }), hideableColumns.length > 0 && onVisibleColumnIdsChange ? (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), _jsx("div", { style: { padding: '6px 10px', fontSize: 12, opacity: 0.7 }, children: columnsLabel }), _jsx(Menu.RadioItem, { name: presetRadioName, value: "all", checked: isAllActive, label: allPresetLabel, onValueChange: () => {
+                                setVisibleIds(allPresetIds.filter((id) => typeof id === 'string' && Boolean(id)));
+                                close === null || close === void 0 ? void 0 : close();
+                            } }), _jsx(Menu.RadioItem, { name: presetRadioName, value: "standard", checked: isStandardActive, label: standardPresetLabel, onValueChange: () => {
+                                setVisibleIds(standardPresetIds.filter((id) => typeof id === 'string' && Boolean(id)));
+                                close === null || close === void 0 ? void 0 : close();
+                            } }), _jsx(Menu.Separator, {}), hideableColumns.map(col => {
+                            const isVisible = col.id ? visibleSet.has(col.id) : false;
+                            const disableUncheckingLast = isVisible && visibleCount <= 1;
+                            const label = col.header;
+                            return (_jsx(Menu.CheckItem, { checked: isVisible, disabled: disableUncheckingLast, label: label, onCheckedChange: nextChecked => {
+                                    if (disableUncheckingLast)
+                                        return;
+                                    toggleColumn(col.id, nextChecked);
+                                } }, col.id));
+                        })] })) : null] })) }));
 }

package/dist/components/table/tanstack.d.ts

@@ -3,12 +3,23 @@ import * as React from 'react';
 import { type TableProps, type TableVariant } from './Table';
 import { ViewMode } from '../../hooks/useTableSettings';
 type Filterable<T> = Array<keyof T>;
-export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles'> & {
+export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerBelowRow' | 'headerExtras' | 'columnStyles' | 'toolbar'> & {
     columns: ReadonlyArray<ColumnDef<T, any>>;
     filterable?: Filterable<T>;
     onSortingChange?: (sortBy: string | number | symbol | null, direction: 'asc' | 'desc' | null) => void;
+    initialSortBy?: string;
+    initialSortDirection?: 'asc' | 'desc';
     variant?: TableVariant;
     viewMode?: ViewMode;
+    /**
+     * TanStack-agnostic column visibility input.
+     *
+     * If provided, this list is the single source of truth for which columns are visible.
+     * If not provided (or empty), defaults are derived from ColumnDef meta.hidden.
+     *
+     * NOTE: Passing [] is treated as "unset" and will fall back to defaults.
+     */
+    visibleColumnIds?: string[];
 };
 export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;
 export {};