@dbcdk/react-components 0.0.18 → 0.0.20

package/dist/components/table/TanstackTable.js

@@ -4,9 +4,33 @@ import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel,
 import * as React from 'react';
 import ColumnResizer from './components/column-resizer/ColumnResizer';
 import { Table } from './Table';
-import { buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, buildColumnStyles, columnItemsToIdSet, } from './tanstackTable.utils';
+import { buildColumnVisibilityFromVisibleIds, mapDefsToColumnItems, sortingEqual, getSortPropsFromSorting, columnItemsToIdSet, } from './tanstackTable.utils';
+function buildGridTemplateColumns(args) {
+    var _a, _b, _c, _d;
+    const { table, allowedIds, hasSelection, selectionPx, defaultMinPx } = args;
+    const parts = [];
+    if (hasSelection)
+        parts.push(`${selectionPx}px`);
+    const leaf = table.getVisibleLeafColumns().filter(c => allowedIds.has(c.id));
+    for (const c of leaf) {
+        const def = c.columnDef;
+        const min = Number((_a = def.minSize) !== null && _a !== void 0 ? _a : defaultMinPx);
+        const maxRaw = def.maxSize;
+        const max = maxRaw == null ? Number.POSITIVE_INFINITY : Number(maxRaw);
+        const size = Number((_d = (_c = (_b = c.getSize) === null || _b === void 0 ? void 0 : _b.call(c)) !== null && _c !== void 0 ? _c : def.size) !== null && _d !== void 0 ? _d : min);
+        if (Number.isFinite(min) && Number.isFinite(max) && min > 0 && max === min) {
+            parts.push(`${Math.round(min)}px`);
+            continue;
+        }
+        // Weight based on size so wide columns keep more room
+        const weight = Math.max(1, Math.min(6, Math.round(size / 100)));
+        // Respect minSize; scroll if mins don't fit
+        parts.push(`minmax(${Math.round(min)}px, ${weight}fr)`);
+    }
+    return parts.join(' ');
+}
 export function TanstackTable(props) {
-    const { data, dataKey, columns, filterable = [], sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, ...tableProps } = props;
+    const { data, dataKey, columns, sorting: controlledSorting, onSortingChange, optimisticSortingUi = true, visibleColumnIds, manualSorting, selectedRows, onRowSelect, ...tableProps } = props;
     const isControlledSorting = controlledSorting != null;
     const [uiSorting, setUiSorting] = React.useState(controlledSorting !== null && controlledSorting !== void 0 ? controlledSorting : []);
     React.useEffect(() => {
@@ -53,19 +77,11 @@ export function TanstackTable(props) {
     const allowedIds = React.useMemo(() => columnItemsToIdSet(columnItems), [columnItems]);
     const visibleData = table.getRowModel().rows.map(r => r.original);
     const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
-    const columnStyles = React.useMemo(() => {
-        const leafCols = table.getAllLeafColumns();
-        return buildColumnStyles(leafCols, allowedIds, { minWidth: 80, maxWidth: 800 });
-    }, [table, columnSizing, allowedIds]);
     const handleSortChange = React.useCallback((column, direction) => {
-        // Translate Table's direction -> TanStack SortingState
         const next = direction == null ? [] : [{ id: column.id, desc: direction === 'desc' }];
-        // Mirror TanStack's onSortingChange behavior
         if (optimisticSortingUi)
             setUiSorting(next);
         onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
-        // If you are doing server-side sorting, you likely also want:
-        // table.resetPageIndex?.() or external pagination reset (depends on your setup)
     }, [optimisticSortingUi, onSortingChange]);
     const headerExtras = React.useCallback(({ index }) => {
         var _a, _b, _c, _d;
@@ -80,5 +96,15 @@ export function TanstackTable(props) {
             return null;
         return _jsx(ColumnResizer, { id: header.column.id, handler: handler });
     }, [table]);
-    return (_jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, columnStyles: columnStyles, headerExtras: headerExtras }));
+    const hasSelection = Boolean(selectedRows && onRowSelect && dataKey);
+    const gridTemplateColumns = React.useMemo(() => {
+        return buildGridTemplateColumns({
+            table,
+            allowedIds,
+            hasSelection,
+            selectionPx: 36,
+            defaultMinPx: 80,
+        });
+    }, [table, allowedIds, hasSelection, columnSizing]);
+    return (_jsx(Table, { ...tableProps, onSortChange: handleSortChange, dataKey: dataKey, data: visibleData, columns: columnItems, sortById: sortById, sortDirection: sortDirection, gridTemplateColumns: gridTemplateColumns, headerExtras: headerExtras, selectedRows: selectedRows, onRowSelect: onRowSelect }));
 }

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

@@ -4,14 +4,9 @@ export type TableEmptyConfig = {
     /** Keep it short + system-like */
     title?: string;
     description?: ReactNode;
-    /**
-     * Optional custom actions (rendered after built-ins).
-     * Good for injecting extra links/buttons from the table page.
-     */
     actions?: ReactNode;
     onBack?: () => void;
     onRefresh?: () => void;
-    /** New: clear filters */
     onClearFilters?: () => void;
     showClearFilters?: boolean;
     clearFiltersLabel?: ReactNode;

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

@@ -1,18 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeft } from 'lucide-react';
-import { Button } from '../../../../components/button/Button';
 const defaultEmptyConfig = {
     enabled: true,
     title: 'Ingen resultater',
     description: _jsx("span", { children: "Ingen data at vise." }),
     showBack: false,
     showRefresh: false,
-    // default: show button if handler exists
     showClearFilters: true,
     backLabel: (_jsxs(_Fragment, { children: [_jsx(ArrowLeft, { size: 16 }), "Tilbage"] })),
     refreshLabel: _jsx(_Fragment, { children: "Indl\u00E6s igen" }),
     clearFiltersLabel: _jsx(_Fragment, { children: "Nulstil alle filtre" }),
-    // "system-like": less hero, less vertical drama
     className: 'dbc-flex dbc-flex-column dbc-items-start dbc-justify-start dbc-text-left dbc-gap-sm dbc-py-lg',
 };
 export function TableEmptyState({ config }) {
@@ -22,9 +19,5 @@ export function TableEmptyState({ config }) {
     };
     if (!merged.enabled)
         return null;
-    const showBack = merged.showBack && typeof merged.onBack === 'function';
-    const showRefresh = merged.showRefresh && typeof merged.onRefresh === 'function';
-    const showClearFilters = merged.showClearFilters && typeof merged.onClearFilters === 'function';
-    const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh || showClearFilters;
-    return (_jsxs("div", { className: merged.className, children: [_jsx("div", { className: "dbc-text-sm", children: merged.description }), hasAnyActions && (_jsxs("div", { className: "dbc-flex dbc-gap-sm dbc-mt-xs", children: [showClearFilters && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onClearFilters, children: merged.clearFiltersLabel })), showRefresh && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onRefresh, children: merged.refreshLabel })), showBack && (_jsx(Button, { type: "button", variant: "secondary", onClick: merged.onBack, children: merged.backLabel })), merged.actions] }))] }));
+    return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-pt-sm dbc-pb-sm", children: [_jsx("span", { className: "dbc-text-sm  dbc-muted-text", children: merged.description }), merged.actions ? _jsx("span", { className: "dbc-flex dbc-gap-sm", children: merged.actions }) : null] }));
 }

