@dbcdk/react-components 0.0.169 → 0.0.170

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

@@ -0,0 +1,91 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { PageChangeEvent } from '../../components/pagination/Pagination';
+import type { Severity } from '../../constants/severity.types';
+import type { ViewMode } from '../../hooks/useTableSettings';
+export interface ColumnItem<T> {
+    id: string;
+    header: string | (() => ReactNode);
+    accessor?: keyof T;
+    width?: number | string;
+    sortable?: boolean;
+    sortFunction?: (a: T, b: T) => -1 | 0 | 1;
+    render?: (item: T) => ReactNode;
+    hidden?: boolean;
+    align?: 'left' | 'right' | 'center';
+    verticalAlign?: 'top' | 'middle' | 'bottom';
+    divider?: 'right' | 'left';
+    allowWrap?: boolean;
+    emptyPlaceholder?: ReactNode;
+    canHide?: boolean;
+    severity?: any;
+    allowOverflow?: boolean;
+}
+export type HeaderExtrasArgs<T> = {
+    column: ColumnItem<T>;
+    index: number;
+};
+export type TableContextMenuActionItem = {
+    type?: 'item';
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
+export type TableContextMenuHeaderItem = {
+    type: 'header';
+    label: ReactNode;
+};
+export type TableContextMenuItem = TableContextMenuActionItem | TableContextMenuHeaderItem;
+export type StickyHeader = false | 'app-header' | number;
+export type TableVariant = 'primary' | 'embedded';
+export type SortDirection = 'asc' | 'desc' | null;
+export type TableProps<T extends Record<string, any>> = Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseEnter'> & {
+    data: T[];
+    dataKey: keyof T;
+    columns: ColumnItem<T>[];
+    selectedRows?: Set<number | string>;
+    selectionMode?: 'single' | 'multiple';
+    allRowsSelected?: boolean;
+    sortById?: string;
+    sortDirection?: SortDirection;
+    loading?: boolean;
+    emptyConfig?: any;
+    variant?: TableVariant;
+    size?: 'sm' | 'md';
+    viewMode?: ViewMode;
+    fillViewport?: boolean;
+    fillViewportBottomOffset?: number;
+    containScrolling?: boolean;
+    stickyHeader?: StickyHeader;
+    tableWidth?: number;
+    tableRootRef?: Ref<HTMLDivElement>;
+    measuringLayout?: boolean;
+    toolbar?: ReactNode;
+    headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
+    take?: number;
+    skip?: number;
+    totalItemsCount?: number;
+    paginationPlacement?: 'top' | 'bottom';
+    showFirstLast?: boolean;
+    showGoToPage?: boolean;
+    showPageSize?: boolean;
+    pageSizeOptions?: number[];
+    showHeader?: boolean;
+    getRowSeverity?: (row: T) => Severity | undefined;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        open: () => void;
+    }) => TableContextMenuItem[];
+    showContextMenuOnHover?: boolean;
+    expandableRows?: boolean;
+    onRowClick?: (row: T) => void;
+    onRowMouseEnter?: (row: T) => void;
+    onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onSelectAllRows?: (isSelected: boolean) => void;
+    onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
+    onPageChange?: (e: PageChangeEvent) => void;
+};

package/dist/components/table/Table.types.js

@@ -0,0 +1 @@
+

package/dist/components/table/TanstackTable.cjs

