vue2_frontend init..

src/views/todo/listView.vue

@@ -54,17 +54,39 @@
           label-sort-clear=""
           @filtered="onFiltered"
         >
+          <template #table-colgroup="scope">
+            <col
+              v-for="field in scope.fields"
+              :key="field.key"
+              :style="{ width: field.width }"
+            />
+          </template>
           <template #cell(selected)="row">
             <input
               type="checkbox"
               :value="row.item.id"
               @change="checkedIdsToggle(row.item.id)"
             />
-            {{ row.item.id }}
           </template>
           <template #cell(index)="row">
             {{ total - (currentPage * perPage + row.index) + perPage }}
           </template>
+          <template #cell(title)="row">
+            {{ row.item.title }}
+            <b-button size="sm" @click="row.toggleDetails" class="mr-2">
+              {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
+            </b-button>
+          </template>
+          <template #row-details="row">
+            <b-card>
+              <b-row class="mb-2">
+                <b-col><span v-html="row.item.content"></span></b-col>
+              </b-row>
+              <b-button size="sm" @click="row.toggleDetails"
+                >Hide Details</b-button
+              >
+            </b-card>
+          </template>
           <template #table-busy>
             <div class="text-center text-danger my-2">
               <b-spinner class="align-middle"></b-spinner>
@@ -112,26 +134,28 @@ export default {
       fields: [
         {
           key: 'selected',
-          label: ''
+          label: '',
+          width: '10px'
         },
-        { key: 'index', label: '번호' },
+        { key: 'index', label: '번호', width: '55px' },
         {
           key: 'title',
-          label: '타이틀',
-          sortable: true,
-          sortDirection: 'desc',
-          filterByFormatted: true
-        },
-        {
-          key: 'content',
-          label: '내용',
+          label: '제목',
           sortable: true,
           sortDirection: 'desc',
           filterByFormatted: true
         },
+        // {
+        //   key: 'content',
+        //   label: '내용',
+        //   sortable: true,
+        //   sortDirection: 'desc',
+        //   filterByFormatted: true
+        // },
         {
           key: 'is_done',
           label: '사용여부',
+          width: '105px',
           // formatter: (value, key, item) => {
           formatter: (value) => {
             return value ? 'Yes' : 'No'
@@ -144,6 +168,7 @@ export default {
         {
           key: 'createdAt',
           label: '登録日時',
+          width: '105px',
           formatter: (value) => {
             return value.replace(
               /([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi,