@controleonline/ui-default 1.0.263 → 1.0.264

package/src/react/components/table/DefaultTable.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   FlatList,
@@ -16,7 +17,7 @@ import Formatter from '@controleonline/ui-common/src/utils/formatter.js';
 import StateStore from '@controleonline/ui-layout/src/react/components/StateStore';
 import { getDateRange } from '@controleonline/ui-common/src/react/utils/dateRangeFilter';
 import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
-import { resolveThemePalette, withOpacity } from '@controleonline/../../src/styles/branding';
+import { resolveThemePalette } from '@controleonline/../../src/styles/branding';
 import { colors } from '@controleonline/../../src/styles/colors';
 import DefaultColumnFilter from '../filters/DefaultColumnFilter';
 import DefaultSearch from '../filters/DefaultSearch';
@@ -73,20 +74,29 @@ const resolveListLoadParams = ({currentCompanyId, listStoreName}) => {
     return {};
   }
 
-  return {people: currentCompanyId};
+  return listStoreName === 'categories'
+    ? {company: currentCompanyId}
+    : {people: currentCompanyId};
 };
 
-const resolveColumnListLoadParams = ({column, currentCompanyId}) => {
+export const resolveColumnListLoadParams = ({
+  column,
+  currentCompanyId,
+  requestParams = {},
+}) => {
   const listStoreName = resolveStoreNameFromList(column?.list);
   const companyScopedParams = resolveListLoadParams({
     currentCompanyId,
     listStoreName,
   });
+  const resolvedCustomParams = typeof column?.listRequestParams === 'function'
+    ? column.listRequestParams({currentCompanyId, requestParams})
+    : column?.listRequestParams;
   const customParams =
-    column?.listRequestParams &&
-    typeof column.listRequestParams === 'object' &&
-    !Array.isArray(column.listRequestParams)
-      ? column.listRequestParams
+    resolvedCustomParams &&
+    typeof resolvedCustomParams === 'object' &&
+    !Array.isArray(resolvedCustomParams)
+      ? resolvedCustomParams
       : {};
 
   return {
@@ -492,33 +502,35 @@ const DefaultTable = ({
   searchProps = null,
   toolbarActions = [],
   showColumnFiltersButton = true,
-  showTotalItemsInFooter = true,
-  showTotalItemsInCompactToolbar = false,
-  showRowActions = true,
-  sort = null,
-  storeName = '',
-  summary = null,
-  summaryLabels = null,
-  totalItems = null,
-  totalItemsLabel = null,
-  totalItemsText = null,
-  visibleColumnsPreferenceKey = '',
+  showTotalItemsInFooter = true,
+  showTotalItemsInCompactToolbar = false,
+  showRowActions = true,
+  rowStyle = null,
+  sort = null,
+  storeName = '',
+  summary = null,
+  summaryLabels = null,
+  totalItems = null,
+  totalItemsLabel = null,
+  totalItemsText = null,
+  footerComponent = null,
+  visibleColumnsPreferenceKey = '',
 }) => {
   const { width } = useWindowDimensions();
   const store = useStore(storeName);
+  const visibleColumnsStorageKey = visibleColumnsPreferenceKey || storeName;
   const peopleStore = useStore('people');
   const themeStore = useStore('theme');
   const [editingCell, setEditingCell] = useState(null);
-  const [editingRow, setEditingRow] = useState(null);
+  const [editingRow, setEditingRow] = useState(null);
   const [formMode, setFormMode] = useState('edit');
   const [isColumnMenuOpen, setIsColumnMenuOpen] = useState(false);
-  const [, setListOptionsVersion] = useState(0);
+  const [listOptionsByColumn, setListOptionsByColumn] = useState({});
   const [savingCell, setSavingCell] = useState(null);
   const [showColumnFilters, setShowColumnFilters] = useState(false);
   const [tableContainerWidth, setTableContainerWidth] = useState(0);
   const endReachedLockRef = useRef(false);
   const loadedListStoresRef = useRef(new Set());
-  const listOptionsWasFocusedRef = useRef(false);
   const previousPaginationStateRef = useRef({
     dataLength: Array.isArray(data) ? data.length : 0,
     filtersKey: JSON.stringify(filters || {}),
@@ -532,10 +544,10 @@ const DefaultTable = ({
           ? store.getters.columns
           : columns,
         visibleColumns: resolveStoredVisibleColumnsPreference(
-          visibleColumnsPreferenceKey,
+          visibleColumnsStorageKey,
         ),
       }),
-    [columns, store?.getters?.columns, visibleColumnsPreferenceKey],
+    [columns, store?.getters?.columns, visibleColumnsStorageKey],
   );
   const viewModeSeed = useMemo(
     () =>
@@ -544,11 +556,12 @@ const DefaultTable = ({
         initialViewMode,
       ),
     [initialViewMode, visibleColumnsPreferenceKey],
-  );
-  const [visibleColumns, setVisibleColumns] = useState(() => visibleColumnsSeed);
-  const [viewMode, setViewMode] = useState(() => viewModeSeed);
-  const { currentCompany } = peopleStore.getters || {};
-  const { colors: themeColors } = themeStore.getters || {};
+  );
+  const [visibleColumns, setVisibleColumns] = useState(() => visibleColumnsSeed);
+  const [viewMode, setViewMode] = useState(() => viewModeSeed);
+  const [compactViewMode, setCompactViewMode] = useState(null);
+  const { currentCompany } = peopleStore.getters || {};
+  const { colors: themeColors } = themeStore.getters;
   const themeTokens = useMemo(
     () => ({...themeColors, ...(currentCompany?.theme?.colors || {})}),
     [currentCompany?.theme?.colors, themeColors],
@@ -565,22 +578,47 @@ const DefaultTable = ({
   const tableSurfaceColor = palette.background;
   const tableTextColor = palette.text;
   const tableMutedColor = palette.textSecondary;
-  const tableOnAccentColor = palette.secondary || palette.text;
+  const panelBackgroundColor = themeColors.panelBackground;
+  const panelBorderColor = themeColors.panelBorder;
+  const modalBackgroundColor = themeColors.modalBackground;
+  const modalBorderColor = themeColors.modalBorder;
+  const modalCloseIconColor = themeColors.modalCloseIcon;
+  const modalHeaderTextColor = themeColors.modalHeaderText;
+  const modalOverlayColor = themeColors.modalOverlay;
+  const modalTextColor = themeColors.modalText;
+  const checkboxBorderColor = themeColors.checkboxBorder;
+  const checkboxSelectedMarkColor = themeColors.checkboxSelectedMark;
+  const toolbarBackgroundColor = themeColors.toolbarBackground;
+  const toolbarBorderColor = themeColors.toolbarBorder;
+  const toolbarCountBackgroundColor = themeColors.badgeBackground;
+  const toolbarCountTextColor = themeColors.badgeText;
+  const tableActionBackgroundColor = themeColors.tableActionBackground;
+  const tableActionBorderColor = themeColors.tableActionBorder;
+  const tableActionTextColor = themeColors.tableActionIcon;
+  const tableButtonBackgroundColor = themeColors.buttonBackground;
+  const tableButtonBorderColor = themeColors.buttonBorder;
+  const tableButtonIconColor = themeColors.buttonIcon;
+  const tableButtonPressedBackgroundColor = themeColors.buttonPressedBackground;
+  const tableButtonPressedBorderColor = themeColors.buttonPressedBorder;
+  const tableButtonPressedIconColor = themeColors.buttonPressedIcon;
+  const tableButtonTextColor = themeColors.buttonText;
+  const tableFilterBackgroundColor = themeColors.tableFilterBackground;
+  const tableFilterBorderColor = themeColors.tableFilterBorder;
+  const tableFilterTextColor = themeColors.tableFilterText;
   const isFocused = useIsFocused();
   const {showError} = useMessage() || {};
   const autoMode = data === undefined && normalizeText(storeName) !== '';
   const searchKey = searchProps?.searchKey || 'search';
   const storeActions = store?.actions || {};
+  const resolvedActions = useMemo(
+    () => ({
+      ...storeActions,
+      ...(actions || {}),
+    }),
+    [actions, storeActions],
+  );
   const storeColumns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
   const columnsForTable = storeColumns.length > 0 ? storeColumns : columns;
-  const listColumnsSignature = useMemo(
-    () =>
-      columnsForTable
-        .filter(column => normalizeText(column?.list))
-        .map(column => `${getColumnKey(column)}:${normalizeText(column.list)}`)
-        .join('|'),
-    [columnsForTable],
-  );
   const storeFilters = isObject(store?.getters?.filters) ? store.getters.filters : {};
   const requestParamsSeed = isObject(requestParams) ? requestParams : {};
   const initialFiltersSeed = autoMode
@@ -613,80 +651,119 @@ const DefaultTable = ({
   const resolvedSort = autoMode ? autoSort : sort;
   const resolvedFilters = autoMode ? autoFilters : (filters || {});
   const resolvedSearchValue = normalizeText(resolvedFilters?.[searchKey]);
+  const resolvedGetOptionsForColumn = useCallback(
+    column => {
+      const explicitOptions = getOptionsForColumn?.(column);
+      if (Array.isArray(explicitOptions)) return explicitOptions;
+
+      const columnKey = getColumnKey(column);
+      return Array.isArray(listOptionsByColumn[columnKey])
+        ? listOptionsByColumn[columnKey]
+        : undefined;
+    },
+    [getOptionsForColumn, listOptionsByColumn],
+  );
 
   useEffect(() => {
-    const shouldRefreshCompanyScopedLists =
-      isFocused && !listOptionsWasFocusedRef.current;
+    setListOptionsByColumn({});
+    loadedListStoresRef.current.clear();
+  }, [currentCompany?.id]);
+
+  const loadListOptionsForColumns = useCallback(
+    (targetColumns = []) => {
+      const columnsToLoad = (Array.isArray(targetColumns) ? targetColumns : []).filter(
+        column => normalizeText(column?.list),
+      );
+
+      if (columnsToLoad.length === 0) {
+        return Promise.resolve([]);
+      }
 
-    listOptionsWasFocusedRef.current = isFocused;
+      const stores = getAllStores?.() || {};
+      const loadPromises = [];
 
-    if (!isFocused || !listColumnsSignature) return;
+      columnsToLoad.forEach(column => {
+        const explicitOptions = getOptionsForColumn?.(column);
+        if (Array.isArray(explicitOptions)) {
+          return;
+        }
 
-    const stores = getAllStores?.() || {};
-    const loadPromises = [];
+        const listStoreName = resolveStoreNameFromList(column.list);
+        const actionName = resolveListActionName(column.list);
+        const listStore = stores?.[listStoreName];
+        const listAction = listStore?.actions?.[actionName];
 
-    columnsForTable.forEach(column => {
-      if (!column?.list) return;
+        const listLoadParams = resolveColumnListLoadParams({
+          column,
+          currentCompanyId: currentCompany?.id,
+          requestParams: requestParamsSeed,
+        });
+        const isCompanyScopedList = Object.keys(listLoadParams).length > 0;
 
-      const explicitOptions = getOptionsForColumn?.(column);
-      if (Array.isArray(explicitOptions) && explicitOptions.length > 0) return;
+        if (!listStoreName || typeof listAction !== 'function') {
+          return;
+        }
 
-      const listStoreName = resolveStoreNameFromList(column.list);
-      const actionName = resolveListActionName(column.list);
-      const listStore = stores?.[listStoreName];
-      const listAction = listStore?.actions?.[actionName];
+        if (
+          !isCompanyScopedList &&
+          Array.isArray(listStore?.getters?.items) &&
+          listStore.getters.items.length > 0
+        ) {
+          const columnKey = getColumnKey(column);
+          setListOptionsByColumn(current => ({
+            ...current,
+            [columnKey]: normalizeCollectionItems(listStore.getters.items),
+          }));
+          return;
+        }
 
-      const listLoadParams = resolveColumnListLoadParams({
-        column,
-        currentCompanyId: currentCompany?.id,
+        const columnKey = getColumnKey(column);
+        const loadKey = `${columnKey}:${listStoreName}:${actionName}:${stableSerialize(listLoadParams)}`;
+        if (loadedListStoresRef.current.has(loadKey)) {
+          return;
+        }
+
+        loadedListStoresRef.current.add(loadKey);
+        loadPromises.push(
+          Promise.resolve(
+            listAction({
+              ...listLoadParams,
+              itemsPerPage: LIST_OPTIONS_PAGE_SIZE,
+              __storeMeta: {
+                dedupeKey: `default-table-list-options:${loadKey}`,
+                skipSystemError: true,
+              },
+            }),
+          )
+            .then(response => ({columnKey, items: normalizeCollectionItems(response)}))
+            .catch(() => {
+              loadedListStoresRef.current.delete(loadKey);
+              return {columnKey, items: []};
+            }),
+        );
       });
-      const isCompanyScopedList = Object.keys(listLoadParams).length > 0;
-
-      if (!listStoreName || typeof listAction !== 'function') return;
-      if (
-        !isCompanyScopedList &&
-        Array.isArray(listStore?.getters?.items) &&
-        listStore.getters.items.length > 0
-      ) {
-        return;
-      }
 
-      const loadKey = `${listStoreName}:${actionName}:${stableSerialize(listLoadParams)}`;
-      if (shouldRefreshCompanyScopedLists && isCompanyScopedList) {
-        loadedListStoresRef.current.delete(loadKey);
+      if (loadPromises.length === 0) {
+        return Promise.resolve([]);
       }
-      if (loadedListStoresRef.current.has(loadKey)) return;
-
-      loadedListStoresRef.current.add(loadKey);
-      loadPromises.push(
-        Promise.resolve(
-          listAction({
-            ...listLoadParams,
-            itemsPerPage: LIST_OPTIONS_PAGE_SIZE,
-            __storeMeta: {
-              dedupeKey: `default-table-list-options:${loadKey}`,
-              skipSystemError: true,
-            },
-          }),
-        ).catch(() => {
-          loadedListStoresRef.current.delete(loadKey);
-        }),
-      );
-    });
 
-    if (loadPromises.length === 0) return;
+      return Promise.all(loadPromises).then(results => {
+        const nextOptionsByColumn = Object.fromEntries(
+          results.map(result => [result.columnKey, result.items]),
+        );
 
-    let cancelled = false;
-    Promise.allSettled(loadPromises).then(() => {
-      if (!cancelled) {
-        setListOptionsVersion(version => version + 1);
-      }
-    });
+        if (Object.keys(nextOptionsByColumn).length > 0) {
+          setListOptionsByColumn(current => ({
+            ...current,
+            ...nextOptionsByColumn,
+          }));
+        }
 
-    return () => {
-      cancelled = true;
-    };
-  }, [columnsForTable, currentCompany?.id, getOptionsForColumn, isFocused, listColumnsSignature]);
+        return results;
+      });
+    },
+    [currentCompany?.id, getOptionsForColumn, requestParamsSeed],
+  );
 
   const buildRequestQuery = useCallback(
     (page, append = false) => {
@@ -762,7 +839,7 @@ const DefaultTable = ({
 
   const loadAutoPage = useCallback(
     (page, { append = false } = {}) => {
-      if (!autoMode || typeof storeActions.getItems !== 'function') {
+      if (!autoMode || typeof resolvedActions.getItems !== 'function') {
         return Promise.resolve([]);
       }
 
@@ -780,7 +857,7 @@ const DefaultTable = ({
 
       const query = buildRequestQuery(page, append);
 
-      return Promise.resolve(storeActions.getItems(query))
+      return Promise.resolve(resolvedActions.getItems(query))
         .then(response => {
           if (autoRequestIdRef.current !== requestId) {
             return response;
@@ -810,7 +887,7 @@ const DefaultTable = ({
           }
         });
     },
-    [autoMode, autoQuerySignature, buildRequestQuery, showError, storeActions],
+    [autoMode, autoQuerySignature, buildRequestQuery, resolvedActions, showError],
   );
 
   const availableColumns = useMemo(
@@ -854,7 +931,7 @@ const DefaultTable = ({
 
   useEffect(() => {
     if (!autoMode || !isFocused) return;
-    if (typeof storeActions.getItems !== 'function') return;
+    if (typeof resolvedActions.getItems !== 'function') return;
     if (
       autoLoading ||
       autoLoadingMore ||
@@ -873,7 +950,7 @@ const DefaultTable = ({
     autoQuerySignature,
     isFocused,
     loadAutoPage,
-    storeActions,
+    resolvedActions,
   ]);
 
   const tableColumns = useMemo(
@@ -898,7 +975,7 @@ const DefaultTable = ({
   const hasAddInstruction = addConfig === true || (isObject(addConfig) && addConfig.enabled !== false);
   const shouldRenderAddButton =
     hasAddInstruction &&
-    (typeof onAdd === 'function' || typeof actions.save === 'function');
+    (typeof onAdd === 'function' || typeof resolvedActions.save === 'function');
   const resolvedIsLoading = autoMode ? (autoLoading || autoLoadingMore) : Boolean(isLoading);
   const resolvedData = autoMode
     ? (autoHasLoaded && Array.isArray(store?.getters?.items) ? store.getters.items : [])
@@ -912,13 +989,29 @@ const DefaultTable = ({
     [hasRowActions, tableColumns],
   );
   const tableWidth = Math.max(tableContainerWidth, tableMinimumWidth);
-  const tableLayoutStyle = useMemo(
-    () => (tableWidth > 0 ? { minWidth: tableWidth, width: tableWidth } : null),
-    [tableWidth],
-  );
+  const tableLayoutStyle = useMemo(
+    () => (tableWidth > 0 ? { minWidth: tableWidth, width: tableWidth } : null),
+    [tableWidth],
+  );
   const isCompactView = width > 0 && width <= compactBreakpoint;
   const shouldForceCardsOnCompact = forceCardsOnCompact !== false;
-  const effectiveViewMode = isCompactView && shouldForceCardsOnCompact ? 'cards' : viewMode;
+  const effectiveViewMode =
+    isCompactView && shouldForceCardsOnCompact
+      ? (compactViewMode || 'cards')
+      : viewMode;
+  useEffect(() => {
+    if (!shouldForceCardsOnCompact) {
+      setCompactViewMode(null);
+      return;
+    }
+
+    if (isCompactView) {
+      setCompactViewMode('cards');
+      return;
+    }
+
+    setCompactViewMode(null);
+  }, [isCompactView, shouldForceCardsOnCompact]);
   const emptyStateLabel = resolvedIsLoading
     ? global.t?.t(storeName, 'label', 'loading') || 'Carregando...'
     : 'Nenhum registro encontrado';
@@ -994,10 +1087,26 @@ const DefaultTable = ({
       normalizeText(entry.value) !== '',
     );
   }, [columnsForTable, resolvedSummary, shouldReadSummary, storeName, summaryLabels, tableColumns]);
-  const shouldRenderFooterBar =
-    (shouldRenderFooterTotalItems && !shouldRenderCompactToolbarTotalItems) ||
-    summaryEntries.length > 0;
-
+  const shouldRenderFooterBar =
+    (shouldRenderFooterTotalItems && !shouldRenderCompactToolbarTotalItems) ||
+    summaryEntries.length > 0;
+  const footerProps = {
+    columns: columnsForTable,
+    resolvedAccentColor,
+    resolvedTotalItemsText,
+    shouldRenderCompactToolbarTotalItems,
+    shouldRenderFooterTotalItems,
+    storeName,
+    summaryEntries,
+    summaryLabels,
+    tableBorderColor,
+    tableMutedColor,
+    tableSurfaceColor,
+    tableTextColor,
+    toolbarCountBackgroundColor,
+    toolbarCountTextColor,
+  };
+
   const sortedData = useMemo(() => {
     const items = Array.isArray(resolvedData) ? [...resolvedData] : [];
     const sortField = resolvedSort?.field;
@@ -1086,12 +1195,12 @@ const DefaultTable = ({
     setEditingCell(null);
   }, []);
 
-  const saveCell = useCallback((row, column, nextValue) => {
-    const fieldName = getColumnKey(column);
-    if (!fieldName || typeof actions.save !== 'function') {
-      clearEdit();
-      return Promise.resolve(null);
-    }
+  const saveCell = useCallback((row, column, nextValue) => {
+    const fieldName = getColumnKey(column);
+    if (!fieldName || typeof resolvedActions.save !== 'function') {
+      clearEdit();
+      return Promise.resolve(null);
+    }
 
     const currentValue = resolveEditValue(column, row);
     const normalizedNextValue = nextValue && typeof nextValue === 'object'
@@ -1111,10 +1220,10 @@ const DefaultTable = ({
 
     setSavingCell(cellKey);
 
-    return actions.save(payload)
-      .then(savedItem => {
-        onSaved?.(savedItem || { ...row, [fieldName]: nextValue }, row);
-        return savedItem;
+    return resolvedActions.save(payload)
+      .then(savedItem => {
+        onSaved?.(savedItem || { ...row, [fieldName]: nextValue }, row);
+        return savedItem;
       })
       .catch(error => {
         console.error(error);
@@ -1124,7 +1233,7 @@ const DefaultTable = ({
         setSavingCell(null);
         clearEdit();
       });
-  }, [actions, clearEdit, onSaved]);
+  }, [clearEdit, onSaved, resolvedActions]);
 
   const requestSort = useCallback(column => {
     if (!isSortableColumn(column)) return;
@@ -1160,27 +1269,27 @@ const DefaultTable = ({
     visibleColumnsPreferenceKey,
   ]);
 
-  const openEditModal = useCallback(row => {
-    if (typeof onEditRow === 'function') {
-      onEditRow(row);
-      return;
-    }
-
-    setFormMode('edit');
-    setEditingRow(row);
-  }, [onEditRow]);
-
+  const openEditModal = useCallback(row => {
+    if (typeof onEditRow === 'function') {
+      onEditRow(row);
+      return;
+    }
+
+    setFormMode('edit');
+    setEditingRow(row);
+  }, [onEditRow]);
+
   const openAddForm = useCallback(() => {
     if (typeof onAdd === 'function') {
       onAdd();
       return;
     }
-
-    if (typeof actions.save !== 'function') return;
-
-    setFormMode('create');
-    setEditingRow({});
-  }, [actions, onAdd]);
+
+    if (typeof resolvedActions.save !== 'function') return;
+
+    setFormMode('create');
+    setEditingRow({});
+  }, [onAdd, resolvedActions]);
 
   const closeEditModal = useCallback(() => {
     setEditingRow(null);
@@ -1192,12 +1301,12 @@ const DefaultTable = ({
 
     if (autoMode) {
       setAutoFilters(resolvedNextFilters);
-      storeActions.setFilters?.(resolvedNextFilters);
+      resolvedActions.setFilters?.(resolvedNextFilters);
       return;
     }
 
     onFilterChange?.(resolvedNextFilters);
-  }, [autoMode, onFilterChange, storeActions]);
+  }, [autoMode, onFilterChange, resolvedActions]);
 
   const updateFilter = useCallback((fieldName, value) => {
     const nextFilters = { ...(resolvedFilters || {}) };
@@ -1226,39 +1335,49 @@ const DefaultTable = ({
         [fieldName]: prev[fieldName] === false,
       };
 
-      actions?.setVisibleColumns?.(next);
-      if (visibleColumnsPreferenceKey) {
+      resolvedActions?.setVisibleColumns?.(next);
+      if (visibleColumnsStorageKey) {
         persistVisibleColumnsPreference(
-          visibleColumnsPreferenceKey,
+          visibleColumnsStorageKey,
           next,
         );
       }
       return next;
     });
   }, [
-    actions,
+    resolvedActions,
     columnsForTable,
-    visibleColumnsPreferenceKey,
+    visibleColumnsStorageKey,
   ]);
 
-  const toggleViewMode = useCallback(() => {
-    setViewMode(prev => {
-      const nextViewMode = prev === 'table' ? 'cards' : 'table';
-
-      if (!visibleColumnsPreferenceKey) {
-        return nextViewMode;
-      }
-
-      persistTableViewModePreference(
-        visibleColumnsPreferenceKey,
-        nextViewMode,
-      );
-
-      return nextViewMode;
-    });
-  }, [
-    visibleColumnsPreferenceKey,
-  ]);
+  const toggleViewMode = useCallback(() => {
+    const currentViewMode =
+      isCompactView && shouldForceCardsOnCompact
+        ? (compactViewMode || 'cards')
+        : viewMode;
+    const nextViewMode = currentViewMode === 'table' ? 'cards' : 'table';
+
+    if (isCompactView && shouldForceCardsOnCompact) {
+      setCompactViewMode(nextViewMode);
+    }
+
+    setViewMode(nextViewMode);
+
+    if (!visibleColumnsPreferenceKey) {
+      return;
+    }
+
+    persistTableViewModePreference(
+      visibleColumnsPreferenceKey,
+      nextViewMode,
+    );
+  }, [
+    compactViewMode,
+    isCompactView,
+    shouldForceCardsOnCompact,
+    viewMode,
+    visibleColumnsPreferenceKey,
+  ]);
 
   const handleEndReached = useCallback(() => {
     if (
@@ -1306,7 +1425,8 @@ const DefaultTable = ({
           column={column}
           columns={columnsForTable}
           editing={isEditing}
-          getOptionsForColumn={getOptionsForColumn}
+          getOptionsForColumn={resolvedGetOptionsForColumn}
+          onBeforeOpen={() => loadListOptionsForColumns([column])}
           onCancelEditing={clearEdit}
           onSave={value => saveCell(row, column, value)}
           onStartEditing={() => beginEdit(row, column)}
@@ -1325,7 +1445,8 @@ const DefaultTable = ({
         accentColor={resolvedAccentColor}
         column={column}
         filters={resolvedFilters}
-        getOptionsForColumn={getOptionsForColumn}
+        onBeforeOpen={column?.list ? () => loadListOptionsForColumns([column]) : null}
+        getOptionsForColumn={resolvedGetOptionsForColumn}
         onChange={updateFilter}
         storeName={storeName}
         style={getColumnStyle(column)}
@@ -1333,23 +1454,23 @@ const DefaultTable = ({
     );
   };
 
-  const renderToolbarAction = action => {
-    if (!action || action.hidden) return null;
-
-    const isActive = action.active === true;
-    const hasLabel = normalizeText(action.label) !== '';
-    const actionColor = action.color || (isActive ? resolvedAccentColor : tableMutedColor);
-
-    return (
-      <TouchableOpacity
-        key={action.key || action.icon || action.label}
-        style={[
-          styles.toolbarButton,
-          isActive
-            ? { backgroundColor: withOpacity(resolvedAccentColor, 0.12), borderColor: resolvedAccentColor }
-            : null,
-          action.style,
-        ]}
+  const renderToolbarAction = action => {
+    if (!action || action.hidden) return null;
+
+    const isActive = action.active === true;
+    const hasLabel = normalizeText(action.label) !== '';
+    const actionColor = action.color || tableActionTextColor;
+
+    return (
+      <TouchableOpacity
+        key={action.key || action.icon || action.label}
+        accessibilityRole="button"
+        accessibilityLabel={action.accessibilityLabel || action.label || action.key || action.icon}
+        style={[
+          styles.toolbarButton,
+          { backgroundColor: tableActionBackgroundColor, borderColor: tableActionBorderColor },
+          action.style,
+        ]}
         activeOpacity={0.82}
         disabled={action.disabled === true}
         onPress={action.onPress}
@@ -1365,12 +1486,12 @@ const DefaultTable = ({
           <Text style={[styles.toolbarActionLabel, { color: actionColor }, action.labelStyle]} numberOfLines={1}>
             {action.label}
           </Text>
-        ) : null}
-        {action.badge !== undefined && action.badge !== null ? (
-          <Text style={[styles.toolbarBadgeText, { color: action.badgeColor || resolvedAccentColor }]}>
-            {action.badge}
-          </Text>
-        ) : null}
+        ) : null}
+        {action.badge !== undefined && action.badge !== null ? (
+          <Text style={[styles.toolbarBadgeText, { color: action.badgeColor || tableActionTextColor }]}>
+            {action.badge}
+          </Text>
+        ) : null}
       </TouchableOpacity>
     );
   };
@@ -1385,8 +1506,8 @@ const DefaultTable = ({
     [columnsForTable],
   );
 
-  const buildRowHelpers = useCallback(
-    row => {
+  const buildRowHelpers = useCallback(
+    row => {
       const openEdit = () => openEditModal(row);
       const openRow = typeof onRowPress === 'function' ? () => onRowPress(row) : null;
       const renderValue = (fieldName, fallback = '-') => {
@@ -1402,7 +1523,7 @@ const DefaultTable = ({
         const isEditing = editingCell === cellKey;
         const isSaving = savingCell === cellKey;
 
-        return (
+        return (
           <DefaultInput
             accentColor={options.accentColor || resolvedAccentColor}
             column={column}
@@ -1410,14 +1531,15 @@ const DefaultTable = ({
             containerStyle={options.containerStyle}
             displayValue={options.displayValue}
             editing={isEditing}
-            getOptionsForColumn={getOptionsForColumn}
+            getOptionsForColumn={resolvedGetOptionsForColumn}
             inputStyle={options.inputStyle}
             label={options.label}
-            numberOfLines={options.numberOfLines}
-            onCancelEditing={clearEdit}
-            onSave={value => saveCell(row, column, value)}
-            onStartEditing={() => beginEdit(row, column)}
-            readTextStyle={options.readTextStyle || options.textStyle}
+            numberOfLines={options.numberOfLines}
+            onBeforeOpen={() => loadListOptionsForColumns([column])}
+            onCancelEditing={clearEdit}
+            onSave={value => saveCell(row, column, value)}
+            onStartEditing={() => beginEdit(row, column)}
+            readTextStyle={options.readTextStyle || options.textStyle}
             row={row}
             saving={isSaving}
             showLabel={options.showLabel}
@@ -1441,24 +1563,36 @@ const DefaultTable = ({
       columnsForTable,
       editingCell,
       getColumnByField,
-      getOptionsForColumn,
+      resolvedGetOptionsForColumn,
       openEditModal,
       onRowPress,
       saveCell,
       savingCell,
       storeName,
-    ],
-  );
-
-  const renderCardItem = row => {
-    const helpers = buildRowHelpers(row);
-
-    if (typeof renderCard === 'function') {
-      return (
-        <View key={row?.['@id'] || row?.id} style={styles.cardItem}>
-          {renderCard({
-            item: row,
-            openEdit: helpers.openEdit,
+    ],
+  );
+
+  const resolveRowStyle = useCallback(
+    (row, index) => {
+      if (typeof rowStyle === 'function') {
+        return rowStyle(row, index);
+      }
+
+      return rowStyle;
+    },
+    [rowStyle],
+  );
+
+  const renderCardItem = (row, index = 0) => {
+    const helpers = buildRowHelpers(row);
+    const rowStyleValue = resolveRowStyle(row, index);
+
+    if (typeof renderCard === 'function') {
+      return (
+        <View key={row?.['@id'] || row?.id} style={[styles.cardItem, rowStyleValue]}>
+          {renderCard({
+            item: row,
+            openEdit: helpers.openEdit,
             openRow: helpers.openRow,
             renderField: helpers.renderField,
             renderValue: helpers.renderValue,
@@ -1476,11 +1610,18 @@ const DefaultTable = ({
           ) : null}
         </View>
       );
-    }
-
-    return (
-      <View key={row?.['@id'] || row?.id} style={[styles.defaultCard, { backgroundColor: tableSurfaceColor, borderColor: tableBorderColor }]}>
-        {tableColumns.map(column => (
+    }
+
+    return (
+      <View
+        key={row?.['@id'] || row?.id}
+        style={[
+          styles.defaultCard,
+          { backgroundColor: tableSurfaceColor, borderColor: tableBorderColor },
+          rowStyleValue,
+        ]}
+      >
+        {tableColumns.map(column => (
           <View key={getColumnKey(column)} style={styles.defaultCardLine}>
             <Text style={[styles.defaultCardLabel, { color: tableMutedColor }]}>
               {formatStoreColumnLabel({
@@ -1539,23 +1680,29 @@ const DefaultTable = ({
     );
   };
 
-  const renderTableItem = ({ item: row, index }) => {
-    const hasRowPress = typeof onRowPress === 'function';
-    const RowComponent = hasRowPress ? TouchableOpacity : View;
-    const rowPressProps = hasRowPress
-      ? {
-        activeOpacity: 0.84,
-        onPress: () => onRowPress(row),
-      }
+  const renderTableItem = ({ item: row, index }) => {
+    const hasRowPress = typeof onRowPress === 'function';
+    const RowComponent = hasRowPress ? TouchableOpacity : View;
+    const rowStyleValue = resolveRowStyle(row, index);
+    const rowPressProps = hasRowPress
+      ? {
+        activeOpacity: 0.84,
+        onPress: () => onRowPress(row),
+      }
       : {};
     const rowBackgroundColor = index % 2 === 0 ? tableOddColor : tableEvenColor;
 
-    return (
-      <RowComponent
-        key={getRowKey(row)}
-        style={[styles.row, tableLayoutStyle, { backgroundColor: rowBackgroundColor, borderBottomColor: tableBorderColor }]}
-        {...rowPressProps}
-      >
+    return (
+      <RowComponent
+        key={getRowKey(row)}
+        style={[
+          styles.row,
+          tableLayoutStyle,
+          { backgroundColor: rowBackgroundColor, borderBottomColor: tableBorderColor },
+          rowStyleValue,
+        ]}
+        {...rowPressProps}
+      >
         {tableColumns.map(column => (
           <React.Fragment key={getColumnKey(column)}>
             {renderEditableCell(row, column)}
@@ -1579,32 +1726,33 @@ const DefaultTable = ({
     const isCreate = formMode === 'create';
 
     return (
-      <Modal visible={Boolean(editingRow)} transparent animationType="fade" onRequestClose={closeEditModal}>
-        <View style={[styles.modalOverlay, { backgroundColor: withOpacity(tableTextColor, 0.42) }]}>
-          <View style={[styles.modalCard, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}>
-            <View style={[styles.modalHeader, { borderBottomColor: tableBorderColor }]}>
-              <Text style={[styles.modalTitle, { color: tableTextColor }]}>
-                {isCreate
-                  ? global.t?.t(storeName, 'button', 'add') || 'Adicionar'
-                  : global.t?.t(storeName, 'button', 'edit') || 'Editar'}
-              </Text>
-              <TouchableOpacity
-                style={[styles.modalCloseButton, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}
-                onPress={closeEditModal}>
-                <Icon name="x" size={18} color={tableMutedColor} />
-              </TouchableOpacity>
-            </View>
+      <Modal visible={Boolean(editingRow)} transparent animationType="fade" onRequestClose={closeEditModal}>
+        <View style={[styles.modalOverlay, { backgroundColor: modalOverlayColor }]}>
+          <View style={[styles.modalCard, { borderColor: modalBorderColor, backgroundColor: modalBackgroundColor }]}>
+            <View style={[styles.modalHeader, { borderBottomColor: modalBorderColor }]}>
+              <Text style={[styles.modalTitle, { color: modalHeaderTextColor }]}>
+                {isCreate
+                  ? global.t?.t(storeName, 'button', 'add') || 'Adicionar'
+                  : global.t?.t(storeName, 'button', 'edit') || 'Editar'}
+              </Text>
+              <TouchableOpacity
+                style={[styles.modalCloseButton, { borderColor: modalBorderColor, backgroundColor: modalBackgroundColor }]}
+                onPress={closeEditModal}>
+                <Icon name="x" size={18} color={modalCloseIconColor} />
+              </TouchableOpacity>
+            </View>
 
             <DefaultForm
               accentColor={resolvedAccentColor}
-              actions={actions}
+              actions={resolvedActions}
               columns={isCreate ? columnsForTable : editableColumns}
-              getOptionsForColumn={getOptionsForColumn}
+              getOptionsForColumn={resolvedGetOptionsForColumn}
               mode={formMode}
-              onCancel={closeEditModal}
-              onSaved={(savedItem, originalRow) => {
-                onSaved?.(savedItem, originalRow);
-                closeEditModal();
+              onBeforeOpen={column => loadListOptionsForColumns([column])}
+              onCancel={closeEditModal}
+              onSaved={(savedItem, originalRow) => {
+                onSaved?.(savedItem, originalRow);
+                closeEditModal();
               }}
               row={editingRow || {}}
               storeName={storeName}
@@ -1620,18 +1768,18 @@ const DefaultTable = ({
 
     return (
       <Modal visible transparent animationType="fade" onRequestClose={() => setIsColumnMenuOpen(false)}>
-        <View style={[styles.modalOverlay, { backgroundColor: withOpacity(tableTextColor, 0.42) }]}>
-          <View style={[styles.modalCard, styles.columnMenuModalCard, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}>
-            <View style={[styles.modalHeader, { borderBottomColor: tableBorderColor }]}>
-              <Text style={[styles.modalTitle, { color: tableTextColor }]} numberOfLines={1}>
+        <View style={[styles.modalOverlay, { backgroundColor: modalOverlayColor }]}>
+          <View style={[styles.modalCard, styles.columnMenuModalCard, { borderColor: modalBorderColor, backgroundColor: modalBackgroundColor }]}>
+            <View style={[styles.modalHeader, { borderBottomColor: modalBorderColor }]}>
+              <Text style={[styles.modalTitle, { color: modalHeaderTextColor }]} numberOfLines={1}>
                 Colunas
               </Text>
               <TouchableOpacity
-                style={[styles.modalCloseButton, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}
+                style={[styles.modalCloseButton, { borderColor: modalBorderColor, backgroundColor: modalBackgroundColor }]}
                 activeOpacity={0.82}
                 onPress={() => setIsColumnMenuOpen(false)}
               >
-                <Icon name="x" size={16} color={tableMutedColor} />
+                <Icon name="x" size={16} color={modalCloseIconColor} />
               </TouchableOpacity>
             </View>
             <ScrollView style={styles.columnMenuModalBody} contentContainerStyle={styles.columnMenuModalList}>
@@ -1647,8 +1795,8 @@ const DefaultTable = ({
 
                 return (
                   <TouchableOpacity key={fieldName} style={styles.columnMenuItem} activeOpacity={0.82} onPress={() => toggleColumn(column)}>
-                    <Icon name={checked ? 'check-square' : 'square'} size={16} color={checked ? resolvedAccentColor : tableMutedColor} />
-                    <Text style={[styles.columnMenuText, { color: tableTextColor }]} numberOfLines={1}>{label}</Text>
+                    <Icon name={checked ? 'check-square' : 'square'} size={16} color={checked ? checkboxSelectedMarkColor : checkboxBorderColor} />
+                    <Text style={[styles.columnMenuText, { color: modalTextColor }]} numberOfLines={1}>{label}</Text>
                   </TouchableOpacity>
                 );
               })}
@@ -1660,16 +1808,16 @@ const DefaultTable = ({
   };
 
   return (
-    <View style={[styles.wrap, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]} onLayout={handleLayout}>
-      <View style={[styles.toolbar, { borderBottomColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}>
-        {shouldRenderCompactToolbarTotalItems ? (
-          <View style={styles.toolbarCompactLead}>
-            <View style={[styles.toolbarCountPill, { backgroundColor: withOpacity(resolvedAccentColor, 0.12) }]}>
-              <Text
-                style={[styles.toolbarCountText, { color: resolvedAccentColor }]}
-                numberOfLines={1}
-                adjustsFontSizeToFit
-                minimumFontScale={0.82}
+    <View style={[styles.wrap, { borderColor: panelBorderColor, backgroundColor: panelBackgroundColor }]} onLayout={handleLayout}>
+      <View style={[styles.toolbar, { borderBottomColor: toolbarBorderColor, backgroundColor: toolbarBackgroundColor }]}>
+        {shouldRenderCompactToolbarTotalItems ? (
+          <View style={styles.toolbarCompactLead}>
+            <View style={[styles.toolbarCountPill, { backgroundColor: toolbarCountBackgroundColor }]}>
+              <Text
+                style={[styles.toolbarCountText, { color: toolbarCountTextColor }]}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+                minimumFontScale={0.82}
               >
                 {resolvedTotalItemsText}
               </Text>
@@ -1704,50 +1852,70 @@ const DefaultTable = ({
             />
           ) : null}
           {!shouldRenderCompactToolbarTotalItems ? renderToolbarActions() : null}
-          {showColumnFiltersButton ? (
-            <TouchableOpacity
-              style={[
-                styles.toolbarButton,
-                { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor },
-                showColumnFilters ? { backgroundColor: withOpacity(resolvedAccentColor, 0.12), borderColor: resolvedAccentColor } : null,
-              ]}
-              activeOpacity={0.82}
-              onPress={() => setShowColumnFilters(prev => !prev)}
-            >
-              <Icon name="filter" size={14} color={showColumnFilters ? resolvedAccentColor : tableMutedColor} />
-              {activeFilterCount > 0 ? (
-                <Text style={[styles.toolbarBadgeText, { color: resolvedAccentColor }]}>{activeFilterCount}</Text>
-              ) : null}
-            </TouchableOpacity>
-          ) : null}
-          {(!isCompactView || !shouldForceCardsOnCompact) ? (
-            <TouchableOpacity
-              style={[styles.toolbarButton, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}
-              activeOpacity={0.82}
-              onPress={toggleViewMode}
-            >
-              <Icon name={viewMode === 'table' ? 'grid' : 'list'} size={14} color={tableMutedColor} />
-            </TouchableOpacity>
-          ) : null}
-          <TouchableOpacity
-            style={[styles.toolbarButton, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}
-            activeOpacity={0.82}
-            onPress={() => setIsColumnMenuOpen(prev => !prev)}>
-            <Icon name="columns" size={14} color={tableMutedColor} />
-          </TouchableOpacity>
-          {shouldRenderAddButton ? (
-            <TouchableOpacity
-              style={[
-                styles.toolbarButton,
-                styles.toolbarAddButton,
-                { backgroundColor: resolvedAccentColor, borderColor: resolvedAccentColor },
-              ]}
-              activeOpacity={0.85}
-              onPress={openAddForm}
-            >
-              <Icon name="plus" size={16} color={tableOnAccentColor} />
-            </TouchableOpacity>
-          ) : null}
+          {showColumnFiltersButton ? (
+            <TouchableOpacity
+              style={[
+                styles.toolbarButton,
+                { borderColor: tableButtonBorderColor, backgroundColor: tableButtonBackgroundColor },
+                showColumnFilters
+                  ? { backgroundColor: tableButtonPressedBackgroundColor, borderColor: tableButtonPressedBorderColor }
+                  : null,
+              ]}
+              activeOpacity={0.82}
+              onPress={() => setShowColumnFilters(prev => !prev)}
+            >
+              <Icon
+                name="filter"
+                size={14}
+                color={showColumnFilters ? tableButtonPressedIconColor : tableButtonIconColor}
+              />
+              {activeFilterCount > 0 ? (
+                <Text
+                  style={[
+                    styles.toolbarBadgeText,
+                    { color: showColumnFilters ? tableButtonPressedIconColor : tableButtonIconColor },
+                  ]}>
+                  {activeFilterCount}
+                </Text>
+              ) : null}
+            </TouchableOpacity>
+          ) : null}
+          <TouchableOpacity
+            style={[
+              styles.toolbarButton,
+              { borderColor: tableButtonBorderColor, backgroundColor: tableButtonBackgroundColor },
+              effectiveViewMode !== 'table'
+                ? { backgroundColor: tableButtonPressedBackgroundColor, borderColor: tableButtonPressedBorderColor }
+                : null,
+            ]}
+            activeOpacity={0.82}
+            onPress={toggleViewMode}
+          >
+            <Icon
+              name={effectiveViewMode === 'table' ? 'list' : 'grid'}
+              size={14}
+              color={effectiveViewMode !== 'table' ? tableButtonPressedIconColor : tableButtonIconColor}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.toolbarButton, { borderColor: tableButtonBorderColor, backgroundColor: tableButtonBackgroundColor }]}
+            activeOpacity={0.82}
+            onPress={() => setIsColumnMenuOpen(prev => !prev)}>
+            <Icon name="columns" size={14} color={tableButtonTextColor} />
+          </TouchableOpacity>
+          {shouldRenderAddButton ? (
+            <TouchableOpacity
+              style={[
+                styles.toolbarButton,
+                styles.toolbarAddButton,
+                { backgroundColor: tableButtonBackgroundColor, borderColor: tableButtonBackgroundColor },
+              ]}
+              activeOpacity={0.85}
+              onPress={openAddForm}
+            >
+              <Icon name="plus" size={16} color={tableButtonTextColor} />
+            </TouchableOpacity>
+          ) : null}
         </View>
 
       </View>
@@ -1756,7 +1924,7 @@ const DefaultTable = ({
         <FlatList
           data={sortedData}
           keyExtractor={getRowKey}
-          renderItem={({ item }) => renderCardItem(item)}
+          renderItem={({ item, index }) => renderCardItem(item, index)}
           style={styles.cardsScroll}
           contentContainerStyle={styles.cardsGrid}
           ListEmptyComponent={renderEmptyState(false)}
@@ -1839,54 +2007,60 @@ const DefaultTable = ({
         </ScrollView>
       )}
 
-      {renderLoadingOverlay()}
-
-      {shouldRenderFooterBar ? (
-        <View style={[styles.footerBar, { backgroundColor: tableSurfaceColor, borderTopColor: tableBorderColor }]}>
-          {summaryEntries.length > 0 ? (
-            <View style={styles.footerSummaryList}>
-              {summaryEntries.map(entry => (
-                <View key={entry.key} style={styles.footerSummaryItem}>
-                  <Text style={[styles.footerSummaryLabel, { color: tableMutedColor }]} numberOfLines={1}>
-                    {entry.label}
-                  </Text>
-                  <Text
-                    style={[
-                      styles.footerSummaryValue,
-                      entry.path?.[0] === 'sum' || isMoneySummaryPath(entry.path)
-                        ? { color: resolvedAccentColor }
-                        : { color: tableTextColor },
-                    ]}
-                    numberOfLines={1}
-                    adjustsFontSizeToFit
-                    minimumFontScale={0.78}
-                  >
+      {renderLoadingOverlay()}
+
+      {footerComponent ? (
+        React.isValidElement(footerComponent) ? (
+          footerComponent
+        ) : (
+          React.createElement(footerComponent, footerProps)
+        )
+      ) : shouldRenderFooterBar ? (
+        <View style={[styles.footerBar, { backgroundColor: tableSurfaceColor, borderTopColor: tableBorderColor }]}>
+          {summaryEntries.length > 0 ? (
+            <View style={styles.footerSummaryList}>
+              {summaryEntries.map(entry => (
+                <View key={entry.key} style={styles.footerSummaryItem}>
+                  <Text style={[styles.footerSummaryLabel, { color: tableMutedColor }]} numberOfLines={1}>
+                    {entry.label}
+                  </Text>
+                  <Text
+                    style={[
+                      styles.footerSummaryValue,
+                      entry.path?.[0] === 'sum' || isMoneySummaryPath(entry.path)
+                        ? { color: resolvedAccentColor }
+                        : { color: tableTextColor },
+                    ]}
+                    numberOfLines={1}
+                    adjustsFontSizeToFit
+                    minimumFontScale={0.78}
+                  >
                     {formatSummaryValue({
                       column: entry.column,
                       columns: columnsForTable,
                       path: entry.path,
                       storeName,
                       value: entry.value,
-                    })}
-                  </Text>
-                </View>
-              ))}
-            </View>
-          ) : null}
-          {shouldRenderFooterTotalItems && !shouldRenderCompactToolbarTotalItems ? (
-            <View style={[styles.footerCountPill, { backgroundColor: withOpacity(resolvedAccentColor, 0.12) }]}>
-              <Text
-                style={[styles.footerCountText, { color: resolvedAccentColor }]}
-                numberOfLines={1}
-                adjustsFontSizeToFit
-                minimumFontScale={0.82}
-              >
-                {resolvedTotalItemsText}
-              </Text>
-            </View>
-          ) : null}
-        </View>
-      ) : null}
+                    })}
+                  </Text>
+                </View>
+              ))}
+            </View>
+          ) : null}
+          {shouldRenderFooterTotalItems && !shouldRenderCompactToolbarTotalItems ? (
+            <View style={[styles.footerCountPill, { backgroundColor: toolbarCountBackgroundColor }]}>
+              <Text
+                style={[styles.footerCountText, { color: toolbarCountTextColor }]}
+                numberOfLines={1}
+                adjustsFontSizeToFit
+                minimumFontScale={0.82}
+              >
+                {resolvedTotalItemsText}
+              </Text>
+            </View>
+          ) : null}
+        </View>
+      ) : null}
 
       {renderColumnMenuModal()}
       {renderEditModal()}