@dbcdk/react-components 0.0.4 → 0.0.5

package/dist/components/table/Table.js

@@ -1,20 +1,23 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback, useRef } from 'react';
 import { ArrowUp, ArrowDown } from 'lucide-react';
 import { Checkbox } from '../checkbox/Checkbox';
-import { useMemo, useCallback, useRef } from 'react';
 import styles from './Table.module.css';
 import { useViewportFill } from '../../hooks/useViewportFill';
 import { Pagination } from '../pagination/Pagination';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { SeverityBgColor } from '../../constants/severity';
+import { TableEmptyState } from './components/empty-state/EmptyState';
 
 function Table({
   data,
   columns,
   selectedRows,
   onRowSelect,
+  selectionMode = "single",
   onSortChange,
   onRowClick,
-  sortBy,
+  sortById,
   sortDirection,
   dataKey,
   headerExtras,
@@ -27,11 +30,18 @@ function Table({
   viewportIncludeMarginTop = false,
   take,
   skip,
+  paginationPlacement = "bottom",
   totalItemsCount,
   onPageChange,
   loading,
-  variant = "filled",
-  size = "md"
+  variant = "primary",
+  size = "md",
+  getRowSeverity,
+  showFirstLast = false,
+  allRowsSelected,
+  onSelectAllRows,
+  viewMode,
+  emptyConfig
 }) {
   const filteredColumns = useMemo(() => columns.filter((c) => !c.hidden), [columns]);
   const handlePageChange = useCallback(
@@ -40,11 +50,13 @@ function Table({
     },
     [onPageChange]
   );
-  const getColStyle = (accessor, alignment) => {
-    const baseStyle = accessor ? columnStyles == null ? void 0 : columnStyles[String(accessor)] : void 0;
+  const getColStyle = (columnId, alignment, verticalAlignment) => {
+    const baseStyle = columnStyles == null ? void 0 : columnStyles[columnId];
     return {
-      textAlign: alignment != null ? alignment : "left",
-      ...baseStyle != null ? baseStyle : {}
+      ...baseStyle != null ? baseStyle : {},
+      ...alignment === "right" && { fontVariantNumeric: "tabular-nums" },
+      verticalAlign: verticalAlignment != null ? verticalAlignment : "top",
+      textAlign: alignment != null ? alignment : "left"
     };
   };
   const scrollRef = useRef(null);
@@ -53,123 +65,179 @@ function Table({
     min: viewportMin,
     includeMarginTop: viewportIncludeMarginTop
   });
-  const tableEl = /* @__PURE__ */ jsxs("table", { className: `${styles.table} ${styles[variant]} ${styles[size]}`, children: [
-    /* @__PURE__ */ jsxs("thead", { children: [
-      /* @__PURE__ */ jsxs("tr", { children: [
-        selectedRows && dataKey && /* @__PURE__ */ jsx("th", { className: "fitContent" }),
-        filteredColumns.map((column, index) => {
-          var _a;
-          const accessorKey = String((_a = column.accessor) != null ? _a : "");
-          const isActiveSort = sortBy === column.accessor;
-          const ariaSort = column.sortable && isActiveSort ? sortDirection === "asc" ? "ascending" : "descending" : "none";
-          const toggleSort = () => {
-            if (!onSortChange || !column.sortable) return;
-            const nextDir = !isActiveSort ? "asc" : sortDirection === "asc" ? "desc" : null;
-            onSortChange(column, nextDir);
-          };
-          return /* @__PURE__ */ jsx(
-            "th",
-            {
-              style: getColStyle(column.accessor, column.align),
-              "aria-sort": ariaSort,
-              className: `${styles.th} ${column.sortable ? styles.sortable : ""}`,
-              onClick: (e) => {
-                if (!column.sortable) return;
-                if (e.target instanceof HTMLElement && e.target.closest(".resizer")) return;
-                toggleSort();
-              },
-              role: column.sortable ? "button" : void 0,
-              tabIndex: column.sortable ? 0 : void 0,
-              onKeyDown: (e) => {
-                if (!column.sortable) return;
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleSort();
-                }
-              },
-              children: /* @__PURE__ */ jsx("div", { className: styles.thInner, children: /* @__PURE__ */ jsxs("span", { children: [
-                /* @__PURE__ */ jsx("span", { className: styles.thLabel, children: column.header }),
-                column.sortable && /* @__PURE__ */ jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [
-                  isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, {}),
-                  isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.descending }),
-                  !isActiveSort && /* @__PURE__ */ jsx(ArrowDown, { className: styles.descending })
-                ] }),
-                headerExtras == null ? void 0 : headerExtras({ column, index })
-              ] }) })
-            },
-            `${accessorKey}-${index}`
-          );
-        })
-      ] }),
-      headerBelowRow ? /* @__PURE__ */ jsx("tr", { className: styles.headerBelowRow, children: /* @__PURE__ */ jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
-    ] }),
-    loading && !data.length ? /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsx(
-      "td",
-      {
-        style: getColStyle(column.accessor, column.align),
-        className: `${styles.tableCell}`,
-        children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" })
-      },
-      `loading-cell-${colIndex}`
-    )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => /* @__PURE__ */ jsxs(
-      "tr",
-      {
-        onClick: () => onRowClick == null ? void 0 : onRowClick(row),
-        className: `${onRowClick ? styles.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ""}`,
-        children: [
-          selectedRows && dataKey && /* @__PURE__ */ jsx("td", { className: "fitContent", children: /* @__PURE__ */ jsx(
+  const tableEl = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("table", { className: `${styles.table} ${styles[variant]} ${styles[size]}`, children: [
+      /* @__PURE__ */ jsxs("thead", { children: [
+        /* @__PURE__ */ jsxs("tr", { children: [
+          selectedRows && dataKey && /* @__PURE__ */ jsx("th", { className: `${styles.fitContent} ${styles.th}`, children: selectionMode === "multiple" ? /* @__PURE__ */ jsx(
             Checkbox,
             {
-              checked: selectedRows.has(row[dataKey]),
               size: "sm",
-              onChange: () => onRowSelect == null ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey]))
+              variant: "primary",
+              checked: allRowsSelected,
+              onChange: (checked) => onSelectAllRows == null ? void 0 : onSelectAllRows(checked)
             }
-          ) }),
-          filteredColumns.map((column) => {
-            var _a;
-            const accessorKey = String((_a = column.accessor) != null ? _a : "");
+          ) : null }),
+          filteredColumns.map((column, index) => {
+            const isActiveSort = sortById === column.id;
+            const ariaSort = column.sortable && isActiveSort ? sortDirection === "asc" ? "ascending" : "descending" : "none";
+            const toggleSort = () => {
+              if (!onSortChange || !column.sortable) return;
+              const nextDir = !isActiveSort ? "asc" : sortDirection === "asc" ? "desc" : null;
+              onSortChange(column, nextDir);
+            };
             return /* @__PURE__ */ jsx(
-              "td",
+              "th",
               {
-                style: getColStyle(column.accessor, column.align),
-                className: `${styles.tableCell} `,
-                children: column.render ? column.render(row) : row[accessorKey]
+                style: getColStyle(column.id, column.align, "middle"),
+                "aria-sort": ariaSort,
+                className: `${styles.th} ${column.sortable ? styles.sortable : ""} `,
+                onClick: (e) => {
+                  if (!column.sortable) return;
+                  if (e.target instanceof HTMLElement && e.target.closest(".resizer")) return;
+                  toggleSort();
+                },
+                role: column.sortable ? "button" : void 0,
+                tabIndex: column.sortable ? 0 : void 0,
+                onKeyDown: (e) => {
+                  if (!column.sortable) return;
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    toggleSort();
+                  }
+                },
+                children: /* @__PURE__ */ jsx("div", { className: styles.thInner, children: /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.thLabel, children: typeof column.header === "function" ? column.header() : column.header }),
+                  column.sortable && /* @__PURE__ */ jsxs("span", { className: styles.sortIndicator, "aria-hidden": "true", children: [
+                    isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, {}),
+                    isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: styles.descending }),
+                    !isActiveSort && /* @__PURE__ */ jsx(ArrowDown, { className: `${styles.descending} ${styles.inActiveSort}` })
+                  ] }),
+                  headerExtras == null ? void 0 : headerExtras({ column, index })
+                ] }) })
               },
-              accessorKey
+              column.id
             );
           })
-        ]
-      },
-      `tableRow-${String(row[dataKey])}-${rowIndex} `
-    )) })
+        ] }),
+        headerBelowRow ? /* @__PURE__ */ jsx("tr", { className: styles.headerBelowRow, children: /* @__PURE__ */ jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
+      ] }),
+      loading && !data.length ? /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          style: getColStyle(column.id, column.align),
+          className: `${styles.tableCell} ${column.fitContent ? "fitContent" : ""}`,
+          children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: 20, width: "100%" })
+        },
+        `${column.id}-${colIndex}`
+      )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsx("tbody", { className: `${styles.tBody} ${striped ? styles.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => {
+        const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            tabIndex: onRowClick ? 0 : -1,
+            onClick: (e) => {
+              const rowId = row[dataKey];
+              const isModifierClick = e.metaKey || e.ctrlKey;
+              const canSelect = Boolean(selectedRows && onRowSelect && dataKey);
+              if (isModifierClick && canSelect) {
+                e.preventDefault();
+                e.stopPropagation();
+                const isSelected = selectedRows.has(rowId);
+                if (selectionMode === "single") {
+                  onRowSelect(rowId, !isSelected);
+                } else {
+                  onRowSelect(rowId, !isSelected);
+                }
+                return;
+              }
+              onRowClick == null ? void 0 : onRowClick(row);
+            },
+            style: {
+              ["--row-severity-color"]: rowSeverity ? SeverityBgColor[rowSeverity] : void 0
+            },
+            className: `${onRowClick ? styles.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles.selectedRow : ""} ${rowSeverity ? styles.severity : ""}`,
+            children: [
+              selectedRows && dataKey && /* @__PURE__ */ jsx("td", { className: "fitContent", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  variant: "primary",
+                  checked: selectedRows.has(row[dataKey]),
+                  size: "sm",
+                  onChange: () => onRowSelect == null ? void 0 : onRowSelect(row[dataKey], !selectedRows.has(row[dataKey]))
+                }
+              ) }),
+              filteredColumns.map((column) => {
+                var _a, _b;
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: getColStyle(column.id, column.align, column.verticalAlign),
+                    className: `${styles.tableCell} ${column.fitContent ? "fitContent" : ""} ${column.allowWrap || (selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) || viewMode === "comfortable" ? "" : styles.nowrap} `,
+                    children: column.render ? column.render(row) || ((_a = column.emptyPlaceholder) != null ? _a : "") : column.accessor ? row[column.accessor] || ((_b = column.emptyPlaceholder) != null ? _b : "") : null
+                  },
+                  column.id
+                );
+              })
+            ]
+          },
+          `tableRow-${String(row[dataKey])}-${rowIndex}`
+        );
+      }) })
+    ] }),
+    !data.length && /* @__PURE__ */ jsx(TableEmptyState, { config: emptyConfig })
   ] });
   if (fillViewport) {
-    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
-      /* @__PURE__ */ jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }),
-      onPageChange && /* @__PURE__ */ jsx(
-        Pagination,
-        {
-          itemsCount: totalItemsCount,
-          take,
-          skip,
-          onPageChange: handlePageChange
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
-    tableEl,
-    " ",
-    onPageChange && /* @__PURE__ */ jsx(
-      Pagination,
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        itemsCount: totalItemsCount,
-        take,
-        skip,
-        onPageChange: handlePageChange
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "20px",
+          flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
+          position: "relative"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: scrollRef, style: viewportStyle, className: styles.tableScroll, children: tableEl }),
+          onPageChange && /* @__PURE__ */ jsx(
+            Pagination,
+            {
+              itemsCount: totalItemsCount,
+              take,
+              skip,
+              onPageChange: handlePageChange,
+              showFirstLast
+            }
+          )
+        ]
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+        flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
+        position: "relative"
+      },
+      children: [
+        tableEl,
+        onPageChange && /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            itemsCount: totalItemsCount,
+            take,
+            skip,
+            onPageChange: handlePageChange
+          }
+        )
+      ]
+    }
+  );
 }
 
 export { Table };

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

@@ -5,33 +5,37 @@
   border-collapse: collapse;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  color: var(--color-text);
-  background: var(--color-surface);
+  color: var(--color-fg-default);
+  background: var(--color-bg-surface);
 }
 
-.table.sm tr td,
-.table.sm th {
-  padding-block: var(--spacing-xxs);
-  padding-inline: var(--spacing-sm);
+.table.sm tr td {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
   font-size: var(--font-size-xs);
 }
 
+.table.sm th {
+  padding-inline: var(--spacing-md);
+}
+
 .table thead {
   position: sticky;
   inset-block-start: 0;
-  background-color: var(--color-surface);
+  background-color: var(--color-bg-surface);
   z-index: 10;
 }
 
-.table.filled thead th {
-  background-color: var(--color-surface-hover);
+.table.primary thead {
+  box-shadow: var(--shadow-md);
 }
 
 .clickableRow {
   cursor: pointer;
 }
+
 .clickableRow:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-contextual);
 }
 
 .selectedRow {
@@ -41,20 +45,29 @@
   background-color: var(--color-bg-selected-hover);
 }
 
-.th,
-th {
-  color: var(--color-text-secondary);
+.nowrap {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.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);
-  padding-inline: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
   text-align: start;
   background: inherit;
-  border-block-end: var(--border-width-thin) solid var(--color-border);
+  white-space: nowrap;
+  min-width: unset;
+  max-width: unset;
+  width: 1%;
+  vertical-align: middle;
 }
 
-.th.sortable,
-th.sortable {
+.th.sortable {
   cursor: pointer;
   user-select: none;
   transition:
@@ -63,7 +76,7 @@ th.sortable {
 }
 .th.sortable:hover,
 th.sortable:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-contextual);
 }
 .th.sortable:focus-visible,
 th.sortable:focus-visible {
@@ -71,9 +84,16 @@ th.sortable:focus-visible {
   box-shadow: var(--focus-ring);
 }
 
+.inActiveSort {
+  color: var(--color-fg-subtle);
+}
+
+.sortIndicator {
+  display: flex;
+}
 .sortIndicator svg {
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
 }
 
 .th > .thInner {
@@ -86,57 +106,64 @@ th.sortable:focus-visible {
   inline-size: 100%;
 }
 
+.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);
+  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;
 }
 
-.striped tr:nth-child(even) {
-  background-color: var(--color-surface-hover);
+.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);
+}
+
+.striped tr:nth-child(even):not(.selectedRow):not(:hover) {
+  background-color: var(--color-bg-surface-subtle);
 }
 
 .td--numeric {
   text-align: end;
 }
 .td--muted {
-  color: var(--color-text-muted);
+  color: var(--color-fg-muted);
+}
+
+.td .error {
+  color: var(--color-danger);
 }
 .tr--hover:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-contextual);
 }
 
-/* focus ring across the entire row, above sticky header and row backgrounds */
-tr:focus-within {
+.table .tbody tr:focus-within {
   outline: none;
   box-shadow: none;
 }
-tr:focus-within td::after {
-  content: '';
-  position: absolute;
-  inset-block-start: -2px;
-  inset-block-end: -2px;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  border-block-start: 2px solid var(--color-primary);
-  border-block-end: 2px solid var(--color-primary);
-  pointer-events: none;
-  z-index: 11;
-}
-tr:focus-within td:first-child::after {
-  inset-inline-start: -2px;
-  border-inline-start: 2px solid var(--color-primary);
-}
-tr:focus-within td:last-child::after {
-  inset-inline-end: -2px;
-  border-inline-end: 2px solid var(--color-primary);
+.table .tbody tr:focus-within {
+  outline: none;
+  box-shadow:
+    inset 2px 0 0 var(--color-brand),
+    inset -2px 0 0 var(--color-brand),
+    inset 0 2px 0 var(--color-brand),
+    inset 0 -2px 0 var(--color-brand);
 }
 
 .tableScroll {
+  position: relative;
   overflow: auto;
   max-inline-size: 100%;
   -webkit-overflow-scrolling: touch;

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

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../../../button/Button');
+var Headline = require('../../../headline/Headline');
+var lucideReact = require('lucide-react');
+var styles = require('./EmptyState.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const defaultEmptyConfig = {
+  enabled: true,
+  title: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 3, children: "Hov, der er ingen data" }),
+  description: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Pr\xF8v at \xE6ndre dine filtre eller tilf\xF8je data." }),
+  showBack: true,
+  showRefresh: true,
+  backLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, {}),
+    "Tilbage"
+  ] }),
+  refreshLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, {}),
+    "Indl\xE6s igen"
+  ] }),
+  className: "dbc-flex dbc-flex-column dbc-justify-center dbc-items-center dbc-flex-grow "
+};
+function TableEmptyState({ config }) {
+  const merged = {
+    ...defaultEmptyConfig,
+    ...config != null ? config : {}
+  };
+  if (!merged.enabled) return null;
+  const showBack = merged.showBack && typeof merged.onBack === "function";
+  const showRefresh = merged.showRefresh && typeof merged.onRefresh === "function";
+  const hasAnyActions = Boolean(merged.actions) || showBack || showRefresh;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${merged.className} ${styles__default.default.container}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "dbc-flex dbc-flex-column dbc-gap-sm dbc-items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchX, { className: styles__default.default.icon }),
+      merged.title,
+      merged.description
+    ] }),
+    hasAnyActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-gap-sm", children: [
+      merged.actions,
+      showBack && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: merged.onBack, className: "dbc-mr-xxs", children: merged.backLabel }),
+      showRefresh && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: merged.onRefresh, children: merged.refreshLabel })
+    ] })
+  ] });
+}
+
+exports.TableEmptyState = TableEmptyState;

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

@@ -0,0 +1,40 @@
+export type TableEmptyConfig = {
+    /**
+     * Whether to show the empty state at all.
+     * Default: true
+     */
+    enabled?: boolean;
+    /**
+     * Title + description text (defaults are your current Danish copy)
+     */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * Optional custom actions area. If provided, it will be rendered first.
+     * Useful for passing your own buttons/links/etc.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Convenience callbacks for built-in default buttons.
+     * If provided, the corresponding button is shown (unless hidden via showBack/showRefresh).
+     */
+    onBack?: () => void;
+    onRefresh?: () => void;
+    /**
+     * Control default buttons
+     */
+    showBack?: boolean;
+    showRefresh?: boolean;
+    /**
+     * Override default labels for default buttons
+     */
+    backLabel?: React.ReactNode;
+    refreshLabel?: React.ReactNode;
+    /**
+     * Wrapper className for layout styling
+     */
+    className?: string;
+};
+export declare function TableEmptyState({ config }: {
+    config?: TableEmptyConfig;
+}): JSX.Element | null;