Category: Vue

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Select Event

We can listen to the table row select all event which is emitted when all the table rows are selected.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :select-options="{ enabled: true }"
      @on-select-all="onSelectAll"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  },
  methods: {
    onSelectAll(params) {
      console.log(params);
    }
  }
};
</script>

We add a checkbox to each row to let us select the row with the select-options prop with an object that has the enabled property set to true .

Also, we added a checkbox to select all the rows on the top left corner.

Search Options

We can add a search box to our vue-good-table .

All we have to do is to add the search-options prop with an object with various options.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        placeholder: 'Search table',
      }"
      @on-search="onSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We added the search-options prop with an object with various properties.

The enabled property set to true will make the search box show above the table.

placeholder lets us add a placeholder to for the search box.

We can also change the trigger property to change the way that a search is triggered.

For instance, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        placeholder: 'Search table',
        trigger: 'enter'
      }"
      @on-search="onSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We set trigger to 'enter' so that the search is done only when we press Enter.

Also, we can add the skipDiacritics property to stop vue-good-table from comparing accented characters.

This will speed up our search.

For instance, we add:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        skipDiacritics: true,
      }"
      @on-search="onSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

to skip accented character comparison.

To customize how the search is done, we can set the searchFn property to our own function.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        searchFn
      }"
      @on-search="onSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  },
  methods: {
    searchFn(row, col, cellValue, searchTerm) {
      return cellValue === searchTerm;
    }
  }
};
</script>

We have the searchTerm with the search term.,

cellValue has the cell value that can be compared with the search term to find a matching row.

row and col have the row and column objects respectively.

Conclusion

We can add a search box to do table searches with vue-good-table.

Also, we can enable row selection and get what’s selected.

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Pagination Options

We can add pagination with the vue-good-table component.

To add it, we add the pagination-options prop:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :pagination-options="{
        enabled: true,
        mode: 'records',
        perPage: 3,
        position: 'top',
        perPageDropdown: [3, 7, 9],
        dropdownAllowAll: false,
        setCurrentPage: 2,
        nextLabel: 'next',
        prevLabel: 'prev',
        rowsPerPageLabel: 'Rows per page',
        ofLabel: 'of',
        pageLabel: 'page',
        allLabel: 'All',
      }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" },
        { id: 4, name: "James", age: 18, birthDay: "2002-10-30" }
      ]
    };
  }
};
</script>

We add the pagination-options prop and set its value to an object with some properties.

enabled indicates whether we want to enable pagination.

mode can be either 'records' or 'pages' .

'pages' lets us jump to any page.

perPage is the number of items per page.

position is the position of the pagination bar.

perPageDropdown is the values for the number of items in a page.

dropdownAllowAll indicates whether we want to display the ‘All’ option in the pagination dropdown.

setCurrentPage lets us set the current page.

nextLabel is the label for the button for going to the next page.

prevLabel is the label for the button for going to the previous page.

rowsPerPageLabel is the number of rows per page.

ofLabel is the label for the ‘of’ word in the pagination display.

pageLabel is the unit for the page we display.

allLabel lets us change how the ‘All’ choice is displayed.

Customizations

We can apply various customizations with vue-good-table.

One of them is the customizing the row.

To do that, we can populate the tabler-row slot.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <template slot="table-row" slot-scope="props">
        <span v-if="props.column.field == 'age'">
          <span style="font-weight: bold;">{{props.row.age}}</span>
        </span>
        <span v-else>{{props.formattedRow[props.column.field]}}</span>
      </template>
    </vue-good-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

With the table-row slot, we can customize how cells are displayed.

In our example, we check if the field is 'age' .

If it is, we bold the text.

Otherwise, we display it normally with the formattedRow property.

props.row has the row data.

props.column.field has the field data.

Conclusion

We can customize how rows are displayed and add pagination with vue-good-table.

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Table Actions Slot

We can populate the slots with our own content.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <div slot="table-actions">top slot.</div>
    </vue-good-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "2011-10-31" },
        { id: 3, name: "Susan", age: 16, birthDay: "2011-10-30" }
      ]
    };
  }
};
</script>

We set the slot prop to table-actions to populate the table-actions slot.

The content will be shown above the table headings.

Empty state slot

We can also display something when the table is empty.

For instance, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows">
      <div slot="emptystate">Nothing to show</div>
    </vue-good-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: []
    };
  }
};
</script>

We populate the emptystate slot to display something when rows is empty.

The content will be shown in place of the row cells.

Mode

We can set the mode to remote so to allow sorting and filtering to be powered by server-side instead of client-side:

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

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "2011-10-31" },
        { id: 3, name: "Susan", age: 16, birthDay: "2011-10-30" }
      ]
    };
  }
};
</script>

Compact Mode

We can add the compactMode prop to display the table in compact mode.