package/dist/components/table/table.utils.js

@@ -2,14 +2,12 @@ export function getVisibleColumns(columns) {
     return columns.filter(c => !c.hidden);
 }
 export function getColumnStyle(columnId, columnStyles, alignment, verticalAlignment) {
-    var _a;
     const baseStyle = columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles[columnId];
     return {
         ...(baseStyle !== null && baseStyle !== void 0 ? baseStyle : {}),
         ...(alignment === 'right' ? { fontVariantNumeric: 'tabular-nums' } : null),
         verticalAlign: verticalAlignment !== null && verticalAlignment !== void 0 ? verticalAlignment : 'top',
         textAlign: alignment !== null && alignment !== void 0 ? alignment : 'left',
-        minWidth: (_a = baseStyle === null || baseStyle === void 0 ? void 0 : baseStyle.minWidth) !== null && _a !== void 0 ? _a : 0,
     };
 }
 export function getHeaderLabel(header) {

package/dist/src/styles/styles.css

@@ -60,12 +60,15 @@ body.dbc-app {
 
 .dbc-table {
   --card-label-width: 260px;
-
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
+.dbc-table--hover tr:hover {
+  background-color: var(--color-bg-contextual);
+}
+
 .dbc-table tr + tr th,
 .dbc-table tr + tr td {
   padding-block: var(--spacing-xxs);

package/dist/styles/styles.css

@@ -60,12 +60,15 @@ body.dbc-app {
 
 .dbc-table {
   --card-label-width: 260px;
-
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
 }
 
+.dbc-table--hover tr:hover {
+  background-color: var(--color-bg-contextual);
+}
+
 .dbc-table tr + tr th,
 .dbc-table tr + tr td {
   padding-block: var(--spacing-xxs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",