Merge pull request #168 from ownego/fix/index-table-losing-reactive

Fix: IndexTable lost its reactive context properties

Author: juzser

src/components/IndexProvider/IndexProvider.vue

@@ -153,9 +153,9 @@ provide<IndexContextType>('IndexContext', {
   bulkActionsAccessibilityLabel,
   selectMode: selectModeRef,
   paginatedSelectAllText,
-  itemCount: props.itemCount,
+  itemCount: toRef(props, 'itemCount'),
   selectable: toRef(props, 'selectable'),
-  hasMoreItems: props.hasMoreItems,
+  hasMoreItems: toRef(props, 'hasMoreItems'),
   condensed: toRef(props, 'condensed'),
   bulkActionsLabel,
 });

src/components/IndexTable/IndexTableBase.vue

@@ -629,7 +629,7 @@ const bulkActionsSelectable = computed(() => Boolean(
 
 const selectedItemsCountLabel = computed(() =>
   selectedItemsCount.value === SELECT_ALL_ITEMS
-    ? `${itemCount}+`
+    ? `${itemCount.value}+`
     : selectedItemsCount.value,
 );
 
@@ -691,14 +691,14 @@ const bulkActionLabel = computed(() => {
 });
 
 const paginatedSelectAllAction = computed(() => {
-  if (!selectable?.value || !hasBulkActions.value || !hasMoreItems) {
+  if (!selectable?.value || !hasBulkActions.value || !hasMoreItems?.value) {
     return;
   }
 
   const customActionText =
     props.paginatedSelectAllActionText ??
     i18n.translate('Polaris.IndexTable.selectAllItems', {
-      itemsLength: itemCount,
+      itemsLength: itemCount.value,
       resourceNamePlural: resourceName.plural.toLocaleLowerCase(),
     });
 

src/utilities/index-provider/context.ts

@@ -12,9 +12,9 @@ export interface IndexContextType {
   bulkActionsLabel: ComputedRef<string>;
   selectMode: ComputedRef<boolean>;
   paginatedSelectAllText?: ComputedRef<string | undefined>;
-  itemCount: number;
+  itemCount: Ref<number>;
   selectable?: Ref<boolean>;
-  hasMoreItems?: boolean;
+  hasMoreItems?: Ref<boolean | undefined>;
   condensed?: Ref<boolean | undefined>;
 }