bhaveshpatel200 / vue3-datatable Goto Github PK

Hi,

When I try to use with target="_blank" the NuxtLink doesn't work

<vue3-datatable :rows="salesReport" :columns="cols" :loading="loading" :totalRows="paginationParams.totalItems" :isServerMode="true" :pageSize="paginationParams.perPage" :pageSizeOptions="[50, 100, 200, 300]" :currentPage="paginationParams.currentPage" :columnFilter="true" @change="updateSalesReportData" class="text-xs" > <template #id="data"> <div> <NuxtLink class="text-blue-600 underline" :to="/order/show/${data.value.id}" target="_blank"> {{ data.value.id }} </NuxtLink> </div> </template>
Only without target="_blank" works, but on this case I want to open a new tab.
The NuxtLink outside the vue3-datatable works with the target="_blank".
I think there is something wrong inside the component.

It would be great to expose more slots for custom styling. For example:

• filter button (so you can use different icons etc)
• filter input (so you can match the size of my custom button by using your own input component)
• pagination buttons

Thanks!

Hello,

I have an issue while trying to use the vue3-datatable library.

I followed the installations guide in the documentation but when it comes to import the datatable component and use it inside my vue3 app i encounter this error :

error  Resolve error: Cannot find module '/node_modules/@bhplugin/vue3-datatable/dist/vue3-datatable.umd.js'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:960:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:953:15)
    at resolveExports (node:internal/modules/cjs/loader:482:14)

The error tell me that it is searching the .umd.js file right ? The problem is that i can't find this file inside the node_modules folder of this library.

I've tried to uninstall and reinstall the module, still the same.

Do you have any idea on how i can solve this issue ?

Thanks

_I hope i gave enough details, if not, dont hesitate to ask me more about it _

Hello bhaveshpatel200
I'm having a problem when I want to display my data table with 300 rows. i use sql command to display the first 10 rows and update the totalRows value to 300. But it seems that the totalRows value is limited by the number of rows i upload from the database. Therefore, the page number only displays 1 instead of 30 pages.
Can you help me solve this problem?

Hello, I'm interested in your Vue3 datatable. I've implemented it as client-side rendering and it's working fine, but there are some cases where I need it to work as server-side rendering. After studying your code, I found some points to make it work as server-side rendering. Among these, I need to define a few variables: totalRows (total data), page (current page), and the pageChange event.

However, there is a problem when I define totalRows. I want it to be automatically calculated based on maxPage, as I see in line 484:

const maxPage = computed(() => {
   const totalPages =
     <number>currentPageSize.value < 1
       ? 1
       : Math.ceil(<number>filterRowCount.value / <number>currentPageSize.value);
   return Math.max(totalPages || 0, 1);
});

But for some reason, totalRows doesn't seem to be assigned as the amount of data. Instead, it automatically calculates rows.length.

This is my API structure:

{
  current_page: 1,
  data: […],
  max_page: 23,
  messages: "",
  recordsTotal: 229,
  state: true
}

When I fetch the API, I assign it to data, where the variable totalData is taken from API.recordsTotal and currentPage from API.current_page. This is how I call it in the Vue3 datatable:

<vue3-datatable
             :rows="data"
             :page="currentPage"
             :columns="headings"
             :totalRows="totalData"
             :sortable="true"
             :showPageSize="false"
             :stickyFirstColumn="true"
             @pageChange="pageChange"
           >

However, what is displayed in the browser is not what I want. I want it to display "Showing 1 to 10 of 229 entries", and there are a number of pages (with empty data) where the user clicks and it triggers the pageChange event to fill in the data.

error index on data.

key index always 0

Hi! I have the following code:

      <vue3-datatable
        :rows="rows"
        :columns="columns"
        :show-page-size="false"
        :pagination="false"
      />

rows contains an array of items loaded from server (6 items). Rows don't row when I use :show-page-size="false", no DOM elements in the table's body.

UPD. Weird, sometimes it doesn't render when pagination is off.

how to use colspan and rowspan in header column ?

Is there a way to enable or disable the checkbox per row? I.E., a row has a column called active, so for that row, the checkbox should be disabled. Is that currently possible?

