Consulink Internship
In my second year of studying Software Development in the Netherlands, I started with half a year of internship, which I did at a company called Consulink. Consulink builds software services for modern service channels. Using this Software companies can gain feedback from their customers on products and services. My job during my internship was to create a new modern front-end application that houses a complex datagrid that allows for functinos like editing, sorting, searching, and paging.
Datatable
Let's start with the datatable endresult of my internship. You can see the datatable to the right of this text, this table was created using VueJS, Typescript, API connection, Primevue and Tailwind CSS.
Below here I will go into detail of all the features that this datatable houses and how they work.
.PNG)
Sorting
For the searching I went through different phases like using mock date, using function which I would later make dynamic, and what later would end up using a component for the end result. If you were to click on any of the sorting except for the ID it would be sorted alphabetically from asc/desc.
.jpg)
Searching
To get to this endresult I started of making a search for a mock data array. Which I Later would make dynamic and end up using an api. In this search you can go through all the data in the datatable. While searching it would keep updating with everything you type, and if there were to be 0 results found it would show that in the datatable.
.PNG)
Editing
To realise editing within the datagrid I made use of callbacks within the Primevue table. Within the table I added columns with their respective fields, text, numbers. After users performed the edit action the new data was sent to the back-end API and a refetch was performed.
.PNG)
Thumbnail Image Swiper
For the thumbnail image swiper I used the api for the img. I started of making it by clicking on the ID which would show the img that belongs to that ID and styled it using css. At the end I used a component from Primevue.
.PNG)
Paging
To create the paging I used the mock data at the beginning and created a function which would check the amount of pages based on the amount I want to be visible and the total returned arrays from the mock data array or the API. For the numbering of the paging I had if statements which would check if I was on the first or last page. In these if statements they would add up the amount of pages I want visible. To show the data I would basically calculate the amount of data to skip based on the amount of visible data on each page times the page I'm on.
See function below:
.PNG)
.png)