rubanraj54 / vue-bootstrap4-table Goto Github PK

hai @rubanraj54

my base is url http://localhost:8081/product/list?

if i wanna multiple filter in column product_name and column color backend must receive
http://localhost:8081/product/list?product_name=smartphone&color=red

how to achieve that because onChangeQuery function update the new query param to be
http://localhost:8081/product/list?filter&sort&per_page&page

Hi,

It appears that sorting is case sensitive so, for example, items starting with "Z" appear before those starting with "a" after sorting. Can you add support for case insensitive sorting and make it configurable?

Thank you, Peter

Hi,

Delighted with the table. Thank you.

I'm not able to get the custom action buttons working/visible. All else works as expected.

I'm using the Basic Usage sample with the custom action buttons sample.

Any help would be greatly appreciated. Thanks again, Peter

Thanks for working on this control, it is very useful.

Everything seems to be functioning fine, but I am running into some UI issues that might be caused by my lack of experience with Vue and CSS.

Currently the sort arrows are not being rendered. Just 2 boxes are being displayed in their place. I am seeing the same behavior when viewing your demo page. https://rubanraj54.gitbook.io/vue-bootstrap4-table/demo

My other UI issue is regarding the global search box. The width of the text box is truncating the placeholder text, and the clear text button is extending below the text control. The clear text button behavior started to happen when I switch to using web pack's require function when referencing the Bootstrap CSS file. Before I was including the CSS via a link tag in the main index.html file.

Any suggestions or comments would be appreciated.

Thanks.

-Jeff-

