Ember 테이블 사용자 정의 정렬 표시기

EmberTable은 EmberJS의 매우 강력한 애드온으로 상당한 유연성을 제공합니다.

스타일에 tailwindcss을 사용하고 아이콘에 FontAwesome을 사용하고 있기 때문에 표시기 정렬을 위한 사용자 지정 구성 요소를 만들 수 있기를 정말로 원했습니다.

the docs부터 무엇을 해야 할지 직접적으로 명확하지 않았기 때문에 이 작은 글을 작성하기로 결정했습니다.

코드

먼저 나중에 생성할 구성 요소를 사용하도록 EmberTable 알려야 합니다.

{{!-- app/application/template.hbs --}} 

<EmberTable as |t| >
  <t.head @columns={{@columns}} as |h| >
    <h.row as |r| >
      <r.cell as |columnValue columnMeta| >
        {{!-- Our new component --}}
        <CustomSorter @columnMeta={{columnMeta}} />

        {{columnValue.name}}
      </r.cell>
    </h.row>
  </t.head>

  <t.body @rows={{rows}} />
</EmberTable>

이제 우리의 새로운 구성 요소:

{{!-- app/components/custom-sorter.hbs --}}

{{#if @columnMeta.isSorted}}
  {{#if @columnMeta.isSortedAsc}}
    <FaIcon @icon="sort-up" class="text-gray-500" />
  {{else}}
    <FaIcon @icon="sort-down" class="text-gray-500" />
  {{/if}}
{{/if}}

일부 추가 테이블 스타일이 포함된 출력은 다음과 같을 수 있습니다.

편집

2021-01-07

sortIndex 인데도 불구하고 isSortedAsc 섭취하고 싶을 때 기겁하는 계산용isSorted===false에 기침이 별로code in ember-table 있음을 알게 되었습니다. 여기에서도 작동하도록 코드를 업데이트했습니다.


Michael Schwarzenberger에서 Pixabay의 이미지