@controleonline/ui-default 1.0.272 → 1.0.273

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

@@ -436,10 +436,10 @@ const DefaultTable = ({
     ],
   );
 
-  if (store?.getters) {
-    assignGetterValue(store, 'configs', defaultTableConfigs);
-  }
-
+  // Do not mutate store.configs during render. A new configs object is built
+  // every pass; writing it here retriggers subscribers and React #185 when
+  // opening Adicionar on DefaultTable (categories). Sync only in the hook
+  // when defaultTableConfigsSignature changes.
   useDefaultTableStoreSync({
     columns,
     columnsForTable,

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

@@ -470,11 +470,13 @@ const styles = StyleSheet.create({
     textTransform: 'uppercase',
   },
   actionsCell: {
-    minWidth: 96,
+    minWidth: 60,
+    width: 60,
+    flexBasis: 60,
     flexGrow: 0,
     flexShrink: 0,
+    maxWidth: 72,
     alignItems: 'center',
-    paddingHorizontal: 8,
   },
   rowActionsGroup: {
     flexDirection: 'row',
@@ -517,10 +519,11 @@ const styles = StyleSheet.create({
   },
   cardsGrid: {
     paddingVertical: 10,
-    paddingHorizontal: 8,
-    gap: 10,
+    paddingHorizontal: 0,
+    gap: 8,
     flexGrow: 1,
     width: '100%',
+    alignSelf: 'stretch',
   },
   cardsGridWithBottomAdd: {
     paddingBottom: 86,
@@ -539,8 +542,11 @@ const styles = StyleSheet.create({
   cardItem: {
     position: 'relative',
     flex: 1,
+    flexBasis: 0,
+    flexGrow: 1,
     minWidth: 0,
     width: '100%',
+    maxWidth: '100%',
     alignSelf: 'stretch',
   },
   cardItemWithActions: {

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

@@ -438,6 +438,42 @@ export const normalizeSortText = value =>
     .replace(/[\u0300-\u036f]/g, '')
     .toLowerCase();
 
+export const parseSortNumber = value => {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (value == null) return NaN;
+
+  const raw = String(value).trim();
+  if (!raw || !/[0-9]/.test(raw)) return NaN;
+
+  const compact = raw.replace(/[^0-9,.-]/g, '');
+  if (!compact) return NaN;
+
+  const hasComma = compact.includes(',');
+  const hasDot = compact.includes('.');
+  let normalized = compact;
+
+  if (hasComma && hasDot) {
+    normalized = compact.lastIndexOf(',') > compact.lastIndexOf('.')
+      ? compact.replace(/\./g, '').replace(',', '.')
+      : compact.replace(/,/g, '');
+  } else if (hasComma) {
+    const parts = compact.split(',');
+    normalized = parts.length === 2 && parts[1].length <= 2
+      ? `${parts[0].replace(/\./g, '')}.${parts[1]}`
+      : compact.replace(/,/g, '');
+  } else if (hasDot) {
+    const parts = compact.split('.');
+    if (parts.length > 2) {
+      normalized = compact.replace(/\./g, '');
+    } else if (parts.length === 2 && parts[1].length === 3 && parts[0].length <= 3) {
+      normalized = compact.replace(/\./g, '');
+    }
+  }
+
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : NaN;
+};
+
 export const resolveSortComparable = ({ column, row, storeName, columns }) => {
   const fieldName = getColumnKey(column);
   const sortField = getSortField(column);
@@ -472,11 +508,9 @@ export const resolveSortComparable = ({ column, row, storeName, columns }) => {
         storeName,
       }));
 
-  const normalizedNumber = Number(
-    String(resolvedValue).replace(/[^0-9,.-]/g, '').replace(',', '.'),
-  );
+  const normalizedNumber = parseSortNumber(resolvedValue);
 
-  if (Number.isFinite(normalizedNumber) && String(resolvedValue).match(/[0-9]/)) {
+  if (Number.isFinite(normalizedNumber)) {
     return normalizedNumber;
   }
 

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

@@ -4,20 +4,13 @@ import Icon from 'react-native-vector-icons/Feather';
 import { useStore } from '@store';
 import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
 import { getColumnKey } from '../inputs/defaultInputUtils';
+import DefaultColumnFilter from '../filters/DefaultColumnFilter';
 import DefaultTableEmptyState from './DefaultTableEmptyState';
 import DefaultTableInput from './DefaultTableInput';
 import DefaultTableRowActions, {
   hasDefaultTableRowActionsComponent,
   resolveDefaultTableRowActionsWidth,
 } from './DefaultTableRowActions';
-import {
-  persistStoreSelection,
-  flattenGroupedTableItems,
-  isRowSelected,
-  resolveStoreSelectedIds,
-  toggleGroupSelection,
-  toggleSelectedId,
-} from './DefaultTable.grouping';
 import {
   END_REACHED_THRESHOLD,
   getColumnStyle,
@@ -32,17 +25,8 @@ import {
 import styles from './DefaultTable.styles';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
-const SELECTION_COLUMN_WIDTH = 44;
-
-/** Row stripe colors from themes-map listItemEvenRow / listItemOddRow — never status.color. */
-export const resolveRowBackgroundColor = ({
-  selected,
-  index,
-  tableOddColor,
-  tableEvenColor,
-  selectedBackground = '#ECFEFF',
-}) => {
-  if (selected) return selectedBackground;
+/** Row stripes: themes-map listItemEvenRow / listItemOddRow — never status.color. */
+export const resolveRowBackgroundColor = ({ index, tableOddColor, tableEvenColor }) => {
   return index % 2 === 0 ? tableOddColor : tableEvenColor;
 };
 
@@ -59,179 +43,366 @@ const DefaultTableRows = ({ storeName }) => {
     liveItems: store?.getters?.items,
     sortedData: configs.sortedData,
   });
-  const listData = useMemo(() => flattenGroupedTableItems(sortedData, columns), [columns, sortedData]);
-  const selectable = configs.selectable === true;
-  const selectedIds = resolveStoreSelectedIds(store);
+  const resolvedFilters = store?.getters?.filters || {};
   const isLoading = Boolean(store?.getters?.isLoadingList || store?.getters?.isLoading);
-  const emptyStateLabel = isLoading ? global.t?.t(storeName, 'label', 'loading') : global.t?.t(storeName, 'label', 'empty');
+  const emptyStateLabel = isLoading
+    ? global.t?.t(storeName, 'label', 'loading')
+    : global.t?.t(storeName, 'label', 'empty');
   const tableBorderColor = tableBorderColors.rowBorderColor;
   const tableHeaderBorderColor = tableBorderColors.headerBorderColor || tableBorderColor;
   const tableEvenColor = themeTokens.listItemEvenRow || themeTokens['bg-even-light'] || palette.background;
   const tableHeaderColor = themeTokens['bg-headers-light'] || resolvedAccentColor;
   const tableMutedColor = palette.textSecondary;
   const tableOddColor = themeTokens.listItemOddRow || themeTokens['bg-odd-light'] || palette.background;
+  const tableSurfaceColor = palette.background;
   const tableTextColor = palette.text;
   const rowStyle = configs.rowStyle;
   const hasRowPress = typeof configs.onRowPress === 'function';
-  const RowActionsComponent = configs.rowActionsComponent;
-  const hasCustomRowActions = hasDefaultTableRowActionsComponent(RowActionsComponent);
+  const hasCustomRowActions = hasDefaultTableRowActionsComponent(configs.rowActionsComponent);
   const hasEditAction = typeof configs.onEditRow === 'function';
-  const hasRowActions =
-    configs.showRowActions !== false && (hasCustomRowActions || hasEditAction);
-  const pinRowActions = configs.pinRowActions !== false;
+  const hasRowActions = configs.showRowActions !== false && (hasCustomRowActions || hasEditAction);
+  const shouldPinRowActions = configs.pinRowActions !== false;
+  const hasColumnFilters =
+    configs.showColumnFiltersButton !== false &&
+    configs.tableFiltersVisible === true;
   const actionsCellWidth = hasRowActions ? resolveDefaultTableRowActionsWidth(configs) : 0;
-  const selectionWidth = selectable ? SELECTION_COLUMN_WIDTH : 0;
   const tableMinWidth = useMemo(
-    () => tableColumns.reduce((totalWidth, column) => totalWidth + getColumnMinWidth(column), actionsCellWidth + selectionWidth),
-    [actionsCellWidth, selectionWidth, tableColumns],
+    () =>
+      tableColumns.reduce(
+        (totalWidth, column) => totalWidth + getColumnMinWidth(column),
+        actionsCellWidth,
+      ),
+    [actionsCellWidth, tableColumns],
   );
-  const [horizontalMetrics, setHorizontalMetrics] = useState({ contentWidth: 0, viewportWidth: 0, x: 0 });
+  const [horizontalMetrics, setHorizontalMetrics] = useState({
+    contentWidth: 0,
+    viewportWidth: 0,
+    x: 0,
+  });
   const updateHorizontalMetrics = patch => {
     setHorizontalMetrics(current => {
-      const next = { ...current, ...patch };
-      return next.contentWidth === current.contentWidth && next.viewportWidth === current.viewportWidth && next.x === current.x ? current : next;
+      const next = {
+        ...current,
+        ...patch,
+      };
+
+      return next.contentWidth === current.contentWidth &&
+        next.viewportWidth === current.viewportWidth &&
+        next.x === current.x
+        ? current
+        : next;
     });
   };
-  const tableWidth = Math.max(tableMinWidth, Number(horizontalMetrics.viewportWidth || 0));
-  const emitSelection = nextIds => persistStoreSelection(store, nextIds, sortedData, columns);
-
-  const renderSelectionCell = (selected, onPress, accessibilityLabel, backgroundColor) => (
-    <TouchableOpacity accessibilityRole="checkbox" accessibilityState={{ checked: selected }} accessibilityLabel={accessibilityLabel} onPress={onPress} style={[styles.cell, { minWidth: SELECTION_COLUMN_WIDTH, width: SELECTION_COLUMN_WIDTH, alignItems: 'center', justifyContent: 'center', backgroundColor }]}>
-      <Icon name={selected ? 'check-square' : 'square'} size={16} color={selected ? '#0284C7' : tableMutedColor} />
-    </TouchableOpacity>
-  );
+  const stickyBodyTransforms = useMemo(() => {
+    const viewportWidth = Number(horizontalMetrics.viewportWidth || 0);
+    const contentWidth = Number(horizontalMetrics.contentWidth || 0);
+    const x = Number(horizontalMetrics.x || 0);
+    const canScrollHorizontally = viewportWidth > 0 && contentWidth > viewportWidth;
+    const actionsTranslateX = canScrollHorizontally
+      ? x + viewportWidth - contentWidth
+      : 0;
 
-  const renderActionsCell = (row, rowBackgroundColor) => {
-    if (!hasRowActions) return null;
-
-    const customRowActions = hasCustomRowActions ? (
-      <DefaultTableRowActions
-        component={RowActionsComponent}
-        helpers={{
-          openEdit: () => configs.onEditRow?.(row),
-          openRow: hasRowPress ? () => configs.onRowPress(row) : null,
-        }}
-        openEdit={() => configs.onEditRow?.(row)}
-        openRow={hasRowPress ? () => configs.onRowPress(row) : null}
-        row={row}
-        storeName={storeName}
-      />
-    ) : null;
-
-    const editButton = hasEditAction ? (
-      <Text onPress={() => configs.onEditRow?.(row)} style={{ color: '#0284C7', fontWeight: '800', fontSize: 12 }}>
-        {global.t?.t(storeName, 'button', 'edit') || 'Editar'}
-      </Text>
-    ) : null;
-
-    return (
-      <View
-        style={[
-          styles.cell,
-          styles.actionsCell,
-          pinRowActions ? styles.stickyActionsCell : null,
-          pinRowActions ? styles.pinnedActionsCell : null,
-          {
-            minWidth: actionsCellWidth,
-            width: actionsCellWidth,
-            maxWidth: actionsCellWidth,
-            flexBasis: actionsCellWidth,
-            backgroundColor: rowBackgroundColor,
-          },
-        ]}
-      >
-        <View style={styles.rowActionsGroup}>
-          {customRowActions}
-          {editButton}
-        </View>
-      </View>
-    );
+    return {
+      actions:
+        shouldPinRowActions && actionsTranslateX !== 0
+          ? [{ translateX: actionsTranslateX }]
+          : null,
+    };
+  }, [horizontalMetrics, shouldPinRowActions]);
+  const handleHorizontalScroll = event => {
+    updateHorizontalMetrics({
+      x: Number(event?.nativeEvent?.contentOffset?.x || 0),
+    });
   };
-
-  const renderActionsHeader = () => {
-    if (!hasRowActions) return null;
-    return (
-      <View
-        style={[
-          styles.cell,
-          styles.actionsCell,
-          pinRowActions ? styles.stickyActionsCell : null,
-          pinRowActions ? styles.stickyHeaderCell : null,
-          {
-            minWidth: actionsCellWidth,
-            width: actionsCellWidth,
-            maxWidth: actionsCellWidth,
-            flexBasis: actionsCellWidth,
-            backgroundColor: tableHeaderColor,
-          },
-        ]}
-      >
-        <Text style={[styles.headerText, { color: tableTextColor }]} numberOfLines={1}>
-          {global.t?.t(storeName, 'label', 'actions') || 'Ações'}
-        </Text>
-      </View>
-    );
+  const handleHorizontalLayout = event => {
+    updateHorizontalMetrics({
+      viewportWidth: Number(event?.nativeEvent?.layout?.width || 0),
+    });
   };
-
-  const renderTableItem = ({ item, index }) => {
-    if (item?.type === 'group') {
-      const groupRows = item.group?.rows || [];
-      const groupSelected = selectable && groupRows.length > 0 && groupRows.every(row => isRowSelected(row, selectedIds));
-      return (
-        <View testID={`default-table-group-${item.group?.id}`} style={[styles.row, { backgroundColor: '#ECFEFF', borderBottomColor: tableBorderColor, borderBottomWidth: tableBorderColor ? 1 : 0, minWidth: tableWidth, width: tableWidth, paddingVertical: 8 }]}>
-          {selectable ? renderSelectionCell(groupSelected, () => emitSelection(toggleGroupSelection(selectedIds, groupRows)), `Selecionar grupo ${item.group?.label || ''}`, '#ECFEFF') : null}
-          <View style={{ flex: 1, paddingHorizontal: 8 }}>
-            <Text style={[styles.headerText, { color: tableTextColor }]} numberOfLines={2}>{item.group?.label}</Text>
-            <Text style={{ color: tableMutedColor, fontSize: 12 }}>{item.group?.count} item(s)</Text>
-          </View>
-          {hasRowActions ? <View style={{ minWidth: actionsCellWidth, width: actionsCellWidth }} /> : null}
-        </View>
-      );
+  const handleHorizontalContentSizeChange = width => {
+    updateHorizontalMetrics({
+      contentWidth: Number(width || 0),
+    });
+  };
+  const handleListScroll = event => {
+    if (shouldTriggerEndReachedFromScroll(event)) {
+      configs.onEndReached?.();
     }
+  };
+  const tableWidth = Math.max(
+    tableMinWidth,
+    Number(horizontalMetrics.viewportWidth || 0),
+  );
 
-    const row = item?.row || item;
-    const RowComponent = hasRowPress || selectable ? TouchableOpacity : View;
-    const selected = selectable && isRowSelected(row, selectedIds);
+  const renderTableItem = ({ item: row, index }) => {
+    const RowComponent = hasRowPress ? TouchableOpacity : View;
+    const rowStyleValue = typeof rowStyle === 'function' ? rowStyle(row, index) : rowStyle;
+    const rowPressProps = hasRowPress
+      ? {
+        activeOpacity: 0.84,
+        onPress: () => configs.onRowPress(row),
+      }
+      : {};
     const rowBackgroundColor = resolveRowBackgroundColor({
-      selected,
       index,
       tableOddColor,
       tableEvenColor,
     });
+    const RowActionsComponent = configs.rowActionsComponent;
+
     return (
-      <RowComponent key={item?.id || getRowKey(row)} style={[styles.row, { backgroundColor: rowBackgroundColor, borderBottomColor: selected ? '#67E8F9' : tableBorderColor, borderBottomWidth: tableBorderColor ? 1 : 0, minWidth: tableWidth, width: tableWidth }, typeof rowStyle === 'function' ? rowStyle(row, index) : rowStyle]} {...(hasRowPress || selectable ? { activeOpacity: 0.84, onPress: () => { if (selectable) emitSelection(toggleSelectedId(selectedIds, row)); configs.onRowPress?.(row); } } : {})}>
-        {selectable ? renderSelectionCell(selected, () => emitSelection(toggleSelectedId(selectedIds, row)), `Selecionar linha ${getRowKey(row)}`, rowBackgroundColor) : null}
+      <RowComponent
+        key={getRowKey(row)}
+        style={[
+          styles.row,
+          {
+            backgroundColor: rowBackgroundColor,
+            borderBottomColor: tableBorderColor,
+            borderBottomWidth: tableBorderColor ? 1 : 0,
+            minWidth: tableWidth,
+            width: tableWidth,
+          },
+          rowStyleValue,
+        ]}
+        {...rowPressProps}
+      >
         {tableColumns.map(column => (
           <React.Fragment key={getColumnKey(column)}>
-            <DefaultTableInput column={column} options={column?.isIdentity ? { cellStyle: [styles.pinnedIdentityCell, styles.stickyIdentityCell, { backgroundColor: rowBackgroundColor }] } : { cellStyle: { backgroundColor: rowBackgroundColor } }} row={row} storeName={storeName} variant="cell" />
+            <DefaultTableInput
+              column={column}
+              options={column?.isIdentity ? {
+                cellStyle: [
+                  styles.pinnedIdentityCell,
+                  styles.stickyIdentityCell,
+                  {
+                    backgroundColor: rowBackgroundColor,
+                  },
+                ],
+              } : {
+                cellStyle: {
+                  backgroundColor: rowBackgroundColor,
+                },
+              }}
+              row={row}
+              storeName={storeName}
+              variant="cell"
+            />
           </React.Fragment>
         ))}
-        {renderActionsCell(row, rowBackgroundColor)}
+        {hasRowActions ? (
+          <View
+            testID={`default-table-row-actions-${getRowKey(row)}`}
+            style={[
+              styles.cell,
+              styles.actionsCell,
+              shouldPinRowActions ? styles.pinnedActionsCell : null,
+              shouldPinRowActions ? styles.stickyActionsCell : null,
+              {
+                minWidth: actionsCellWidth,
+                width: actionsCellWidth,
+                flexBasis: actionsCellWidth,
+                maxWidth: actionsCellWidth,
+                ...(stickyBodyTransforms.actions
+                  ? { transform: stickyBodyTransforms.actions }
+                  : {}),
+                backgroundColor: rowBackgroundColor,
+              },
+            ]}
+          >
+            <View style={styles.rowActionsGroup}>
+              {hasCustomRowActions ? (
+                <DefaultTableRowActions
+                  component={RowActionsComponent}
+                  helpers={{
+                    openEdit: () => configs.onEditRow?.(row),
+                    openRow: hasRowPress ? () => configs.onRowPress(row) : null,
+                  }}
+                  openEdit={() => configs.onEditRow?.(row)}
+                  openRow={hasRowPress ? () => configs.onRowPress(row) : null}
+                  row={row}
+                  storeName={storeName}
+                />
+              ) : null}
+              {hasEditAction ? (
+                <TouchableOpacity
+                  style={[styles.iconButton, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}
+                  activeOpacity={0.82}
+                  onPress={() => configs.onEditRow?.(row)}
+                >
+                  <Icon name="edit-2" size={14} color={tableMutedColor} />
+                </TouchableOpacity>
+              ) : null}
+            </View>
+          </View>
+        ) : null}
       </RowComponent>
     );
   };
 
   return (
-    <ScrollView horizontal onContentSizeChange={width => updateHorizontalMetrics({ contentWidth: Number(width || 0) })} onLayout={event => updateHorizontalMetrics({ viewportWidth: Number(event?.nativeEvent?.layout?.width || 0) })} onScroll={event => updateHorizontalMetrics({ x: Number(event?.nativeEvent?.contentOffset?.x || 0) })} scrollEventThrottle={16} style={styles.scroll} contentContainerStyle={styles.horizontalScrollContent}>
-      <View style={[styles.content, { minWidth: tableWidth, width: tableWidth }]}>
-        <View style={[styles.headerRow, { backgroundColor: tableHeaderColor, borderBottomColor: tableHeaderBorderColor, borderBottomWidth: tableHeaderBorderColor ? 1 : 0, minWidth: tableWidth, width: tableWidth }]}>
-          {selectable ? <View style={[styles.cell, { minWidth: SELECTION_COLUMN_WIDTH, width: SELECTION_COLUMN_WIDTH }]} /> : null}
-          {tableColumns.map(column => {
-            const fieldName = getColumnKey(column);
-            return (
-              <TouchableOpacity key={fieldName} style={[getColumnStyle(column), column?.isIdentity ? [styles.stickyIdentityCell, styles.stickyHeaderCell, { backgroundColor: tableHeaderColor }] : null]} activeOpacity={isSortableColumn(column) ? 0.8 : 1} onPress={() => configs.requestSort?.(column)}>
-                <View style={styles.sortableHeader}>
-                  <Text style={[styles.headerText, { color: tableTextColor }]} numberOfLines={1}>{formatStoreColumnLabel({ columns, fieldName, fallbackLabel: column?.label || fieldName, storeName })}</Text>
-                  {isSortableColumn(column) && configs.resolvedSort?.field === getSortField(column) ? <Icon name={configs.resolvedSort?.direction === 'desc' ? 'chevron-down' : 'chevron-up'} size={12} color={tableTextColor} /> : isSortableColumn(column) ? <Icon name="chevrons-up" size={12} color={tableBorderColor} /> : null}
-                </View>
-              </TouchableOpacity>
-            );
-          })}
-          {renderActionsHeader()}
+    <>
+      <ScrollView
+        horizontal
+        onContentSizeChange={handleHorizontalContentSizeChange}
+        onLayout={handleHorizontalLayout}
+        onScroll={handleHorizontalScroll}
+        scrollEventThrottle={16}
+        style={styles.scroll}
+        contentContainerStyle={styles.horizontalScrollContent}
+      >
+        <View style={[styles.content, { minWidth: tableWidth, width: tableWidth }]}>
+          <View
+            style={[
+              styles.headerRow,
+              {
+                backgroundColor: tableHeaderColor,
+                borderBottomColor: tableHeaderBorderColor,
+                borderBottomWidth: tableHeaderBorderColor ? 1 : 0,
+                minWidth: tableWidth,
+                width: tableWidth,
+              },
+            ]}
+          >
+            {tableColumns.map(column => {
+              const fieldName = getColumnKey(column);
+              const label = formatStoreColumnLabel({
+                columns,
+                fieldName,
+                fallbackLabel: column?.label || fieldName,
+                storeName,
+              });
+              const sortFieldName = getSortField(column);
+
+              return (
+                <TouchableOpacity
+                  key={fieldName}
+                  style={[
+                    getColumnStyle(column),
+                    column?.isIdentity
+                      ? [styles.stickyIdentityCell, styles.stickyHeaderCell, { backgroundColor: tableHeaderColor }]
+                      : null,
+                  ]}
+                  activeOpacity={isSortableColumn(column) ? 0.8 : 1}
+                  onPress={() => configs.requestSort?.(column)}
+                >
+                  <View style={styles.sortableHeader}>
+                    <Text style={[styles.headerText, { color: tableTextColor }]} numberOfLines={1}>{label}</Text>
+                    {isSortableColumn(column) && configs.resolvedSort?.field === sortFieldName ? (
+                      <Icon name={configs.resolvedSort?.direction === 'desc' ? 'chevron-down' : 'chevron-up'} size={12} color={tableTextColor} />
+                    ) : isSortableColumn(column) ? (
+                      <Icon name="chevrons-up" size={12} color={tableBorderColor} />
+                    ) : null}
+                    {resolvedFilters?.[fieldName] ? <Icon name="filter" size={11} color={tableTextColor} /> : null}
+                  </View>
+                </TouchableOpacity>
+              );
+            })}
+            {hasRowActions ? (
+              <View
+                testID="default-table-row-actions-header"
+                style={[
+                  styles.cell,
+                  styles.actionsCell,
+                  shouldPinRowActions ? styles.stickyActionsCell : null,
+                  shouldPinRowActions ? styles.stickyHeaderCell : null,
+                  {
+                    minWidth: actionsCellWidth,
+                    width: actionsCellWidth,
+                    flexBasis: actionsCellWidth,
+                    maxWidth: actionsCellWidth,
+                    backgroundColor: tableHeaderColor,
+                  },
+                ]}
+              >
+                <Text style={[styles.headerText, { color: tableTextColor }]}>
+                  {global.t?.t(storeName, 'label', 'actions')}
+                </Text>
+              </View>
+            ) : null}
+          </View>
+          {hasColumnFilters ? (
+            <View
+              style={[
+                styles.filterRow,
+                {
+                  backgroundColor: tableHeaderColor,
+                  borderBottomColor: tableHeaderBorderColor,
+                  borderBottomWidth: tableHeaderBorderColor ? 1 : 0,
+                },
+              ]}
+            >
+              {tableColumns.map(column => {
+                const fieldName = getColumnKey(column);
+
+                return (
+                  <View
+                    key={`${fieldName}-filter`}
+                    style={[
+                      getColumnStyle(column),
+                      column?.isIdentity
+                        ? [styles.stickyIdentityCell, { backgroundColor: tableHeaderColor }]
+                        : null,
+                    ]}
+                  >
+                    {column?.filter !== false && column?.filters !== false ? (
+                      <DefaultColumnFilter
+                        column={column}
+                        filters={resolvedFilters}
+                        storeName={storeName}
+                        style={styles.filterCell}
+                      />
+                    ) : null}
+                  </View>
+                );
+              })}
+              {hasRowActions ? (
+                <View
+                  style={[
+                    styles.cell,
+                    styles.actionsCell,
+                    shouldPinRowActions ? styles.stickyActionsCell : null,
+                    {
+                      minWidth: actionsCellWidth,
+                      width: actionsCellWidth,
+                      flexBasis: actionsCellWidth,
+                      maxWidth: actionsCellWidth,
+                      backgroundColor: tableHeaderColor,
+                    },
+                  ]}
+                />
+              ) : null}
+            </View>
+          ) : null}
+
+          <FlatList
+            data={sortedData}
+            keyExtractor={getRowKey}
+            renderItem={renderTableItem}
+            style={styles.tableList}
+            contentContainerStyle={styles.tableListContent}
+            ListEmptyComponent={(
+              <DefaultTableEmptyState
+                emptyStateLabel={emptyStateLabel}
+                isLoading={isLoading}
+                isTable
+                tableMutedColor={tableMutedColor}
+              />
+            )}
+            ListFooterComponent={null}
+            nestedScrollEnabled
+            onMomentumScrollBegin={configs.onMomentumScrollBegin || undefined}
+            onScroll={handleListScroll}
+            onScrollBeginDrag={configs.onScrollBeginDrag || undefined}
+            onEndReached={configs.onEndReached}
+            onEndReachedThreshold={END_REACHED_THRESHOLD}
+            onRefresh={configs.onRefresh}
+            refreshing={Boolean(configs.refreshing)}
+            scrollEventThrottle={120}
+            showsVerticalScrollIndicator={false}
+          />
         </View>
-        <FlatList data={listData} extraData={selectedIds} keyExtractor={item => item?.id || getRowKey(item?.row || item)} renderItem={renderTableItem} style={styles.tableList} contentContainerStyle={styles.tableListContent} ListEmptyComponent={<DefaultTableEmptyState emptyStateLabel={emptyStateLabel} isLoading={isLoading} isTable tableMutedColor={tableMutedColor} />} nestedScrollEnabled onEndReached={configs.onEndReached} onEndReachedThreshold={END_REACHED_THRESHOLD} onRefresh={configs.onRefresh} refreshing={Boolean(configs.refreshing)} onScroll={event => { if (shouldTriggerEndReachedFromScroll(event)) configs.onEndReached?.(); }} scrollEventThrottle={120} showsVerticalScrollIndicator={false} />
-      </View>
-    </ScrollView>
+      </ScrollView>
+    </>
   );
 };