microdroid / vue-materialize-datatable Goto Github PK

The table is getting wrong field from columns specs. Furthermore, perPage is not working. Table:

<datatable
        v-if="type == 'collapsed'"
        :columns="collapsed_columns"
        :rows="$parent.lines"
        :perPage="50"></datatable>

This is my columns array:

collapsed_columns: [
          {
            label: 'Method',
            field: 'method',
            html: true,
            width: '100px'
          },
          {
            label: 'URL',
            field: 'url',
            width: '30%'
          }
        ]

Rows:

[
  {
    date:"21/Jun/2017 06:36:18"
    last_agent:"\"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36\""
    method:"<span class=\"tag is-info\">GET</span>"
    url:"/favicon.ico?_=517989746"
  }
]

And this is the (wrong) result. I'm using it with Single App Component inside Electron.

Hello.
I faced with this warning if I pass custom buttons this way:
{
hide:false,
icon:"settings",
onclick: function () {
console.log('btn pressed')
}
}
I got prop warning "Expected Function, got Array "

As far as know in vuejs-way to pass some state from child to parent is emit\v-on. How can I pass some emit from these custom buttons via the 'onclick' function in buttons array?

Thank you.

Is there a method to programatically change the current page of the table? Specifically, implement something like a button and when you click it, your table automatically goes to page 1?

Proposal

If you click on a row a vue custom event will be emitted, containing the object in the payload.

You would be able to react to the click event in the parent element via v-on:customEvent.

Discussion

Would you be interested in this feature? I would see this as a replacement for the onClick function thing. I have implemented this in my own project.

I've seen this on the demo page as well as my own local datatable. When you click on the pagination buttons for left or right. The buttons get darker until the point where you cant see the icons. Any have a thought/potential fix for this?

I'm thinking short term to track down the css and disable/simplify the click,hover effects.

***** Looks like this issue can be closed. Problem is caused by materialize being imported multiple times on a page. This is a materialize css issue. I found a few cases of multiple imports I had throughout my app. ******

Hello,
It would be great if we could modify the text that are displayed so that we can translate it. By text, I mean text displayed by the table, like « Rows per page ».

Thanks

Current behaviour:

Selecting text of a row leads to call the click method and firing of the row-click event.

Idea:

Allow selecting of text from a row without firing the row-click event. This could be done by checking the value of getSelection() by the browser api. Also this could be configurable by a prop like allow-selection.

The last update i found one error
when i want to show all datas in the datatable, it throw this error
Error in render: "RangeError: invalid array length

How to solve it? thanks

@MicroDroid Should we implement this workaround, to enable search of numbers (non-string)?

Has anyone been able to disable sorting for specific columns? As far as I've seen its true or false in the and applies to all columns.

Along with the sorting is it possible to apply searches to specific columns only?

Has anyone worked on implementing exact match searches? I have a task coming up and would be able to contribute some hours to implementing that feature if someone might have any pointers for places to start?

Really like this datatable.

Invalid default value for prop "perPage": Props with type Object/Array must use a factory function to return the default value.

The fix is obvious

I'm trying to download data with utf-8 format but i can't do this. There's any way ?

As mentioned in #15 setting the perPage property is not working.

When paginate is set to false, the table footer containing pagination controls is removed. Then, when printing the table from the table button, a null null error is raised :
"TypeError: can't access property "remove", clonedTable.querySelector(...) is null"
and :
"TypeError: can't access property "remove", clonedTable.querySelector(...) is null
-> print DataTable.vue:345"
When checking the code line 345, I noticed a query selector targeting the non-existing HTML element '.material-pagination' in the footer and the method .remove being applied, which cause the error.
To reproduce the bug, you just need to take the basic example, set paginate to false in the template, then try to print.

border-radius of materialize.css leads to small visible spaces between table cells on IE11:

Possible fix:

table td, table th {
    border-radius: 0;
}

My default row per page is 10. But when I set it to a 100 and sort by clicking the column header, it returned to my default row per page of 10, instead of showing the 100 rows.

Why does this.currentPerPage go back to default after sort?

sort: function(index) {
      if (!this.sortable) return;
      if (this.sortColumn === index) {
        this.sortType = this.sortType === "asc" ? "desc" : "asc";
      } else {
        this.sortType = "asc";
        this.sortColumn = index;
      }
    },

Looks like its from

computed: {
...
        this.currentPerPage = options[0];
...
}

I change the above to this.currentPerPage = this.currentPerPage as a work around but not sure what will it affect.

The documentation is so much larger than just fitting in a code block. The documentation should be split somehow or converted to a Markdown table.

