Component Series: Element Plus Table part 1
Tags: vue, component, beginners, javascript
Published: 2023-02-28 10:33:01

## Table of Contents
- [Introduction](#introduction)
- [Today Focus](#today-focus)
- [Installation process](#installation-process)
  - [Installation of Nodejs](#installation-of-nodejs)
  - [Installation of Vue](#installation-of-vue)
  - [Installation of element-plus](#installation-of-elementplus)
- [Working on component (table)](#working-on-component-table)
  - [Working with folder structure](#working-with-folder-structure)
- [Conclusion](#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](https://vuejs.org/guide/quick-start.html#creating-a-vue-application) and Element Plus as component base library [Element Plus](https://element-plus.org/en-US/guide/installation.html). 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-of-elementplus). 

## Installation process


### Installation of Nodejs
Before we go to install [Vue.JS](https://vuejs.org/guide/quick-start.html#creating-a-vue-application) we need to install [Node JS](https://nodejs.org/en/).
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](https://www.youtube.com/watch?v=4Wq53LL4alQ)
- [Mac](https://www.youtube.com/watch?v=SwUKKCS3r3c)
- [Ubuntu](https://www.youtube.com/watch?v=3hzShQSrIy8)

### 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](https://vuejs.org/guide/quick-start.html#creating-a-vue-application). 
Here is my setup after running the commend line.

![Install vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flyajcwz1yttr80h5p13.png)

### Installation of element-plus
Element Plus is a UI component base library for Vue 3. To follow the official documentation [Element-Plus](https://element-plus.org/en-US/guide/installation.html#version).
You are required to change directory to your project, and run this commend line. `npm install element-plus --save`. 
After successfully install. 
![Install element-plus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0x6m7zpo8818ruvb3rj.png)

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.
```javascript
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`. 
![Npm run dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9svb2q0cxela1cmfezft.png)

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

![Local Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arwqdwstq3rh6wdot80v.png)

### 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`.

![TableComponent.vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47x6plbcq5jmwqpr788k.png)

I am going copy and paste the component code base from the official website [Table basic](https://element-plus.org/en-US/component/table.html#basic-table) to `components/TableComponent.vue`. 
```javascript

<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.

```javascript
<template>
  <TableComponent />
</template>

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


![After import component to App.vue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfomwphutapvei0f0irk.png)

## 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](https://github.com/TeLoardBruh/Blog-Componentseries).