@@ -0,0 +1,191 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactTable = require('@tanstack/react-table');
+var React = require('react');
+var ColumnResizer = require('./components/column-resizer/ColumnResizer');
+var Table = require('./Table');
+var table_utils = require('./table.utils');
+var tanstackTable_utils = require('./tanstackTable.utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ColumnResizer__default = /*#__PURE__*/_interopDefault(ColumnResizer);
+
+function TanstackTable(props) {
+  const {
+    data,
+    dataKey,
+    columns,
+    sorting: controlledSorting,
+    onSortingChange,
+    optimisticSortingUi = true,
+    visibleColumnIds,
+    manualSorting,
+    selectedRows,
+    onRowSelect,
+    ...tableProps
+  } = props;
+  const isControlledSorting = controlledSorting != null;
+  const [uiSorting, setUiSorting] = React__namespace.useState(controlledSorting != null ? controlledSorting : []);
+  React__namespace.useEffect(() => {
+    if (!isControlledSorting) return;
+    if (tanstackTable_utils.sortingEqual(uiSorting, controlledSorting)) return;
+    setUiSorting(controlledSorting);
+  }, [isControlledSorting, controlledSorting, uiSorting]);
+  const columnVisibility = React__namespace.useMemo(
+    () => tanstackTable_utils.buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
+    [columns, visibleColumnIds]
+  );
+  const [columnSizing, setColumnSizing] = React__namespace.useState({});
+  const containerRef = React__namespace.useRef(null);
+  const [availableWidth, setAvailableWidth] = React__namespace.useState(void 0);
+  const table = reactTable.useReactTable({
+    data,
+    columns,
+    state: {
+      sorting: uiSorting,
+      columnSizing,
+      columnVisibility
+    },
+    onSortingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(uiSorting) : updater;
+      if (optimisticSortingUi) setUiSorting(next);
+      onSortingChange == null ? void 0 : onSortingChange(next);
+    },
+    onColumnSizingChange: setColumnSizing,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
+    manualSorting: manualSorting != null ? manualSorting : false,
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+    defaultColumn: {
+      enableResizing: true,
+      minSize: 80,
+      size: table_utils.DEFAULT_COLUMN_PX
+    }
+  });
+  React__namespace.useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const updateWidth = () => {
+      const next = el.clientWidth;
+      setAvailableWidth(next > 0 ? next : void 0);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateWidth);
+      return () => window.removeEventListener("resize", updateWidth);
+    }
+    const observer = new ResizeObserver((entries) => {
+      var _a, _b, _c;
+      const entry = entries[0];
+      if (!entry) {
+        updateWidth();
+        return;
+      }
+      const contentWidth = (_c = (_b = (_a = entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _c : entry.contentRect.width;
+      const next = Math.floor(contentWidth);
+      setAvailableWidth(next > 0 ? next : void 0);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const distributedLayout = React__namespace.useMemo(() => {
+    if (availableWidth == null) return null;
+    return tanstackTable_utils.buildDistributedColumnWidths({
+      table,
+      hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+      hasContextMenu: Boolean(tableProps.getContextMenuItems),
+      defaultMinPx: 80,
+      columnSizing,
+      availableWidth
+    });
+  }, [
+    table,
+    selectedRows,
+    onRowSelect,
+    dataKey,
+    tableProps.getContextMenuItems,
+    columnSizing,
+    availableWidth
+  ]);
+  const initialLayoutReady = availableWidth != null;
+  const resolvedLayout = React__namespace.useMemo(() => {
+    const next = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      next[column.id] = {
+        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
+      };
+    });
+    return next;
+  }, [table, distributedLayout]);
+  const columnItems = React__namespace.useMemo(
+    () => tanstackTable_utils.mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
+    [columns, columnVisibility, resolvedLayout]
+  );
+  const visibleData = table.getRowModel().rows.map((r) => r.original);
+  const { sortById, sortDirection } = tanstackTable_utils.getSortPropsFromSorting(uiSorting);
+  const handleSortChange = React__namespace.useCallback(
+    (column, direction) => {
+      const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
+      if (optimisticSortingUi) setUiSorting(next);
+      onSortingChange == null ? void 0 : onSortingChange(next);
+    },
+    [optimisticSortingUi, onSortingChange]
+  );
+  const headerExtras = React__namespace.useCallback(
+    ({ index }) => {
+      var _a, _b, _c, _d;
+      const headerGroups = table.getHeaderGroups();
+      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+      const header = leafHeaders[index];
+      if (!header) return null;
+      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
+      if (!canResize || !handler) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer__default.default, { id: header.column.id, handler });
+    },
+    [table]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Table.Table,
+    {
+      ...tableProps,
+      tableRootRef: containerRef,
+      onSortChange: handleSortChange,
+      dataKey,
+      data: visibleData,
+      columns: columnItems,
+      tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
+      measuringLayout: !initialLayoutReady,
+      sortById,
+      sortDirection,
+      headerExtras,
+      selectedRows,
+      onRowSelect
+    }
+  );
+}
+
+exports.TanstackTable = TanstackTable;

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

@@ -0,0 +1,15 @@
+import { type ColumnDef, type SortingState } from '@tanstack/react-table';
+import * as React from 'react';
+import { TableProps, TableVariant } from './Table.types';
+import { ViewMode } from '../../hooks/useTableSettings';
+export type TanstackTableProps<T extends Record<string, any>> = Omit<TableProps<T>, 'columns' | 'onSortChange' | 'sortById' | 'sortDirection' | 'headerExtras' | 'toolbar'> & {
+    columns: ReadonlyArray<ColumnDef<T, any>>;
+    sorting?: SortingState;
+    manualSorting?: boolean;
+    onSortingChange?: (next: SortingState) => void;
+    optimisticSortingUi?: boolean;
+    variant?: TableVariant;
+    viewMode?: ViewMode;
+    visibleColumnIds?: string[];
+};
+export declare function TanstackTable<T extends Record<string, any>>(props: TanstackTableProps<T>): React.ReactNode;

package/dist/components/table/TanstackTable.js

@@ -0,0 +1,166 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useReactTable, getSortedRowModel, getCoreRowModel } from '@tanstack/react-table';
+import * as React from 'react';
+import ColumnResizer from './components/column-resizer/ColumnResizer';
+import { Table } from './Table';
+import { DEFAULT_COLUMN_PX } from './table.utils';
+import { sortingEqual, buildColumnVisibilityFromVisibleIds, buildDistributedColumnWidths, mapDefsToColumnItems, getSortPropsFromSorting } from './tanstackTable.utils';
+
+function TanstackTable(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 : []);
+  React.useEffect(() => {
+    if (!isControlledSorting) return;
+    if (sortingEqual(uiSorting, controlledSorting)) return;
+    setUiSorting(controlledSorting);
+  }, [isControlledSorting, controlledSorting, uiSorting]);
+  const columnVisibility = React.useMemo(
+    () => buildColumnVisibilityFromVisibleIds(columns, visibleColumnIds),
+    [columns, visibleColumnIds]
+  );
+  const [columnSizing, setColumnSizing] = React.useState({});
+  const containerRef = React.useRef(null);
+  const [availableWidth, setAvailableWidth] = React.useState(void 0);
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting: uiSorting,
+      columnSizing,
+      columnVisibility
+    },
+    onSortingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(uiSorting) : updater;
+      if (optimisticSortingUi) setUiSorting(next);
+      onSortingChange == null ? void 0 : onSortingChange(next);
+    },
+    onColumnSizingChange: setColumnSizing,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    manualSorting: manualSorting != null ? manualSorting : false,
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+    defaultColumn: {
+      enableResizing: true,
+      minSize: 80,
+      size: DEFAULT_COLUMN_PX
+    }
+  });
+  React.useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const updateWidth = () => {
+      const next = el.clientWidth;
+      setAvailableWidth(next > 0 ? next : void 0);
+    };
+    updateWidth();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", updateWidth);
+      return () => window.removeEventListener("resize", updateWidth);
+    }
+    const observer = new ResizeObserver((entries) => {
+      var _a, _b, _c;
+      const entry = entries[0];
+      if (!entry) {
+        updateWidth();
+        return;
+      }
+      const contentWidth = (_c = (_b = (_a = entry.contentBoxSize) == null ? void 0 : _a[0]) == null ? void 0 : _b.inlineSize) != null ? _c : entry.contentRect.width;
+      const next = Math.floor(contentWidth);
+      setAvailableWidth(next > 0 ? next : void 0);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const distributedLayout = React.useMemo(() => {
+    if (availableWidth == null) return null;
+    return buildDistributedColumnWidths({
+      table,
+      hasSelection: Boolean(selectedRows && onRowSelect && dataKey),
+      hasContextMenu: Boolean(tableProps.getContextMenuItems),
+      defaultMinPx: 80,
+      columnSizing,
+      availableWidth
+    });
+  }, [
+    table,
+    selectedRows,
+    onRowSelect,
+    dataKey,
+    tableProps.getContextMenuItems,
+    columnSizing,
+    availableWidth
+  ]);
+  const initialLayoutReady = availableWidth != null;
+  const resolvedLayout = React.useMemo(() => {
+    const next = {};
+    table.getVisibleLeafColumns().forEach((column) => {
+      next[column.id] = {
+        width: distributedLayout == null ? void 0 : distributedLayout.widths[column.id]
+      };
+    });
+    return next;
+  }, [table, distributedLayout]);
+  const columnItems = React.useMemo(
+    () => mapDefsToColumnItems(columns, columnVisibility, resolvedLayout),
+    [columns, columnVisibility, resolvedLayout]
+  );
+  const visibleData = table.getRowModel().rows.map((r) => r.original);
+  const { sortById, sortDirection } = getSortPropsFromSorting(uiSorting);
+  const handleSortChange = React.useCallback(
+    (column, direction) => {
+      const next = direction == null ? [] : [{ id: column.id, desc: direction === "desc" }];
+      if (optimisticSortingUi) setUiSorting(next);
+      onSortingChange == null ? void 0 : onSortingChange(next);
+    },
+    [optimisticSortingUi, onSortingChange]
+  );
+  const headerExtras = React.useCallback(
+    ({ index }) => {
+      var _a, _b, _c, _d;
+      const headerGroups = table.getHeaderGroups();
+      const leafHeaders = headerGroups.length > 0 ? headerGroups[headerGroups.length - 1].headers : [];
+      const header = leafHeaders[index];
+      if (!header) return null;
+      const canResize = (_c = (_b = (_a = header.column).getCanResize) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+      const handler = (_d = header.getResizeHandler) == null ? void 0 : _d.call(header);
+      if (!canResize || !handler) return null;
+      return /* @__PURE__ */ jsx(ColumnResizer, { id: header.column.id, handler });
+    },
+    [table]
+  );
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      ...tableProps,
+      tableRootRef: containerRef,
+      onSortChange: handleSortChange,
+      dataKey,
+      data: visibleData,
+      columns: columnItems,
+      tableWidth: distributedLayout == null ? void 0 : distributedLayout.totalWidth,
+      measuringLayout: !initialLayoutReady,
+      sortById,
+      sortDirection,
+      headerExtras,
+      selectedRows,
+      onRowSelect
+    }
+  );
+}
+
+export { TanstackTable };

