Vue-good-table
Vue-good-table
Source
Edit
History

Table Options

카탈로그
  1. 1. Table Options
    1. 1.1. columns
    2. 1.2. rows
    3. 1.3. max-height
    4. 1.4. fixed-header
    5. 1.5. line-numbers
    6. 1.6. row-style-class
    7. 1.7. rtl
    8. 1.8. Table Actions Slot
    9. 1.9. Table Actions Footer Slot
    10. 1.10. Empty state slot
    11. 1.11. mode
    12. 1.12. totalRecords

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.

1
2
3
4
5
6
7
8
[
    {
      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.

1
2
3
4
5
6
7
8
[
    {
      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

1
2
3
4
5
<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.

1
2
3
4
5
6
<vue-good-table
  :columns="columns"
  :rows="rows"
  max-height="200px"
  :fixed-header="true">
</vue-good-table>

::: tip
Fixed header should probably be used with max-height
:::

line-numbers

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

1
2
3
4
5
<vue-good-table
  :columns="columns"
  :rows="rows"
  :line-numbers="true">
</vue-good-table>

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.

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

rtl

type: Boolean (default: false)

Enable Right-To-Left layout for the table

1
2
3
4
5
<vue-good-table
  :columns="columns"
  :rows="rows"
  :rtl="true">
</vue-good-table>

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.

::: tip Note
You don’t have to have global search enabled to use this slot.
:::

1
2
3
4
5
6
7
<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>

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

1
2
3
4
5
6
7
<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:

1
2
3
4
5
6
7
<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

1
2
3
4
5
<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