@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/table/Table.cjs

@@ -1,13 +1,15 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 var lucideReact = require('lucide-react');
 var Checkbox = require('../checkbox/Checkbox');
-var react = require('react');
 var styles = require('./Table.module.css');
 var useViewportFill = require('../../hooks/useViewportFill');
 var Pagination = require('../pagination/Pagination');
 var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var severity = require('../../constants/severity');
+var EmptyState = require('./components/empty-state/EmptyState');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -18,9 +20,10 @@ function Table({
   columns,
   selectedRows,
   onRowSelect,
+  selectionMode = "single",
   onSortChange,
   onRowClick,
-  sortBy,
+  sortById,
   sortDirection,
   dataKey,
   headerExtras,
@@ -33,11 +36,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 = react.useMemo(() => columns.filter((c) => !c.hidden), [columns]);
   const handlePageChange = react.useCallback(
@@ -46,11 +56,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 = react.useRef(null);
@@ -59,123 +71,179 @@ function Table({
     min: viewportMin,
     includeMarginTop: viewportIncludeMarginTop
   });
-  const tableEl = /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `${styles__default.default.table} ${styles__default.default[variant]} ${styles__default.default[size]}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-        selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            "th",
-            {
-              style: getColStyle(column.accessor, column.align),
-              "aria-sort": ariaSort,
-              className: `${styles__default.default.th} ${column.sortable ? styles__default.default.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__ */ jsxRuntime.jsx("div", { className: styles__default.default.thInner, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.thLabel, children: column.header }),
-                column.sortable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
-                  isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}),
-                  isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.descending }),
-                  !isActiveSort && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.descending })
-                ] }),
-                headerExtras == null ? void 0 : headerExtras({ column, index })
-              ] }) })
-            },
-            `${accessorKey}-${index}`
-          );
-        })
-      ] }),
-      headerBelowRow ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: styles__default.default.headerBelowRow, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
-    ] }),
-    loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-      "td",
-      {
-        style: getColStyle(column.accessor, column.align),
-        className: `${styles__default.default.tableCell}`,
-        children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" })
-      },
-      `loading-cell-${colIndex}`
-    )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "tr",
-      {
-        onClick: () => onRowClick == null ? void 0 : onRowClick(row),
-        className: `${onRowClick ? styles__default.default.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles__default.default.selectedRow : ""}`,
-        children: [
-          selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "fitContent", children: /* @__PURE__ */ jsxRuntime.jsx(
+  const tableEl = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `${styles__default.default.table} ${styles__default.default[variant]} ${styles__default.default[size]}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("th", { className: `${styles__default.default.fitContent} ${styles__default.default.th}`, children: selectionMode === "multiple" ? /* @__PURE__ */ jsxRuntime.jsx(
             Checkbox.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__ */ jsxRuntime.jsx(
-              "td",
+              "th",
               {
-                style: getColStyle(column.accessor, column.align),
-                className: `${styles__default.default.tableCell} `,
-                children: column.render ? column.render(row) : row[accessorKey]
+                style: getColStyle(column.id, column.align, "middle"),
+                "aria-sort": ariaSort,
+                className: `${styles__default.default.th} ${column.sortable ? styles__default.default.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__ */ jsxRuntime.jsx("div", { className: styles__default.default.thInner, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.thLabel, children: typeof column.header === "function" ? column.header() : column.header }),
+                  column.sortable && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.sortIndicator, "aria-hidden": "true", children: [
+                    isActiveSort && sortDirection === "asc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, {}),
+                    isActiveSort && sortDirection === "desc" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: styles__default.default.descending }),
+                    !isActiveSort && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: `${styles__default.default.descending} ${styles__default.default.inActiveSort}` })
+                  ] }),
+                  headerExtras == null ? void 0 : headerExtras({ column, index })
+                ] }) })
               },
-              accessorKey
+              column.id
             );
           })
