[Nuxt.js] Componentizing Table Elements

2022-08-04
 |  No Comments

I would like to leave a note about component design when creating tables with Nuxt.js.

The directory structure is as follows :

- src
　　L assets
　　L components
　　　　L atoms
　　　　L molecules
　　　　　　L gridTable.vue
　　　　L organisms
　　　　　　L detail.vue
　　L pages
　　　　L index.vue

I have created two components (gridTable.vue, detail.vue) .
In the overall page, details to be described in table format are in detail.vue, and the structural part to display them in table format is in gridTable.vue.

<- parent: table.vue !->
<template>
 <grid-table :data="tableData" :columns="tableColumns" />
</template>

<script>
import gridTable from '~/components/Molecules/gridTable'

export default {
 name: 'Detail',

 components: {
   gridTable
 },

 data() {
   return {
     tableData: [
       {
         item: 'FooFoo',
         description:
           'foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo'
       },
       {
         item: 'FooFoo',
         description:
           'foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo'
       },
       {
         item: 'FooFoo',
         description:
           'foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo'
       },
       {
         item: 'FooFoo',
         description:
           'foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo'
       }
     ],
     tableColumns: ['item', 'description']
   }
 }
}
</script>

<style lang="scss" scoped>
@import '~/assets/css/setting/_foofoo.scss';
</style>
<- child: gridTable.vue !->
<template>
 <section id="detail" data-ult="on">
   <h3>table elements</h3>
   <div class="grid-table">
     <no-ssr>
       <table>
         <tbody>
           <tr v-for="(entryVal, entryKey) in iterationData" :key="entryKey">
             <td v-for="key in columns" :key="key">
               <p v-html="entryVal[key]" />
             </td>
           </tr>
         </tbody>
       </table>
     </no-ssr>
   </div>
 </section>
</template>

<script>
export default {
 name: 'Table',
 props: {
   data: Array,
   columns: Array
 },
 computed: {
   iterationData() {
     let data = this.data

     return data
   }
 }
}
</script>

<style lang="scss" scoped>
@import '~/assets/css/setting/_foofoo.scss';
</style>

※ This article is an English rewrite of my Japanese article published on August 4, 2019.

Tags: