IndexTable Scrollbar does not showup

[MateuszManaj]

Cannot scroll table left-right when page is fully loaded because scrollbar is not visible.
var --pc-index-table-scroll-bar-content-width isn't initialized also.

Using 2.1.26
Vue: 3.5.13

[haild173094]

@MateuszManaj Can you provide more about your code?

[MateuszManaj]

Sure. This is my template part of vue file.

<template>
    <DefaultLayout>
        <Page title="SKU Mapping" fullWidth>

            <template #primaryAction>
                <Tooltip dismissOnMouseOut
                         content="Blah blah blah">
                    <Button>How It Works</Button>
                </Tooltip>
            </template>
            <LegacyCard>
                <IndexFilters
                    hide-filters
                    hide-query-field
                    :canCreateNewView="false"
                    :sortOptions="sortOptions"
                    :sortSelected="sortSelected"
                    :tabs="tabs"
                    :selected="tabSelectedIndex"
                    :mode="mode"
                    @set-mode="setMode"
                    @select="tabSelectedAction"
                />
                <IndexTable
                    :condensed="false"
                    :resourceName="resourceName"
                    :itemCount="tableData.length"
                    :selectable="false"
                    :hasZebraStriping="true"
                    :pagination="tablePaginationData"
                    :loading="!loaded"
                    :headings="[
                      {title: ' '},
                      {title: 'Col 1'},
                      {title: 'Col 2'},
                      {title: 'Col 3'/*, alignment: 'end'*/},
                      {title: 'Col 4'},
                      {title: 'Col 5'},
                      {title: 'Col 6'},
                      {title: 'Col 7'},
                      {title: ' '},
                      {title: 'Col 8'},
                    ]">
                    <template #emptyState>
                        <EmptySearchResult
                            title="No products yet"
                            description="Try changing the filters or search term"
                            withIllustration
                        />
                    </template>
                    <IndexTableRow
                        v-for="({ id, wmImage, wmTitle, wmSKU, wmPrice, wmStatus, shProduct, shSKU, shPrice, shMapped, qtySyncCheckboxDisabled }, index) in tableData"
                        :id="id"
                        :key="id"
                        :position="index"
                        :selected="selectedResources.includes(id)"
                    >
                        <IndexTableCell>
                            <Thumbnail :source=wmImage size="small"/>
                        </IndexTableCell>
                        <IndexTableCell>
                            <!--                            <div style="max-width: 250px">-->
                            <Text as="p">{{ wmTitle }}</Text>
                            <!--                            </div>-->
                        </IndexTableCell>
                        <IndexTableCell>
                            <!--                            <div style="max-width: 250px">-->
                            <Text as="p">{{ wmSKU }}</Text>
                            <!--                            </div>-->
                        </IndexTableCell>
                        <IndexTableCell>
                            <Text as="span" numeric>{{ wmPrice }}</Text>
                        </IndexTableCell>
                        <IndexTableCell>
                            <component :is="wmStatus"></component>
                        </IndexTableCell>
                        <IndexTableCell>
                            <!--                            <div style="max-width: 250px">-->
                            <Text as="p">{{ shProduct }}</Text>
                            <!--                            </div>-->
                        </IndexTableCell>
                        <IndexTableCell>
                            <!--                            <div style="max-width: 250px">-->
                            <Text as="p">{{ shSKU }}</Text>
                            <!--                            </div>-->
                        </IndexTableCell>
                        <IndexTableCell>
                            {{ shPrice ? '$' + shPrice : '' }}
                        </IndexTableCell>
                        <IndexTableCell>
                            <component :is="shMapped"></component>
                        </IndexTableCell>
                        <IndexTableCell>
                            <Checkbox @change="qtySyncStatusChanged(id, $event)" v-model="dontSyncQtyModel[id]"
                                      :disabled="qtySyncCheckboxDisabled"/>
                        </IndexTableCell>
                    </IndexTableRow>
                </IndexTable>
            </LegacyCard>
        </Page>
    </DefaultLayout>
</template>

tableData comes from an endpoint.

Script setup part (cutted)

<script setup>
import {
    Banner,
    Checkbox,
    EmptySearchResult,
    IndexFilters,
    IndexTable,
    IndexTableCell,
    IndexTableRow,
    LegacyCard,
    Page, Spinner,
    Text,
    Thumbnail,
    useIndexResourceState,
    useSetIndexFiltersMode
} from '@ownego/polaris-vue';
import {computed, h, inject, nextTick, onMounted, ref, resolveComponent} from 'vue';
import PlusIcon from "@shopify/polaris-icons/dist/svg/PlusIcon.svg";
import DefaultLayout from "@/layouts/DefaultLayout.vue";
import axios from "axios";
import CheckIcon from '@shopify/polaris-icons/dist/svg/CheckIcon.svg';
import {Toast} from "@shopify/app-bridge/actions";

const app = inject('AppBridge');

const Badge = resolveComponent('Badge');
const Icon = resolveComponent('Icon');
const Tooltip = resolveComponent('Tooltip');


const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const loaded = ref(false);
const tableData = ref([]);
const tablePaginationData = ref({
    hasNext: false,
    hasPrevious: false,
    onNext: () => {
        requestTableData(tabSelectedId.value, requestParams.value.page + 1, requestParams.value.limit,
            requestParams.value.sort, requestParams.value.query);
    },
    onPrevious: () => {
        requestTableData(tabSelectedId.value, requestParams.value.page - 1, requestParams.value.limit,
            requestParams.value.sort, requestParams.value.query);
    },
});

const sortSelected = ref(['order asc']);
const {mode, setMode} = useSetIndexFiltersMode();
const resourceName = {
    singular: 'product',
    plural: 'products',
};
const requestParams = ref({
    type: 'all',
    page: 1,
    limit: 10,
    sort: 'order asc',
    query: ''
});
const dontSyncQtyModel = ref({});

const tabSelectedIndex = ref(0);

const tabsSource = ref([
    {
        label: "All",
        id: "all",
        numItems: null,
    },
    {
        label: "Not Mapped",
        id: "unmapped",
        numItems: null,
    },
    {
        label: "Mapped",
        id: "mapped",
        numItems: null,
    }
]);

const tabSelectedId = computed(() => {
    return tabsSource.value[tabSelectedIndex.value].id;
});
const tabSelectedAction = (index) => {
    tabSelectedIndex.value = index;
    requestParams.value.type = tabSelectedId.value;
    requestTableData(tabSelectedId.value);
};

const tabs = computed(() => {
    return tabsSource.value.map((item, index) => ({
        content: item.label + (item.numItems ? ` (${item.numItems})` : ''),
        index,
        id: `${item}-${index}`,
        isLocked: index === 0
    }));
});

const sortOptions = [
    {label: 'Order', value: 'order asc', directionLabel: 'Ascending'},
    {label: 'Order', value: 'order desc', directionLabel: 'Descending'},
];

let {selectedResources, allResourcesSelected, handleSelectionChange} = useIndexResourceState(tableData);
</setup>

[haild173094]

Whether the scrollbar is visible or not does not affect the scrollability of the content inside the IndexTable.
Since your setting is condensed = false, I think the content is still scrollable, but the problem is that the scrollbar is not showing?

[MateuszManaj]

sort of. Scrollbar is absent. When scrolling to the right working ok but when to opposite side browser trying to redirect to the previous page (default browser behaviour). I have the same code like here https://ownego.github.io/polaris-vue/components/IndexTable?example=index-table-with-sticky-scroll-bar
One difference is in the working example where data for table is hardcoded.

[juzser]

Fixed on v2.1.32

[MateuszManaj]

Scrollbar is visible now.
Scrolling to the right is possible but to left shows

[haild173094]

@MateuszManaj I believe the "swipe from edge to go back" gesture is controlled by the operating system and is not related to scrolling inside the IndexTable.

[MateuszManaj]

Yes, this is an OS feature, but you can override that behavior. Many libs do that. I figured out how to fix it from my end, but I need to revert to 2.1.26, and for now, I consider it still buggy.