We make fresh install and a lot of tests with Vue 3.3.4 and 3.3.7 versions.
We try the versions from vue3-datatable 1.0.1 to the 1.1.3
This tests using only a clean install, and one using Nuxt 3.8 and 3.6.2.
We made server-side and client-side, with no sucess.
We don't get any issue in console from Chrome or console server side.
We inspect the Vue array, and all data is updated, but no in the DOM.
All the test we made, when we push a data to the const with ref, the data don't update on the table in DOM.

Hi,

The prop totalRows does not have any impact on the pagination. The table considers just the total elements of the rows.
When you want to use pagination normally you would push to the table just the rows for that specific page while the total is another. In other words, I am trying to pull from an api just 20 rows and display them in the table while I support full pagination for the rest of the pages. Am I doing something wrong?

Here is my component

<vue3-datatable
:rows='items'
:columns='columns'
:pageSize='perPage'
:totalRows='200'

Here the items.length = 20 and the pagination displays just one page while it should display 10.

Hi,

While upgrading my npm modules, I have a strange problem. When I am searching, the searches inside the datatable are delayed.
I finally found why : In file /src/components/custom-table.vue around lines 730-736
You first watch search props changes and call changeSearch function before the watch search props that change the currentSearch const. You may invert these watch to not have a delay between search props and searched value.
Change these lines :

watch(() => props.search, changeSearch);
watch(
    () => props.search,
    () => {
        currentSearch.value = props.search;
    }
);

By these lines :

watch(
    () => props.search,
    () => {
        currentSearch.value = props.search;
    }
);
watch(() => props.search, changeSearch);

Hi,
I get my data from using axios and render table by following code.
But I found a problem, the table would show empty firstly. If I click some column sorting or use the global searching, the data of table would show correctly.

	<vue3-datatable :rows="table_sites" :columns="cols" :sortable="true" :search="search" :showFirstPage="false" :showLastPage="false" >
		<template #actions="data">
			<button @click="edit(data.value)">Edit</button>
			<button @click="clean(data.value.id)">Delete</button>
		</template>
	</vue3-datatable>

Ex:
Before

After clicking sorting button

I tried to solve it, and I found all example would use setTimeout funcion to assign rows value after one second.
Like following code:
setTimeout(() => { rows = data.value || []; }, 1000);
I do it, then the problem would be solved. The table would show correctly at frist.
Do I have to assign rows value by this method （setTimeout）?
Thank you so much, and appreciate you offering the great package.

Hi,

When I activate columnFilter, I can filter colmun individually.
But when I deactivate columnFilter then filters applies without any chance to see or access filters value.

Is it possible to change custom-table.vue (around line 403) to add a check if column filters should apply or not.

Before :

