Component Series: Element Plus Table part 1

Table of Contents

• Introduction
• Today Focus
• Installation process
  • Installation of Nodejs
  • Installation of Vue
  • Installation of element-plus
• Working on component (table)
  • Working with folder structure
• Conclusion

Introduction

In this series we are going to focus on using a modern frontend framework with component base library to solve our problems as a frontend developer.

Today Focus

Today we are going to install one of the modern frontend framework which is Vue.JS and Element Plus as component base library Element Plus. You can skip ahead to the section where I implement and import the library into Vue if that technology is already installed on your system Installation of element-plus.

Installation process

Installation of Nodejs

Before we go to install Vue.JS we need to install Node JS.
Node.js is a free, open-source server environment that may be used with Windows, Linux, Mac OS, and Unix.

I am going to leave few links for installation step for this different operating system.

• Window
• Mac
• Ubuntu

Installation of Vue

After successfully install Nodejs you can move to installing Vuejs. By running those commend line.
npm init vue@latest
For more explanation, please refer to these official publications Guide quick-start.
Here is my setup after running the commend line.

Installation of element-plus

Element Plus is a UI component base library for Vue 3. To follow the official documentation Element-Plus.
You are required to change directory to your project, and run this commend line. npm install element-plus --save.
After successfully install.

After install element-plus, you are required to import the installation to src/main.js. This step allow Vue and element-plus to recognize one another and enables us to use the component created by element-plus. Here is the code.

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

createApp(App).use(ElementPlus).mount('#app');

Working on component (table)

To run vue locally you can using this commend line.
npm run dev.

What you can see after you visit your locally host. (Mine is http://127.0.0.1:5173/ as default.

Working with folder structure

By best practice we recommend to put component as in components folder that exist in the src directory. Therefore, I am going to create a component name Table, in components/TableComponent.vue.

I am going copy and paste the component code base from the official website Table basic to components/TableComponent.vue.

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

Even though, you continue to wonder why the website remains unchanged.It is because you have not import the component into the main page. Now I am going to go to src/App.vue to delete all the lines of the code and replace with this instead.

<template>
  <TableComponent />
</template>

<script lang="ts" setup>
import TableComponent from './components/TableComponent.vue';
</script>

Conclusion

This concludes today's article. In the following one, I'll give you more information about using the table component in element-plus because it can accept props and render with keys and values from the props. You can check out my github for complete code Finish project.