I got a null reference issue when global search a string.
I think this line pop it.
VueBootstrap4Table.vue
line 661:
if (typeof value === "undefined") {
It's working when changed to:
if (value == null || typeof value === "undefined") {

when following your instructions by including the following scripts

    <link  rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  crossorigin="anonymous">

    <script  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"  crossorigin="anonymous"></script>

    <script  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"  crossorigin="anonymous"></script>

    <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"  crossorigin="anonymous"></script>

    <script  src="https://unpkg.com/[email protected]/dist/vue-bootstrap4-table.min.js"  crossorigin="anonymous"></script>

it yields the error

VM206 vue-bootstrap4-table.min.js:1 Uncaught ReferenceError: Vue is not defined
    at VM206 vue-bootstrap4-table.min.js:1

if i try to include vue js from some cdn

    <link  rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  crossorigin="anonymous">

    <script  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"  crossorigin="anonymous"></script>

    <script  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"  crossorigin="anonymous"></script>

    <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"  crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <script  src="https://unpkg.com/[email protected]/dist/vue-bootstrap4-table.min.js"  crossorigin="anonymous"></script>

doesn't work either:

Uncaught SyntaxError: Unexpected identifier

Please provide a README with an exampel how to use your software over CDN that works when I copy paste it. I don't want to read through 100 variations to start using that software.

First, great paged grid! Very fast loading and paging!
I am looking to have a simple data set bound but I have a couple of questions about styling (see attached image as well):

1. I don't want searching or filtering which is easy to exclude but the extra rows (header row for instance) remains - is it possible to simply set the row to not display if option is not used?
2. I need to be able to left and right align columns according to data type and user needs - is this possible?

Thanks for the hard work!
Tab

I am trying to do an automated column query in Laravel which looks like below.

// Check for basic text search
foreach ($objectMode->filters as $key => $value) {
            if($value->type === 'simple'){
                $query->where($value->name, 'LIKE', "%{$value->text}%");
            }
        }

Now this works fine for things like Firstname and Lastname which are actual columns in the database, but I want to CONCAT them in the output table and query this as well. It causes a problem due to the column name not existing in the database because it's a custom name.

->whereRaw("(CONCAT(first_name, '  ', last_name) LIKE "%{$value->text}%");

Can I add a custom filter name instead of simply.

filter: {
type: "simple",

filter: {
type: "concat_simple",

And then do a database query like...

// Check for basic text search
foreach ($objectMode->filters as $key => $value) {
            if($value->type === 'simple'){
                $query->where($value->name, 'LIKE', "%{$value->text}%");
            }
            if($value->type === 'concat_simple'){
                $query->whereRaw("(CONCAT(first_name, '  ', last_name) LIKE "%{$value->text}%");
                // Or if its possible after the Select CONCAT
                // where (CONCAT)username LIKE %{$value->text}%"
                 $query->where($value->name, 'LIKE', "%{$value->text}%");
            }
 }

Currently not using 'simple' in the filter disables/hides the input option. Or is there a way I can manually enable the search input no matter what the filter type?

Or maybe add 2 values and explode the comma and concat + like that way?

{
        label: "Username",
        name: "first_name, last_name",

Hi there.
So there is the official demo page of the plugin: https://codepen.io/rubanraj54/full/zyZdzN

Even if your browser can fit full width of the table there is a horizontal scroll at the bottom.
It's added by .table-responsive class because of extra margins of .row in header or footer of the plugin.
Here is the picture: https://imgur.com/a/6rcbU9J

Probably you shouldn't use .row not inside .container or .container-fluid but there is no way to define it via plugin options for now.

I was able to fix it in my project this way:

mounted() {
    // prevent overflow-x scroll bug
    this.$nextTick(() => {
      const tableEl = this.$refs.vueBootstrapTable.$el;
      const headerRow = tableEl.querySelectorAll('thead .row');
      if (headerRow.length) {
        headerRow[0].className += ' no-gutters';
      }
      const footerRow = tableEl.querySelectorAll('.footer-pagination-row .row');
      if (footerRow.length) {
        footerRow[0].className += ' no-gutters';
      }
    });
  },

But this is pretty dirty and it would be nice to fix it on plugin level.
Thanks.

This is not really an issue, but a help /feature request . My customer want to preserve the current pagination index while he refresh the data . For example, if the user is at page 4, and he refresh the table data ( i assign new server response to this.rows) , he want to be at page 4 itself with updated data. Any luck ?

Eg: I have 5 items already in the table but I wanted to target row 2 or multiple rows ticked explicitly without clicking the row using id or other reference? Thanks.

If a column has null values, then adding a column filter on that column throws an error: Error in callback for watcher "query.filters": "TypeError: Cannot read property 'toString' of null".

Would it be possible to have a loading icon shown in the table body while requests to the server are being handled.

I request this as I have run into instances where a user has a slow network connection and are getting confused on pages with a data table as all they see is is no data and have no idea that a server request is actually happening.

Is it possible to add font awesome icons to custom actions? plus choose wether to place them above or below the table layout?

12. Custom action buttons

<template slot="custom-action-export">
<font-awesome-icon :icon="['fas', 'sort']" fixed-width />
</template>

P.S. This is a really great vue js component :)

Would we be able to get a slot or some way to effect the title div on the card as currently it is hard coded to be centred and currently i need it to be left aligned and I would like the ability to add extra things to that title div, e.g. extra buttons.

Now i have got around this for now by turning off card mode and doing the card part myself but it would be great to have this all built in :-)

Hi @rubanraj54, is it possible to filter a date column with a daterange picker?
I am just wondering if table has a 'date of birth' column, how you would filter all birthdays this week or this month (for example)

Is there a way to parse the queryParams in php via Laravel from the array to object.

I have tried...

$querystring = json_decode(json_encode($request->all()), false);

But I get an object which contains the arrays inside.

stdClass Object
(
    [queryParams] => {"sort":[],"filters":[],"global_search":"","per_page":10,"page":1}
    [page] => 1
)

Hi @rubanraj54

This is a enhancement request.
Would it be possible that after the user chooses a item from the 'select' filter, for the dropdown selection to close.

Right now, it stays open until the user clicks away.

This would apply to the 'multi' select filter as well

Cheers

When i have a table with columns that have no inital sort and i click to sort one of these columns it tries to sort in desc order to begin with.

Now i would expect the first click of sort to order by asc, is this a bug or is there some way i can configure this?

Hi There

Is there a way to access the selected rows in (for example) the onDownload

onDownload(payload) {
//process selected items
console.log(payload.items)
}

Or do we track the selected items through a local array?

For background, I am using "vue-bootstrap4-table": "^1.1.2" to display elements in my firebase firestore database. I am using a package called "vuefire": "^2.0.0-alpha.20".

This gives me an array of objects which have 3 properties image_url,subtitle,title, along with an id.

When I do my own v-for loop I am able to access all the properties as well as the id. But for some reason the id is missing from the payload in my @on-select-row handler. In addition even though I added a column for id. Those rows are blank.

{
          label: 'Identifier',
          name: 'id',
          sort: false,
          row_text_alignment: 'text-left',
          column_text_alignment: 'text-left',
          uniqueId: 'true',
        },

Looking at the console, I'm wondering if it's because there are no "getters" for id? Do you think this is why? Or maybe you have a better idea?

From the chrome console:

> books
(3) [{…}, {…}, {…}, __ob__: Observer]
0:
image_url: (...)
subtitle: (...)
title: (...)
id: "7KS7KdJ9kqd1GLN3ewm2"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get image_url: ƒ reactiveGetter()
set image_url: ƒ reactiveSetter(newVal)
get subtitle: ƒ reactiveGetter()
set subtitle: ƒ reactiveSetter(newVal)
get title: ƒ reactiveGetter()
set title: ƒ reactiveSetter(newVal)
__proto__: Object
1:
image_url: (...)
subtitle: (...)
title: (...)
id: "Jvsw6GUXJrzOgapzkYCQ"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get image_url: ƒ reactiveGetter()
set image_url: ƒ reactiveSetter(newVal)
get subtitle: ƒ reactiveGetter()
set subtitle: ƒ reactiveSetter(newVal)
get title: ƒ reactiveGetter()
set title: ƒ reactiveSetter(newVal)
__proto__: Object

I am currently trying to pass in a custom class for a row with the below code

columns: [
          {
            label: this.$t('general.common.category'),
            name: 'name',
            sort: false,
            row_text_alignment: 'text-left',
            column_text_alignment: 'text-left',
            row_classes: 'nowrap'
          }
]

I have an entry in my css like so

.nowrap {
  white-space: nowrap;
}

Now when the table loads this class is not applied to the row but if i do the same with the column class it works fine, I am not receiving any console errors either. Any help on this one?

hi, is there any way to change actions button css classes, if not can you provide an option to change class="btn btn-primary" to something else?

Hi,

i have 2 tables in a different component and routing, let say user and product. in the first reload to user component the button its working fine, but when i change to another route/product component, the reset button throwing error Cannot set property 'value' of undefined" i need to refresh the current route to this button work correctly

im using version 1.1.2

Hi,

I'd like to add classes to the global search to, for example, increase the margin. Is that possible?

Thanks, Peter

Each row in my dataset has a key items that contains array of objects and each object has key title.

Example:

[{ 
items: [
  { 
    title: 'abc'
  }
]
}]

I have a column called title with name that contains reference to element of array (name: 'items[0].title').
It works fine, the table renders the value.
But when you sort on any column, all the values in that title column disappear, just an empty string.

If you remove array from the name (just name: 'title'), then the column has empty value when table is rendered. But when you sort on any column, value appears.

So it looks like value being copied in internal row structure as title and then some reference breaks and doesn't count items[0] prefix.

when i set on config with checkbox_row: false or removed it, the header of the tables still includes the checkbox. any solution for solve that?

When i selected a row from the checkbox table and perform some action on the rows.
The rows get unselected but the header checkbox remains checked.
How do i unselect the rows explicitly from any method?

Example:

Here the rows 1 and 2 also selected but they are not showing.
Actually they should be unselected from the header checkbox too.

Hi @rubanraj54

You current have row_classes and column_classes for columns.
Can I request a filter_column_class for the column?

This will be useful for adding styling the filter input.

And adding functionality like daterangepicker
eg if filter_column_class = "daterange"

$('.daterange').daterangepicker();

Cheers

I am not quite sure when this started happening but it must of been with one of the latest releases but now when ever i click on a item in a single/multi select filter then nothing happens.

I have checked and Vue is emitting the on-select-option event but i'm guessing something is going wrong after that and the on-change-query event is not being emitted.

How to add edit/delete button at the end of each row? On clicking edit/delete i would like call a function.

Hello,
I have a problem, Is it possible to selected row from data.
I have a api and i need to checked somme row in the table , is it possible ?
What is the good way to do that.

Thanks

Here is my use case.

I use all sorts, filters and etc on frontend.
But I would like to keep all the query payload in my url, so if user leaves the page and then click back, he will see same picture (sorts, filters, global search and etc).
It really helps if you work with table with hundreds of rows, use some filter, go to another page and then leave the page clicking on some link.

You already have emitQueryParams method but it only works when server_mode = true.
Would be nice to be able to pass some option in config to don't use server_mode but be able to catch the event from parent component when user interacts with datatable.

Also would be nice to pass same object (queryParamsPayload) into your datatable component via props to be able to restore the state of datatable right after we init it.

Thanks.

Hello,
First of all thank you for making this awesome component. It really saved my hide with a feature we're supposed to implement.

I just want to say that for some reason with the dropdowns for filter and pagination don't work at all.. I followed your code examples and saw that they don't seem to work there either.

Hi @rubanraj54

Is there a way filter only after the Carriage Return button has been pressed.
I am trying out server mode, and the ajax call is made for every key stroke.
Because of @on-change-query="onChangeQuery"

Kind regards

I don't need card_title and pagination_info but still has a box with header around the table.
How to remove the box to only keep the table?

Hi,

I really like your component. I started using it last week and I really appreciate the work you've done.

I was wondering if there is an easy way to render the filters in a box above the table. I've many data to display, and putting inputs on the first row isn't a nice solution for me.
If you have any idea of how I can achieve this goal, that will be very helpful!!

Cheers

Marie

Currently you have support of custom action buttons via a property in component.
This is a nice feature and I use it a lot.
But it's pretty limited when you need to customize it more deeper.
For example, if I want to disable specific action button after the click or make it disable based on some condition.
Or show some buttons based on user permissions.

Ideal solution would be ability to pass whole action buttons block via named slot.
This way I will have ability to fully control all the buttons and implement my own custom logic in it.

I was trying to add my custom buttons block above the table, but then it looks not that perfect if global search is enabled.

Hi,

It would be nice feature if filters can be set before fetching data.
For example: User open the page with a query param. Like Title=Teacher and have a multi-select filter or free text filter, It could search with {title:"teacher"} params when grid initiated.

hello, thank you for the great component i love it,
i am using it with server mode enabled and i handled the pagination, i wonder if you can add an option to activate built in filtration and sorting in server mode

Hi,

Not sure if anything can be done about this but I noticed that the action button(s) can become out of view with wide columns. I reproduced the issue with your code pen. Notice that the Download button is out of view.

Please let me know your thoughts on this behavior.

Kindly,
Peter

Hey, is there a way to sort currency? For example: values $11.0 and $104.0 get sorted the wrong way since it assumes that everything is a string.

Hi,

It is a very good job congratulation !!!

The only thing I need is to sort it by price because now the filter when I pass float numbers is wrong.

Example min to max:
15.99
2.99
25.99
...

Maybe it can be regulated without new type or by adding a float type that takes 2.99 or 2.99.
I hope I was enough clear :/
Thank you for your work !

Hi,

Apologies if this is a dup of issue #15.

I've included an icon in a table data that I'm trying to middle align. I've added the following to my columns array but it's not working:
{
name: "check",
row_classes: "align-middle"
},

My understanding is that "align-middle" should be added to the corresponding td, but that doesn't appear to be happening. If I manually align middle in DevTools I get the desired behavior (see screencap).

Any help would be greatly appreciated. Thanks, Peter

Hi @rubanraj54

Would it be possible when the user clicks the 'reset query' button, the filters are reset to the initial values, rather than empty

Cheers

Hi,
I would like to thank for this amazing grid. I've been trying to solve one of my requirements that says when the current queryparams changed the page index has to be changed to 0 (zero).

repro :
1- call fetchdata when component mounted.
2- change page index to 2
3- enter some value into the global search.(considering that server will response only one page)
4- grid does not show any result due to page index current value is still 2

Hey, this is really useful, as I was otherwise going to build something like this from scratch.

I'm using it to make a CMS that interacts with a Firebase backend. I'd really like to be able to:

1. Have a row where I can add an item directly inline.
2. Be able to edit rows and click a button to update.

The table has a class table-responsive due to which the overflow-x is set,
Can i unset it?

hi
i can't use an array of items for column filter options,
for example:
array variable

column

result

thank you.

Is it possible to have 2 or more table instances on the same vue page?