Do you have a UX team? I Would really appreciate their feedback on my new product - UserBit

Table Options

These options relate to the table as a whole

columns

type: Array

Array containing objects that describe table columns. The column object itself can contain many configurable properties.

[
    {
      label: 'Name',
      field: 'name',
      filterable: true,
    }
    //...
]

rows

type: Array

Array containing row objects. Each row object contains data that will be displayed in the table row.

[
    {
      id:1,
      name:"John",
      age:20
    },
    //...
]

for grouped rows, you need a nested format. Refer to Grouped Table for examples.

max-height

type: String Set a maximum height for table body

<vue-good-table
  :columns="columns"
  :rows="rows"
  max-height="300px">
</vue-good-table>

fixed-header

type: Boolean (default: false) fix header so it stays in view as you scroll the table.

<vue-good-table
  :columns="columns"
  :rows="rows"
  max-height="200px"
  :fixed-header="true">
</vue-good-table>
NameAgeCreated OnPercent
NameAgeCreated OnPercent
John 20 3.34%
Jane 24 Oct 304th 11 3.34%
Susan 16 Oct 303rd 11 3.34%
Chris 55 Oct 284th 11 3.34%
Dan 40 Oct 294th 11 3.34%
John 20 Oct 304th 11 3.34%

Fixed header should probably be used with max-height

line-numbers

type: Boolean (default: false) Show line number for each row

<vue-good-table
  :columns="columns"
  :rows="rows"
  :line-numbers="true">
</vue-good-table>
NameAgeCreated OnPercent
1 John 20 3.34%
2 Jane 24 Oct 304th 11 3.34%
3 Susan 16 Oct 303rd 11 3.34%

row-style-class

type: String or Function

property to assign a class to rows. This can either be a string representing a css class-name or a function.

<vue-good-table
  :columns="columns"
  :rows="rows"
  :row-style-class="rowStyleClassFn">
</vue-good-table>
methods: {
  rowStyleClassFn(row) {
    return row.age > 18 ? 'green' : 'red';
  },
}

rtl

type: Boolean (default: false)

Enable Right-To-Left layout for the table

<vue-good-table
  :columns="columns"
  :rows="rows"
  :rtl="true">
</vue-good-table>
NameAgeCreated OnPercent
John 20 3.34%
Jane 24 Oct 304th 11 3.34%
Susan 16 Oct 303rd 11 3.34%

Table Actions Slot

If you want to add table specific actions like a print button for example, you can use the Table Actions Slot. If you have global search enabled, the action panel will show up to the right of that.

Note

You don't have to have global search enabled to use this slot.

<vue-good-table
  :columns="columns"
  :rows="rows">
  <div slot="table-actions">
    This will show up on the top right of the table. 
  </div>
</vue-good-table>
NameAgeCreated OnPercent
John 20 3.34%
Jane 24 Oct 304th 11 3.34%
Susan 16 Oct 303rd 11 3.34%

If you want a space for your buttons between pagination and the table. This is the slot you use.

<vue-good-table
  :columns="columns"
  :rows="rows">
  <div slot="table-actions-bottom">
    This will show up on the bottom of the table. 
  </div>
</vue-good-table>

Empty state slot

You can provide html for empty state slot as well. Example:

<vue-good-table
  :columns="columns"
  :rows="rows">
  <div slot="emptystate">
    This will show up when there are no rows
  </div>
</vue-good-table>

mode

type: String

Set mode=remote to allow sorting/filtering etc to be powered by server side instead of client side.

for a detailed workflow example check out Server Side Workflow

<vue-good-table
  :columns="columns"
  :rows="rows"
  mode="remote">
</vue-good-table>

totalRecords

type: Number

totalRecords is only useful for remote mode. When server controls pagination the table needs to know how many total rows exist.

total number of rows that exist given a table/filter. refer to remote workflow for more details

Last Updated: 7/4/2019, 7:48:15 PM