qantler-flaz-dataview 1.0.0

package/src/FlazDataView.jsx

@@ -0,0 +1,2943 @@
+import React, { useState, useEffect, useLayoutEffect, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import {
+  ArrowDownWideNarrow,
+  ArrowUpNarrowWide,
+  ChevronDown,
+  Eraser,
+  ListFilter,
+  Menu,
+  ChevronsLeft,
+  Layout,
+  Check,
+  X,
+  MoreHorizontal,
+  SlidersHorizontal,
+  Download,
+  Search,
+} from "lucide-react";
+import MdtRowActionsMenu from "./MdtRowActionsMenu";
+import DeleteConfirmModal from "../../custom/DeleteConfirmModal";
+import MdtCreateViewModal from "./MdtCreateViewModal";
+import MdtActiveFilterBar from "./MdtActiveFilterBar";
+import MdtDisplayPopup from "./MdtDisplayPopup";
+import MdtBulkSelectionBar from "./MdtBulkSelectionBar";
+import MdtTabsSection from "./MdtTabsSection";
+import MdtSidebarNav from "./MdtSidebarNav";
+import { resolveFilterConfig, getFilterableColumns } from "./mdtFilterUtils";
+import { getBulkFieldsFromColumns } from "./bulkBarUtils";
+import "./FlazDataView.css";
+import { renderColumnIcon, renderColumnDefIcon, resolveFilterColumnIcon } from "../../ui/tableColumnIcons";
+import FlazDataViewList from "./FlazDataViewList";
+import MdtEmptyState from "./MdtEmptyState";
+import MdtValueEditorPopup from "./MdtValueEditorPopup";
+import {
+  EDIT_MODE,
+  getRowFieldEditValue,
+  isColumnCellEditable,
+  normalizeEditApplyValue,
+  computeCellEditPopupPosition,
+  refineCellEditPopupPosition,
+  buildBulkEditPayload,
+  getColumnFieldVariant,
+  getColumnSelectOptions,
+  isColumnSelectMulti,
+  resolveEditColumnConfig,
+  isColumnDisplayHideable,
+} from "./mdtColumnEditUtils";
+import {
+  MdtMultiSelectCellDisplay,
+  getColumnRowIconName,
+  hasCustomColumnCell,
+  hasStatusValueRenderer,
+  renderStatusValueDisplay,
+  shouldUseMultiSelectSummary,
+} from "./mdtMultiSelectDisplay";
+import MdtTruncateWithTooltip from "./MdtTruncateWithTooltip";
+import {
+  syncAnchoredPopupTop,
+  clearMobilePopupTop,
+  isMobilePopupLayout,
+} from "./mdtMobilePopupPosition";
+import { isSameMdtTab } from "./mdtTabChangeUtils";
+import {
+  DEFAULT_DATE_FILTER_OPERATOR,
+  isDateLikeFilterColumn,
+  isFilterValueSet,
+} from "./mdtDateFilterUtils";
+import { applyClientSideFilters } from "./mdtClientSideFilter";
+import { getColumnTooltipText } from "./mdtTooltipFormat";
+import apiService from "../../../actions/api";
+import API from "../../../helpers/endpoint";
+
+const DEFAULT_VIEW_MODE = "table";
+
+const FlazDataView = ({
+  title = "",
+  titleIcon = null,
+  countText = "",
+  /** Total count badge shown beside the module title */
+  totalCount = null,
+  rows = [],
+  columns = [],
+  onExport,
+  onPrimaryAction,
+  primaryActionLabel = "New",
+  /**
+   * Header toolbar action visibility. All default to true.
+   * showNew — primary action (e.g. "New"); still hidden when hideHeader is true.
+   * showExport — export icon button; renders only when onExport is also provided.
+   */
+  headerActions = {},
+  onRowClick,
+  isLoading = false,
+  emptyStateTitle = "No data found",
+  skeletonRows = 12,
+  onTableScroll,
+  onSort,
+  sortConfig = null,
+  /**
+   * Default sort when sortConfig is not provided (uncontrolled).
+   * e.g. { column: "applicationId", direction: "desc" }
+   */
+  defaultSort = null,
+  tabs = [],
+  activeTab = null,
+  onTabChange,
+  hideHeader = false,   // hides the title/icon row only — filter+layout always shown
+  /** Optional non-clickable breadcrumb labels for header (e.g. Admin > Master Data). */
+  headerBreadcrumbs = null,
+  /** Optional trailing breadcrumb dropdown (e.g. Languages + count). */
+  headerBreadcrumbMenu = null,
+  /** Mobile breadcrumb: show compact "..." (non-clickable) + current page only. */
+  enableCompactBreadcrumbEllipsis = false,
+  /** Renders layout/filter/display/new toolbar into #mdt-breadcrumb-toolbar-host (global breadcrumb). */
+  toolbarInBreadcrumb = false,
+  /** Breadcrumb toolbar host element id (default: mdt-breadcrumb-toolbar-host). */
+  breadcrumbToolbarHostId = "mdt-breadcrumb-toolbar-host",
+  /** Bump when the breadcrumb toolbar host mounts (e.g. tab switch) to re-bind the portal. */
+  toolbarHostSeed = 0,
+  onFilterChange,
+  /** Filter UI labels/visibility — see mdtFilterUtils DEFAULT_FILTER_CONFIG */
+  filterConfig = {},
+  /** Tabs row — counts, saved-view edit, more button label, className */
+  tabsConfig = {},
+  /** Called when user creates a saved view from the Create View modal. */
+  onCreateView,
+  /** @deprecated Use onCreateView instead */
+  onSaveFiltersAs,
+  /** Bump to refresh live saved-view tab counts from API (e.g. after list mutations). */
+  savedViewsRefreshKey = 0,
+  /** When true, the first saved view is NOT auto-selected on initial load. Use for admin/config modules. */
+  disableAutoSelectFirstView = false,
+  /** Extra query params to append to saved view counts API call (e.g. "clientId=129"). */
+  savedViewCountsExtraParams = "",
+  /** Parent receives `() => refresh saved-view counts` (e.g. after inline edit). */
+  onBindSavedViewCountsRefresh,
+  rowKey = "applicationId",
+  /** Table view: column pinned to the left when scrolling horizontally (defaults to rowKey). */
+  tableStickyColumnKey = null,
+  /**
+   * List view: columns always shown on the left (main ID + secondary line).
+   * Remaining visible columns render as chips on the right.
+   */
+  listLeftColumnKeys = null,
+  /** List view primary column (defaults to rowKey). */
+  listMainColumnKey = null,
+  /**
+   * List secondary line keys after main ID. null = all listLeftColumnKeys except main.
+   * [] = no secondary line. e.g. ["jobOpeningName", "candidateName"].
+   */
+  listLeftSecondaryKeys = null,
+  /** Joins listLeftSecondaryKeys, e.g. " - " for "Opening - Candidate". */
+  listLeftSecondarySeparator = " - ",
+  /**
+   * Columns always visible — cannot be hidden (defaults to rowKey).
+   * Per-column: displayHideable: false (or hideable: false) also prevents hiding.
+   */
+  displayLockedColumnKeys = null,
+  onRowEdit,
+  onRowDownload,
+  onRowDelete,
+  /** Extra ⋯ menu items: [{ id?, label, icon?, onClick(rowId, row), disabled?, hidden? }] */
+  rowMenuActions = [],
+  deleteConfirmConfig = {},
+  /** Optional per-row delete guard, e.g. (row) => row.isDeletable !== false */
+  isRowDeletable = null,
+  /** When true, shows row checkboxes and the bottom bulk selection bar. */
+  enableBulkSelection = false,
+  /**
+   * Bulk bar pills — full override. If omitted, built from columns with bulkEditable: true.
+   */
+  bulkBarFields,
+  /** Allow-list of accessorKeys for bulk pills (used when bulkBarFields is omitted). */
+  bulkEditableKeys = null,
+  onBulkBarFieldClick,
+  onBulkDelete,
+  bulkBarRightAction = null,
+  /** When set, list view starts grouped by this column; `null` after choosing "None" shows a flat list. */
+  defaultListGroupByKey = null,
+  /**
+   * Table cell inline edit. Fires when user applies a value from the cell editor popup.
+   * Only columns with `editable: true`.
+   * Column config: editVariant ("text"|"select"|"date"|"number"|"boolean"), editMulti, …
+   * editValueKey, editPlaceholder, editRenderIcon (falls back to filter* props).
+   */
+  onCellEdit,
+  onCellEditStart,
+  /**
+   * Bulk bar apply — same editor UI; uses bulk* column config when set.
+   * bulkVariant, bulkMulti, bulkSelectOptions, bulkPlaceholder, bulkRenderIcon
+   * (falls back to edit* then filter*). Returns JSON via buildBulkEditPayload.
+   */
+  onBulkEdit,
+  /** When false, shows sidebar expand control (pass from page Redux/connect). */
+  menuToggle,
+  /** Called when user clicks sidebar expand (e.g. props.toggleMenu from Job Applications). */
+  onSidebarToggle,
+  /** When true, keeps sidebar toggle visible even when sidebar is already expanded. */
+  showSidebarToggleAlways = false,
+  /** Optional master-data style left sidebar config: { items, activeKey, onItemClick, width }. */
+  sidebarNavConfig = null,
+  /** Optional per-page width lock for table columns (prevents width jump after data load). */
+  tableLayoutFixed = true,
+  /**
+   * When true, filter value/operator popups use position:fixed + viewport anchoring
+   * (for nested layouts where overflow:hidden would clip absolute popups).
+   */
+  anchoredFilterPopups = false,
+  /** When set, locks table/list mode and hides the layout switch (e.g. embedded candidate tabs). */
+  lockedViewMode = null,
+}) => {
+  const resolvedHeaderActions = {
+    showNew: true,
+    showExport: true,
+    showDisplay: true,
+    showFilter: true,
+    showLayoutSwitch: true,
+    ...headerActions,
+  };
+
+  const resolvedFilterConfig = React.useMemo(
+    () => resolveFilterConfig(filterConfig),
+    [filterConfig],
+  );
+
+  const storageScopeKey = React.useMemo(() => {
+    const titlePart = String(title || rowKey || "flaz-data-view")
+      .trim()
+      .toLowerCase()
+      .replace(/\s+/g, "-");
+    return `mdt:view-mode:${titlePart}`;
+  }, [rowKey, title]);
+
+  const savedViewPageKey = React.useMemo(
+    () => String(title || rowKey || "flaz-data-view").trim().toLowerCase(),
+    [rowKey, title],
+  );
+
+  const resolveViewMode = React.useCallback(
+    (mode) => (mode === "list" ? "list" : DEFAULT_VIEW_MODE),
+    [],
+  );
+
+  const getStoredViewMode = React.useCallback(() => {
+    if (lockedViewMode) return resolveViewMode(lockedViewMode);
+    if (typeof window === "undefined") return DEFAULT_VIEW_MODE;
+    const stored = window.localStorage.getItem(storageScopeKey);
+    return stored === "list" ? "list" : DEFAULT_VIEW_MODE;
+  }, [lockedViewMode, resolveViewMode, storageScopeKey]);
+
+  const [viewMode, setViewModeState] = useState(() => getStoredViewMode());
+
+  const setViewMode = React.useCallback(
+    (nextMode) => {
+      if (lockedViewMode) return;
+      const resolvedMode = resolveViewMode(nextMode);
+      setViewModeState(resolvedMode);
+      if (typeof window !== "undefined") {
+        window.localStorage.setItem(storageScopeKey, resolvedMode);
+      }
+    },
+    [lockedViewMode, resolveViewMode, storageScopeKey],
+  );
+  const [isFilterBarOpen, setIsFilterBarOpen] = useState(false);
+  const [activeFilters, setActiveFiltersState] = useState([]);
+
+  const resolveInitialSort = () => {
+    if (sortConfig?.column) {
+      return {
+        column: sortConfig.column,
+        direction: sortConfig.direction === "desc" ? "desc" : "asc",
+      };
+    }
+    if (defaultSort?.column) {
+      return {
+        column: defaultSort.column,
+        direction: defaultSort.direction === "desc" ? "desc" : "asc",
+      };
+    }
+    return { column: null, direction: null };
+  };
+
+  const [openPopup, setOpenPopup] = useState(null);
+  const [internalSortState, setInternalSortState] = useState(resolveInitialSort);
+  const [showFilterDropdown, setShowFilterDropdown] = useState(false);
+  const [showHeaderBreadcrumbMenu, setShowHeaderBreadcrumbMenu] = useState(false);
+  const [filterSearch, setFilterSearch] = useState("");
+  const [showInnerFilterDropdown, setShowInnerFilterDropdown] = useState(false);
+  const [innerFilterSearch, setInnerFilterSearch] = useState("");
+  const [replacingFilterId, setReplacingFilterId] = useState(null);
+  const [replaceSearch, setReplaceSearch] = useState("");
+  const [valueEditId, setValueEditId] = useState(null);
+  const [valueInputText, setValueInputText] = useState("");
+  const [valueSelectSearch, setValueSelectSearch] = useState("");
+  // calendar picker state
+  const today = new Date();
+  const [calYear, setCalYear] = useState(today.getFullYear());
+  const [calMonth, setCalMonth] = useState(today.getMonth()); // 0-indexed
+
+  // Display popup state
+  const [showDisplayPopup, setShowDisplayPopup] = useState(false);
+  const [displayPropsOpen, setDisplayPropsOpen] = useState(true);
+  const [groupByOpen, setGroupByOpen] = useState(true);
+  const [orderByOpen, setOrderByOpen] = useState(true);
+  // Track which columns are visible (default: all visible)
+  const [hiddenColumns, setHiddenColumns] = useState([]);
+  const [groupByKey, setGroupByKey] = useState(
+    () => (defaultListGroupByKey != null ? defaultListGroupByKey : null),
+  );
+
+  const popupRef = useRef(null);
+  const filterDropdownRef = useRef(null);
+  const innerFilterRef = useRef(null);
+  const filterBarRef = useRef(null);
+  const chipReplaceRef = useRef(null);
+  const chipValueRef = useRef(null);
+  const displayPopupRef = useRef(null);
+  const headerBreadcrumbMenuRef = useRef(null);
+  const tableWrapRef = useRef(null);
+  const listWrapRef = useRef(null);
+  const [showCreateViewModal, setShowCreateViewModal] = useState(false);
+  const [editingViewId, setEditingViewId] = useState(null);
+  const modalFilterSnapshotRef = useRef(null);
+  const [autoSkeletonRows, setAutoSkeletonRows] = useState(skeletonRows);
+  const [openRowMenuKey, setOpenRowMenuKey] = useState(null);
+  const [openRowMenuRow, setOpenRowMenuRow] = useState(null);
+  const [rowMenuPosition, setRowMenuPosition] = useState(null);
+  const [tableHasHScroll, setTableHasHScroll] = useState(false);
+  const [savedViews, setSavedViews] = useState([]);
+  const [activeSavedViewId, setActiveSavedViewId] = useState(null);
+  const [selectedRowIds, setSelectedRowIds] = useState(() => new Set());
+  const selectAllRef = useRef(null);
+  const [cellEdit, setCellEdit] = useState(null);
+  const [cellEditPopupPos, setCellEditPopupPos] = useState(null);
+  const [cellEditDraftValue, setCellEditDraftValue] = useState(null);
+  const cellEditAnchorRef = useRef(null);
+  const cellEditPopupRef = useRef(null);
+  const liveCellEditColumn = React.useMemo(() => {
+    if (!cellEdit?.column) return null;
+    const key = cellEdit.columnKey ?? cellEdit.column.accessorKey;
+    return columns.find((col) => col?.accessorKey === key) ?? cellEdit.column;
+  }, [cellEdit, columns]);
+  const [bulkEdit, setBulkEdit] = useState(null);
+  const [bulkEditPopupPos, setBulkEditPopupPos] = useState(null);
+  const [bulkEditDraftValue, setBulkEditDraftValue] = useState(null);
+  const bulkEditPopupRef = useRef(null);
+  const bulkEditAnchorRef = useRef(null);
+  const [showBulkDeleteConfirm, setShowBulkDeleteConfirm] = useState(false);
+  const [locallyDeletedIds, setLocallyDeletedIds] = useState(() => new Set());
+  const columnsRef = useRef(columns);
+
+  useEffect(() => {
+    columnsRef.current = columns;
+  }, [columns]);
+
+  const deserializeSavedViewFilterValue = useCallback((column, value) => {
+    if (value == null) {
+      return isColumnSelectMulti(column, EDIT_MODE.FILTER) ? [] : "";
+    }
+    if (getColumnFieldVariant(column, EDIT_MODE.FILTER) === "select") {
+      const options = getColumnSelectOptions(column, EDIT_MODE.FILTER);
+      const rawValues = Array.isArray(value)
+        ? value
+        : String(value)
+            .split(",")
+            .map((v) => v.trim())
+            .filter(Boolean);
+      const normalizedValues = rawValues.map((raw) => {
+        const match = options.find(
+          (opt) =>
+            String(opt.value).trim().toLowerCase() === String(raw).trim().toLowerCase() ||
+            String(opt.label).trim().toLowerCase() === String(raw).trim().toLowerCase(),
+        );
+        return match ? String(match.value) : String(raw);
+      });
+      if (normalizedValues.length > 1) {
+        return normalizedValues;
+      }
+      return normalizedValues[0] ?? "";
+    }
+    if (isColumnSelectMulti(column, EDIT_MODE.FILTER)) {
+      return String(value)
+        .split(",")
+        .map((v) => v.trim())
+        .filter(Boolean);
+    }
+    // Always split comma-separated strings into arrays so saved view
+    // multi-value filters are displayed and applied like manual filters.
+    if (typeof value === "string" && value.includes(",")) {
+      return String(value)
+        .split(",")
+        .map((v) => v.trim())
+        .filter(Boolean);
+    }
+    return value;
+  }, []);
+
+  const normalizeSavedViewFilters = useCallback(
+    (filters = []) => {
+      const next = [];
+
+      filters.forEach((filter, index) => {
+        const key = filter?.key ?? filter?.id;
+        const column = columnsRef.current.find(
+          (col) => col?.accessorKey === key,
+        );
+        const normalized = {
+          id: key || `saved-filter-${index}`,
+          key,
+          label: filter?.label ?? column?.header ?? key ?? "Filter",
+          icon: filter?.icon ?? column?.icon ?? column?.filterIcon ?? null,
+          value: deserializeSavedViewFilterValue(column, filter?.value),
+          operator: filter?.operator,
+        };
+
+        const existing = next.find((item) => item.key === normalized.key);
+        if (!existing) {
+          next.push(normalized);
+          return;
+        }
+
+        const selectVariant = getColumnFieldVariant(column, EDIT_MODE.FILTER) === "select";
+        if (!selectVariant) {
+          existing.value = normalized.value;
+          existing.label = normalized.label;
+          existing.icon = normalized.icon;
+          existing.operator = normalized.operator ?? existing.operator;
+          return;
+        }
+
+        const existingValues = Array.isArray(existing.value)
+          ? existing.value
+          : existing.value != null && existing.value !== ""
+            ? [existing.value]
+            : [];
+        const incomingValues = Array.isArray(normalized.value)
+          ? normalized.value
+          : normalized.value != null && normalized.value !== ""
+            ? [normalized.value]
+            : [];
+        const mergedValues = Array.from(
+          new Set([...existingValues, ...incomingValues].map((v) => String(v).trim()).filter(Boolean)),
+        );
+        existing.value = mergedValues.length > 1 ? mergedValues : (mergedValues[0] ?? "");
+      });
+
+      return next;
+    },
+    [deserializeSavedViewFilterValue],
+  );
+
+  const normalizeSavedView = useCallback(
+    (view) => ({
+      id: view?.id ?? view?.savedViewId ?? null,
+      pageKey: view?.pageKey ?? savedViewPageKey,
+      name: view?.name ?? "Untitled",
+      description: view?.description ?? "",
+      viewMode: view?.viewMode === "list" ? "list" : "table",
+      filters: Array.isArray(view?.filters)
+        ? normalizeSavedViewFilters(view.filters)
+        : [],
+      hiddenColumns: Array.isArray(view?.hiddenColumns) ? view.hiddenColumns : [],
+      groupByKey: view?.groupByKey ?? null,
+      sort: view?.sort ?? null,
+      count: null,
+      createdBy: view?.createdBy ?? null,
+      createdDate: view?.createdDate ?? null,
+      modifiedBy: view?.modifiedBy ?? null,
+      modifiedDate: view?.modifiedDate ?? null,
+      isPublic: Boolean(view?.isPublic),
+      isSystem: Boolean(view?.isSystem),
+    }),
+    [normalizeSavedViewFilters, savedViewPageKey],
+  );
+
+  const showRowMenuColumn = Boolean(
+    onRowEdit || onRowDownload || onRowDelete || rowMenuActions.length > 0,
+  );
+  const ROW_MENU_COL_WIDTH = 48;
+
+  const visibleColumns = columns.filter(
+    (column) => column?.accessorKey && column.accessorKey !== "action",
+  );
+
+  const filterableColumns = React.useMemo(
+    () => getFilterableColumns(visibleColumns),
+    [visibleColumns],
+  );
+
+  const lockedColumnKeys = displayLockedColumnKeys ?? [rowKey];
+  const lockedColumnSet = React.useMemo(
+    () => new Set(lockedColumnKeys),
+    [lockedColumnKeys],
+  );
+  const resolvedListLeftKeys = listLeftColumnKeys ?? [
+    rowKey,
+    "jobOpeningName",
+    "candidateName",
+  ];
+
+  const resolvedBulkBarFields = React.useMemo(() => {
+    if (bulkBarFields !== undefined) return bulkBarFields;
+    return getBulkFieldsFromColumns(visibleColumns, bulkEditableKeys);
+  }, [bulkBarFields, visibleColumns, bulkEditableKeys]);
+  const groupByColumns = visibleColumns.filter(
+    (col) => col.accessorKey !== rowKey,
+  );
+  // Columns rendered — locked columns (e.g. Application ID) always stay visible
+  const renderedColumns = React.useMemo(
+    () =>
+      visibleColumns.filter(
+        (col) =>
+          lockedColumnSet.has(col.accessorKey) ||
+          !hiddenColumns.includes(col.accessorKey),
+      ),
+    [visibleColumns, hiddenColumns, lockedColumnSet],
+  );
+
+  const displayPropertyColumns = React.useMemo(
+    () =>
+      visibleColumns.filter(
+        (col) =>
+          !lockedColumnSet.has(col.accessorKey) && isColumnDisplayHideable(col),
+      ),
+    [visibleColumns, lockedColumnSet],
+  );
+
+  const filterValueIsSet = (filter) => isFilterValueSet(filter);
+
+  const normalizeOutgoingFilters = (filters) =>
+    filters.map((f) => ({
+      ...f,
+      key: f.key || f.id,
+      value: f.value,
+    }));
+
+  const withSavedViewMeta = useCallback(
+    (meta = {}) =>
+      activeSavedViewId != null
+        ? { ...meta, savedViewId: meta.savedViewId ?? activeSavedViewId }
+        : meta,
+    [activeSavedViewId],
+  );
+
+  const emitFilterChangeImmediate = useCallback(
+    (filters, meta = {}) => {
+      if (onFilterChange) {
+        onFilterChange(
+          normalizeOutgoingFilters(filters.filter((f) => filterValueIsSet(f))),
+          withSavedViewMeta(meta),
+        );
+      }
+    },
+    [onFilterChange, withSavedViewMeta],
+  );
+
+  const emitFilterChange = useCallback(
+    (filters, meta = {}) => {
+      if (!onFilterChange) return;
+      const nextFilters = filters.filter((f) => filterValueIsSet(f));
+      onFilterChange(
+        normalizeOutgoingFilters(nextFilters),
+        withSavedViewMeta(meta),
+      );
+    },
+    [onFilterChange, withSavedViewMeta],
+  );
+
+  const cloneFilters = (filters) =>
+    filters.map((f) => ({
+      ...f,
+      value: Array.isArray(f.value) ? [...f.value] : f.value,
+    }));
+
+  const captureModalFilterSnapshot = () => {
+    modalFilterSnapshotRef.current = cloneFilters(activeFilters);
+  };
+
+  const restoreModalFilterSnapshot = () => {
+    if (!modalFilterSnapshotRef.current) return;
+    const restored = cloneFilters(modalFilterSnapshotRef.current);
+    setActiveFiltersState(restored);
+    setIsFilterBarOpen(restored.length > 0);
+    modalFilterSnapshotRef.current = null;
+  };
+
+  const clearModalFilterSnapshot = () => {
+    modalFilterSnapshotRef.current = null;
+  };
+
+  const setActiveFilters = (nextFilters, { notify = false } = {}) => {
+    setActiveFiltersState(nextFilters);
+    const shouldNotify = notify && !showCreateViewModal;
+    if (shouldNotify) {
+      emitFilterChange(nextFilters);
+    }
+  };
+
+  const updateFilterValue = (filterId, value) => {
+    const nextFilters = activeFilters.map((f) =>
+      f.id === filterId ? { ...f, value } : f,
+    );
+    setActiveFilters(nextFilters, { notify: true });
+  };
+
+  const updateFilterOperator = (filterId, operator) => {
+    setActiveFiltersState((prev) =>
+      prev.map((f) =>
+        f.id === filterId ? { ...f, operator, value: null } : f,
+      ),
+    );
+  };
+
+  // Sort state — shared by column-header popup and Display → Order By
+  const sortState = sortConfig || internalSortState;
+  const setSortState = (s) => {
+    if (onSort) onSort(s.column, s.direction);
+    else setInternalSortState(s);
+  };
+  const orderDirEffective = sortState.direction === "desc" ? "desc" : "asc";
+
+  const toggleColumnVisibility = useCallback(
+    (accessorKey) => {
+      if (lockedColumnSet.has(accessorKey)) return;
+      const col = visibleColumns.find((c) => c.accessorKey === accessorKey);
+      if (col && !isColumnDisplayHideable(col)) return;
+      setHiddenColumns((prev) =>
+        prev.includes(accessorKey)
+          ? prev.filter((k) => k !== accessorKey)
+          : [...prev, accessorKey],
+      );
+    },
+    [lockedColumnSet, visibleColumns],
+  );
+
+  useEffect(() => {
+    if (sortConfig) return;
+    if (!defaultSort?.column || !onSort) return;
+    onSort(
+      defaultSort.column,
+      defaultSort.direction === "desc" ? "desc" : "asc",
+    );
+    // Notify parent of initial default sort once (uncontrolled mode).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    setViewModeState(getStoredViewMode());
+  }, [getStoredViewMode]);
+
+  const applySavedViewCounts = useCallback(
+    async (viewsSnapshot = null) => {
+      if (!savedViewPageKey) return viewsSnapshot ?? null;
+      try {
+        let url = `${API.GET_SAVED_VIEW_COUNTS}?pageKey=${encodeURIComponent(savedViewPageKey)}`;
+        if (savedViewCountsExtraParams) {
+          url += `&${savedViewCountsExtraParams}`;
+        }
+        const response = await apiService.GET(url);
+        const counts = Array.isArray(response?.data) ? response.data : [];
+        const countById = new Map(
+          counts.map((entry) => [String(entry.id), Number(entry.count)]),
+        );
+        setSavedViews((prev) => {
+          const base = viewsSnapshot ?? prev;
+          if (!base.length) return base;
+          return base.map((view) => {
+            const viewId = String(view.id);
+            return {
+              ...view,
+              count: countById.has(viewId) ? countById.get(viewId) : view.count,
+            };
+          });
+        });
+      } catch (error) {
+        console.error("Failed to load saved view counts", error);
+      }
+      return viewsSnapshot ?? null;
+    },
+    [savedViewPageKey, savedViewCountsExtraParams],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadSavedViews = async () => {
+      setSavedViews([]);
+      setActiveSavedViewId(null);
+      setEditingViewId(null);
+      try {
+        const response = await apiService.GET(
+          `${API.GET_SAVED_VIEWS}?pageKey=${encodeURIComponent(savedViewPageKey)}`,
+        );
+        if (cancelled) return;
+        const nextViews = Array.isArray(response?.data)
+          ? response.data.map(normalizeSavedView)
+          : [];
+        setSavedViews(nextViews);
+        if (nextViews.length > 0) {
+          await applySavedViewCounts(nextViews);
+        }
+      } catch (error) {
+        if (cancelled) return;
+        console.error("Failed to load saved views", error);
+        setSavedViews([]);
+      }
+    };
+
+    if (savedViewPageKey) {
+      loadSavedViews();
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [normalizeSavedView, savedViewPageKey, applySavedViewCounts]);
+
+  const initialAutoSelectDoneRef = React.useRef(false);
+  const lastSavedViewsRefreshKeyRef = React.useRef(savedViewsRefreshKey);
+
+  // Reset auto-select when page changes
+  useEffect(() => {
+    initialAutoSelectDoneRef.current = false;
+  }, [savedViewPageKey]);
+
+  useEffect(() => {
+    onBindSavedViewCountsRefresh?.(() => applySavedViewCounts());
+    return () => onBindSavedViewCountsRefresh?.(null);
+  }, [applySavedViewCounts, onBindSavedViewCountsRefresh]);
+
+  useEffect(() => {
+    if (savedViews.length === 0) return;
+    if (lastSavedViewsRefreshKeyRef.current === savedViewsRefreshKey) return;
+    lastSavedViewsRefreshKeyRef.current = savedViewsRefreshKey;
+    if (savedViewsRefreshKey <= 0) return;
+    applySavedViewCounts();
+  }, [savedViewsRefreshKey, savedViews.length, applySavedViewCounts]);
+
+  const setOrderFromDisplay = useCallback(
+    (column, direction, { notifyParent = true } = {}) => {
+      if (!column) {
+        if (notifyParent && onSort) {
+          onSort(null, null);
+        } else if (!sortConfig) {
+          setInternalSortState({ column: null, direction: null });
+        }
+        return;
+      }
+      const dir = direction === "desc" ? "desc" : "asc";
+      if (notifyParent && onSort) {
+        onSort(column, dir);
+      } else if (!sortConfig) {
+        setInternalSortState({ column, direction: dir });
+      }
+    },
+    [onSort, sortConfig],
+  );
+
+  const getRowId = (row) => {
+    const id = row[rowKey] ?? row.id ?? row.applicationId;
+    return id == null || id === "" ? null : String(id);
+  };
+
+  const sortedRows = React.useMemo(() => {
+    const sourceRows = onFilterChange
+      ? rows
+      : applyClientSideFilters(rows, activeFilters, columns);
+
+    const base = (() => {
+      if (!sortState.column || !sortState.direction || onSort) return sourceRows;
+      return [...sourceRows].sort((a, b) => {
+        let aVal = a[sortState.column];
+        let bVal = b[sortState.column];
+        if (typeof aVal === 'string') aVal = aVal.toLowerCase();
+        if (typeof bVal === 'string') bVal = bVal.toLowerCase();
+        if (aVal === bVal) return 0;
+        if (aVal === null || aVal === undefined) return 1;
+        if (bVal === null || bVal === undefined) return -1;
+        const result = aVal < bVal ? -1 : 1;
+        return sortState.direction === "asc" ? result : -result;
+      });
+    })();
+    if (locallyDeletedIds.size === 0) return base;
+    return base.filter((row) => {
+      const id = getRowId(row);
+      return id == null || !locallyDeletedIds.has(id);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rows, sortState, onSort, locallyDeletedIds, onFilterChange, activeFilters, columns]);
+
+  const displayedTotalCount = React.useMemo(() => {
+    const hasAnyFilterValue = activeFilters.some((f) => filterValueIsSet(f));
+    if (hasAnyFilterValue) {
+      return sortedRows.length;
+    }
+    return totalCount != null ? totalCount : sortedRows.length;
+  }, [activeFilters, sortedRows.length, totalCount]);
+
+  const isInitialLoading = isLoading && sortedRows.length === 0;
+  const isLoadingMore = isLoading && sortedRows.length > 0;
+
+  const visibleRowIds = React.useMemo(
+    () =>
+      isInitialLoading
+        ? []
+        : sortedRows.map(getRowId).filter((id) => id != null),
+    // getRowId is stable enough via rowKey; sortedRows/isLoading drive updates
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sortedRows, isInitialLoading, rowKey],
+  );
+
+  const rowCanDelete = useCallback(
+    (row) => (typeof isRowDeletable === "function" ? isRowDeletable(row) : true),
+    [isRowDeletable],
+  );
+
+  const selectableVisibleRowIds = visibleRowIds;
+
+  const selectedCount = selectedRowIds.size;
+  const hasSelection = selectedCount > 0;
+  const allVisibleSelected =
+    selectableVisibleRowIds.length > 0 &&
+    selectableVisibleRowIds.every((id) => selectedRowIds.has(id));
+  const someVisibleSelected = selectableVisibleRowIds.some((id) =>
+    selectedRowIds.has(id),
+  );
+
+  useEffect(() => {
+    const el = selectAllRef.current;
+    if (!el) return;
+    el.indeterminate = someVisibleSelected && !allVisibleSelected;
+  }, [someVisibleSelected, allVisibleSelected]);
+
+  const toggleRowSelection = (rowId, e) => {
+    e?.stopPropagation();
+    if (!rowId) return;
+    setSelectedRowIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(rowId)) next.delete(rowId);
+      else next.add(rowId);
+      return next;
+    });
+  };
+
+  const toggleSelectAllVisible = (e) => {
+    e?.stopPropagation();
+    setSelectedRowIds((prev) => {
+      const next = new Set(prev);
+      if (allVisibleSelected || someVisibleSelected) {
+        selectableVisibleRowIds.forEach((id) => next.delete(id));
+      } else {
+        selectableVisibleRowIds.forEach((id) => next.add(id));
+      }
+      return next;
+    });
+  };
+
+  const toggleGroupSelection = (rowIds, e) => {
+    e?.stopPropagation();
+    const ids = rowIds.map((id) => String(id)).filter(Boolean);
+    if (!ids.length) return;
+    const allInGroupSelected = ids.every((id) => selectedRowIds.has(id));
+    setSelectedRowIds((prev) => {
+      const next = new Set(prev);
+      if (allInGroupSelected) {
+        ids.forEach((id) => next.delete(id));
+      } else {
+        ids.forEach((id) => next.add(id));
+      }
+      return next;
+    });
+  };
+
+  const clearRowSelection = () => setSelectedRowIds(new Set());
+
+  useEffect(() => {
+    if (!enableBulkSelection) setSelectedRowIds(new Set());
+  }, [enableBulkSelection]);
+
+  const isRowSelected = (rowId) => rowId != null && selectedRowIds.has(rowId);
+
+  // Close dropdowns/popups on outside click
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (filterDropdownRef.current && !filterDropdownRef.current.contains(e.target)) {
+        setShowFilterDropdown(false);
+        setFilterSearch("");
+      }
+      if (
+        replacingFilterId &&
+        !e.target.closest(".mdt-chip-replace-dropdown") &&
+        !e.target.closest(".mdt-chip-label-btn")
+      ) {
+        setReplacingFilterId(null);
+        setReplaceSearch("");
+      }
+      if (
+        valueEditId &&
+        !e.target.closest(".mdt-value-popup") &&
+        !e.target.closest(".mdt-chip-value") &&
+        !e.target.closest(".mdt-chip-value-wrap") &&
+        !e.target.closest(".mdt-filter-op-dropdown") &&
+        !e.target.closest(".mdt-chip-op-btn")
+      ) {
+        setValueEditId(null);
+        setValueInputText("");
+        setValueSelectSearch("");
+      }
+      if (
+        showInnerFilterDropdown &&
+        !e.target.closest(".mdt-filter-button-wrap")
+      ) {
+        setShowInnerFilterDropdown(false);
+        setInnerFilterSearch("");
+      }
+
+      if (displayPopupRef.current && !displayPopupRef.current.contains(e.target)) {
+        setShowDisplayPopup(false);
+      }
+      if (
+        showHeaderBreadcrumbMenu &&
+        headerBreadcrumbMenuRef.current &&
+        !headerBreadcrumbMenuRef.current.contains(e.target)
+      ) {
+        setShowHeaderBreadcrumbMenu(false);
+      }
+      if (
+        openRowMenuKey &&
+        !e.target.closest(".mdt-row-menu-trigger") &&
+        !e.target.closest(".mdt-row-menu-popup")
+      ) {
+        setOpenRowMenuKey(null);
+        setOpenRowMenuRow(null);
+        setRowMenuPosition(null);
+      }
+      if (
+        openPopup &&
+        popupRef.current &&
+        !popupRef.current.contains(e.target) &&
+        !e.target.closest(".mdt-header-cell")
+      ) {
+        setOpenPopup(null);
+      }
+      if (
+        cellEdit &&
+        cellEditPopupRef.current &&
+        !cellEditPopupRef.current.contains(e.target) &&
+        cellEditAnchorRef.current &&
+        !cellEditAnchorRef.current.contains(e.target)
+      ) {
+        setCellEdit(null);
+        setCellEditDraftValue(null);
+        setCellEditPopupPos(null);
+      }
+      if (
+        bulkEdit &&
+        bulkEditPopupRef.current &&
+        !bulkEditPopupRef.current.contains(e.target) &&
+        !e.target.closest(".mdt-bulk-field-btn")
+      ) {
+        setBulkEdit(null);
+        setBulkEditPopupPos(null);
+        setBulkEditDraftValue(null);
+      }
+    };
+    if (
+      openPopup ||
+      showHeaderBreadcrumbMenu ||
+      showFilterDropdown ||
+      showInnerFilterDropdown ||
+      !!replacingFilterId ||
+      showDisplayPopup ||
+      !!valueEditId ||
+      openRowMenuKey ||
+      cellEdit ||
+      bulkEdit
+    ) {
+      document.addEventListener("mousedown", handleClickOutside, true);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside, true);
+  }, [openPopup, showHeaderBreadcrumbMenu, showFilterDropdown, showInnerFilterDropdown, showDisplayPopup, replacingFilterId, valueEditId, openRowMenuKey, cellEdit, bulkEdit]);
+
+  const closeFilterChipPopups = useCallback(() => {
+    setValueEditId(null);
+    setValueInputText("");
+    setValueSelectSearch("");
+    setReplacingFilterId(null);
+    setReplaceSearch("");
+    setShowInnerFilterDropdown(false);
+    setInnerFilterSearch("");
+  }, []);
+
+  const applySavedView = useCallback(
+    (view, { notify = true } = {}) => {
+      closeFilterChipPopups();
+
+      if (!view) {
+        setActiveSavedViewId(null);
+        setActiveFilters([], { notify });
+        setIsFilterBarOpen(false);
+        setHiddenColumns([]);
+        setGroupByKey(null);
+        setOrderFromDisplay(null, null, { notifyParent: notify });
+        return;
+      }
+
+      setActiveSavedViewId(view.id);
+      const nextFilters = (view.filters || []).map((f, index) => ({
+        ...f,
+        id: f.id || `${f.key}-${view.id}-${index}`,
+      }));
+      // Update filter state without emitting (emitFilterChangeImmediate below handles notification)
+      setActiveFilters(nextFilters);
+      setIsFilterBarOpen(nextFilters.length > 0);
+      if (notify) {
+        emitFilterChangeImmediate(nextFilters, {
+          sort: view.sort ?? null,
+          groupByKey: view.groupByKey ?? null,
+          viewMode: view.viewMode === "list" ? "list" : "table",
+          savedViewId: view.id,
+        });
+      }
+      setHiddenColumns(
+        (view.hiddenColumns || []).filter((k) => !lockedColumnSet.has(k)),
+      );
+      setGroupByKey(view.groupByKey ?? null);
+      if (view.sort?.column) {
+        setOrderFromDisplay(view.sort.column, view.sort.direction || "asc", {
+          notifyParent: false,
+        });
+      } else {
+        setOrderFromDisplay(null, null, { notifyParent: false });
+      }
+    },
+    [closeFilterChipPopups, setOrderFromDisplay, emitFilterChangeImmediate, lockedColumnSet],
+  );
+
+  const resolvedActiveTabId = activeSavedViewId
+    ? `view-${activeSavedViewId}`
+    : activeTab;
+
+  const mergedTabs = React.useMemo(() => {
+    const defaultTabOrder = new Map([
+      ["active", 0],
+      ["draft", 1],
+      ["closed", 2],
+      ["all", 3],
+    ]);
+
+    const nextTabs = [...tabs, ...savedViews.map((view) => ({
+      id: `view-${view.id}`,
+      label: view.name,
+      count: view.count,
+      isSavedView: true,
+      isSystem: Boolean(view.isSystem),
+      createdBy: view.createdBy ?? null,
+      savedViewId: view.id,
+    }))];
+
+    const deduped = [];
+    const seen = new Set();
+    nextTabs.forEach((tab) => {
+      const key = String(tab?.label ?? tab?.id ?? "").trim().toLowerCase();
+      if (!key) return;
+      const existingIndex = deduped.findIndex(
+        (item) => String(item?.label ?? item?.id ?? "").trim().toLowerCase() === key,
+      );
+      if (existingIndex >= 0) {
+        const existing = deduped[existingIndex];
+        if (tab.isSavedView && !existing.isSavedView) {
+          deduped[existingIndex] = tab;
+        }
+        return;
+      }
+      if (seen.has(key)) return;
+      seen.add(key);
+      deduped.push(tab);
+    });
+
+    const withActiveCount = deduped.map((tab) => {
+      const isActive =
+        isSameMdtTab(resolvedActiveTabId, tab.id) ||
+        (activeSavedViewId != null && String(tab.savedViewId) === String(activeSavedViewId)) ||
+        (activeSavedViewId == null && tab.isSavedView);
+      if (isActive && displayedTotalCount != null) {
+        return { ...tab, count: displayedTotalCount };
+      }
+      return tab;
+    });
+
+    return withActiveCount.sort((a, b) => {
+      const aKey = String(a?.label ?? a?.id ?? "").trim().toLowerCase();
+      const bKey = String(b?.label ?? b?.id ?? "").trim().toLowerCase();
+      const aIsDefault = defaultTabOrder.has(aKey);
+      const bIsDefault = defaultTabOrder.has(bKey);
+      if (aIsDefault && bIsDefault) {
+        return defaultTabOrder.get(aKey) - defaultTabOrder.get(bKey);
+      }
+      if (aIsDefault) return -1;
+      if (bIsDefault) return 1;
+      if (a.isSavedView && !b.isSavedView) return -1;
+      if (!a.isSavedView && b.isSavedView) return 1;
+      return String(a.label ?? "").localeCompare(String(b.label ?? ""));
+    });
+  }, [tabs, savedViews, resolvedActiveTabId, activeSavedViewId, displayedTotalCount]);
+
+  // Auto-select the first saved view on initial page load when no active tab/view exists
+  useEffect(() => {
+    if (disableAutoSelectFirstView) return;
+    if (savedViews.length === 0) return;
+    if (initialAutoSelectDoneRef.current) return;
+    if (activeSavedViewId) return;
+    const tabExists = activeTab && mergedTabs.some((t) => t.id === activeTab);
+    if (tabExists) return;
+    initialAutoSelectDoneRef.current = true;
+    const firstView = savedViews[0];
+    if (firstView) {
+      applySavedView(firstView, { notify: true });
+    }
+  }, [savedViews, activeSavedViewId, activeTab, mergedTabs, applySavedView, disableAutoSelectFirstView]);
+
+  useEffect(() => {
+    setSelectedRowIds(new Set());
+  }, [resolvedActiveTabId]);
+
+  useEffect(() => {
+    if (tableWrapRef.current) {
+      tableWrapRef.current.scrollTop = 0;
+    }
+    if (listWrapRef.current) {
+      listWrapRef.current.scrollTop = 0;
+    }
+  }, [sortConfig?.column, sortConfig?.direction, resolvedActiveTabId]);
+
+  const listGroupHeadPrefix = React.useMemo(() => {
+    if (!mergedTabs.length) return "All";
+    const tab =
+      mergedTabs.find((t) => isSameMdtTab(resolvedActiveTabId, t.id)) ??
+      mergedTabs.find((t) => isSameMdtTab(t.id, "all")) ??
+      mergedTabs[0];
+    return tab?.label ?? "All";
+  }, [mergedTabs, resolvedActiveTabId]);
+
+  const listGroupHeadCount = React.useMemo(() => {
+    if (mergedTabs.length) {
+      const tab =
+        mergedTabs.find((t) => isSameMdtTab(resolvedActiveTabId, t.id)) ??
+        mergedTabs.find((t) => isSameMdtTab(t.id, "all")) ??
+        mergedTabs[0];
+      if (tab?.isSavedView) {
+        if (tab.count != null && tab.count !== "") return tab.count;
+        return null;
+      }
+      if (tab?.count != null && tab.count !== "") {
+        return tab.count;
+      }
+    }
+    if (activeSavedViewId) return null;
+    if (displayedTotalCount != null) return displayedTotalCount;
+    return sortedRows.length;
+  }, [
+    mergedTabs,
+    resolvedActiveTabId,
+    activeSavedViewId,
+    displayedTotalCount,
+    sortedRows.length,
+  ]);
+
+  const dismissCreateViewModal = useCallback(() => {
+    clearModalFilterSnapshot();
+    setEditingViewId(null);
+    setShowCreateViewModal(false);
+    closeFilterChipPopups();
+  }, [closeFilterChipPopups]);
+
+  const handleTabClick = useCallback(
+    (tab) => {
+      if (showCreateViewModal) {
+        dismissCreateViewModal();
+      }
+
+      if (tab.isSavedView) {
+        const view = savedViews.find((v) => v.id === tab.savedViewId);
+        if (view) applySavedView(view, { notify: true });
+        return;
+      }
+
+      const leavingSavedView = Boolean(activeSavedViewId);
+      if (leavingSavedView) {
+        applySavedView(null, { notify: false });
+      }
+
+      if (!leavingSavedView && isSameMdtTab(activeTab, tab.id)) {
+        return;
+      }
+
+      if (onTabChange) {
+        onTabChange(tab.id, { clearFilters: leavingSavedView });
+      }
+    },
+    [
+      savedViews,
+      applySavedView,
+      onTabChange,
+      showCreateViewModal,
+      dismissCreateViewModal,
+      activeSavedViewId,
+      activeTab,
+    ],
+  );
+
+  const updateTableScrollState = useCallback(() => {
+    const el = tableWrapRef.current;
+    if (!el) return;
+    setTableHasHScroll(el.scrollWidth > el.clientWidth + 1);
+  }, []);
+
+  const rowMenuColClassName = tableHasHScroll
+    ? "mdt-col-row-menu mdt-col-row-menu--scroll"
+    : "mdt-col-row-menu";
+
+  const resolvedStickyColumnKey = tableStickyColumnKey ?? rowKey;
+  const stickyLeftColClassName = tableHasHScroll
+    ? "mdt-col-sticky-left mdt-col-sticky-left--scroll"
+    : "mdt-col-sticky-left";
+
+  const isStickyLeftColumn = useCallback(
+    (col) => col.accessorKey === resolvedStickyColumnKey,
+    [resolvedStickyColumnKey],
+  );
+
+  const getTableCellClassName = (col, colIndex, { header = false } = {}) => {
+    const cellEditable = !header && isColumnCellEditable(col, onCellEdit);
+    return (
+      [
+        "mdt-col-data",
+        !header && col.valueClassName,
+        enableBulkSelection && colIndex === 0 ? "mdt-td-first-with-select" : "",
+        enableBulkSelection && header && colIndex === 0
+          ? "mdt-th-first-with-select"
+          : "",
+        isStickyLeftColumn(col) ? stickyLeftColClassName : "",
+        header && isStickyLeftColumn(col) ? "mdt-th-sticky-left" : "",
+        !header && onCellEdit ? (cellEditable ? "mdt-td-editable" : "mdt-td-readonly") : "",
+      ]
+        .filter(Boolean)
+        .join(" ") || undefined
+    );
+  };
+
+  // Auto-calculate skeleton rows + detect horizontal scroll for sticky menu column border
+  useEffect(() => {
+    const update = () => {
+      const isList = viewMode === "list";
+      const el = isList ? listWrapRef.current : tableWrapRef.current;
+      const h = el?.clientHeight || 0;
+      if (!h) return;
+      const headerReserve = isList ? 48 : 44;
+      const rowHeight = 48;
+      const fit = Math.ceil(Math.max(h - headerReserve, 0) / rowHeight);
+      setAutoSkeletonRows(Math.max(skeletonRows, fit));
+      if (!isList) updateTableScrollState();
+    };
+    update();
+    window.addEventListener("resize", update);
+
+    const el = viewMode === "list" ? listWrapRef.current : tableWrapRef.current;
+    let ro;
+    if (el) {
+      ro = new ResizeObserver(update);
+      ro.observe(el);
+    }
+
+    return () => {
+      window.removeEventListener("resize", update);
+      ro?.disconnect();
+    };
+  }, [
+    skeletonRows,
+    showRowMenuColumn,
+    updateTableScrollState,
+    renderedColumns.length,
+    rows.length,
+    isLoading,
+    viewMode,
+  ]);
+
+  // Mobile / nested layouts: keep anchored popups inside the viewport
+  useLayoutEffect(() => {
+    const useAnchoredPopups = isMobilePopupLayout() || anchoredFilterPopups;
+    if (!useAnchoredPopups) {
+      clearMobilePopupTop();
+      return undefined;
+    }
+
+    let anchor = null;
+    if (valueEditId && chipValueRef.current) {
+      anchor = chipValueRef.current;
+    } else if (replacingFilterId && chipReplaceRef.current) {
+      anchor = chipReplaceRef.current;
+    } else if (showInnerFilterDropdown && innerFilterRef.current) {
+      anchor = innerFilterRef.current;
+    } else if (showFilterDropdown && filterDropdownRef.current) {
+      anchor = filterDropdownRef.current;
+    } else if (showDisplayPopup && displayPopupRef.current) {
+      anchor = displayPopupRef.current;
+    }
+
+    const sync = () => {
+      if (anchor) {
+        syncAnchoredPopupTop(anchor, { fullWidth: isMobilePopupLayout() });
+      } else {
+        clearMobilePopupTop();
+      }
+    };
+    sync();
+
+    const scrollTargets = [];
+    if (anchor) {
+      let node = anchor.parentElement;
+      while (node && node !== document.body) {
+        const { overflowY, overflow } = getComputedStyle(node);
+        if (
+          overflowY === "auto" ||
+          overflowY === "scroll" ||
+          overflow === "auto" ||
+          overflow === "scroll"
+        ) {
+          scrollTargets.push(node);
+        }
+        node = node.parentElement;
+      }
+    }
+
+    window.addEventListener("resize", sync);
+    scrollTargets.forEach((el) => el.addEventListener("scroll", sync, { passive: true }));
+    return () => {
+      window.removeEventListener("resize", sync);
+      scrollTargets.forEach((el) => el.removeEventListener("scroll", sync));
+      clearMobilePopupTop();
+    };
+  }, [
+    anchoredFilterPopups,
+    valueEditId,
+    replacingFilterId,
+    showInnerFilterDropdown,
+    showFilterDropdown,
+    showDisplayPopup,
+  ]);
+
+  // ── Filter helpers ──────────────────────────────────────────────────────────
+
+  const addFilter = (col) => {
+    const isDuplicate = activeFilters.find((f) => f.key === col.accessorKey);
+    const newId = `${col.accessorKey}-${Date.now()}`;
+    if (!isDuplicate) {
+      setActiveFiltersState((prev) => [
+        ...prev,
+        {
+          id: newId,
+          key: col.accessorKey,
+          label: col.header,
+          icon: col.headerIcon || col.rowIcon || null,
+          operator: isDateLikeFilterColumn(col)
+            ? DEFAULT_DATE_FILTER_OPERATOR
+            : undefined,
+        },
+      ]);
+      setValueEditId(newId);
+      setValueInputText("");
+      setValueSelectSearch("");
+    } else {
+      setValueEditId(isDuplicate.id);
+      setValueInputText(isDuplicate.value || "");
+      setValueSelectSearch("");
+    }
+    setIsFilterBarOpen(true);
+    setShowFilterDropdown(false);
+    setShowInnerFilterDropdown(false);
+    setFilterSearch("");
+  };
+
+  const removeFilter = (filterId) => {
+    const updated = activeFilters.filter((f) => f.id !== filterId);
+    setActiveFilters(updated, { notify: true });
+    if (updated.length === 0) setIsFilterBarOpen(false);
+  };
+
+  const clearAllFilters = () => {
+    setActiveSavedViewId(null);
+    setActiveFilters([], { notify: true });
+    setIsFilterBarOpen(false);
+    if (onTabChange) {
+      onTabChange("all", { clearFilters: true });
+    }
+  };
+
+  const onReplaceFilterKey = (filterId, col) => {
+    setActiveFiltersState((prev) =>
+      prev.map((f) =>
+        f.id === filterId
+          ? {
+            ...f,
+            key: col.accessorKey,
+            label: col.header,
+            icon: col.headerIcon || col.rowIcon || null,
+            value: null,
+            operator: isDateLikeFilterColumn(col)
+              ? DEFAULT_DATE_FILTER_OPERATOR
+              : undefined,
+          }
+          : f,
+      ),
+    );
+  };
+
+  const closeFilterBarPopups = () => {
+    setShowFilterDropdown(false);
+    setShowInnerFilterDropdown(false);
+    setOpenPopup(null);
+  };
+
+  const closeCellEdit = useCallback(() => {
+    setCellEdit(null);
+    setCellEditPopupPos(null);
+    setCellEditDraftValue(null);
+  }, []);
+
+  const closeBulkEdit = useCallback(() => {
+    bulkEditAnchorRef.current = null;
+    setBulkEdit(null);
+    setBulkEditPopupPos(null);
+    setBulkEditDraftValue(null);
+  }, []);
+
+  const getSelectedRows = useCallback(
+    () =>
+      sortedRows.filter((row) => {
+        const id = getRowId(row);
+        return id != null && selectedRowIds.has(String(id));
+      }),
+    [sortedRows, selectedRowIds, rowKey],
+  );
+
+  const getDeletableSelectedRows = useCallback(
+    () => getSelectedRows().filter((row) => rowCanDelete(row)),
+    [getSelectedRows, rowCanDelete],
+  );
+
+  const deletableSelectedCount = React.useMemo(
+    () => getDeletableSelectedRows().length,
+    [getDeletableSelectedRows],
+  );
+
+  const skippedDeleteCount = Math.max(0, selectedCount - deletableSelectedCount);
+
+  const buildDefaultBulkDeleteMessage = useCallback(() => {
+    if (deletableSelectedCount === 0) {
+      return "None of the selected items can be deleted.";
+    }
+    if (skippedDeleteCount === 0) {
+      return `Are you sure you want to delete ${deletableSelectedCount} selected item(s)? This action cannot be undone.`;
+    }
+    return `Delete ${deletableSelectedCount} of ${selectedCount} selected item(s)? ${skippedDeleteCount} item(s) are in use and will be skipped. This action cannot be undone.`;
+  }, [deletableSelectedCount, skippedDeleteCount, selectedCount]);
+
+  const bulkDeleteCounts = React.useMemo(
+    () => ({
+      deletableCount: deletableSelectedCount,
+      skippedCount: skippedDeleteCount,
+      deletableRows: getDeletableSelectedRows(),
+    }),
+    [deletableSelectedCount, skippedDeleteCount, getDeletableSelectedRows],
+  );
+
+  useLayoutEffect(() => {
+    if (!cellEdit || !cellEditPopupRef.current) return;
+    const popupRect = cellEditPopupRef.current.getBoundingClientRect();
+    const next = refineCellEditPopupPosition(cellEdit.anchorRect, popupRect);
+    if (next) {
+      const measuredW = Math.ceil(popupRect.width);
+      setCellEditPopupPos((prev) => ({
+        top: next.top,
+        left: next.left,
+        width: Math.min(320, Math.max(measuredW, prev?.width ?? cellEdit.width)),
+      }));
+    }
+  }, [cellEdit, cellEditDraftValue]);
+
+  useLayoutEffect(() => {
+    if (!bulkEdit || !bulkEditPopupRef.current) return;
+    const popupRect = bulkEditPopupRef.current.getBoundingClientRect();
+    const next = refineCellEditPopupPosition(bulkEdit.anchorRect, popupRect);
+    if (next) {
+      const measuredW = Math.ceil(popupRect.width);
+      setBulkEditPopupPos((prev) => ({
+        top: next.top,
+        left: next.left,
+        width: Math.min(320, Math.max(measuredW, prev?.width ?? bulkEdit.width)),
+      }));
+    }
+  }, [bulkEdit, bulkEditDraftValue]);
+
+  const openBulkEditPopup = useCallback(
+    (field, e) => {
+      if (!onBulkEdit || !field?.column) return;
+      const anchorEl = e?.currentTarget;
+      if (!anchorEl) return;
+
+      closeCellEdit();
+      closeFilterChipPopups();
+      closeRowMenu();
+
+      bulkEditAnchorRef.current = anchorEl;
+      const anchor = anchorEl.getBoundingClientRect();
+      const anchorRect = {
+        top: anchor.top,
+        left: anchor.left,
+        right: anchor.right,
+        bottom: anchor.bottom,
+        width: anchor.width,
+        height: anchor.height,
+      };
+      const position = computeCellEditPopupPosition(anchorRect, field.column, EDIT_MODE.BULK);
+      setBulkEdit({
+        fieldId: field.id,
+        field,
+        column: field.column,
+        anchorRect,
+        width: position.width,
+      });
+      setBulkEditPopupPos(position);
+      setBulkEditDraftValue(null);
+    },
+    [onBulkEdit, closeCellEdit, closeFilterChipPopups],
+  );
+
+  const handleBulkFieldClick = useCallback(
+    (fieldId, field, e) => {
+      if (onBulkBarFieldClick) {
+        onBulkBarFieldClick(fieldId, field, e);
+        return;
+      }
+      openBulkEditPopup(field, e);
+    },
+    [onBulkBarFieldClick, openBulkEditPopup],
+  );
+
+  const handleBulkEditApply = useCallback(
+    (nextValue) => {
+      if (!bulkEdit || !onBulkEdit) return;
+      const selectedRows = getSelectedRows();
+      if (selectedRows.length === 0) {
+        closeBulkEdit();
+        return;
+      }
+      const payload = buildBulkEditPayload({
+        column: bulkEdit.column,
+        columnKey: bulkEdit.fieldId,
+        value: nextValue,
+        rows: selectedRows,
+        getRowId,
+      });
+      onBulkEdit(payload);
+      closeBulkEdit();
+    },
+    [bulkEdit, onBulkEdit, getSelectedRows, closeBulkEdit],
+  );
+
+  const handleCellClick = (e, column, row) => {
+    if (!isColumnCellEditable(column, onCellEdit)) return;
+    e.stopPropagation();
+    onCellEditStart?.(column, row);
+    const anchor =
+      e.currentTarget.closest(".mdt-cell-editable-wrap, .mdt-list-chip-edit-anchor")
+        ?.getBoundingClientRect()
+      ?? e.currentTarget.getBoundingClientRect();
+    const anchorRect = {
+      top: anchor.top,
+      left: anchor.left,
+      right: anchor.right,
+      bottom: anchor.bottom,
+      width: anchor.width,
+      height: anchor.height,
+    };
+    const position = computeCellEditPopupPosition(anchorRect, column, EDIT_MODE.INLINE);
+    setCellEdit({
+      rowId: getRowId(row),
+      row,
+      column,
+      columnKey: column.accessorKey,
+      anchorRect,
+      width: position.width,
+    });
+    setCellEditPopupPos(position);
+    setCellEditDraftValue(getRowFieldEditValue(column, row));
+    closeBulkEdit();
+    closeFilterChipPopups();
+    setOpenPopup(null);
+    closeRowMenu();
+  };
+
+  const handleCellEditApply = (nextValue) => {
+    if (!cellEdit || !onCellEdit) return;
+    const col = liveCellEditColumn ?? cellEdit.column;
+    const resolved = resolveEditColumnConfig(col, EDIT_MODE.INLINE);
+    const normalized = normalizeEditApplyValue(col, nextValue, EDIT_MODE.INLINE);
+    const isMulti = isColumnSelectMulti(resolved, EDIT_MODE.INLINE);
+    const previous = getRowFieldEditValue(col, cellEdit.row, EDIT_MODE.INLINE);
+    onCellEdit({
+      action: "inlineUpdate",
+      rowId: cellEdit.rowId,
+      row: cellEdit.row,
+      columnKey: col.accessorKey,
+      key: col.accessorKey,
+      column: col,
+      variant: getColumnFieldVariant(resolved, EDIT_MODE.INLINE),
+      multi: isMulti,
+      value: normalized,
+      previousValue: previous,
+      previousValueKey:
+        col.editValueKey != null ? cellEdit.row[col.editValueKey] : undefined,
+    });
+
+    if (isMulti) {
+      return;
+    }
+    closeCellEdit();
+  };
+
+  const hasAnyFilterValue = activeFilters.some((f) => filterValueIsSet(f));
+
+  const availableForDropdown = (search) => {
+    const q = search.toLowerCase();
+    return filterableColumns.filter((col) => {
+      if (!col.header.toLowerCase().includes(q)) return false;
+      return !activeFilters.find((f) => f.key === col.accessorKey);
+    });
+  };
+
+  const filterBarProps = {
+    filterConfig: resolvedFilterConfig,
+    filterableColumns,
+    activeFilters,
+    replacingFilterId,
+    setReplacingFilterId,
+    replaceSearch,
+    setReplaceSearch,
+    valueEditId,
+    setValueEditId,
+    valueInputText,
+    setValueInputText,
+    valueSelectSearch,
+    setValueSelectSearch,
+    showInnerFilterDropdown,
+    setShowInnerFilterDropdown,
+    innerFilterSearch,
+    setInnerFilterSearch,
+    calYear,
+    calMonth,
+    setCalYear,
+    setCalMonth,
+    today,
+    chipReplaceRef,
+    chipValueRef,
+    innerFilterRef,
+    onRemoveFilter: removeFilter,
+    onClearAll: clearAllFilters,
+    onAddFilter: addFilter,
+    onUpdateFilterValue: updateFilterValue,
+    onUpdateFilterOperator: updateFilterOperator,
+    onReplaceFilterKey,
+    availableForDropdown,
+    onCloseOtherPopups: closeFilterBarPopups,
+    onCloseColumnSortPopup: () => setOpenPopup(null),
+    hasAnyFilterValue,
+  };
+
+  const displayPopupProps = {
+    visibleColumns,
+    displayPropertyColumns,
+    hiddenColumns,
+    onToggleColumn: toggleColumnVisibility,
+    groupByColumns,
+    groupByKey,
+    onGroupByChange: setGroupByKey,
+    sortState,
+    orderDirEffective,
+    onOrderFromDisplay: setOrderFromDisplay,
+    displayPropsOpen,
+    onToggleDisplayPropsOpen: () => setDisplayPropsOpen((v) => !v),
+    orderByOpen,
+    onToggleOrderByOpen: () => setOrderByOpen((v) => !v),
+    groupByOpen,
+    onToggleGroupByOpen: () => setGroupByOpen((v) => !v),
+  };
+
+  const filtersWithValues = activeFilters
+    .filter((f) => filterValueIsSet(f))
+    .map(({ id, key, label, icon, value, operator }) => ({
+      id,
+      key,
+      label,
+      icon,
+      value,
+      operator,
+    }));
+
+  const serializeSavedViewFilterValue = (value) => {
+    if (Array.isArray(value)) {
+      return value.map((v) => String(v)).join(",");
+    }
+    if (value == null) return "";
+    return String(value);
+  };
+
+  const editingView = React.useMemo(
+    () => savedViews.find((v) => v.id === editingViewId) ?? null,
+    [savedViews, editingViewId],
+  );
+
+  const buildViewPayload = (payload) => {
+    const savedFilterSnapshot = activeFilters
+      .map((f) => {
+        const withValue = (payload.filters || filtersWithValues).find(
+          (v) => v.key === f.key || v.id === f.id,
+        );
+        return {
+          key: f.key,
+          label: f.label,
+          icon: f.icon ?? null,
+          value: withValue?.value ?? f.value,
+          operator: f.operator ?? withValue?.operator,
+        };
+      })
+      .filter((f) => filterValueIsSet(f.value));
+
+    const dedupedFilters = savedFilterSnapshot.reduce((acc, filter) => {
+      const existing = acc.find((item) => item.key === filter.key);
+      if (!existing) {
+        acc.push(filter);
+        return acc;
+      }
+
+      const existingValues = Array.isArray(existing.value)
+        ? existing.value
+        : existing.value != null && existing.value !== ""
+          ? [existing.value]
+          : [];
+      const incomingValues = Array.isArray(filter.value)
+        ? filter.value
+        : filter.value != null && filter.value !== ""
+          ? [filter.value]
+          : [];
+      const mergedValues = Array.from(
+        new Set([...existingValues, ...incomingValues].map((v) => String(v).trim()).filter(Boolean)),
+      );
+      existing.value = mergedValues.length > 1 ? mergedValues : (mergedValues[0] ?? "");
+      existing.label = filter.label ?? existing.label;
+      existing.icon = filter.icon ?? existing.icon;
+      existing.operator = filter.operator ?? existing.operator;
+      return acc;
+    }, []);
+
+    return {
+      pageKey: savedViewPageKey,
+      name: payload.name?.trim() || "Untitled",
+      description: payload.description?.trim() || "",
+      viewMode: payload.viewMode === "list" ? "list" : "table",
+      filters: dedupedFilters.map((f) => ({
+        id: f.key ?? f.id,
+        value: serializeSavedViewFilterValue(f.value),
+      })),
+      hiddenColumns: hiddenColumns.filter((k) => !lockedColumnSet.has(k)),
+      groupByKey,
+      sort: sortState.column
+        ? { column: sortState.column, direction: sortState.direction }
+        : null,
+      isPublic: Boolean(payload.isPublic),
+    };
+  };
+
+  const handleOpenCreateViewModal = () => {
+    captureModalFilterSnapshot();
+    setEditingViewId(null);
+    setIsFilterBarOpen(true);
+    setShowDisplayPopup(false);
+    setShowCreateViewModal(true);
+  };
+
+  const handleEditSavedView = (viewId) => {
+    const view = savedViews.find((v) => v.id === viewId);
+    if (!view) return;
+    applySavedView(view, { notify: false });
+    captureModalFilterSnapshot();
+    setEditingViewId(viewId);
+    setShowDisplayPopup(false);
+    setShowCreateViewModal(true);
+  };
+
+  const handleCloseCreateViewModal = () => {
+    restoreModalFilterSnapshot();
+    closeFilterChipPopups();
+    setEditingViewId(null);
+    setShowCreateViewModal(false);
+  };
+
+  const handleDeleteSavedView = useCallback(async () => {
+    if (!editingViewId) return;
+    try {
+      await apiService.DELETE(API.DELETE_SAVED_VIEW(editingViewId));
+      const deletingActive = activeSavedViewId === editingViewId;
+      setSavedViews((prev) => prev.filter((v) => v.id !== editingViewId));
+      clearModalFilterSnapshot();
+      setEditingViewId(null);
+      closeFilterChipPopups();
+      setShowCreateViewModal(false);
+      if (deletingActive) {
+        applySavedView(null, { notify: false });
+        const fallbackTabId = activeTab || tabs[0]?.id;
+        if (fallbackTabId && onTabChange) {
+          onTabChange(fallbackTabId, { clearFilters: true });
+        }
+      }
+    } catch (error) {
+      console.error("Failed to delete saved view", error);
+      throw error;
+    }
+  }, [
+    editingViewId,
+    activeSavedViewId,
+    activeTab,
+    tabs,
+    applySavedView,
+    onTabChange,
+    closeFilterChipPopups,
+  ]);
+
+  const handleSaveView = async (payload) => {
+    const viewPayload = buildViewPayload(payload);
+    try {
+      const response = editingViewId
+        ? await apiService.PUT(API.PUT_SAVED_VIEW(editingViewId), viewPayload)
+        : await apiService.POST(API.POST_SAVED_VIEW, viewPayload);
+      const nextView = {
+        ...normalizeSavedView(response?.data ?? response),
+        count: null,
+      };
+      setSavedViews((prev) =>
+        editingViewId
+          ? prev.map((v) => (v.id === editingViewId ? nextView : v))
+          : [...prev, nextView],
+      );
+      setActiveSavedViewId(nextView.id);
+      applySavedView(nextView, { notify: true });
+      clearModalFilterSnapshot();
+      setEditingViewId(null);
+      closeFilterChipPopups();
+      setShowCreateViewModal(false);
+      applySavedViewCounts();
+      if (onCreateView) onCreateView(nextView);
+      else if (onSaveFiltersAs && !editingViewId) {
+        onSaveFiltersAs(nextView.filters, nextView.name);
+      }
+    } catch (error) {
+      console.error("Failed to save view", error);
+      throw error;
+    }
+  };
+
+  // ── Sort helpers ─────────────────────────────────────────────────────────────
+
+  const handleHeaderClick = (accessorKey) => {
+    setShowFilterDropdown(false);
+    setShowDisplayPopup(false);
+    setShowInnerFilterDropdown(false);
+    setOpenPopup((prev) => (prev === accessorKey ? null : accessorKey));
+  };
+
+  const handleSort = (dir) => { setSortState({ column: openPopup, direction: dir }); setOpenPopup(null); };
+  const handleClearSort = () => { setSortState({ column: null, direction: null }); setOpenPopup(null); };
+
+  const renderSortPopupContent = (column) => {
+    const isDate =
+      getColumnFieldVariant(column, EDIT_MODE.FILTER) === "date" ||
+      column.headerIcon === "calendar" ||
+      column.rowIcon === "calendar";
+    return (
+      <>
+        <button type="button" className="mdt-sort-option" onClick={() => handleSort("asc")}>
+          <ArrowUpNarrowWide size={12} className="mdt-sort-option-icon" />
+          <span>{isDate ? "New → Old" : "A → Z"}</span>
+          {sortState.column === column.accessorKey && sortState.direction === "asc" && (
+            <Check size={11} className="mdt-sort-check" />
+          )}
+        </button>
+        <button type="button" className="mdt-sort-option" onClick={() => handleSort("desc")}>
+          <ArrowDownWideNarrow size={12} className="mdt-sort-option-icon" />
+          <span>{isDate ? "Old → New" : "Z → A"}</span>
+          {sortState.column === column.accessorKey && sortState.direction === "desc" && (
+            <Check size={11} className="mdt-sort-check" />
+          )}
+        </button>
+        {sortState.column === column.accessorKey && (
+          <button type="button" className="mdt-sort-option mdt-sort-clear" onClick={handleClearSort}>
+            <Eraser size={12} className="mdt-sort-option-icon" />
+            <span>Clear sorting</span>
+          </button>
+        )}
+      </>
+    );
+  };
+
+  const SORT_COLOR = "oklch(0.4377 0.0066 230.87)";
+  const getSortIcon = (accessorKey) => {
+    const isSorted = sortState.column === accessorKey;
+    if (!isSorted) return <ChevronDown className="mdt-header-chevron" size={14} />;
+    const SortIcon = sortState.direction === "asc" ? ArrowUpNarrowWide : ArrowDownWideNarrow;
+    return (
+      <span className="mdt-header-icons-sorted">
+        <SortIcon size={14} style={{ color: SORT_COLOR }} />
+        <ChevronDown size={14} style={{ color: SORT_COLOR }} />
+      </span>
+    );
+  };
+
+  // ── Cell renderer ─────────────────────────────────────────────────────────────
+
+  const getCellTooltipText = (column, row) => getColumnTooltipText(column, row);
+
+  const getTableEmptyPlaceholder = (column, row) => {
+    if (column?.emptyPlaceholder === false) return "-";
+    if (typeof column?.emptyPlaceholder === "function") {
+      return column.emptyPlaceholder({ column, row });
+    }
+    if (typeof column?.emptyPlaceholder === "string" && column.emptyPlaceholder.trim() !== "") {
+      return column.emptyPlaceholder;
+    }
+
+    const variant = getColumnFieldVariant(column, EDIT_MODE.INLINE);
+    const header = String(column?.header || "Value").trim();
+
+    if (variant === "select" || variant === "boolean") {
+      return column?.editable ? `Select ${header}` : header;
+    }
+
+    return header || "Value";
+  };
+
+  const wrapCellTruncate = (content, tooltipText, { skip = false } = {}) => {
+    if (skip) return content;
+    return (
+      <MdtTruncateWithTooltip title={tooltipText || undefined}>
+        {content}
+      </MdtTruncateWithTooltip>
+    );
+  };
+
+  const renderCell = (column, row, { editable = false, onCellActivate } = {}) => {
+    const value = row?.[column.accessorKey];
+    const useMultiSummary = shouldUseMultiSelectSummary(column);
+    const hasCustomCell = hasCustomColumnCell(column);
+    const tooltipText = getCellTooltipText(column, row);
+    const isEmptyValue =
+      value == null ||
+      value === "" ||
+      value === "-" ||
+      (Array.isArray(value) && value.length === 0);
+    const rowIconName = getColumnRowIconName(column, {
+      hasCustomCell,
+      isMultiSummary: useMultiSummary,
+    });
+    const rowIcon = rowIconName
+      ? renderColumnIcon(rowIconName, { className: "mdt-row-icon" })
+      : null;
+    let customCell;
+    if (useMultiSummary) {
+      customCell = <MdtMultiSelectCellDisplay row={row} column={column} />;
+    } else if (typeof column.Cell === "function") {
+      customCell = column.Cell({
+        cell: { getValue: () => value },
+        row: { original: row },
+      });
+    } else if (isEmptyValue) {
+      customCell = getTableEmptyPlaceholder(column, row);
+    } else if (hasStatusValueRenderer(column)) {
+      customCell = renderStatusValueDisplay(value, column) ?? (value ?? "-");
+    } else {
+      customCell = value ?? "-";
+    }
+    let inner = useMultiSummary ? (
+      customCell
+    ) : !rowIcon ? (
+      customCell
+    ) : (
+      <span className="mdt-cell-with-icon">
+        {rowIcon}
+        <span className="mdt-cell-with-icon-text">{customCell}</span>
+      </span>
+    );
+    const skipTruncate =
+      useMultiSummary
+      || (hasCustomCell && column.accessorKey !== "title" && !column.cellTruncatable);
+    inner = wrapCellTruncate(inner, tooltipText, { skip: skipTruncate });
+    if (!editable || !onCellActivate) return inner;
+    return (
+      <button
+        type="button"
+        className="mdt-cell-editable-trigger"
+        onClick={(e) => onCellActivate(e, column, row)}
+        title={`Edit ${column.header}`}
+      >
+        {inner}
+      </button>
+    );
+  };
+
+  // ── Column sizing ────────────────────────────────────────────────────────────
+
+  const toPx = (v) => {
+    if (v === null || v === undefined || v === "") return null;
+    if (typeof v === "number") return `${v}px`;
+    const t = String(v).trim();
+    if (!t) return null;
+    return /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
+  };
+
+  const getColumnWidthPx = (col) => {
+    const n = parseFloat(String(toPx(col.size)));
+    return !isNaN(n) && n > 0 ? n : 120;
+  };
+
+  /**
+   * Data columns: exact min width from col.size (px).
+   * Last data column is width:auto so it takes leftover table space (menu col is separate).
+   */
+  const getDataColumnWidthStyle = (col, colIndex) => {
+    const px = getColumnWidthPx(col);
+    const minW = `${px}px`;
+    const isLastDataCol = colIndex === renderedColumns.length - 1;
+
+    if (isLastDataCol) {
+      return { width: "auto", minWidth: minW };
+    }
+    return { width: minW, minWidth: minW, maxWidth: minW };
+  };
+
+  const getColumnStyle = (col, colIndex) => getDataColumnWidthStyle(col, colIndex);
+
+  /** col element — data columns only */
+  const getDataColWidth = (col, colIndex) => getDataColumnWidthStyle(col, colIndex);
+
+  const calcTableMinWidth = () => {
+    let total = showRowMenuColumn ? ROW_MENU_COL_WIDTH : 0;
+    renderedColumns.forEach((col) => {
+      total += getColumnWidthPx(col);
+    });
+    return total > 0 ? `${total}px` : undefined;
+  };
+
+  /** Hard-coded 48px — only on options column th/td (not data columns) */
+  const OPTIONS_COL_STYLE = {
+    width: "48px",
+    minWidth: "48px",
+    maxWidth: "48px",
+  };
+
+  const closeRowMenu = () => {
+    setOpenRowMenuKey(null);
+    setOpenRowMenuRow(null);
+    setRowMenuPosition(null);
+  };
+
+  const handleOpenRowMenu = (rowId, row, position) => {
+    setOpenRowMenuKey(rowId);
+    setOpenRowMenuRow(row);
+    setRowMenuPosition(position);
+  };
+
+  const renderRowMenuCell = (row) => {
+    const id = getRowId(row);
+    if (!id) return null;
+
+    const isOpen = openRowMenuKey === id;
+
+    return (
+      <div
+        className={`mdt-row-menu-cell${isOpen ? " mdt-row-menu-cell-open" : ""}`}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <MdtRowActionsMenu
+          variant="table"
+          row={isOpen ? openRowMenuRow ?? row : row}
+          rowId={id}
+          isOpen={isOpen}
+          menuPosition={isOpen ? rowMenuPosition : null}
+          onOpen={handleOpenRowMenu}
+          onClose={closeRowMenu}
+          onRowEdit={onRowEdit}
+          onRowDownload={onRowDownload}
+          onRowDelete={onRowDelete}
+          rowMenuActions={rowMenuActions}
+          deleteConfirmConfig={deleteConfirmConfig}
+          isDeletable={rowCanDelete(row)}
+        />
+      </div>
+    );
+  };
+
+  const showNewButton =
+    resolvedHeaderActions.showNew &&
+    onPrimaryAction &&
+    (!hideHeader || toolbarInBreadcrumb);
+
+  const renderNewButton = (slotClass = "") =>
+    showNewButton ? (
+      <button
+        className={`mdt-primary${slotClass ? ` ${slotClass}` : ""}`}
+        type="button"
+        onClick={onPrimaryAction}
+      >
+        {primaryActionLabel}
+      </button>
+    ) : null;
+
+  const [breadcrumbToolbarHost, setBreadcrumbToolbarHost] = useState(null);
+
+  useLayoutEffect(() => {
+    if (!toolbarInBreadcrumb) {
+      setBreadcrumbToolbarHost(null);
+      return undefined;
+    }
+
+    let cancelled = false;
+    const resolveHost = () => {
+      if (cancelled) return;
+      const host = document.getElementById(breadcrumbToolbarHostId);
+      if (host) {
+        setBreadcrumbToolbarHost(host);
+      }
+    };
+
+    resolveHost();
+    const rafId = requestAnimationFrame(() => {
+      resolveHost();
+      requestAnimationFrame(resolveHost);
+    });
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+    };
+  }, [toolbarInBreadcrumb, breadcrumbToolbarHostId, toolbarHostSeed]);
+
+  const renderToolbarActions = () => (
+    <div className={`mdt-actions-right${toolbarInBreadcrumb ? " mdt-actions-right--in-breadcrumb" : ""}`}>
+      {resolvedHeaderActions.showLayoutSwitch && !lockedViewMode ? (
+        <div className="mdt-layout-switch" role="tablist" aria-label="Table mode">
+          <button
+            type="button"
+            title="List layout"
+            className={viewMode === "list" ? "mdt-layout-active" : ""}
+            onClick={() => setViewMode("list")}
+          >
+            <Menu size={16} />
+          </button>
+          <button
+            type="button"
+            title="Spreadsheet layout"
+            className={viewMode === "table" ? "mdt-layout-active" : ""}
+            onClick={() => setViewMode("table")}
+          >
+            <Layout size={16} />
+          </button>
+        </div>
+      ) : null}
+
+      {resolvedHeaderActions.showFilter && (
+        <div className="mdt-filter-button-wrap" ref={filterDropdownRef}>
+          <button
+            className={`mdt-ghost icon${activeFilters.length > 0 || isFilterBarOpen ? " mdt-filter-active" : ""}`}
+            type="button"
+            title={resolvedFilterConfig.toolbarButtonTitle}
+            onClick={() => {
+              if (isFilterBarOpen && activeFilters.length > 0) {
+                setIsFilterBarOpen(false);
+                setOpenPopup(null);
+                return;
+              }
+              if (activeFilters.length > 0) {
+                setIsFilterBarOpen(true);
+                setOpenPopup(null);
+                return;
+              }
+              setOpenPopup(null);
+              setShowDisplayPopup(false);
+              setShowFilterDropdown((v) => !v);
+              setReplacingFilterId(null);
+              setReplaceSearch("");
+            }}
+          >
+            <ListFilter size={16} />
+          </button>
+
+          {showFilterDropdown && (
+            <div className="mdt-filter-dropdown" style={{ top: "calc(100% + 8px)" }}>
+              <div className="mdt-fd-search">
+                <div className="mdt-fd-search-wrap">
+                  <span className="mdt-fd-search-icon">
+                    <Search size={12} />
+                  </span>
+                  <input
+                    type="text"
+                    placeholder={resolvedFilterConfig.searchPlaceholder}
+                    value={filterSearch}
+                    onChange={(e) => setFilterSearch(e.target.value)}
+                    autoFocus
+                  />
+                </div>
+              </div>
+              <div className="mdt-fd-list">
+                {availableForDropdown(filterSearch).map((col) => (
+                  <button
+                    key={col.accessorKey}
+                    type="button"
+                    className="mdt-fd-item"
+                    onClick={() => addFilter(col)}
+                  >
+                    <span className="mdt-fd-item-icon">
+                      {renderColumnIcon(col.headerIcon || col.rowIcon || "default", {
+                        className: "mdt-fd-svg",
+                      })}
+                    </span>
+                    <span>{col.header}</span>
+                  </button>
+                ))}
+                {availableForDropdown(filterSearch).length === 0 && (
+                  <div className="mdt-fd-empty">
+                    {resolvedFilterConfig.emptyColumnsMessage}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {resolvedHeaderActions.showDisplay && (
+        <div className="mdt-filter-button-wrap" ref={displayPopupRef}>
+          <button
+            className={`mdt-ghost icon mdt-display-btn${showDisplayPopup ? " mdt-filter-active" : ""}`}
+            type="button"
+            title="Display"
+            onClick={() => {
+              setOpenPopup(null);
+              setShowFilterDropdown(false);
+              setShowDisplayPopup((v) => !v);
+            }}
+          >
+            <SlidersHorizontal size={16} />
+          </button>
+
+          {showDisplayPopup && (
+            <MdtDisplayPopup
+              {...displayPopupProps}
+              viewMode={viewMode}
+            />
+          )}
+        </div>
+      )}
+
+      {resolvedHeaderActions.showExport && onExport && (
+        <div className="mdt-toolbar-cell">
+          <button
+            className="mdt-ghost icon mdt-export-btn"
+            type="button"
+            title="Export"
+            onClick={() =>
+              onExport({
+                // Match show/hide column (Display) settings in the Excel export.
+                columns: renderedColumns,
+                hiddenColumns,
+                // Flat rows currently shown (Group by is client-side only).
+                rows: sortedRows,
+                groupByKey,
+              })
+            }
+          >
+            <Download size={16} />
+          </button>
+        </div>
+      )}
+
+      {renderNewButton(toolbarInBreadcrumb ? "" : "mdt-new-desktop")}
+    </div>
+  );
+
+  const toolbarActionsNode = renderToolbarActions();
+  const portaledToolbar =
+    toolbarInBreadcrumb && breadcrumbToolbarHost
+      ? createPortal(toolbarActionsNode, breadcrumbToolbarHost)
+      : null;
+
+  // ── Render ───────────────────────────────────────────────────────────────────
+
+  const hasSidebarNav = Boolean(sidebarNavConfig?.items?.length);
+  const sidebarWidth = sidebarNavConfig?.width ?? 240;
+  const hasHeaderBreadcrumbMenu = Boolean(headerBreadcrumbMenu?.label);
+  const isHeaderBreadcrumbMenuInteractive =
+    hasHeaderBreadcrumbMenu && (isMobilePopupLayout() || menuToggle === false);
+  const compactBreadcrumbsSource = Array.isArray(headerBreadcrumbs)
+    ? headerBreadcrumbs.filter(
+      (crumb) => String(crumb?.label ?? "").trim().toLowerCase() !== "admin",
+    )
+    : [];
+  const useCompactBreadcrumbs =
+    enableCompactBreadcrumbEllipsis && isMobilePopupLayout() && compactBreadcrumbsSource.length > 0;
+
+  return (
+    <div
+      className={`mdt-page-shell${enableBulkSelection && hasSelection ? " mdt-page-shell--bulk-bar" : ""}`}
+    >
+      <div className="mdt-root">
+        {portaledToolbar}
+
+        {/* ── Top action bar: hidden when toolbar is in global breadcrumb ── */}
+        {!toolbarInBreadcrumb && (
+          <div className="mdt-breadcrumb-row">
+            <div className="mdt-breadcrumb-left">
+              {(onSidebarToggle && (menuToggle === false || showSidebarToggleAlways)) && (
+                <div
+                  className="mdt-sidebar-toggle"
+                  title={menuToggle === false ? "Show Sidebar" : "Toggle Sidebar"}
+                  onClick={onSidebarToggle}
+                >
+                  <ChevronsLeft size={18} />
+                </div>
+              )}
+              {!hideHeader && Array.isArray(headerBreadcrumbs) && headerBreadcrumbs.length > 0 ? (
+                <span className="mdt-bc-crumbs" aria-label="Breadcrumb">
+                  {useCompactBreadcrumbs ? (
+                    <>
+                      <span className="mdt-bc-ellipsis" aria-hidden="true">
+                        <MoreHorizontal size={16} />
+                      </span>
+                    </>
+                  ) : (
+                    headerBreadcrumbs.map((crumb, index) => (
+                      <React.Fragment key={`${crumb?.label || "crumb"}-${index}`}>
+                        {index > 0 && <span className="mdt-bc-separator">›</span>}
+                        <span className="mdt-bc-crumb">
+                          {crumb?.icon ? <span className="mdt-bc-crumb-icon">{crumb.icon}</span> : null}
+                          <span className="mdt-bc-crumb-label">{crumb?.label}</span>
+                        </span>
+                      </React.Fragment>
+                    ))
+                  )}
+                  {hasHeaderBreadcrumbMenu ? (
+                    <>
+                      <span className="mdt-bc-separator">›</span>
+                      <span className="mdt-bc-menu-wrap" ref={headerBreadcrumbMenuRef}>
+                        {isHeaderBreadcrumbMenuInteractive ? (
+                          <>
+                            <button
+                              type="button"
+                              className={`mdt-bc-menu-btn${showHeaderBreadcrumbMenu ? " mdt-bc-menu-btn--open" : ""}`}
+                              onClick={() => setShowHeaderBreadcrumbMenu((prev) => !prev)}
+                            >
+                              <span className="mdt-bc-menu-label">{headerBreadcrumbMenu.label}</span>
+                              {headerBreadcrumbMenu.count != null && (
+                                <span className="mdt-bc-count-badge mdt-bc-count-badge--crumb">
+                                  {headerBreadcrumbMenu.count}
+                                </span>
+                              )}
+                              <ChevronDown size={12} />
+                            </button>
+                            {showHeaderBreadcrumbMenu && Array.isArray(headerBreadcrumbMenu.items) && (
+                              <div className="mdt-filter-dropdown mdt-fd-left" style={{ top: "calc(100% + 8px)" }}>
+                                <div className="mdt-fd-list">
+                                  {headerBreadcrumbMenu.items.map((item) => {
+                                    const hasActiveKey = headerBreadcrumbMenu?.activeKey != null;
+                                    const isActive = hasActiveKey
+                                      ? String(item?.key ?? "") === String(headerBreadcrumbMenu.activeKey)
+                                      : String(item?.label ?? "") === String(headerBreadcrumbMenu?.label ?? "");
+
+                                    return (
+                                      <button
+                                        key={String(item?.key ?? item?.label)}
+                                        type="button"
+                                        className="mdt-fd-item"
+                                        onClick={() => {
+                                          setShowHeaderBreadcrumbMenu(false);
+                                          if (headerBreadcrumbMenu?.onSelect) headerBreadcrumbMenu.onSelect(item);
+                                        }}
+                                      >
+                                        <span style={{ flex: 1, minWidth: 0 }}>{item?.label}</span>
+                                        {isActive && (
+                                          <Check
+                                            size={12}
+                                            style={{ color: "oklch(0.2378 0.0029 230.83)", flexShrink: 0 }}
+                                          />
+                                        )}
+                                      </button>
+                                    );
+                                  })}
+                                </div>
+                              </div>
+                            )}
+                          </>
+                        ) : (
+                          <span className="mdt-bc-menu-btn" aria-label={headerBreadcrumbMenu.label}>
+                            <span className="mdt-bc-menu-label">{headerBreadcrumbMenu.label}</span>
+                            {headerBreadcrumbMenu.count != null && (
+                              <span className="mdt-bc-count-badge mdt-bc-count-badge--crumb">
+                                {headerBreadcrumbMenu.count}
+                              </span>
+                            )}
+                          </span>
+                        )}
+                      </span>
+                    </>
+                  ) : null}
+                  {(displayedTotalCount != null || countText) &&
+                    !(hasHeaderBreadcrumbMenu && headerBreadcrumbMenu.count != null) && (
+                      <span className="mdt-bc-count-badge">
+                        {displayedTotalCount != null ? displayedTotalCount : countText}
+                      </span>
+                    )}
+                </span>
+              ) : !hideHeader && (
+                <span className="mdt-bc-item">
+                  {titleIcon}
+                  <span className="mdt-bc-title">{title}</span>
+                  {(displayedTotalCount != null || countText) && (
+                    <span className="mdt-bc-count-badge">
+                      {displayedTotalCount != null ? displayedTotalCount : countText}
+                    </span>
+                  )}
+                </span>
+              )}
+              {renderNewButton("mdt-new-mobile")}
+            </div>
+
+            {toolbarActionsNode}
+          </div>
+        )}
+
+        <div className="mdt-content-layout">
+          {hasSidebarNav && (
+            <aside
+              className="mdt-shell-side-panel"
+              style={{ width: sidebarWidth, minWidth: sidebarWidth }}
+            >
+              <MdtSidebarNav
+                items={sidebarNavConfig.items}
+                activeKey={sidebarNavConfig.activeKey}
+                onItemClick={sidebarNavConfig.onItemClick}
+              />
+            </aside>
+          )}
+          <div className="mdt-content-main">
+
+            {/* ── Tabs: default (Active, Drafts, …) + saved views ── */}
+            <MdtTabsSection
+              tabs={mergedTabs}
+              activeTabId={resolvedActiveTabId}
+              onTabClick={handleTabClick}
+              onEditSavedView={handleEditSavedView}
+              tabsConfig={tabsConfig}
+              rowClassName={
+                viewMode === "list" &&
+                !groupByKey &&
+                enableBulkSelection &&
+                hasSelection
+                  ? "mdt-tabs-row--has-selection"
+                  : ""
+              }
+              leadingSlot={
+                viewMode === "list" && !groupByKey && enableBulkSelection ? (
+                  <div
+                    className="mdt-tabs-list-select-all"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <input
+                      ref={selectAllRef}
+                      type="checkbox"
+                      className="mdt-row-select-checkbox mdt-row-select-checkbox--header"
+                      checked={allVisibleSelected}
+                      onChange={toggleSelectAllVisible}
+                      onClick={(e) => e.stopPropagation()}
+                      aria-label="Select all in list"
+                      disabled={selectableVisibleRowIds.length === 0}
+                    />
+                  </div>
+                ) : null
+              }
+            />
+
+            {/* ── Active filter chips bar ── */}
+            {isFilterBarOpen &&
+              activeFilters.length > 0 &&
+              !showCreateViewModal && (
+                <div className="mdt-filter-bar" ref={filterBarRef}>
+                  <MdtActiveFilterBar
+                    {...filterBarProps}
+                    showSaveAs={resolvedFilterConfig.showSaveAs}
+                    onSaveAs={handleOpenCreateViewModal}
+                  />
+                </div>
+              )}
+
+            {/* ── Table / List view ── */}
+            {viewMode === 'list' ? (
+              <FlazDataViewList
+                wrapRef={listWrapRef}
+                rows={sortedRows}
+                columns={renderedColumns}
+                onRowClick={onRowClick}
+                isLoading={isInitialLoading}
+                isLoadingMore={isLoadingMore}
+                skeletonRows={autoSkeletonRows}
+                onListScroll={onTableScroll}
+                groupByKey={groupByKey}
+                title={title}
+                listGroupHeadPrefix={listGroupHeadPrefix}
+                listGroupHeadCount={listGroupHeadCount}
+                suppressListRowCountFallback={Boolean(activeSavedViewId)}
+                rowKey={rowKey}
+                listMainColumnKey={listMainColumnKey ?? rowKey}
+                listLeftColumnKeys={resolvedListLeftKeys}
+                listLeftSecondaryKeys={listLeftSecondaryKeys}
+                listLeftSecondarySeparator={listLeftSecondarySeparator}
+                onRowEdit={onRowEdit}
+                onRowDownload={onRowDownload}
+                onRowDelete={onRowDelete}
+                rowMenuActions={rowMenuActions}
+                deleteConfirmConfig={deleteConfirmConfig}
+                isRowDeletable={isRowDeletable}
+                emptyStateTitle={emptyStateTitle}
+                {...(enableBulkSelection
+                  ? {
+                    selectedRowIds,
+                    onToggleRowSelection: toggleRowSelection,
+                    onToggleGroupSelection: toggleGroupSelection,
+                    hasSelection,
+                  }
+                  : {})}
+                onCellActivate={onCellEdit ? handleCellClick : null}
+                isColumnEditable={(col) => isColumnCellEditable(col, onCellEdit)}
+                cellEdit={cellEdit}
+                cellEditAnchorRef={cellEditAnchorRef}
+              />
+            ) : (
+              <div
+                className={`mdt-table-wrap${!isInitialLoading && sortedRows.length === 0 ? " mdt-table-wrap--empty" : ""}`}
+                ref={tableWrapRef}
+                onScroll={(e) => {
+                  const t = e.currentTarget;
+                  updateTableScrollState();
+                  if (openRowMenuKey) closeRowMenu();
+                  if (onTableScroll) {
+                    onTableScroll({
+                      scrollTop: t.scrollTop,
+                      scrollHeight: t.scrollHeight,
+                      clientHeight: t.clientHeight,
+                    });
+                  }
+                }}
+              >
+                {!isInitialLoading && sortedRows.length === 0 ? (
+                  <MdtEmptyState title={emptyStateTitle} />
+                ) : (
+                  <table
+                    className={`mdt-table${enableBulkSelection && hasSelection ? " mdt-has-selection" : ""}`}
+                    style={{
+                      tableLayout: tableLayoutFixed ? "fixed" : "auto",
+                      width: "100%",
+                      minWidth: calcTableMinWidth(),
+                    }}
+                  >
+                    <colgroup>
+                      {renderedColumns.map((col, colIndex) => (
+                        <col
+                          key={`col-${col.accessorKey}`}
+                          className="mdt-col-data"
+                          style={getDataColWidth(col, colIndex)}
+                        />
+                      ))}
+                      {showRowMenuColumn && (
+                        <col
+                          key="col-row-menu"
+                          className="mdt-col-row-menu-col"
+                        />
+                      )}
+                    </colgroup>
+                    <thead>
+                      <tr>
+                        {renderedColumns.map((column, colIndex) => (
+                          <th
+                            key={column.accessorKey}
+                            style={getColumnStyle(column, colIndex)}
+                            className={getTableCellClassName(column, colIndex, {
+                              header: true,
+                            })}
+                          >
+                            {enableBulkSelection && colIndex === 0 && (
+                              <div
+                                className="mdt-cell-select-slot"
+                                onClick={(e) => e.stopPropagation()}
+                              >
+                                <input
+                                  ref={selectAllRef}
+                                  type="checkbox"
+                                  className="mdt-row-select-checkbox mdt-row-select-checkbox--header"
+                                  checked={allVisibleSelected}
+                                  onChange={toggleSelectAllVisible}
+                                  onClick={(e) => e.stopPropagation()}
+                                  aria-label="Select all rows"
+                                />
+                              </div>
+                            )}
+                            <div className="mdt-th-wrapper">
+                              <span
+                                className="mdt-header-cell"
+                                onClick={() => handleHeaderClick(column.accessorKey)}
+                              >
+                                <span className="mdt-header-label">
+                                  {renderColumnDefIcon(column, { className: "mdt-header-icon" })}
+                                  <span className="mdt-header-title">{column.header}</span>
+                                </span>
+                                <span className="mdt-header-sort-slot" aria-hidden="false">
+                                  {getSortIcon(column.accessorKey)}
+                                </span>
+                              </span>
+
+                              {openPopup === column.accessorKey && (
+                                <div className="mdt-sort-popup" ref={popupRef}>
+                                  {renderSortPopupContent(column)}
+                                </div>
+                              )}
+                            </div>
+                          </th>
+                        ))}
+                        {showRowMenuColumn && (
+                          <th
+                            key="col-settings"
+                            style={OPTIONS_COL_STYLE}
+                            className={`mdt-th-row-menu ${rowMenuColClassName}`}
+                          >
+                            <div className="mdt-th-wrapper mdt-th-row-menu-inner">
+                              <MoreHorizontal
+                                size={14}
+                                className="mdt-row-menu-header-icon"
+                                aria-hidden="true"
+                              />
+                            </div>
+                          </th>
+                        )}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {isInitialLoading
+                        ? Array.from({ length: autoSkeletonRows }).map((_, i) => (
+                          <tr key={`skeleton-${i}`} className="mdt-table-skeleton-row">
+                            {renderedColumns.map((col, j) => (
+                              <td
+                                key={`sk-${i}-${col.accessorKey}-${j}`}
+                                style={getColumnStyle(col, j)}
+                                className={getTableCellClassName(col, j)}
+                              >
+                                {enableBulkSelection && j === 0 && (
+                                  <div className="mdt-cell-select-slot" aria-hidden />
+                                )}
+                                <div className="mdt-cell-skeleton-wrap">
+                                  <span className="mdt-skeleton-cell mdt-skeleton-table-cell" />
+                                </div>
+                              </td>
+                            ))}
+                            {showRowMenuColumn && (
+                              <td
+                                key={`sk-${i}-menu`}
+                                style={OPTIONS_COL_STYLE}
+                                className={rowMenuColClassName}
+                              />
+                            )}
+                          </tr>
+                        ))
+                        : sortedRows.map((row) => {
+                          const key = getRowId(row);
+                          const selected = isRowSelected(key);
+                          return (
+                            <tr
+                              key={key}
+                              className={[
+                                onRowClick ? "mdt-row-clickable" : "",
+                                enableBulkSelection && selected ? "mdt-row-selected" : "",
+                              ]
+                                .filter(Boolean)
+                                .join(" ")}
+                              onClick={onRowClick && key ? () => onRowClick(key) : undefined}
+                            >
+                              {renderedColumns.map((col, colIndex) => {
+                                const cellClickable =
+                                  typeof col.onCellClick === "function"
+                                  && (typeof col.isCellClickable !== "function"
+                                    || col.isCellClickable(row));
+                                return (
+                                <td
+                                  key={`${key}-${col.accessorKey}`}
+                                  style={getColumnStyle(col, colIndex)}
+                                  className={[
+                                    getTableCellClassName(col, colIndex),
+                                    cellClickable ? "mdt-td-clickable" : "",
+                                    typeof col.onCellClick === "function" && !cellClickable
+                                      ? "mdt-td-clickable-disabled"
+                                      : "",
+                                  ]
+                                    .filter(Boolean)
+                                    .join(" ")}
+                                  onClick={
+                                    cellClickable
+                                      ? (event) => {
+                                        event.stopPropagation();
+                                        col.onCellClick(row, event);
+                                      }
+                                      : undefined
+                                  }
+                                >
+                                  {enableBulkSelection && colIndex === 0 && (
+                                    <div
+                                      className="mdt-cell-select-slot"
+                                      onClick={(e) => e.stopPropagation()}
+                                    >
+                                      <input
+                                        type="checkbox"
+                                        className="mdt-row-select-checkbox"
+                                        checked={selected}
+                                        onChange={(e) => toggleRowSelection(key, e)}
+                                        onClick={(e) => e.stopPropagation()}
+                                        aria-label={`Select row ${key}`}
+                                      />
+                                    </div>
+                                  )}
+                                  <div
+                                    className={[
+                                      "mdt-td-inner",
+                                      isColumnCellEditable(col, onCellEdit)
+                                        ? "mdt-cell-editable-wrap"
+                                        : "mdt-td-readonly-inner",
+                                      enableBulkSelection && colIndex === 0
+                                        ? "mdt-cell-first-content"
+                                        : "",
+                                    ]
+                                      .filter(Boolean)
+                                      .join(" ")}
+                                    ref={
+                                      cellEdit?.rowId === key &&
+                                        cellEdit?.column?.accessorKey === col.accessorKey
+                                        ? cellEditAnchorRef
+                                        : null
+                                    }
+                                  >
+                                    {renderCell(col, row, {
+                                      editable: isColumnCellEditable(col, onCellEdit),
+                                      onCellActivate: handleCellClick,
+                                    })}
+                                  </div>
+                                </td>
+                                );
+                              })}
+                              {showRowMenuColumn && (
+                                <td
+                                  key={`${key}-row-menu`}
+                                  style={OPTIONS_COL_STYLE}
+                                  className={rowMenuColClassName}
+                                >
+                                  {renderRowMenuCell(row)}
+                                </td>
+                              )}
+                            </tr>
+                          );
+                        })}
+                      {isLoadingMore && (
+                        <tr className="mdt-table-loading-more" aria-hidden>
+                          {renderedColumns.map((col, j) => (
+                            <td
+                              key={`load-more-${col.accessorKey}`}
+                              style={getColumnStyle(col, j)}
+                              className={getTableCellClassName(col, j)}
+                            >
+                              {enableBulkSelection && j === 0 && (
+                                <div className="mdt-cell-select-slot" aria-hidden />
+                              )}
+                              <div className="mdt-cell-skeleton-wrap">
+                                <span className="mdt-skeleton-cell mdt-skeleton-table-cell" />
+                              </div>
+                            </td>
+                          ))}
+                          {showRowMenuColumn && (
+                            <td style={OPTIONS_COL_STYLE} className={rowMenuColClassName} />
+                          )}
+                        </tr>
+                      )}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {cellEdit && cellEditPopupPos && (
+        <div
+          ref={cellEditPopupRef}
+          className="mdt-cell-edit-popup-anchor"
+          style={{
+            position: "fixed",
+            top: cellEditPopupPos.top,
+            left: cellEditPopupPos.left,
+            width: cellEditPopupPos.width,
+            minWidth: cellEditPopupPos.width,
+            maxWidth: isMobilePopupLayout()
+              ? "calc(100vw - 16px)"
+              : "min(320px, calc(100vw - 16px))",
+            zIndex: 10060,
+          }}
+          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          <MdtValueEditorPopup
+            key={`${cellEdit.rowId ?? "row"}-${cellEdit.columnKey ?? cellEdit.column?.accessorKey ?? "col"}`}
+            column={liveCellEditColumn ?? cellEdit.column}
+            mode={EDIT_MODE.INLINE}
+            value={cellEditDraftValue}
+            onApply={handleCellEditApply}
+            onCancel={closeCellEdit}
+            row={cellEdit.row}
+          />
+        </div>
+      )}
+      {bulkEdit && bulkEditPopupPos && (
+        <div
+          ref={bulkEditPopupRef}
+          className="mdt-cell-edit-popup-anchor mdt-bulk-edit-popup-anchor"
+          style={{
+            position: "fixed",
+            top: bulkEditPopupPos.top,
+            left: bulkEditPopupPos.left,
+            width: bulkEditPopupPos.width,
+            minWidth: bulkEditPopupPos.width,
+            maxWidth: isMobilePopupLayout()
+              ? "calc(100vw - 16px)"
+              : "min(320px, calc(100vw - 16px))",
+            zIndex: 10070,
+          }}
+          onClick={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
+          onWheel={(e) => e.stopPropagation()}
+        >
+          <MdtValueEditorPopup
+            column={bulkEdit.column}
+            mode={EDIT_MODE.BULK}
+            value={bulkEditDraftValue}
+            onApply={handleBulkEditApply}
+            onCancel={closeBulkEdit}
+            row={bulkEdit?.row}
+          />
+        </div>
+      )}
+      <MdtCreateViewModal
+        open={showCreateViewModal}
+        mode={editingViewId ? "edit" : "create"}
+        editingView={editingView}
+        onClose={handleCloseCreateViewModal}
+        onCreate={handleSaveView}
+        onDelete={editingViewId ? handleDeleteSavedView : undefined}
+        initialViewMode={editingView?.viewMode || viewMode}
+        filterBar={
+          <div className="mdt-filter-bar mdt-cv-filter-bar">
+            <MdtActiveFilterBar {...filterBarProps} showSaveAs={false} />
+          </div>
+        }
+        displayPopupProps={displayPopupProps}
+      />
+      <DeleteConfirmModal
+        open={showBulkDeleteConfirm}
+        title={deleteConfirmConfig.bulkTitle || "Delete Selected Items"}
+        message={
+          deleteConfirmConfig.getBulkMessage
+            ? deleteConfirmConfig.getBulkMessage(
+              selectedCount,
+              getSelectedRows(),
+              bulkDeleteCounts,
+            )
+            : (deleteConfirmConfig.bulkMessage || buildDefaultBulkDeleteMessage())
+        }
+        cancelText={deleteConfirmConfig.cancelText || "Cancel"}
+        confirmText={deleteConfirmConfig.confirmText || "Delete"}
+        onCancel={() => setShowBulkDeleteConfirm(false)}
+        onConfirm={() => {
+          const deletableRows = getDeletableSelectedRows();
+          const idsToDelete = deletableRows
+            .map((row) => getRowId(row))
+            .filter((id) => id != null);
+          const rowsToDelete = deletableRows;
+          setShowBulkDeleteConfirm(false);
+          // Optimistically remove only deletable rows from UI immediately
+          setLocallyDeletedIds((prev) => {
+            const next = new Set(prev);
+            idsToDelete.forEach((id) => next.add(id));
+            return next;
+          });
+          clearRowSelection();
+          // Fire API call silently in the background
+          if (onBulkDelete) {
+            onBulkDelete(idsToDelete, rowsToDelete);
+          }
+        }}
+      />
+      {enableBulkSelection && (
+        <MdtBulkSelectionBar
+          selectedCount={selectedCount}
+          onClearSelection={clearRowSelection}
+          bulkFields={resolvedBulkBarFields}
+          onBulkFieldClick={handleBulkFieldClick}
+          onBulkDelete={
+            onBulkDelete ? () => setShowBulkDeleteConfirm(true) : undefined
+          }
+          bulkDeleteDisabled={Boolean(onBulkDelete) && deletableSelectedCount === 0}
+          bulkDeleteDisabledReason={
+            deleteConfirmConfig.deleteDisabledReason ||
+            "None of the selected items can be deleted."
+          }
+          rightAction={bulkBarRightAction}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FlazDataView;