For example, we can write:

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

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "2011-10-31" },
        { id: 3, name: "Susan", age: 16, birthDay: "2011-10-30" }
      ]
    };
  }
};
</script>

Now the columns will be stacked when our screen is narrow.

Conclusion

We can populate various slots to display content on the top of the table or when there’s no content.

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Select Event

We can listen to the table row select all event which is emitted when all the table rows are selected.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :select-options="{ enabled: true }"
      @on-select-all="onSelectAll"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  },
  methods: {
    onSelectAll(params) {
      console.log(params);
    }
  }
};
</script>

We add a checkbox to each row to let us select the row with the select-options prop with an object that has the enabled property set to true .

Also, we added a checkbox to select all the rows on the top left corner.

Search Options

We can add a search box to our vue-good-table .

All we have to do is to add the search-options prop with an object with various options.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        placeholder: 'Search table',
      }"
      @on-search="onSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We added the search-options prop with an object with various properties.

The enabled property set to true will make the search box show above the table.

placeholder lets us add a placeholder to for the search box.

We can also change the trigger property to change the way that a search is triggered.

For instance, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        placeholder: 'Search table',
        trigger: 'enter'
      }"
      @on-search="onSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

We set trigger to 'enter' so that the search is done only when we press Enter.

Also, we can add the skipDiacritics property to stop vue-good-table from comparing accented characters.

This will speed up our search.

For instance, we add:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        skipDiacritics: true,
      }"
      @on-search="onSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  }
};
</script>

to skip accented character comparison.

To customize how the search is done, we can set the searchFn property to our own function.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      :search-options="{
        enabled: true,
        searchFn
      }"
      @on-search="onSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  },
  methods: {
    searchFn(row, col, cellValue, searchTerm) {
      return cellValue === searchTerm;
    }
  }
};
</script>

We have the searchTerm with the search term.,

cellValue has the cell value that can be compared with the search term to find a matching row.

row and col have the row and column objects respectively.

Conclusion

We can add a search box to do table searches with vue-good-table.

Also, we can enable row selection and get what’s selected.

Creating tables from scratch is a pain.

This is why there are many table plugins to let us add tables easily.

In this article, we’ll look at how to add tables to a Vue app with the vue-good-table plugin.

Table Events

We can listen to various events triggered by the vue-good-table component.

One of them is the row mouse leave event.

To listen to it, we can listen to the on-row-mouseleave event:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" @on-row-mouseleave="onRowMouseleave"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Susan", age: 16, birthDay: "2004-10-30" }
      ]
    };
  },
  methods: {
    onRowMouseleave(row, pageIndex) {
      console.log(row, pageIndex);
    }
  }
};
</script>

row is an object with the row properties.

pageIndex is the index of the row that our mouse left.

The on-page-change event lets us listen to page change events.

For example, we can write:

<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"
      @on-page-change="onPageChange"
      :pagination-options="{
        enabled: true,
        perPage: 5,
      }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" },
        { id: 4, name: "Sue", age: 16, birthDay: "2004-1-30" },
        { id: 5, name: "Alex", age: 16, birthDay: "2004-3-30" },
        { id: 6, name: "Susan", age: 16, birthDay: "2004-5-30" }
      ]
    };
  },
  methods: {
    onPageChange(params) {
      console.log(params);
    }
  }
};
</script>

We add a table with the pagination-options prop to add pagination to our table.

enabled lets us enable pagination.

perPage lets us set how many rows to display per page.

The on-page-change directive is set to the onPageChange method with the params object.

The object has the currentPage , currentPerPage , total , and prevPage properties.

currentPage has the current page’s number.

currentPerPage has the number of rows to display.

total has the total number of items in the table.

prevPage has the page number of the previous page.

Also, we can listen to the on-sort-change event to listen to table sorting changes.

For example, we can write:

<template>
  <div>
    <vue-good-table :columns="columns" :rows="rows" @on-sort-change="onSortChange"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "Name",
          field: "name"
        },
        {
          label: "Age",
          field: "age",
          type: "number"
        },
        {
          label: "Birthday",
          field: "birthDay",
          type: "date",
          dateInputFormat: "yyyy-MM-dd",
          dateOutputFormat: "MMM do yy"
        }
      ],
      rows: [
        { id: 1, name: "John", age: 20, birthDay: "2000-01-20" },
        { id: 2, name: "Jane", age: 24, birthDay: "1996-10-31" },
        { id: 3, name: "Mary", age: 16, birthDay: "2004-10-30" }
      ]
    };
  },
  methods: {
    onSortChange(params) {
      console.log(params);
    }
  }
};
</script>

to listen to the event.

params has the field and type properties.

field has the property name that we’re sorting.

The type has the direction that we’re sorting.

Conclusion

We can listen to pagination and sorting events emitted from the vue-good-table component.