Front-End프로그래밍

[Vue3, PrimeVue] DataTable 그리드 리스트 컬럼 정렬 변경 방법

떠돌이개발자

프라임뷰 그리드 리스트에서 특정 컬럼에 대한 왼쪽 정렬을 해야할 때가 있다. 기본값으로 가운데 정렬이 이루어지는데, 왼쪽 정렬하는 방법에 대한 삽질 기록을 추가해본다.

아래와 같이 API를 호출하여 가져온 결과값에 대해 카멜타입으로 field명을 지정하여 데이터를 맵핑하고 있다. 

const cols4 = [
  { field: 'titleText', header: '제목', sortable: true },
  { field: 'contextText', header: '내용', style: 'w-[37.5rem]', sortable: true },
];
<DataTable ref="dt" :value="notiList" show-gridlines resizable-columns :column-resize-mode="resizeColMod"
          class="mb-16" v-model:selection="selectedNoti" data-key="rnum" scrollable scroll-height="200px"
          @row-click="onListClick" row-hover>
          <template #empty>
            <NoData />
          </template>
          <Column v-for="(col, index) in cols4" :key="index" :field="col.field" :header="col.header"
            :selection-mode="index === 0 ? 'multiple' : undefined"></Column>
        </DataTable>

내용에 대한 컬럼을 왼쪽 정렬 시도 기록이다. style은 inline CSS로 적용되어 Tailwind 유틸 클래스가 안 먹히므로, class 속성으로 바꿔보았다.

{ field: 'contextText', 
header: '내용', 
class: 'w-[37.5rem] text-left', 
sortable: true }
<Column
  v-for="(col, index) in cols"
  :key="index"
  :field="col.field"
  :header="col.header"
  :class="col.class" <!-- 여기 변경 -->
  :sortable="col.sortable"
>
  <template v-if="col.sortable" #sorticon="{ sortOrder }">
    <TableSortIcon :sort-order="sortOrder" />
  </template>
</Column>

실패! 동작하지 않고 가운데 정렬이 된다.

두번째 시도

{ field: 'contextText', 
header: '내용', 
style: 'width: 37.5rem',
bodyClass: 'text-left'
sortable: true }

템플릿에서 :body-class=”col.bodyClass”로 바인딩

<Column
  v-for="(col, index) in cols"
  :key="index"
  :field="col.field"
  :header="col.header"
  :sortable="col.sortable"
  :style="col.style"
  :body-class="col.bodyClass" <!-- Tailwind 정렬 클래스 적용 -->
>
  <template v-if="col.sortable" #sorticon="{ sortOrder }">
    <TableSortIcon :sort-order="sortOrder" />
  </template>
</Column>

여전히 동작하지 않는다.

해결방법은?

현재까지 bodyClass, style, class 전부 적용했는데도 내용 칼럼이 왼쪽 정렬이 안 보이고, 최종적으로 PrimeVue <Column>의 바디 슬롯 (#body)을 직접 오버라이드해서 해결하는 게 확실한 방법이다. 템플릿으로 따로 렌더링해야한다.


직접 #body 슬롯 사용해서 왼쪽 정렬 처리

PrimeVue의 <Column>은 내부적으로 <td> 안쪽 내용을 커스터마이즈할 수 있는 #body 슬롯을 지원다.

수정: contextText 컬럼만 직접 렌더링

<Column
  v-if="col.field !== 'contextText'"
  v-for="(col, index) in cols"
  :key="index"
  :field="col.field"
  :header="col.header"
  :sortable="col.sortable"
  :style="col.style"
  :body-class="col.bodyClass"
>
  <template v-if="col.sortable" #sorticon="{ sortOrder }">
    <TableSortIcon :sort-order="sortOrder" />
  </template>
</Column>

<!-- 🔽 contextText는 직접 템플릿으로 따로 렌더링 -->
<Column field="contextText" header="내용" :sortable="true" style="width: 37.5rem;">
  <template #body="{ data }">
    <div class="text-left">
      {{ data.contextText}}
    </div>
  </template>
  <template #sorticon="{ sortOrder }">
    <TableSortIcon :sort-order="sortOrder" />
  </template>
</Column>

cols에서 contextText 삭제

const cols = [
  { field: 'rnum', header: '순번' },
  { field: 'regDt', header: '저장일시', sortable: true },
  { field: 'titleText', header: '제목', sortable: true },
  // { field: 'contextText', header: '내용', style: 'w-[37.5rem]', sortable: true } ←❌ 이 줄 삭제
];



설명

  • field: 'contextText' 컬럼은 직접 <Column> 하나 따로 뽑아 렌더링
  • #body="{ data }" 슬롯에서 <div class="text-left">로 감싸서 왼쪽 정렬 명시
  • 이렇게 하면 PrimeVue 내부에서 class 섞여 깨지는 것 없이 확실하게 적용됨

[관련자료]

Related Posts

error: Content is protected !!