@controleonline/ui-default 1.0.272 → 1.0.274

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>
+    </>
   );
 };
 

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

@@ -34,7 +34,11 @@ const resolveConfiguredLabel = config => {
   return global.t?.t?.('defaultTable', 'button', 'import');
 };
 
-const DefaultTableToolbar = ({ storeName }) => {
+const DefaultTableToolbar = ({
+  storeName,
+  showToolbarActions: showToolbarActionsProp,
+  showToolbarControls: showToolbarControlsProp,
+}) => {
   const store = useStore(storeName);
   const [isImportModalVisible, setIsImportModalVisible] = useState(false);
   const { width } = useWindowDimensions();
@@ -44,6 +48,14 @@ const DefaultTableToolbar = ({ storeName }) => {
   const showTotalItemsInCompactToolbar = configs.showTotalItemsInCompactToolbar === true;
   const showTotalItemsInFooter = configs.showTotalItemsInFooter !== false;
   const toolbarActions = Array.isArray(configs.toolbarActions) ? configs.toolbarActions : [];
+  const showToolbarActions =
+    showToolbarActionsProp === null || showToolbarActionsProp === undefined
+      ? configs.showToolbarActions !== false
+      : showToolbarActionsProp !== false;
+  const showToolbarControls =
+    showToolbarControlsProp === null || showToolbarControlsProp === undefined
+      ? configs.showToolbarControls !== false
+      : showToolbarControlsProp !== false;
   const buildTransferAction = (action, fallback) => {
     if (!action) return null;
 
@@ -99,11 +111,9 @@ const DefaultTableToolbar = ({ storeName }) => {
       label: global.t?.t?.('defaultTable', 'button', 'export'),
     },
   );
-  const resolvedToolbarActions = [
-    importTableAction,
-    exportTableAction,
-    ...toolbarActions,
-  ].filter(Boolean);
+  const resolvedToolbarActions = showToolbarActions
+    ? [importTableAction, exportTableAction, ...toolbarActions].filter(Boolean)
+    : [];
   const { tableBorderColors, toolbarColors } = useDefaultTableTheme();
   const {
     backgroundColor: toolbarBackgroundColor,
@@ -178,7 +188,7 @@ const DefaultTableToolbar = ({ storeName }) => {
         <DefaultTableCollapsedSearch storeName={storeName} />
         <View style={styles.toolbarActionGroup}>
           {!shouldRenderCompactToolbarTotalItems ? renderToolbarActions() : null}
-          <DefaultTableControls storeName={storeName} />
+          {showToolbarControls ? <DefaultTableControls storeName={storeName} /> : null}
         </View>
       </View>
       <DefaultTableImportModal