package/dist/components/table/components/TableBody.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('../Table.module.css');
+var TableRow = require('./TableRow');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableBody({
+  data,
+  dataKey,
+  columns,
+  selectedRows,
+  hasSelection,
+  selectionMode,
+  selectionInputName,
+  viewMode,
+  getRowSeverity,
+  getContextMenuItems,
+  showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect,
+  onToggleRowExpand
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: styles__default.default.body, children: data.map((row) => {
+    const rowId = row[dataKey];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TableRow.TableRow,
+      {
+        row,
+        rowId,
+        columns,
+        selectedRows,
+        hasSelection,
+        selectionMode,
+        selectionInputName,
+        viewMode,
+        getRowSeverity,
+        getContextMenuItems,
+        showContextMenuOnHover,
+        expandableRows,
+        expandedRows,
+        onRowClick,
+        onRowMouseEnter,
+        onRowSelect,
+        onToggleRowExpand
+      },
+      `gridRow-${rowId}`
+    );
+  }) });
+}
+
+exports.TableBody = TableBody;

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { ViewMode } from '../../../hooks/useTableSettings';
+import type { ColumnItem, TableContextMenuItem } from '../Table.types';
+type Props<T extends Record<string, any>> = {
+    data: T[];
+    dataKey: keyof T;
+    columns: ColumnItem<T>[];
+    selectedRows?: Set<number | string>;
+    hasSelection: boolean;
+    selectionMode: 'single' | 'multiple';
+    selectionInputName: string;
+    viewMode?: ViewMode;
+    getRowSeverity?: (row: T) => any;
+    getContextMenuItems?: (args: {
+        row: T;
+        rowId: string | number;
+        open: () => void;
+    }) => TableContextMenuItem[];
+    showContextMenuOnHover: boolean;
+    expandableRows?: boolean;
+    expandedRows?: Set<number | string>;
+    onRowClick?: (row: T) => void;
+    onRowMouseEnter?: (row: T) => void;
+    onRowSelect?: (rowId: number | string, isSelected: boolean) => void;
+    onToggleRowExpand?: (rowId: number | string) => void;
+};
+export declare function TableBody<T extends Record<string, any>>({ data, dataKey, columns, selectedRows, hasSelection, selectionMode, selectionInputName, viewMode, getRowSeverity, getContextMenuItems, showContextMenuOnHover, expandableRows, expandedRows, onRowClick, onRowMouseEnter, onRowSelect, onToggleRowExpand, }: Props<T>): ReactNode;
+export {};