I'm having problems with the server side search. I'm using Vue.js and when I start a search, the callback is called but in a loop. Y need to delete the letter introduced in the search input to stop the calls to the server.

How can I fix it?

Thanks.

hello , I want to ask about using bootstrap classes with datatable . is it possible or not ? because I want to change table style .

Thanks in advance

Current behaviour:

Using mail.address as a column field

[
    {
        name: 'test,
        mail: {
            address: '[email protected]'
        }
    },
    {
        name: 'test2',
        mail: null
    }
]

will cause the whole table to stop rendering with the error: Error in render function: "TypeError: Cannot read property 'address' of null"

Expected behaviour:

Render a empty cell for address of test2

Hi,

Thanks for this amazing package.

I am facing an issue. Each time I export the data in Excel, the generated Excel comes with HTML tags, as pasted below.

<table><thead><tr><th>Character | name</th><th>First | appearance</th><th>Created | by</th><th>Voiced | by</th></tr></thead><tbody><tr><td>Abu</td><td>Alladin | (1992)</td><td>Joe | Grant</td><td>Frank | Welker</td></tr><tr><td>Magic | Carpet</td><td>Alladin | (1992)</td><td>Randy | Cartwright</td><td>N/A</td></tr><tr><td>The | Sultan</td><td>Alladin | (1992)</td><td>Navid | Negahban</td><td>Douglas | Seale</td></tr></tbody></table>

Please is there a fix to this?
Thanks

So currently we have date time strings in the format of 'YYYY-MM-DD HH:MM:SS.' The data table sorts the values correctly based on their ASCII values but it does not sort correctly based on the values of the dates and times. My question is, is there a way we could make a custom sorter to be put into the table? Is there possibly a data type we can pass in so it would sort based on date time?

waiting for it to work with vuejs 3

This is what I get instead of Cyrillic. Appears to be encoding error or something. Are there any export settings beyond "exportable" ? Or is it not even VMD issue?

this is the component

<datatable v-if="rows" v-on:row-click="onRowClick" title="List of Rooms" :columns="columns" :rows="rows" :perPage="[10, 20, 30, 40, 50]"></datatable>

and the ajax

axios.get('api/rows') .then(function(response){ vm.rows= response.data; console.log(vm.rows) });

Hi,

I've spent a lot of time trying to get this working in a Laravel 5.4 application but not having much luck. I've had a fair few errors which I have managed to sort out but this one I cannot seem to get rid of - and I am unable to get anything to display on my page. I am very new to Vue so forgive me if this issue is an error on my part.

The error I am getting is:
app.js:75598 [Vue warn]: Error in render function: "TypeError: Cannot read property 'sort' of undefined"

app.js:75685 TypeError: Cannot read property 'sort' of undefined
    at VueComponent.processedRows (app.js:43334)
    at Watcher.get (app.js:78000)
    at Watcher.evaluate (app.js:78107)
    at VueComponent.computedGetter [as processedRows] (app.js:78384)
    at VueComponent.paginated (app.js:43376)
    at Watcher.get (app.js:78000)
    at Watcher.evaluate (app.js:78107)
    at VueComponent.computedGetter [as paginated] (app.js:78384)
    at Object.get (app.js:76796)
    at Proxy.render (app.js:74752)

I had the same error with 'window' which I resolved by adding it to the instance, but attempting to do the same for sort does not work (requiring local copy to fix perPage default error):

Vue.component('data-table', require('./components/DataTable.vue'));

const app = new Vue({
    el: '#app',
    data: {
        window: {
            data: []
        },
        sort: ''
    }
});

Component in blade template:
<data-table :columns="window.data.columns" :rows="window.data.rows" />

If I do console.log(window.data) I can see the data I am expecting to see.

I think I have added all the relevant code but if I've missed something let me know.

Vue Version: 2.4.2

Thanks in advance!

Great library, thanks! I'm wondering if you had any recommendations on how to have an additional option allowing users to add entries into the table? A good implementation example would be https://quintet.io/vue-quintable-demo/ (Add/Remove/Move example).

How can i make it responsive on multiple columns... without overflowing table header and table footer... just the horizontal scroll on the body

Hi.

I tryed to install the table in my project several times and always getting some errors, in a point that I destroyed my entire project.

I wonder if have some theme that already have the datatable that I can download and modify the project to use? If not, can someone create a empty vue project and install the tables and send it to me, please?

Sorry, I'm new to vue, i'm trying.. and i really need this datatables.

Thanks!

Hi,

I'm interested in using the data table. The only issue is that the table css is missing on print. Is it possible to include the table CSS on print?

Thanks,
Matt

