QDataTable help

Hawkeye64

Creating a laundry list for QDataTable. Here are a few things:

setting :rows-per-page-options="[3]" shows the initial table with 5 items. You still have to the :pagination.sync="pagination" and in data() you need the following:
pagination: { rowsPerPage: 3 }. I don’t think there should be an expectation of setting the pagination. If there is only one item in the array, the internals should figure it out and if there are more counts in the array, then find the closest one.
Is there a way of turning off the Rows per page: X aspect of the pagination? I just want the left and right chevrons with the “x-x of x” text. What if :rows-per-page-options="[]" contained no counts? Then hide it as it would have nothing to display.
I have a fixed height I need to fit the QDataTable into it, but the pagination bleeds over. Is there a correct way of constraining this? (used to be able to use maxHeight in the “bodyStyle” option in v0.14.x)
I’d like to make the table header and rows a bit thinner. For some reason, having a hard time overriding this with scoped css. I can do it unscoped, but the changes are global. Is there a way of doing this through properties?

Any help would be appreciated.

liguyu

There is a workaround here. Just set pagination’s rowsPerPage to a very large number and hide-bottom and it’s gone.

Hawkeye64

Actually, I have rowsPerPage set to 7 because that’s what it needs to be. Plus, I still need the pagination. Just not that part of it.

Hawkeye64

Also wondering, how to handle double-click on a row, and single-click on a cell.

Hawkeye64

@rstoenescu Another idea is as well as the format: directive on cells, there could also be a formatCSS: so you can manipulate things like background cells.
For instance:

          formatCSS: val => {
            if (val === someValue)
                return { backgroundColor: 'yellow' }
          }

Right now I am doing the same, but forced to <q-td> slot.

Hawkeye64

Anyone have a fix for #3? I am still trying to get this figured out. Thanks.

Hawkeye64

I have solved #3, so for anyone wanting to scroll the table with a fixed height:

First, in <q-table definition, set the table-class:

    <q-table
      ...
      :pagination.sync="pagination"
      table-class="table-class"

In the CSS, declare the CSS as such:

.table-class {
  display: block;
  height: 300px;
}

Additional CSS to not show the bottom of the DataTable with controls (selected, pagination, prev page, next page, etc):

.q-table-bottom {
  display: none;
}

Notice up above, I am still using the pagination control? This is so I can set it to “All”:

  data () {
    return {
      pagination: {
        page: 1,
        rowsPerPage: 0
      },

If anyone finds an easier way, please let us know. Thanks.

Hawkeye64

Found out the eaier way to hide the bottom part with the pagination controls is just to use the hide-bottom attribute on the q-table. Don’t know why I didn’t see this before…

Hawkeye64

@rstoenescu This line for DataTable in the documentation:
table-class String/Array/Object Classes for the <table> tag itself.
But in reality, the class is being applied to the parent div with the following classes q-table-middle scroll - could be why this is having issues for me.

table-class="table-class"
Then becomes q-table-middle scroll table-class but on that parent div

Hawkeye64

Also been trying to use the table-style="tableStyleObject" where tableStyleObject is a computed function returning normal vue style directives, but I can’t see them anywhere. Also tried table-style="tableStyleObject()" where tableStyleObject() is a method. Still no go.
Function looks like:

    tableStyleObject: function () {
      return {
        display: 'block',
        height: '600px'
      }
    }

Hawkeye64

Found it:

h('div', { staticClass: 'q-table-middle scroll', 'class': this.tableClass, style: this.tableStyle }, [

This is not what’s the documentation.

No More Posting New Topics!

QDataTable help