package/dist/components/table/components/TableBody.js

@@ -0,0 +1,52 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from '../Table.module.css';
+import { TableRow } from './TableRow';
+
+function TableBody({
+  data,
+  dataKey,
+  columns,
+  selectedRows,
+  hasSelection,
+  selectionMode,
+  selectionInputName,
+  viewMode,
+  getRowSeverity,
+  getContextMenuItems,
+  showContextMenuOnHover,
+  expandableRows,
+  expandedRows,
+  onRowClick,
+  onRowMouseEnter,
+  onRowSelect,
+  onToggleRowExpand
+}) {
+  return /* @__PURE__ */ jsx("tbody", { className: styles.body, children: data.map((row) => {
+    const rowId = row[dataKey];
+    return /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        row,
+        rowId,
+        columns,
+        selectedRows,
+        hasSelection,
+        selectionMode,
+        selectionInputName,
+        viewMode,
+        getRowSeverity,
+        getContextMenuItems,
+        showContextMenuOnHover,
+        expandableRows,
+        expandedRows,
+        onRowClick,
+        onRowMouseEnter,
+        onRowSelect,
+        onToggleRowExpand
+      },
+      `gridRow-${rowId}`
+    );
+  }) });
+}
+
+export { TableBody };

package/dist/components/table/components/TableHeader.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var TableHeaderCell = require('./TableHeaderCell');
+var TableSelectionCell = require('./TableSelectionCell');
+var styles = require('../Table.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function TableHeader({
+  columns,
+  hasSelection,
+  selectionMode,
+  allRowsSelected,
+  onSelectAllRows,
+  sortById,
+  sortDirection,
+  onSortChange,
+  headerExtras,
+  stickyTop
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      className: styles__default.default.header,
+      style: stickyTop ? { top: stickyTop, position: "sticky", zIndex: 2 } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: styles__default.default.headerRow, children: [
+        hasSelection ? /* @__PURE__ */ jsxRuntime.jsx(
+          TableSelectionCell.TableSelectionCell,
+          {
+            isHeader: true,
+            multiple: selectionMode === "multiple",
+            checked: allRowsSelected,
+            onToggle: (checked) => onSelectAllRows == null ? void 0 : onSelectAllRows(checked)
+          }
+        ) : null,
+        columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableHeaderCell.TableHeaderCell,
+          {
+            column,
+            index,
+            sortById,
+            sortDirection,
+            onSortChange,
+            extraContent: headerExtras == null ? void 0 : headerExtras({ column, index })
+          },
+          column.id
+        ))
+      ] })
+    }
+  );
+}
+
+exports.TableHeader = TableHeader;

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

@@ -0,0 +1,16 @@
+import React, { type ReactNode } from 'react';
+import type { ColumnItem, HeaderExtrasArgs, SortDirection } from '../Table.types';
+type Props<T> = {
+    columns: ColumnItem<T>[];
+    hasSelection: boolean;
+    selectionMode: 'single' | 'multiple';
+    allRowsSelected?: boolean;
+    onSelectAllRows?: (isSelected: boolean) => void;
+    sortById?: string;
+    sortDirection?: SortDirection;
+    onSortChange?: (column: ColumnItem<T>, direction: SortDirection) => void;
+    headerExtras?: (args: HeaderExtrasArgs<T>) => ReactNode;
+    stickyTop?: string;
+};
+export declare function TableHeader<T>({ columns, hasSelection, selectionMode, allRowsSelected, onSelectAllRows, sortById, sortDirection, onSortChange, headerExtras, stickyTop, }: Props<T>): React.ReactNode;
+export {};