How can i use the render function of datatables to render rows??

render(row,cell,index){
let data = "";
if (row.status == "active") {
data = ''+row.status+'';
}
if(row.status == 'inactive'){
data = ''+row.status+'';
}

        return data;
      }

That is my component, it render well, but sometimes doesn't load, and I get these errors repeatly:

What must be done to fix that.

There is no way to define a column for default sorting

This datatable component is da bomb. I'm attempting to work through getting a couple of features to work. Specifically I'm passing in a json object via a return statement from computed method to :rows. It's showing my data properly. My struggle is with the date column. On my original grid below the datatable you can see how it takes my date value and coverts the output.
My filter is is basically: formatDate(val) and returns the value in the output I want.

field: "name", // Field name from row
// Use dot for nested props
// Can be function with row as 1st param

In my tables columns definition I'm trying to implement it as follows:
{
label: "Updated",
field: "function(row => {row.updatedOn | formatDate })", //this.formatDate(updatedOn),
numeric: true,
html: false,
},

Anyone have any thoughts on how I can implement my formatDate function to work with the datatable?
Thanks in advance for any help

Hello There, i can't call the in my code . although the its already installed. no console error or anything but the tables didn't seems to appear. can you help?

"dependencies": {
"auth": "0.0.9",
"core-js": "^3.6.5",
"js-cookie": "^2.2.1",
"material-design-icons-iconfont": "^6.1.0",
"register-service-worker": "^1.7.1",
"sweetalert2": "^10.3.2",
"vue": "^2.6.11",
"vue-cli-plugin-axios": "~0.0.4",
"vue-cookies": "^1.7.4",
"vue-materialize-datatable": "^1.0.4",
"vue-router": "^3.2.0",
"vue-sweetalert2": "^3.0.8",
"vuelidate": "^0.7.5",
"vuetify": "^2.2.11",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"axios": "^0.21.1",
"node-sass": "^4.12.0",
"sass": "^1.19.0",
"sass-loader": "^8.0.2",
"vue-cli-plugin-vuetify": "~2.0.7",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.3.0"

here is my dependencies

Currently

The documentation does not provide some information that materialize.css and Google Material Icons Font are needed (especially the google font for the used icons).
The readme should be updated.

Expected

The readme should guide you to import the required css styles and web fonts

I think I'm close but it blows up the page when I apply :sortable in the wrong place. With the below code I've been able to get the two manually defined columns to work. The problem now is getting sortable to work with my date column. I've tried adding :sortable=true, :sortable="true" to the & but no luck. Since I've created the rows and columns in the template it doesn't let me do anything with it in the data() section of vue. Potentially I'm thinking props.columns.updatedOn.sortable might be the direction to go. Anyone have thoughts on how to get the Updated column to sort? Thanks again.

https://jsfiddle.net/bismarck611/tmh5k32x/
<datatable :title="titleTextCheck" :columns="tableColumns1" :rows="userSitesFilter"> <th slot="thead-tr">Updated</th> <th slot="thead-tr">Actions</th> <template slot="tbody-tr" scope="props"> <td>{{ props.row.updatedOn | formatDate }}</td> <td> <button @click="(e) => $refs.modalName.openModal(props.row, e)" class="waves-effect waves-light btn blue darken-4"> View/Edit </button> &nbsp; <button v-if="userProfile.role === 'blah'" @click=" (e) => $refs.statusChangeModalName.openStatusChangeModal(props.row, e)" class="waves-effect waves-light btn blue darken-4"> Status </button> </td> </template> </datatable>

I am not particularly sure which dependencies bloated, but I was just going to install sass-loader and I found it already installed despite we haven't used it at all before.

We should absolutely make a clean-up to package.json. Also which is redecide on which deps are development and which are production

Can we show user some message while data is being fetched (while :rows prop is empty i.e.)?
Or what slot should we use to print something inside table?

Any idea why I get this weird glitches

or why it doesn't occupy the rest of the horizontal space?

(edit)
do you think it could have something to do that im using vuematerial

Error

The build fails with the error

ERROR in ./src/DataTable.vue

  64 | 					</td>
  65 | 					<slot name="tbody-tr" :row="row"></slot>
    |      ^
  66 | 				</tr>

  Tag <slot> cannot appear inside <table> due to HTML content restrictions. It will be hoisted out of <table> by the browser.

Reproduce

1. run npm install
2. run npm run build

Discussion

Are the slots actually in use? Can't find something in the documentation.

#Hello
Thank you so much for the component. It loos great.

Is there a way I can use this directly in the browser? I tried compiling it with vue cli, doesn't seem to work as expected.