@navikt/ds-react 8.10.5 → 8.10.6

package/src/data/table/root/DataTableRoot.tsx

@@ -1,9 +1,7 @@
-/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 import React, {
   forwardRef,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from "react";
@@ -12,6 +10,7 @@ import { useId } from "../../../utils-external";
 import { Slot } from "../../../utils/components/slot/Slot";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
+import { useDataGridContext } from "../../data-grid/root/DataGridRoot.context";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader";
 import { DataTableDetailsPanelRow } from "../details-panel-row/DataTableDetailsPanelRow";
@@ -21,12 +20,7 @@ import {
   DataTableDetailsPanelProvider,
   type DetailsPanelProps,
 } from "../hooks/useTableDetailsPanel";
-import {
-  type SubRowsProps,
-  TableItemsProvider,
-  useTableItems,
-  useTableItemsContext,
-} from "../hooks/useTableItems";
+import { type SubRowsProps, useTableItems } from "../hooks/useTableItems";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
 import {
   type SelectionProps,
@@ -38,14 +32,29 @@ import { DataTableSubRowToggle } from "../sub-row-toggle/DataTableSubRowToggle";
 import { DataTableTbody } from "../tbody/DataTableTbody";
 import { DataTableThead } from "../thead/DataTableThead";
 import { DataTableTr } from "../tr/DataTableTr";
-import type { ColumnDefinitions } from "./DataTable.types";
+import type {
+  DataTableLoadingConfig,
+  TableRowEntryId,
+} from "./DataTable.types";
 import {
   DataTableContextProvider,
   useDataTableContext,
 } from "./DataTableRoot.context";
 
-interface DataTableProps<T>
-  extends React.HTMLAttributes<HTMLTableElement>, TableSortOptions {
+/**
+ * TODO: For consideration:
+ * - Use namespacing for types. There will be a lot of standalone types connected to this component,
+ * it could make sense to access them under DataTable.X instead of separate imports.
+ * - Consider having a "Wrapper" component that only handles context and logic like,
+ * "DataTableRoot" or "DataGrid" or something, and then have the main "DataTable" component only handle rendering of table itself.
+ * This would make props more focused and discoverable since its not mixed with htmltable-props.
+ */
+
+/**
+ * TODO:
+ * - Test `onColumnDefinitionChange` callback that is called when resize, sort, order etc changes
+ */
+interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement> {
   children?: never;
   /**
    * Controls vertical cell padding.
@@ -60,21 +69,16 @@ interface DataTableProps<T>
   /**
    * Truncate content in cells and show ellipsis for overflowed text.
    *
-   * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
-   * @default true
+   * **NB:** When using this together with `layout="auto"`,
+   * you have to manually set a `maxWidth` on columns that should be truncated.
+   * @default false if layout="auto", else true
    */
-  truncateContent?: boolean; // TODO: Consider making this default false when layout=auto, and maybe disallow it but add a wrap prop on the td-comp.
+  truncateContent?: boolean;
   /**
    * Enables keyboard navigation for table rows and cells.
    * @default true
    */
   withKeyboardNav?: boolean;
-  /**
-   * Custom callback to determine if navigation should be blocked.
-   * Called before default blocking logic.
-   * Requires `withKeyboardNav` to be `true`.
-   */
-  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
   /**
    * Controls table layout.
    *
@@ -90,35 +94,14 @@ interface DataTableProps<T>
    * @default "fixed"
    */
   layout?: "fixed" | "auto";
-  /**
-   * Defines the columns of the table and how to render them.
-   *
-   *
-   * Each column definition should have a unique `id` (or use the column index as fallback) and a `cell`-renderer function that takes the row data as argument and returns a React node.
-   */
-  columnDefinitions: ColumnDefinitions<T>;
-  /**
-   * The data to display in the table.
-   *
-   *
-   * Each object in the array represents a row, and the properties of the object are used to render the cells based on the `columnDefinitions`.
-   */
-  data: T[];
-  /**
-   * Function to get unique row id from row data.
-   *
-   *
-   * If not provided, the row index will be used as id. This can cause issues if your data changes dynamically, so it's recommended to provide a stable id if possible.
-   */
-  getRowId?: (rowData: T) => string | number;
   /**
    * Sticky columns that remain visible when horizontally scrolling the table.
    *
    * You can specify 1 sticky column on the left and 1 on the right.
    */
   stickyColumns?: {
-    first?: "1";
-    last?: "1";
+    start?: "1";
+    end?: "1";
   };
   /**
    * @default true
@@ -129,215 +112,167 @@ interface DataTableProps<T>
    * Not called when clicking header, loading, or empty-state rows.
    */
   onRowClick?: (
-    rowId: string | number,
+    rowId: TableRowEntryId,
     event: React.MouseEvent<HTMLTableRowElement>,
   ) => void;
   /**
    * Content to render when `data` is empty.
    * Rendered inside a `DataTable.EmptyState` row spanning all columns.
    */
-  emptyState?: React.ReactNode;
-  loading?: {
-    /**
-     * Shows the table in a loading state.
-     *
-     * - When `loadingState` is provided, it is rendered inside a `DataTable.LoadingState` row.
-     * - When `loadingState` is **not** provided, skeleton placeholder rows are rendered instead.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Custom content to render when `isLoading` is `true`.
-     * Rendered inside a `DataTable.LoadingState` row spanning all columns.
-     * When omitted, skeleton rows are rendered based on `loadingRows`.
-     */
-    loadingState?: React.ReactNode;
-    /**
-     * Number of skeleton rows to render when `isLoading` is `true` and no `loadingState` is provided.
-     *
-     *
-     * If not provided, the rendered content will get a temporarily overlay while loading
-     */
-    loadingRows?: number;
-    /**
-     * Visually hidden label announced to screen readers when skeleton rows are shown.
-     * Only used when `isLoading` is `true` and no `loadingState` is provided.
-     * @default "Laster innhold"
-     */
-    loadingLabel?: string;
-  };
-
+  emptyContent?: React.ReactNode;
   /**
-   * Function to get sub-rows for a given row, used for nested rows.
-   * When provided, an expand toggle column is added automatically.
-   *
+   * Configures how the table behaves during loading.
    *
-   * TODO:
-   * - Table might need to be implemented with role="treegrid" for a11y when having nested rows.
+   * Use `variant` to select the loading strategy:
+   * - `"content"` — renders custom content inside a full-width row.
+   * - `"skeleton"` — renders skeleton placeholder rows.
+   * - `"overlay"` — keeps existing data visible with a loading overlay.
+   */
+  loading?: DataTableLoadingConfig;
+  /**
+   * Adjusts font-size
+   * @default "medium"
+   */
+  textSize?: "small" | "medium";
+  /**
+   * Object with props related to row selection.
+   */
+  selection?: SelectionProps<T>;
+  /**
+   * Object with props related to nested rows (sub-rows).
+   */
+  subRows?: SubRowsProps<T>; // TODO: Table might need to be implemented with role="treegrid" for a11y when having nested rows.
+  /**
+   * Object with props related to details panel.
+   * This is a panel that can be expanded below each row to show arbitrary content.
    */
-  selection?: SelectionProps;
-  subRows?: SubRowsProps<T>;
   detailsPanel?: DetailsPanelProps<T>;
+  /**
+   * Object with props related to sorting.
+   */
+  sorting?: TableSortOptions;
 }
 
-function DataTableInner<T>(
-  {
-    className,
-    id,
-    rowDensity = "normal",
-    withKeyboardNav = true,
-    zebraStripes = false,
-    truncateContent = true,
-    shouldBlockNavigation,
-    layout = "fixed",
-    selection,
-    data,
-    columnDefinitions,
-    getRowId,
-    stickyColumns,
-    stickyHeader = true,
-    sort: sortProp,
-    defaultSort = [],
-    onSortChange,
-    onRowClick,
-    emptyState,
-    loading,
-    detailsPanel,
-    subRows,
-    ...rest
-  }: DataTableProps<T>,
-  forwardedRef: React.ForwardedRef<HTMLTableElement>,
-) {
-  const { sortState, onSortClick } = useTableSort({
-    defaultSort,
-    onSortChange,
-    sort: sortProp,
-  });
+const DataTableInternal = forwardRef<HTMLTableElement, DataTableProps<any>>(
+  (
+    {
+      className,
+      id,
+      rowDensity = "normal",
+      textSize = "medium",
+      withKeyboardNav = true,
+      zebraStripes = false,
+      truncateContent: truncateContentProp,
+      layout = "fixed",
+      stickyColumns,
+      stickyHeader = true,
+      onRowClick,
+      emptyContent,
+      selection,
+      loading,
+      detailsPanel,
+      subRows,
+      sorting,
+      ...rest
+    }: DataTableProps<any>, // Have to use <any> for docgen to work
+    forwardedRef,
+  ) => {
+    const { columnDefinitions, data, getRowId } = useDataGridContext();
+
+    const sortingState = useTableSort(sorting);
+
+    const tableItems = useTableItems({
+      items: data,
+      getRowId,
+      subRows,
+    });
 
-  const tableItems = useTableItems({
-    items: data,
-    getRowId,
-    subRows,
-  });
+    const tableSelectionState = useTableSelection({
+      selection,
+      tableItems,
+    });
 
-  const tableSelectionState = useTableSelection({
-    selection,
-    visibleRowIds: tableItems.visibleRowIds,
-    childRowIdsById: tableItems.childRowIdsById,
-  });
+    const { columns, stickyStart, totalColSpan } = useColumnOptions(
+      columnDefinitions,
+      {
+        stickyColumns,
+        hasSelection: tableSelectionState.selection.selectionMode !== "none",
+        hasDetailsPanel: !!detailsPanel?.getContent,
+        layout,
+      },
+    );
 
-  const { columns, stickySelection } = useColumnOptions<T>(columnDefinitions, {
-    stickyColumns,
-    selectionMode: tableSelectionState.selection.selectionMode,
-  });
+    const tableId = useId(id);
 
-  const {
-    isLoading = false,
-    loadingState,
-    loadingRows,
-    loadingLabel = "Laster innhold",
-  } = loading || {};
+    const truncateContent = truncateContentProp ?? layout !== "auto";
 
-  const fullWidthColSpan = useMemo(() => {
     return (
-      columns.length +
-      (layout === "fixed" ? 1 : 0) +
-      (tableSelectionState.selection.selectionMode !== "none" ? 1 : 0) +
-      (detailsPanel?.getContent ? 1 : 0)
-    );
-  }, [
-    columns,
-    layout,
-    tableSelectionState.selection.selectionMode,
-    detailsPanel,
-  ]);
-
-  const tableId = useId(id);
-
-  return (
-    <DataTableContextProvider
-      layout={layout}
-      withKeyboardNav={withKeyboardNav}
-      selectionState={tableSelectionState}
-      stickySelection={stickySelection}
-      stickyHeader={stickyHeader}
-      tableId={tableId}
-      showLoadingSkeletons={isLoading && loadingState == null}
-      onRowClick={onRowClick}
-      isLoading={isLoading}
-      showLoadingOverlay={isLoading && !loadingState && !loadingRows}
-      columns={columns}
-      fullWidthColSpan={fullWidthColSpan}
-    >
-      <TableItemsProvider
-        itemDetails={tableItems.itemDetails}
-        items={tableItems.items}
-        visibleRowIds={tableItems.visibleRowIds}
-        onExpandedRowIdsChange={tableItems.onExpandedRowIdsChange}
-        isSubRowExpanded={tableItems.isSubRowExpanded}
+      <DataTableContextProvider
+        layout={layout}
+        withKeyboardNav={withKeyboardNav}
+        selectionState={tableSelectionState}
+        stickyStart={stickyStart}
+        stickyHeader={stickyHeader}
+        tableId={tableId}
+        loading={loading}
+        onRowClick={onRowClick}
+        columns={columns}
+        totalColSpan={totalColSpan}
+        tableItems={tableItems}
+        sortingState={sortingState}
       >
-        <DataTableDetailsPanelProvider detailsPanel={detailsPanel}>
-          <TableElementWrapper
-            shouldBlockNavigation={shouldBlockNavigation}
-            enabled={withKeyboardNav}
+        <TableElementWrapper enabled={withKeyboardNav}>
+          <table
+            {...rest}
+            ref={forwardedRef}
+            className={cl("aksel-data-table", className)}
+            data-zebra-stripes={zebraStripes}
+            data-truncate-content={truncateContent}
+            data-density={rowDensity}
+            data-text-size={textSize}
+            data-layout={layout}
+            data-loading={loading?.isLoading || undefined}
+            aria-busy={loading?.isLoading || undefined}
           >
-            <table
-              {...rest}
-              ref={forwardedRef}
-              className={cl("aksel-data-table", className)}
-              data-zebra-stripes={zebraStripes}
-              data-truncate-content={truncateContent}
-              data-density={rowDensity}
-              data-layout={layout}
-              data-loading={isLoading || undefined}
-              aria-busy={isLoading || undefined}
-            >
+            <DataTableDetailsPanelProvider detailsPanel={detailsPanel}>
               <DataTableThead>
                 <DataTableTr>
-                  {columns.map(({ isSticky, colDef }) => {
-                    const sortEntry = sortState.find(
-                      (s) => s.columnId === colDef.id,
-                    );
-                    const sortDirection = sortEntry?.direction ?? "none";
-                    return (
-                      <DataTableColumnHeader
-                        resizable={colDef.resizable}
-                        width={colDef.width}
-                        defaultWidth={colDef.defaultWidth}
-                        autoWidth={colDef.autoWidth}
-                        minWidth={colDef.minWidth}
-                        maxWidth={colDef.maxWidth}
-                        onWidthChange={colDef.onWidthChange}
-                        textAlign={colDef.align ?? "left"}
-                        key={colDef.id}
-                        isSticky={isSticky}
-                        sortable={colDef.sortable}
-                        sortDirection={sortDirection}
-                        onSortClick={(event) => onSortClick(colDef.id, event)}
-                        label={colDef.label}
-                      >
-                        {colDef.header ?? colDef.label}
-                      </DataTableColumnHeader>
-                    );
-                  })}
+                  {columns.map(
+                    ({ isSticky, isStickyLast, stickyLeftOffset, colDef }) => {
+                      return (
+                        <DataTableColumnHeader
+                          id={colDef.id}
+                          width={colDef.width}
+                          textAlign={colDef.align ?? "left"}
+                          key={colDef.id}
+                          isSticky={isSticky}
+                          sortable={colDef.sortable}
+                          label={colDef.label}
+                          style={
+                            stickyLeftOffset
+                              ? { left: stickyLeftOffset }
+                              : undefined
+                          }
+                          data-sticky-last={isStickyLast || undefined}
+                        >
+                          {colDef.header ?? colDef.label}
+                        </DataTableColumnHeader>
+                      );
+                    },
+                  )}
                 </DataTableTr>
               </DataTableThead>
 
               <DataTableTbody>
-                <DataTableTBodyContent
-                  loadingState={loadingState}
-                  loadingRows={loadingRows}
-                  loadingLabel={loadingLabel}
-                  emptyState={emptyState}
-                />
+                <DataTableTBodyContent emptyContent={emptyContent} />
               </DataTableTbody>
-            </table>
-          </TableElementWrapper>
-        </DataTableDetailsPanelProvider>
-      </TableItemsProvider>
-    </DataTableContextProvider>
-  );
-}
+            </DataTableDetailsPanelProvider>
+          </table>
+        </TableElementWrapper>
+      </DataTableContextProvider>
+    );
+  },
+);
 
 /**
  * Temp optimization to avoid re-renders on every keyboard-move, selection change etc
@@ -345,10 +280,8 @@ function DataTableInner<T>(
 function TableElementWrapper({
   children,
   enabled,
-  shouldBlockNavigation,
 }: {
   children: React.ReactNode;
-  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
   enabled: boolean;
 }) {
   const [applyStickyStyles, setApplyStickyStyles] = useState<boolean>(false);
@@ -358,7 +291,6 @@ function TableElementWrapper({
   const rafRef = useRef<number | null>(null);
   const { tabIndex, setTableRef } = useTableKeyboardNav({
     enabled,
-    shouldBlockNavigation,
   });
 
   const mergedTableRefs = useMergeRefs(tableRef, setTableRef);
@@ -437,77 +369,86 @@ function TableElementWrapper({
 }
 
 interface DataTableTBodyContentProps {
-  loadingState: React.ReactNode;
-  loadingLabel: string;
-  loadingRows?: number;
-  emptyState: React.ReactNode;
+  emptyContent: React.ReactNode;
 }
 
-function DataTableTBodyContent({
-  loadingState,
-  loadingRows,
-  loadingLabel,
-  emptyState,
-}: DataTableTBodyContentProps) {
-  const { items, itemDetails, visibleRowIds } = useTableItemsContext();
-  const { columns, isLoading, fullWidthColSpan } = useDataTableContext();
+function DataTableTBodyContent({ emptyContent }: DataTableTBodyContentProps) {
+  const { columns, loading, totalColSpan, tableItems } = useDataTableContext();
 
-  if (isLoading && loadingState != null) {
+  if (loading?.isLoading && loading?.variant === "content") {
     return (
-      <DataTableLoadingState colSpan={fullWidthColSpan}>
-        {loadingState}
+      <DataTableLoadingState colSpan={totalColSpan}>
+        {loading.content}
       </DataTableLoadingState>
     );
   }
 
-  if (isLoading && loadingRows) {
+  if (loading?.isLoading && loading?.variant === "skeleton") {
+    const rows = loading.rows ?? 5;
+    const label = loading.label ?? "Laster innhold";
     return (
       <>
         <tr>
-          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
-            {loadingLabel}
+          <td colSpan={totalColSpan} className="aksel-sr-only">
+            {label}
           </td>
         </tr>
-        {Array.from({ length: loadingRows }, (_, rowIndex) => (
+        {Array.from({ length: rows }, (_, rowIndex) => (
           <DataTableTr key={`skeleton-row-${rowIndex}`} aria-hidden>
-            {columns.map(({ isSticky, colDef }, colDefIndex) => (
-              <DataTableBaseCell
-                textAlign={colDef.align ?? "left"}
-                key={colDef.id || colDefIndex}
-                as={colDef.isRowHeader ? "th" : "td"}
-                isSticky={isSticky}
-              >
-                <Skeleton variant="text" />
-              </DataTableBaseCell>
-            ))}
+            {columns.map(
+              (
+                { isSticky, isStickyLast, stickyLeftOffset, colDef },
+                colDefIndex,
+              ) => (
+                <DataTableBaseCell
+                  textAlign={colDef.align ?? "left"}
+                  key={colDef.id || colDefIndex}
+                  as={colDef.isRowHeader ? "th" : "td"}
+                  isSticky={isSticky}
+                  style={
+                    stickyLeftOffset ? { left: stickyLeftOffset } : undefined
+                  }
+                  data-sticky-last={isStickyLast || undefined}
+                >
+                  <Skeleton variant="text" />
+                </DataTableBaseCell>
+              ),
+            )}
           </DataTableTr>
         ))}
       </>
     );
   }
 
-  if (items.length === 0 && emptyState !== undefined) {
+  if (tableItems.items.length === 0 && emptyContent !== undefined) {
     return (
-      <DataTableEmptyState colSpan={fullWidthColSpan}>
-        {emptyState}
+      <DataTableEmptyState colSpan={totalColSpan}>
+        {emptyContent}
       </DataTableEmptyState>
     );
   }
 
-  const renderLoadingAnnouncement = isLoading && !loadingState && !loadingRows;
+  const renderLoadingAnnouncement =
+    loading?.isLoading && loading?.variant === "overlay";
+
+  const overlayLabel =
+    loading?.variant === "overlay"
+      ? (loading.label ?? "Laster innhold")
+      : "Laster innhold";
 
   return (
     <>
       {renderLoadingAnnouncement && (
         <tr>
-          <td colSpan={fullWidthColSpan} className="aksel-sr-only">
-            {loadingLabel}
+          <td colSpan={totalColSpan} className="aksel-sr-only">
+            {overlayLabel}
           </td>
         </tr>
       )}
-      {items.map((rowData, rowIndex) => {
-        const rowId = visibleRowIds[rowIndex];
-        const details = rowId != null ? itemDetails.get(rowId) : undefined;
+      {tableItems.items.map((rowData, rowIndex) => {
+        const rowId = tableItems.visibleRowIds[rowIndex];
+        const details =
+          rowId != null ? tableItems.itemDetails.get(rowId) : undefined;
 
         /* Should in theory be impossible. Look about typing this? */
         if (!details) {
@@ -519,31 +460,40 @@ function DataTableTBodyContent({
         return (
           <React.Fragment key={details.id}>
             <DataTableTr rowId={details.id}>
-              {columns.map(({ isSticky, colDef }, colDefIndex) => {
-                const renderNestedToggle = colDefIndex === 0 && hasSubRows;
-                const renderNestedIndent =
-                  colDefIndex === 0 && (details.level > 0 || hasSubRows);
-
-                const style: React.CSSProperties = {
-                  "--__axc-data-table-nested-depth": details.level,
-                };
-
-                return (
-                  <DataTableBaseCell
-                    textAlign={colDef.align ?? "left"}
-                    key={colDef.id || colDefIndex}
-                    as={colDef.isRowHeader ? "th" : "td"}
-                    isSticky={isSticky}
-                    data-nested={renderNestedIndent || undefined}
-                    style={style}
-                  >
-                    {renderNestedToggle && (
-                      <DataTableSubRowToggle details={details} />
-                    )}
-                    {colDef.cell(rowData)}
-                  </DataTableBaseCell>
-                );
-              })}
+              {columns.map(
+                (
+                  { isSticky, isStickyLast, stickyLeftOffset, colDef },
+                  colDefIndex,
+                ) => {
+                  const renderNestedToggle = colDefIndex === 0 && hasSubRows;
+                  const renderNestedIndent =
+                    colDefIndex === 0 && (details.level > 0 || hasSubRows);
+
+                  const style: React.CSSProperties = {
+                    "--__axc-data-table-nested-depth": details.level,
+                    ...(stickyLeftOffset ? { left: stickyLeftOffset } : {}),
+                  };
+
+                  return (
+                    <DataTableBaseCell
+                      textAlign={colDef.align ?? "left"}
+                      key={colDef.id || colDefIndex}
+                      as={colDef.isRowHeader ? "th" : "td"}
+                      isSticky={isSticky}
+                      data-nested={renderNestedIndent || undefined}
+                      data-sticky-last={isStickyLast || undefined}
+                      style={style}
+                      beforeContent={
+                        renderNestedToggle ? (
+                          <DataTableSubRowToggle details={details} />
+                        ) : undefined
+                      }
+                    >
+                      {colDef.cell(rowData)}
+                    </DataTableBaseCell>
+                  );
+                },
+              )}
             </DataTableTr>
             <DataTableDetailsPanelRow rowId={details.id} rowData={rowData} />
           </React.Fragment>
@@ -553,10 +503,11 @@ function DataTableTBodyContent({
   );
 }
 
-const DataTable = forwardRef(DataTableInner) as <T>(
+const DataTable = DataTableInternal as <T>(
   props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>,
 ) => React.ReactElement | null;
 
-export { DataTable };
+// docgen doesn't work well with type params, so we let it use DataTableInternal instead
+export { DataTable, DataTableInternal };
 export type { DataTableProps };
 export default DataTable;