-        ]
-      },
-      `tableRow-${String(row[dataKey])}-${rowIndex} `
-    )) })
+        ] }),
+        headerBelowRow ? /* @__PURE__ */ jsxRuntime.jsx("tr", { className: styles__default.default.headerBelowRow, children: /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan: filteredColumns.length, children: headerBelowRow }) }) : null
+      ] }),
+      loading && !data.length ? /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: Array.from({ length: take != null ? take : 5 }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: filteredColumns.map((column, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        "td",
+        {
+          style: getColStyle(column.id, column.align),
+          className: `${styles__default.default.tableCell} ${column.fitContent ? "fitContent" : ""}`,
+          children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: 20, width: "100%" })
+        },
+        `${column.id}-${colIndex}`
+      )) }, `loading-row-${rowIndex}`)) }) : /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: `${styles__default.default.tBody} ${striped ? styles__default.default.striped : ""}`, children: data == null ? void 0 : data.map((row, rowIndex) => {
+        const rowSeverity = getRowSeverity == null ? void 0 : getRowSeverity(row);
+        return /* @__PURE__ */ jsxRuntime.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 ? severity.SeverityBgColor[rowSeverity] : void 0
+            },
+            className: `${onRowClick ? styles__default.default.clickableRow : ""} ${(selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) ? styles__default.default.selectedRow : ""} ${rowSeverity ? styles__default.default.severity : ""}`,
+            children: [
+              selectedRows && dataKey && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "fitContent", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
+                Checkbox.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__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    style: getColStyle(column.id, column.align, column.verticalAlign),
+                    className: `${styles__default.default.tableCell} ${column.fitContent ? "fitContent" : ""} ${column.allowWrap || (selectedRows == null ? void 0 : selectedRows.has(row[dataKey])) || viewMode === "comfortable" ? "" : styles__default.default.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__ */ jsxRuntime.jsx(EmptyState.TableEmptyState, { config: emptyConfig })
   ] });
   if (fillViewport) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, style: viewportStyle, className: styles__default.default.tableScroll, children: tableEl }),
-      onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
-        Pagination.Pagination,
-        {
-          itemsCount: totalItemsCount,
-          take,
-          skip,
-          onPageChange: handlePageChange
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px" }, children: [
-    tableEl,
-    " ",
-    onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
-      Pagination.Pagination,
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: scrollRef, style: viewportStyle, className: styles__default.default.tableScroll, children: tableEl }),
+          onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
+            Pagination.Pagination,
+            {
+              itemsCount: totalItemsCount,
+              take,
+              skip,
+              onPageChange: handlePageChange,
+              showFirstLast
+            }
+          )
+        ]
       }
-    )
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+        flexFlow: paginationPlacement === "top" ? "column-reverse" : "column",
+        position: "relative"
+      },
+      children: [
+        tableEl,
+        onPageChange && /* @__PURE__ */ jsxRuntime.jsx(
+          Pagination.Pagination,
+          {
+            itemsCount: totalItemsCount,
+            take,
+            skip,
+            onPageChange: handlePageChange
+          }
+        )
+      ]
+    }
+  );
 }
 
 exports.Table = Table;

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

@@ -1,29 +1,40 @@
+import React from 'react';
 import { PageChangeEvent } from '../pagination/Pagination';
+import { Severity } from '../../constants/severity.types';
+import { ViewMode } from '@/hooks/useTableSettings';
+import { TableEmptyConfig } from './components/empty-state/EmptyState';
 type SortDirection = 'asc' | 'desc' | null;
 export interface ColumnItem<T> {
-    header: string;
+    id: string;
+    header: string | (() => React.ReactNode);
     accessor?: keyof T;
     sortable?: boolean;
     sortFunction?: (a: T, b: T) => -1 | 0 | 1;
     render?: (item: T) => React.ReactNode;
     hidden?: boolean;
     align?: 'left' | 'right' | 'center';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
     fitContent?: boolean;
+    allowWrap?: boolean;
+    emptyPlaceholder?: React.ReactNode;
 }
 type HeaderExtrasArgs<T> = {
     column: ColumnItem<T>;
     index: number;
 };
-export type TableVariant = 'filled' | 'outlined';
-interface TableProps<T extends Record<string, any>> {
+export type TableVariant = 'primary' | 'embedded';
+export interface TableProps<T extends Record<string, any>> {
     data: T[];
     dataKey: keyof T;
     columns: ColumnItem<T>[];
     selectedRows?: Set<number | string>;
+    selectionMode?: 'single' | 'multiple';
+    allRowsSelected?: boolean;
     onRowClick?: (row: T) => void;
-    onRowSelect?: (rowIndex: number | string, isSelected: boolean) => void;
+    onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onSelectAllRows?: (isSelected: boolean) => void;
     onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
-    sortBy?: keyof T;
+    sortById?: string;
     sortDirection?: SortDirection;
     loading?: boolean;
     headerExtras?: (args: HeaderExtrasArgs<T>) => React.ReactNode;
@@ -36,10 +47,15 @@ interface TableProps<T extends Record<string, any>> {
     viewportIncludeMarginTop?: boolean;
     take?: number;
     skip?: number;
+    paginationPlacement?: 'top' | 'bottom';
     totalItemsCount?: number;
     onPageChange?: (e: PageChangeEvent) => void;
     variant?: TableVariant;
     size?: 'sm' | 'md';
+    getRowSeverity?: (row: T) => Severity | undefined;
+    showFirstLast?: boolean;
+    viewMode?: ViewMode;
+    emptyConfig?: TableEmptyConfig;
 }
-export declare function Table<T extends Record<string, any>>({ data, columns, selectedRows, onRowSelect, onSortChange, onRowClick, sortBy, sortDirection, dataKey, headerExtras, columnStyles, headerBelowRow, striped, fillViewport, viewportBottomOffset, viewportMin, viewportIncludeMarginTop, take, skip, totalItemsCount, onPageChange, loading, variant, size, }: TableProps<T>): JSX.Element;
+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;
 export {};