if (!props.isServerMode) {
    props.columns?.forEach((d) => {
    ... 
    });

    if (currentSearch.value && rows?.length) {
    ...

After :

if (!props.isServerMode) {
    if (props.columnFilter) {
        props.columns?.forEach((d) => {
        ... 
        });
    }

    if (currentSearch.value && rows?.length) {
    ...

how to start the datatable with :hasCheckbox='true' and a few lines checked?

Hello, how can I customize the 'pageSizeOptions' to display the option 'ALL' for the page size selection?

Hi, is there a way to integrate it with tailwindcss? More specifically to enable darkmode in my app.

Thank you

Hi, my data is actually exists, but why it doesn't shown in the table? But why it shows only "No data available".
I am using Node v20.5.1, Vue 3.3.4.

totalRows is invalid when isServerMode is true，my items length is 10 total_rows is 11 but the page displays only 1 page of 10 data
<vue3-datatable :rows="items" :columns="cols" :loading="loading" :isServerMode="true" :totalRows="total_rows" :hasCheckbox="true" :sortable="true" sortColumn="createTime" sortDirection="desc" :search="search" :page="data.page" :pageSize="data.limit" @pageChange="changeServer" noDataContent="没有符合条件的数据" skin="whitespace-nowrap table-hover" @pageSizeChange="changePageSize" paginationInfo="显示 {0} 至 {1} 共 {2} 条数据" </vue3-datatable>

how to use the getSelectedRows method?

Hi, I want to remove filter condition not necessary for my app (like not contain) but I didn't find how, or if there is a way to remove all the dropdown filter and let just the default one works

thank you

Is there a way to move the pagination to the top of the table? A feature request might be to have the ability to choose where pagination is located, bottom or top.

Hello @bhaveshpatel200 ,

Thanks for the time taken to create this package.

I was wondering if is possible to cerate & export types for the package? That way we can get TS help when creating a column array etc...

 <Vue3Datatable :columns="Jobfields" :rows="lstScheduledJob" :pagination="false" >
</Vue3Datatable>   

trying to hide pagination but its not working

i had to change

*,
:after,
:before {
    border: 0 solid #0000;
    box-sizing: border-box
}

to

.bh-table-responsive *,
:after,
:before {
    border: 0 solid #0000;
    box-sizing: border-box
}

don't know what it might break with datatable but remving all borders in my page was not an option

Regarding the issue #28 about data not being displayed in the table in server mode, I want to reopen it to get more attention. When I fetch data with the Pinia store like this, it doesn't show data:

actions: {
      async fetchProducts(params) {
        return new Promise((resolve, reject) => {
          axios
            .get(`/api/products`, { params })
            .then((response) => {
              console.log(params);
              this.products = response.data.data;
              this.totalProducts = this.products.length;
              console.log(response)
              resolve(response.data);

            })
            .catch((err) => {
              reject(err);
            });
        });
        

and when I use this structure it works :

 actions: {
      async fetchProducts(params) {
        return await axios
          .get(`/api/products`, { params })
          .then((response) => {
            this.products = response.data.data;
            this.totalProducts = this.products.length;
            console.log(response)
            return response

          })
          .catch((err) => {
            return err;
          });

      },

BUT when I change to another page that contains a different datatable with a different store, it doesn't show data in the table.

I think it is an error of caching on the package or something like this

I would appreciate it if you could check this issue.

Hello,
How to work with nested data?

I have table rows, I want to set background color to the Row or Cell based on status (Pending, Partial, Completed)

Hello,

I am using this plugin and notice some problems on sorting.

Here is an example :

• Values : ['9320', '4110', '48BOX-K', '10009']
• Expected result : ["10009", "4110", "48BOX-K", "9320"]
• Result from plugin : ["48BOX-K", "4110", "9320", "10009"]

The problem come from the sort function inside filteredRows function :

        // sort rows
        var collator = new Intl.Collator(undefined, {
-->         numeric: true,
            sensitivity: 'base',
        });
        const sortOrder = currentSortDirection.value === 'desc' ? -1 : 1;

        rows.sort((a: any, b: any): number => {
            const valA = currentSortColumn.value?.split('.').reduce((obj: any, key: string) => obj?.[key], a);
            const valB = currentSortColumn.value?.split('.').reduce((obj: any, key: string) => obj?.[key], b);

            return collator.compare(valA, valB) * sortOrder;
        });

Option numeric to true in Intl.Collator options is the origin of the problem. Initialize this to false change the sort order to the expected result.
It may be better to set this option to true only when column.type === 'number'

        // sort rows
        var collator = new Intl.Collator(undefined, {
            numeric: props.columns.find(col => col.field == currentSortColumn.value)?.type === 'number',
            sensitivity: 'base',
        });

Regards.

client side search not working when elements are customized

search by status on this page to reproduce:
https://vristo-vue.vercel.app/datatables/multiple-tables
for example "PAID"

Setting a maxWidth on a table seems to have no impact on a table that overflows horizontally.

The only way I could get something similar is by manually setting the header to display block with overflow-wrap. I think the same will need to be applied to all the row tds for that column too:

Hi Bhavesh,
Can you please provide a sample for how to load data from API and render inside datatable in Vue3 Compostion API.

Thanks,
sathish

It would be great if we could filter by more operators.

Heare are some examples/ideas.

• List Filters

in_list: ['Bascom', 'Coultervillle']
not_in_list: ['Bascom', 'Coultervillle']

for that the columnProps object could depend on a "options" list (or even better a callback function that does an api call to the backend on demand)

• Multiple Conditions

Another cool idea would be to support multiple conditions by each filter. Take prime vue for inspiration:

https://primevue.org/datatable/#advanced_filter

• Filter Slot

If the prior options seem like too much trouble, another option might just give the possibility to make a slot for the filter menu and allow there to modify the filter conditions

Thanks for the package!

It was an error caused by my app. Fixed.

Are there any show order option? I mean ordinal number becase ids are not always in order.

Loading option not rending loading, however table always loads with no data and doesn't reload. Help please

Is it possible to create a customization for TFOOT columns?

<tfoot v-if="props.cloneHeaderInFooter" :class="{ 'bh-sticky bh-bottom-0': props.stickyHeader }">
                    <column-header
                        :all="props"
                        :currentSortColumn="currentSortColumn"
                        :currentSortDirection="currentSortDirection"
                        :isOpenFilter="isOpenFilter"
                        :isFooter="true"
                        :checkAll="selectedAll"
                        @selectAll="selectAll"
                        @sortChange="sortChange"
                        @filterChange="filterChange"
                        @toggleFilterMenu="toggleFilterMenu"
                    />
                </tfoot>

Can you generate keys with sequential numbers rather than just zeros? So as to create a number sequence in the table.

<template #number="data">
     <strong>{{ data.key + 1 }}</strong>
</template>

Hi, how i can reload data in datatable after deleting a row or making any change in the server?

Thanks

despite props "totalRows"equaling 20
it still shows on pagination "showing 1 to 10 of 10 results"
the right result should be "showing 1 to 10 of 20results"

in addition to I can't go to page 2

`

            <vue3-datatable
                :rows="rows"
                :columns="cols"
                :sortable="true"
                :totalRows="pageInfo?.total"
                :search="search"
                 skin="whitespace-nowrap bh-table-hover"
                :showFirstPage="false"
                :showLastPage="false"
                :isServerMode="true"
                :pageSizeOptions="[5, 10, 20, 50, 100]"
                :paginationInfo="`${$t('showing')} {0} ${$t('to')}  {1} ${$t('of')} {2} ${$t('results')}`"
                :noDataContent="$t('ThereAreNoData')"
                @pageChange="handleCurrentChange"
                @pageSizeChange="handleSizeChange"
            >
                <template #has_images="data">
                    {{ data.has_images ? $t('found') : $t('notFound') }}
                </template>
                <template #has_videos="data">
                    {{ data.has_videos ? $t('found') : $t('notFound') }}
                </template>
                <template #action="data">
                    <div class="flex items-center">
                        <client-only>
                            <div>
                                <button
                                    @click="
                                        addNew = false;
                                        Edit = true;
                                        selectedId = data.value.id;
                                    "
                                    type="button"
                                    class="ltr:mr-2 rtl:ml-2"
                                    v-tippy:edit
                                >
                                    <icon-pencil />
                                </button>
                                <tippy target="edit">{{ $t('edit') }} </tippy>
                            </div>
                            <div>
                                <button @click="deleteModal(data.value.id, data.value.name)" type="button" v-tippy:delete>
                                    <icon-trash-lines />
                                </button>

                                <tippy target="delete">{{ $t('delete') }}</tippy>
                            </div>
                        </client-only>
                    </div>
                </template>
            </vue3-datatable>
       `

Hi, is there a way to implement lazy loading?

I see docs and find no solutions to add fixed footer row for table.
I want show total/sum row at footer

Hi there,

Is there a way to sticky the last column?

Usually on the last column is actions, and when table is too long, it's annoying to scroll all the way to the end.

BTW i have one issue or maybe its misunderstanding.
Example
<vue3-datatable :sort-column="true" :column-filter="true" />

In this case i think that the sort and filter should be enabled for all columns by default and i need to disable certains columns manually.

But its NOT, i have to put 'sort' => true, 'filter' => true on each column to actually show the sort and filter.

Hi, is there a way to edit inline on the table?