[Vue.js + Vuetify.js] v-data-table 그리드에 모든 Row를 뿌리는 방법(기본 페이징 처리 없애는 방법)

떠돌이개발자Mar 22, 2023

<v-data-table> 태그를 사용하여 그리드를 생성 후 데이터를 조회하면 아래와 같이 페이징 처리가 되어있다.

  <v-data-table height="100px"
    ref="itemTable"
    v-model="tables.item.selectedRow"
    :headers="tables.item.headers"
    :items="data.List"
    @click:row="clickRow"
    item-key="keyId"
    single-select
    disable-sort
    class="elevation-1"
  >
  </v-data-table>

v-data-table(그리드)의 페이지당 행에 해당하는 값을 변경하는 방법

Understand `rows-per-page-items` at Vuetify Data iterators + Data tables, can I set default page?

At Vuetify docs for Data Tables, and docs for Data Iterators I do not manage to understand the rows-per-page-items prop usage and its options, nor find any in-details explanation at any other place.

stackoverflow.com

v-data-table 태그 속성 값으로 hide-default-footer를 주면 하단에 보이는 페이징 처리를 감출 수 있다.

vuetify v-data-table show all rows

그렇다면 모든 행(row)를 그리드에 뿌리는 방법은 무엇일까?

바로 disable-pagination 속성값을 주면 모든 Row를 그리드에 보여줄 수 있다.

  <v-data-table height="100px"
    ref="itemTable"
    v-model="tables.item.selectedRow"
    :headers="tables.item.headers"
    :items="data.List"
    @click:row="clickRow"
    item-key="keyId"
    single-select
    disable-sort
    class="elevation-1"
    hide-default-footer
    disable-pagination
  >
  </v-data-table>

[REFERENCE]