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

Grouped Table

카탈로그
  1. 1. Grouped Table
    1. 1.0.0.1. 1. Add groupOptions to table component
    2. 1.0.0.2. 2. Make sure the rows are formatted correctly. Grouped rows need to be nested within header rows containing data rows in their children property. For example:
    3. 1.0.0.3. 3. Sometimes, you might want a summary row instead of a header row. For example, if you want to show total count for your group
    4. 1.0.0.4. 4. If you want the header/summary row to show up at the bottom of the group, you can specify that in the groupOptions property of the table.
    5. 1.0.0.5. 5. What if you wanted to add a total count in summary rows?
  • 1.1. Customizing Header Row
    1. 1.1.1. When mode is ‘span’
    2. 1.1.2. When mode is not ‘span’
  • 1.2. Collapsable Rows

    • Grouped Table

    To create grouped rows, you need two things.

    1. Add groupOptions to table component

    1
    2
    3
    4
    5
    6
    7
    8
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :groupOptions="{
      	enabled: true
      }"
    >
    </vue-good-table>

    2. Make sure the rows are formatted correctly. Grouped rows need to be nested within header rows containing data rows in their children property. For example:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    rows: [
      {
        mode: "span", // span means this header will span all columns
        label: "Mammal", // this is the label that'll be used for the header
        html: false, // if this is true, label will be rendered as html
        children: [
          { name: "Elephant", diet: "herbivore", count: 5 },
          { name: "Cat", diet: "carnivore", count: 28 }
        ]
      }
    ];

    3. Sometimes, you might want a summary row instead of a header row. For example, if you want to show total count for your group

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    rows: [
      {
        name: "Mammals Total", // this is the label that'll be used for the header
        diet: undefined,
        count: "", // total count will be displayed here
        children: [
          { name: "Elephant", diet: "herbivore", count: 5 },
          { name: "Cat", diet: "carnivore", count: 28 }
        ]
      }
    ];

    4. If you want the header/summary row to show up at the bottom of the group, you can specify that in the groupOptions property of the table.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :groupOptions="{
      	enabled: true,
        headerPosition: 'bottom',
      }"
    >
    </vue-good-table>

    5. What if you wanted to add a total count in summary rows?

    In your column definition add a property, headerField. This is just like field property but for summary/header rows only. So lets say we wanted to add a sum function to this field.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // in columns
    {
      label: 'Count',
      field: 'count',
      headerField: this.sumCount,
      type: 'number',
    },

    // in methods we define sumCount
    methods: {
      sumCount(rowObj) {
        console.log(rowObj);
        let sum = 0;
        for (let i = 0; i < rowObj.children.length; i++) {
          sum += rowObj.children[i].count;
        }
        return sum;
      },
    },

    Customizing Header Row

    If you want more control over what the header row looks like, you can use slots the same way you customize rows. For example if you want to add a button in the header row or something, this would be the way to do it.

    When mode is ‘span’

    In this case, the header row spans across all columns

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :group-options="{
        enabled: true,
        headerPosition: 'top'
      }"
    >
        <template slot="table-header-row" slot-scope="props">
          <span class="my-fancy-class">
            {{ props.row.label }}
          </span>
        </template>
      </vue-good-table>

    When mode is not ‘span’

    In this case header row expects a value for each column

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :group-options="{
        enabled: true,
        headerPosition: 'top'
      }"
    >
        <template slot="table-header-row" slot-scope="props">
          <span v-if="props.column.field == 'action'">
            <button class="fancy-btn">Action</button>
          </span>
          <span v-else>
            {{props.formattedRow[props.column.field]}}
          </span>
        </template>
      </vue-good-table>

    ::: tip

    • The original row object can be accessed via props.row
    • The column object can be accessed via props.column
    • You can access the formatted row data (for example - formatted date) via props.formattedRow
      :::

    Collapsable Rows

    To allow the row to collapse and expand you can use the groupOption “collapsable”. You can either pass in a boolean or a number.
    If collapsable is set to true then it will default to making the first column collapsable. Alternatively, you can specify the column index number.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <vue-good-table
      ref="myCustomTable"
      :columns="columns"
      :rows="rows"
      :groupOptions="{
        enabled: true,
        collapsable: true // or column index
      }"
    >
    </vue-good-table>

    To expand/collapse all you can use the method called expandAll or collapseAll.

    1
    2
    this.$refs.myCustomTable.expandAll();
    this.$refs.myCustomTable.collapseAll();