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',
    }
    //...
]

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
    },
    //...
]

TIP

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>

Name	Age	Created On	Percent

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%
Chris	55	Oct 11th 11	3.34%
Dan	40	Oct 21st 11	3.34%
John	20	Oct 31st 11	3.34%

TIP

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>

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 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>

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 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">
  <template #table-actions>
    This will show up on the top right of the table. 
  </template>
</vue-good-table>

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%

Table Actions Footer Slot

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">
  <template #table-actions-bottom>
    This will show up on the bottom of the table. 
  </template>
</vue-good-table>

Empty state slot

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

<vue-good-table
  :columns="columns"
  :rows="rows">
  <template #emptystate>
    This will show up when there are no rows
  </template>
</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

TIP

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

compactMode

type: Boolean (default: false)

Enable mobile-friendly List view on small devices (screenSize below 576px)

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

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%