title: Quasar: How to give props in q-table to parent component?
body: <p>I have created <code>TableTop5</code> component using <code>q-table</code>, so that I can reuse it in <code>VisitorSummary.vue</code>, but I have no clue how to get <code>props</code> which should be written in <code>v-slot:header</code> and <code>v-slot:body</code>.</p>
  <p>VisitorSummary.vue</p>
  <pre class="lang-js prettyprint-override"><code>    ...
      &lt;div class=&quot;row card-wrap row-sec&quot;&gt;
        &lt;table-top-5 title=&quot;검색어 TOP5&quot; titleWord=&quot;검색어 TOP5&quot;
          :data=&quot;data&quot; :columns=&quot;columns&quot; :rowFirst=&quot;rank&quot; // &lt;-- it gives me errors..
          :rowSec=&quot;keyword&quot; :rowThird=&quot;visitor&quot; :props=&quot;props&quot; // &lt;-- i can feel it isn't right..
        &gt;
        &lt;/table-top-5&gt;
      &lt;/div&gt;
      ...
  
  &lt;script lang=&quot;ts&quot;&gt;
  import Vue from 'vue';
  import axios from 'axios';
  import VueApexCharts from 'vue-apexcharts'
  
  import NumberCount from 'components/card/NumberCount.vue'
  import NumberCountSet from 'components/card/NumberCountSet.vue';
  import TitleWithTooltip from 'components/card/TitleWithTooltip.vue'
  import TableTop5 from 'components/table/TableTop5'
  
  Vue.use(VueApexCharts)
  Vue.component('apexchart', VueApexCharts)
  
  export default Vue.extend({
    components: {
      NumberCountSet,
      NumberCount,
      TitleWithTooltip,
      TableTop5,
    },
    data() {
      return {
        
        columns: [
          {
            name: 'rank',
            required: true,
            label: '순위',
            align: 'center',
            field: row =&gt; row.rank,
            format: val =&gt; `${val}`,
            sortable: true,
            style: 'width: 10%;'
          },
          { name: 'keyword', align: 'left', label: '검색어', field: 'keyword', sortable: true,
          style: 'width: 70%; background:RGBA(0,178,45,0.05) '  },
          { name: 'visitor', align: 'center', label: '방문자수', field: 'visitor', sortable: true, style: 'width: 20%' },
        ],
        data: [
          {
            rank: 1,
            keyword: 'slimplanet',
            visitor: 25,
          },
          {
            rank: 2,
            keyword: 'test',
            visitor: 58,
          },
          {
            rank: 3,
            keyword: 'test',
            visitor: 64,
          },
          {
            rank: 4,
            keyword: 'Slimplanet',
            visitor: 72,
          },
          {
            rank: 5,
            keyword: 'test',
            visitor: 18,
          },
        ],
      };
    },
    
  });
  &lt;/script&gt;
  
  </code></pre>
  <p>TableTop5.vue</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;q-card class=&quot;card-item&quot;&gt;
      &lt;q-card-section class=&quot;q-pa-none&quot;&gt;
        &lt;div&gt;
          &lt;q-table
            :data=&quot;data&quot;
            :columns=&quot;columns&quot;
            row-key=&quot;name&quot;
            class=&quot;no-shadow q-pb-md q-px-md&quot;
            :hide-pagination=&quot;true&quot;
          &gt;
            &lt;template v-slot:header=&quot;props&quot;&gt;
              &lt;q-tr :props=&quot;props&quot;&gt;
                &lt;q-th
                  v-for=&quot;col in props.cols&quot;
                  :key=&quot;col.name&quot;
                  :props=&quot;props&quot;
                  style=&quot;font-weight: bold&quot;
                &gt;
                  {{ col.label }}
                &lt;/q-th&gt;
              &lt;/q-tr&gt;
            &lt;/template&gt;
            &lt;template v-slot:body=&quot;props&quot;&gt;
              &lt;q-tr :props=&quot;props&quot;&gt;
                &lt;q-td key=&quot;rowFirst&quot; :props=&quot;props&quot;&gt;
                  {{ rowFirst }}
                &lt;/q-td&gt;
                &lt;q-td key=&quot;rowSec&quot; :props=&quot;props&quot;&gt;
                  {{ props.row.rowSec }}
                &lt;/q-td&gt;
                &lt;q-td key=&quot;rowThird&quot; :props=&quot;props&quot;&gt;
                  &lt;q-badge color=&quot;black&quot; outline&gt;
                    {{ props.row.rowThird }}
                  &lt;/q-badge&gt;
                &lt;/q-td&gt;
              &lt;/q-tr&gt;
            &lt;/template&gt;
          &lt;/q-table&gt;
        &lt;/div&gt;
      &lt;/q-card-section&gt;
    &lt;/q-card&gt;
  &lt;/template&gt;
  
  &lt;script lang=&quot;ts&quot;&gt;
  import Vue from 'vue';
  export default Vue.extend({
    name: 'TableTop5',
    props: {
      title: {
        type: String
      },
      titleWord: {
        type: String
      },
      data: {
        type: Array
      },
      columns: {
        type: Array
      },
      rowFirst: {
        type: String
      },
      rowSec: {
        type: String
      },
      rowThird: {
        type: String
      },
      props: {
        type: Object
      }
    }
  });
  &lt;/script&gt;
  </code></pre>
  <p>Or should i just not reuse and write <code>q-table</code> whenever I need it in a row?</p>