Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

B-table data huge delays on 30k of data paginated #7210

Open
borishuseincehajic opened this issue Jun 27, 2024 · 0 comments
Open

B-table data huge delays on 30k of data paginated #7210

borishuseincehajic opened this issue Jun 27, 2024 · 0 comments

Comments

@borishuseincehajic
Copy link

borishuseincehajic commented Jun 27, 2024 •
edited
Loading

Describe the bug

I'm having a b-table with 30k of data being put into :items prop. We use the table fully with filter, filter-function, and the listeners as well like @hovered @selected etc.

These would be the props used to be more accurate:

<b-table
                id="map-table"
                ref="mapTable"
                class="text-grey table-specific"
                selectable
                no-local-sorting
                small
                fixed
                primary-key="id"
                stacked="md"
                sort-icon-left
                :busy="isBusy"
                :current-page="currentPage"
                :fields="activeFields"
                :items="items"
                :per-page="perPage"
                :filter="filter"
                :filter-function="filterTableRow"
                :select-mode="selectMode"
                :sort-by.sync="sortBy"
                :sort-desc.sync="sortDesc"
                :tbody-tr-class="rowClass"
                :no-sort-reset="true"
                @filtered="onFiltered"
                @row-selected="onRowSelected"
                @row-hovered="onRowHovered"
                @row-unhovered="onRowUnhovered"
                @sort-changed="sortItems"
            >

And also the pagination

<b-pagination
                        pills
                        @input="clearSelection"
                        v-model="currentPage"
                        :total-rows="totalRows"
                        :per-page="perPage"
                        align="right"
                        size="sm"
                        class="mb-3 custom-pagination"
                    ></b-pagination>

My defaults are 100 rows per page.

Currently, whenever you click a row or try to do any action on the table there is 0.5 to 1 sec delay in response and I believe its mostly because of that 30k of data being inside the table. If you start working with the table and start clicking faster then it can't handle it and it will just freeze and you need to refresh the whole page then. I guess there is no workaround for this one but do let me know if I can improve the performance here.

Versions

Libraries:

  • BootstrapVue: ^2.23
  • Bootstrap: ~4.5.3
  • Vue: ~2.6.11

Environment:

  • Device: Macbook Pro M1 2021
  • OS: Sonoma 14.4.1 (23E224)
  • Browser: Chrome
  • Version: 126.0.6478.126
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@borishuseincehajic