ng paginable

가능성

이것은 정렬 및 필터링 기능을 갖춘 테이블 구성 요소를 제공하는 각도 모듈입니다. Laravel 응답 및 기타 프레임 워크 및 부스트랩 레이아웃과의 상자 외 통합.

버전

모난	ng-pagination
> = 14.0.0 <15.0.0	v1.x

---

목차

• 특징
• 시작하기
• 변경 감지
• 맞춤형 스타일
• 검증 상태
• 기여
• 개발
• 영감

특징

• 사용자 정의 가능한 페이지 매김 개체
• 서버 또는 로컬 페이지 매김 옵션
• 필터링 및 정렬
• 템플릿을 통한 헤더, 셀, 필터, 오류 메시지 및 항목 없음 메시지의 사용자 정의
• 액션 버튼이있는 열
• 개인 및 여러 행 선택
• 선택을 반응 형태와 통합합니다
• 배치 액션 버튼 및 드롭 다운
• 열 크기 조정
• 글로벌 및 칼럼 별 검색 엔진
• 부트 스트랩 5에 적합
• 반응 형 테이블
• 페이지 매김 사용자 정의 옵션
• 접근성
• 확장 가능한 열

시작하기

설치

이 구성 요소를 설치하려면 프로젝트 디렉토리에서 다음 명령을 실행하십시오.

npm install ng-paginable --save 

용법

이 구성 요소를 사용하려면 모듈로 가져옵니다.

 import { NgPaginableModule } from 'ng-paginable' ;  
@ NgModule ( {   
	imports : [ NgPaginableModule . forRoot ( ) ] 
} ) 
export class AppModule { }      

 código del componente 

 < paginable-table [headers] =" headers " [pagination] =" pagination " >
</ paginable-table >

테이블 옵션

Paginated 테이블 구성 요소는 @Input() options 바인딩을 통해 스타일링 및 동작을 사용자 정의하기 위해 PaginableTableOptions 객체를 수용합니다.

사용 가능한 옵션은 다음과 같습니다.

• serverSidePagination 서버 측 페이지를 활성화합니다. 기본값은 False입니다.

• cursor - 행을 호버링 할 때 커서 스타일. 'pointer' 또는 'default' .

• hoverableRows - 호버에서 하이라이트 행을 활성화하십시오. 기본 false .

• striped - 스트라이프 테이블 'rows' 또는 'columns' .

• variant - 스타일 테이블의 색상 변형. string 값을 허용합니다.

예를 들어:

 @Component({

  // ...

})
export class TableComponent {

  options: PaginableTableOptions = {
    serverSidePagination: true,
    cursor: 'pointer',
    hoverableRows: true,  
    striped: 'columns',
    variant: 'dark'
  };

}

이를 통해 서버 측 페이지 매김, 행 호버링, 열 줄거리, 커스텀 커서 및 다크 테마 변형이 가능합니다.

variant 속성을 사용하면 문자열 값을 전달하여 사용자 정의 색상 테마를 테이블에 적용 할 수 있습니다. 몇 가지 일반적인 옵션은 'primary' , 'secondary' , 'success' , 'danger' 등입니다.

이는 설계 시스템 또는 테마 요구 사항에 따라 테이블 스타일을 사용자 정의 할 수있는 유연성을 제공합니다.

헤더 생성

Paginated 테이블의 헤더는 PaginableTableHeader 객체의 배열을 전달하여 구성됩니다.

각 헤더는 다음과 같은 속성을 가질 수 있습니다.

• title - 헤더 셀에 표시 할 텍스트.

• property - 행 데이터의 속성에 대한 키 매핑.

• icon - 제목 텍스트 옆에 표시 할 선택적 아이콘.

• align - 텍스트의 정렬, 'start' , 'center' 또는 'end' . 기본값은 'start' 입니다.

• sortable - 열을 정렬 할 수 있는지 여부. 기본값은 false 입니다.

• wrapping - 열의 텍스트가 랩 될 수 있는지 여부. 'wrap' 또는 'nowrap' . 기본값은 'nowrap' 입니다.

• sticky - 스크롤 할 때 헤더를 테이블의 'start' 또는 'end' 에 넣습니다.

• buttons - 헤더에 표시 할 버튼 또는 드롭 다운 배열.

• filter - 열에 필터링을 추가하십시오. InputFilter 또는 DropdownFilter 일 수 있습니다.

• onlyButtons - 제목을 숨기고 구성된 버튼 만 표시합니다.

필터링

헤더의 filter 속성을 사용하여 열에 대한 필터링을 활성화 할 수 있습니다. 필터에는 두 가지 유형이 있습니다.

입력 필터

입력 필터는 헤더에 텍스트 입력을 표시합니다.

 filter: {
  type: 'text',
  key: 'name',
  placeholder: 'Filter names...' 
}

type 'text' , 'number' , 'date' 등이 될 수 있습니다.

드롭 다운 필터

드롭 다운 필터는 헤더에서 선택 드롭 다운을 보여줍니다.

 filter: {
  type: 'dropdown',
  key: 'category',
  options: [
    { label: 'Electronics', value: 'electronics' },
    { label: 'Furniture', value: 'furniture' }
  ]
}

options 선택에 대한 옵션을 제공하는 배열, 약속 또는 관찰 가능한 일 수 있습니다.

이를 통해 페이지 진화물 테이블 헤더에 풍부한 필터링 옵션을 추가 할 수 있습니다.

필터 모드

mode 는 필터 UI가 표시되는 위치를 제어합니다 - 헤더 셀의 인라인 또는 토글 메뉴에서 :

인라인 모드

설정 mode: 'row' 헤더 셀에 직접 내장 된 필터 인라인을 표시합니다.

 filter: {
  mode: 'row',
  type: 'text',
  key: 'name'
}

이것은 해당 열의 헤더 셀에 필터 UI를 직접 표시합니다.

메뉴 모드

설정 mode: 'menu' 메뉴 토글 뒤에 필터 UI를 숨 깁니다.

 filter: {
  mode: 'menu',  
  type: 'text',
  key: 'name'
}

메뉴 토글 버튼이 헤더에 추가됩니다. 클릭하면 필터 UI를 표시하는 패널이 엽니 다.

메뉴 모드는 토글 뒤에 필터를 숨기고 헤더를보다 컴팩트하게 유지하는 데 유용합니다.

따라서 요약 :

• mode: 'row' 헤더 셀에 필터를 인라인으로 표시합니다.
• mode: 'menu' 메뉴 토글 뒤에 필터 UI를 숨 깁니다.

mode 옵션은 필터 UI가 헤더에 표시되는 방식에 유연성을 제공합니다.

배치 동작

batchActions 입력을 통해 현재 선택된 행에 적용되는 작업 버튼 및 드롭 다운을 정의 할 수 있습니다.

동작 버튼으로 드롭 다운을 구성하는 PaginableTableDropdown 객체의 배열이 필요합니다.

@ Component ( {

  // ...

} )
export class TableComponent {

  batchActions : PaginableTableDropdown [ ] = [

    // Dropdown with action buttons
    {
      buttons : [
        {
          icon : 'fa fa-pencil' , 
          title : 'Edit' ,
          handler : ( ) => {
            // edit selected rows  
          }
        } ,
        {
          icon : 'fa fa-trash' ,
          title : 'Delete' ,
          color : 'danger' , 
          handler : ( ) => {
            // delete selected rows
          }
        }
      ]
    } ,

    // Single action button
    {
      icon : 'fa fa-file-export' ,
      title : 'Export' ,
      handler : ( ) => {
        // export selected rows
      }
    }

  ] ;

} 

 < paginable-table
	[headers] =" headers "
	[rows] =" items "
	[batchActions] =" batchActions "
	[(ngModel)] =" selected "
>
</ paginable-table >

각 버튼은 icon , title , color 및 handler 의 속성을 허용합니다.

handler 방법은 선택한 행의 배열을 인수로 수신합니다.

이를 통해 테이블에서 현재 선택된 행에 대량 작업을 수행 할 수 있습니다.

입력

이름	유형	기본	필수의	설명
옵션	PaginableTableOptions	-	거짓	유연한 속성 세트를 통해 테이블의 스타일, 동작 및 페이지 매김 전략을 사용자 정의 할 수 있습니다.
헤더	PaginableTable Header	-	진실	테이블에 열 헤더가 표시되는지 여부를 결정하는 부울 값.
쪽수 매기기	PaginableTablePagination | 관찰 가능한 <PaginableTablePagination>	-	진실	테이블에 Pagination Control이 표시되는지 여부를 결정하는 부울 값.
안수	PaginableTabledination	-	거짓	초기 안수를 나타내는 대상.
줄	배열 <ay>	널	진실	객체의 배열, 각 객체는 테이블의 행을 나타냅니다. Este Caso La Paginación Se Generará Automátiacamente
배치	배열 <PaginableTabledRopdown | PaginableTableButton>	[]	거짓	객체의 배열, 각 객체는 한 번에 여러 행에 적용될 수있는 배치 동작을 나타냅니다.
퍼지 옵션	배열 <번호>	[10, 20, 50, 100]	거짓	숫자 배열, 각 숫자는 페이지 당 표시되는 행 수에 대한 옵션을 나타냅니다.
반응	'XS'| 'sm'| 'md'| 'lg'| '특대'	널	거짓	테이블이 다른 화면 크기에 응답할지 여부를 결정하는 부울 값.
ID	끈	널	거짓	테이블 구성 요소 인스턴스의 식별자로 사용되는 문자열 값.
showsearchinput	부울	진실	거짓	검색 입력이 테이블 상단에 표시되는지 여부를 결정하는 부울 값.
선택 가능	부울	거짓	거짓	행을 클릭하여 행을 선택할 수 있는지 여부를 결정합니다.
다수의	부울	거짓	거짓	클릭하여 여러 행을 한 번에 선택할 수 있는지 여부를 결정합니다.
SelectableProperty	끈	널	거짓	각 행 객체의 속성 이름은 선택 가능한지 여부를 나타냅니다.
페이지 매김	'하단'| '상단'| '둘 다'	'맨 아래'	거짓	Pagination Control이 표시되어야하는 위치 (예 : "상단"또는 "하단").
Paginationinfo	부울	진실	거짓	페이지 매김 정보가 표시되는지 여부를 결정합니다.
SearchKeys	정렬	[]	거짓	구성 요소 자체가 페이지 매김을 수행 할 때 검색을 수행 해야하는 속성을 결정합니다. 헤더에 포함되지 않은 속성이 될 수 있습니다.

출력

산출	유형	설명
(Item Click)	티	[multiple]="true" 중에 항목이 추가 될 때 해고되었습니다. 출력 추가 항목
(onpageclick)	숫자	Select Blur에서 해고되었습니다
(onselected)	t | 정렬	행 또는 배수 행을 선택하거나 선택하지 않을 때 트리거됩니다.
(onparamschange)	PaginationParamschangeevent	안수 또는 페이지가 변경 될 때 트리거됩니다
(FilterChange)	FilterChangeEvent	필터가 변경 될 때 트리거됩니다

행동 양식

이름	설명
열려 있는	선택 드롭 다운 패널을 엽니 다
닫다	선택 드롭 다운 패널을 닫습니다
집중하다	선택 요소에 중점을 둡니다
흐림	선택 요소를 흐리게합니다

템플릿

다음 각 템플릿은 다양한 목적으로 사용할 수 있습니다.

데이터 메시지가 없습니다

결과가없는 경우 NO 데이터 메시지 템플릿을 사용하여 사용자 정의 메시지를 표시 할 수 있습니다.

 < paginable-table [rows] =" [] " [headers] =" headers " >
	< ng-template paginableTableNotFound >
		< div class =" d-flex flex-column p-4 text-center " >
			< img src =" https://media.giphy.com/media/3ohA2ZD9EkeK2AyfdK/giphy.gif " alt =" Sorry! " class =" m-auto "
				style =" width: 256px; " >
			< div >
				< i class =" fa fa-info-circle " aria-hidden =" true " > </ i > Nothing has been found...
			</ div >
		</ div >
	</ ng-template >
</ paginable-table >

헤더

헤더 셀 템플릿은 헤더 내의 각 개별 셀을 사용자 정의하는 데 사용될 수 있습니다.

 < paginable-table [headers] =" headers " [rows] =" items " >
	< ng-template paginableTableHeader header =" name " let-header =" header " >
		< div class =" animate-character " > Name </ div >
	</ ng-template >
</ paginable-table >

열

행 템플릿을 사용하여 행의 전체 내용을 사용자 정의 할 수 있습니다.

 < paginable-table [headers] =" headers " [rows] =" items " >
	< ng-template paginableTableRow let-item >
		< tr >
			< td >
				< img [src] =" 'assets/avatars/64_' + (item.id % 16 + 1) + '.png' " [alt] =" item.name " >
			</ td >
			< td > {{ item.name }} </ td >
			< td > {{ item.email }} </ td >
			< td >
				< a class =" btn btn-link " (click) =" item.unfold  = !item.unfold " >
					< i class =" fa " [ngClass] =" {'fa-chevron-down': !item.unfold, 'fa-chevron-up': item.unfold} " > </ i >
				</ a >
			</ td >
		</ tr >
		< ng-container *ngIf =" item.unfold " >
			< tr >
				< td colspan =" 4 " >
					Columna personalizada
				</ td >
			</ tr >
			< tr >
				< td >
					Columna personalizada 1
				</ td >
				< td >
					Columna personalizada 2
				</ td >
				< td >
					Columna personalizada 3
				</ td >
				< td >
				</ td >
			</ tr >
		</ ng-container >
	</ ng-template >
</ paginable-table >

셀

셀 템플릿은 각 개별 셀을 행 내에서 사용자 정의하는 데 사용될 수 있습니다.

 < paginable-table [headers] =" headers " [rows] =" items " >
	< ng-template paginableTableCell header =" avatar " let-item =" item " >
		< img
			[src] =" 'assets/avatars/64_' + ((item.id % 16) + 1) + '.png' "
			[alt] =" item.name "
		/>
	</ ng-template >
	< ng-template paginableTableCell header =" name " let-property =" property " >
		< span class =" badge badge-pill badge-info " > customized column </ span >
		{{ property }}
	</ ng-template >
	< ng-template paginableTableCell header =" email " let-item =" item " >
		{{ item.email }}
		< span class =" badge badge-pill badge-warning " > also customized </ span >
	</ ng-template >
</ paginable-table >

로딩

로드 템플릿은 결과를 가져 오는 동안 로딩 애니메이션을 표시하는 데 사용될 수 있습니다.

 < paginable-table [headers] =" headers " [pagination] =" pagination " >
	< ng-template paginableTableLoading >
		< div class =" text-center " >
			< img src =" ../images/loading.svg " >
		</ div >
	</ ng-template >
</ paginable-table >

오류 메시지

오류 메시지 템플릿을 사용하여 결과를 가져 오는 결과가있는 경우 사용자 정의 오류 메시지를 표시 할 수 있습니다.

 < paginable-table [headers] =" headers " [pagination] =" pagination " >
	< ng-template paginableTableError >
		< div class =" text-center " >
			< img src =" ../images/error.svg " >
		</ div >
	</ ng-template >
</ paginable-table >

확장 가능한 행

확장 가능한 행 템플릿을 사용하여 행이 확장 될 때 나타나는 컨텐츠를 정의 할 수 있습니다.

 < paginable-table [headers] =" headers " [rows] =" items " >
	< ng-template paginableTableExpandingRow let-item =" item " >
		< tr class =" bg-warning " >
			< td [attr.colspan] =" headers.length + 1 " >
				< div class =" d-flex " >
					< div class =" align-self-center pr-4 " >
						< img [src] =" 'assets/avatars/64_' + (item.id % 16 + 1) + '.png' " [alt] =" item.name " >
					</ div >
					< div class =" flex-grow " >
						< h3 > {{ item.email }} </ h3 >
						< h4 > {{ item.name }} </ h4 >
					</ div >
				</ div >
			</ td >
		</ tr >
	</ ng-template >
	< ng-template paginableTableExpandingRow let-item =" item " >
		< tr class =" bg-warning " >
			< td [attr.colspan] =" headers.length + 1 " class =" bg-success " >
				< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo leo eget elementum
					condimentum.
				</ p >
			</ td >
		</ tr >
	</ ng-template >
</ paginable-table >

필터

필터 템플릿을 사용하여 각 열의 필터의 모양과 동작을 사용자 정의 할 수 있습니다.

 < paginable-table
	(filterChange) =" onFilterChange($event) "
	(onParamsChange) =" fetch($event) "
	[selectable] =" true "
	[headers] =" headers "
	[pagination] =" pagination "
>
	< ng-template
		paginableTableFilter
		header =" email "
		let-header =" header "
		let-formControl =" formControl "
	>
		...
		< div
			class =" form-check "
			*ngFor =" let option of header.filter.options | async "
		>
			< input
				class =" form-check-input "
				type =" checkbox "
				[value] =" option.value "
				[formControl] =" formControl "
			/>
			< label class =" form-check-label " >
				{{ option.text }}
			</ label >
		</ div >
	</ ng-template >
	...
</ paginable-table > 

다른

다음은 영어로 된 NG-PAGINABLE 목록에 대한 문서입니다.

ng-paginable 명단

ng-paginable-list 구성 요소는 중첩 된 계층 적 목록에서 데이터를 렌더링 할 수 있습니다.

기본 사용

이를 사용하려면 데이터 구조를 tree 입력에 전달합니다.

 < ng80-paginable-list [tree] =" data " > </ ng80-paginable-list > 

 data = [
  {
    label : 'Item 1' , 
    children : [
      { label : 'Subitem 1' } ,
      { label : 'Subitem 2' } ,
    ]
  } ,
  {
   label : 'Item 2'
  }
] ;

이렇게하면 항목 및 하위 항목이있는 목록이 생성됩니다.

옵션

사용 가능한 옵션은 다음과 같습니다.

• bindLabel 레이블로 사용할 항목 객체의 속성
• selectable - 단일 또는 다중 선택을 활성화합니다. 값 : 'single' | 'multiple'

출력

다음 이벤트를 제출합니다.

• itemClick 항목을 클릭 할 때. 항목과 무너진 상태를 반환합니다.

사용자 정의

템플릿을 사용하여 각 항목의 마크 업을 사용자 정의 할 수 있습니다.

 < ng80-paginable-list
  [tree] =" data "
  [selectable] =" 'multiple' "
  (itemClick) =" onSelect($event) " >

  < ng-template listItemTpt let-item >
    < div class =" custom " >  
      {{item.label}}
    </ div >
  </ ng-template >
  
</ ng80-paginable-list >

이를 통해 렌더링 된 항목을 완전히 사용자 정의 할 수 있습니다.

양식과의 통합

구성 요소는 ControlValueAccessor 구현하여 반응 형태와 통합됩니다.

선택된 값은 formControl 에서 사용할 수 있습니다.

접근성

구성 요소는 양호한 접근성을 위해 초점 및 키보드 탐색을 올바르게 관리합니다.

라벨 번역

NG-PAGINABLE에는 구성 요소의 UI에 사용되는 영어 및 스페인어로 된 사전 정의 된 레이블이 포함됩니다.

이 레이블을 쉽게 대체하여 다른 언어 나 사용자 정의 번역을 지원할 수 있습니다.

기본 변환

기본적으로 NG-PAGINABLE은 브라우저의 언어를 사용하여 영어와 스페인어를 선택합니다. 추가 구성이 필요하지 않고 기본 레이블이 표시됩니다.

번역 사용자 정의

PaginableTranslationService 에 맞춤 변환을 제공 할 수 있습니다.

@ Component ( {
  // ..
} )
export class AppComponent {

  constructor ( private translationService : PaginableTranslationService ) {

    this . translationService . setTranslation ( {
      first : 'First' ,
      prev : 'Previous' , 
      next : 'Next' ,
      last : 'Last'
      // ...
    } ) ;

  }

}

기본 레이블을 무시합니다.

번역 라이브러리와 통합

NGX-Translate와 같은 번역 라이브러리와 NG-PAGINABLE을 통합하려면 언어 변경 사항을 구독 할 수 있습니다.

@ Component ( {
  // ...  
} )
export class AppComponent {

  constructor (
    private translate : TranslateService ,
    private translationService : PaginableTranslationService
  ) {

    this . translate . onLangChange . subscribe ( ( event ) => {

      this . translate . get ( 'PAGINATION' ) . subscribe ( ( translations ) => {
        this . translationService . setTranslation ( translations ) ;
      } )

    } ) ;

  }

}

이렇게하면 앱의 언어가 변경되면 페이지 매김 레이블이 업데이트됩니다.

이를 통해 UI 전반에 걸쳐 완전하고 통합 된 번역이 가능합니다.

번역 API

PaginableTranslationService 는 다음 방법을 노출시킵니다.

 setTranslation ( translations : PaginableTranslations ) // sets translations
getTranslation ( key : string ) // gets a specific label

이는 구성 요소가 사용하는 레이블 및 언어를 완전히 제어 할 수 있습니다.

이 유연한 API를 사용하면 NG-Paginable을 모든 번역 전략과 통합하는 것이 간단합니다.

구성 (선택 사항)

일반적으로 루트 구성 요소에 ngpaginablemodule의 forroot 메소드에 구성을 전달하여 기본 값을 제공하기 위해 속성 값을 사용자 정의하여 전역 구성 및 현지화 메시지를 설정할 수도 있습니다.

  @ NgModule ( {
	declarations : [ UserListComponent ] ,
	imports : [
		CommonModule ,
		NgPaginableModule . forRoot ( {
			mapping : {
				currentPage : 'page' ,
				data : 'content' ,
				lastPage : 'last' ,
				total : 'total'
			}
		} )
	] ,
	exports : [ UserListComponent ] ,
	providers : [ ]
} )
export class UserListModule { } 

변경 감지

NG-PAGINABLE 구성 요소는 OnPush 변경 감지를 구현하여 불변 데이터 유형에 대한 더러운 검사 점검을 의미합니다. 즉, 객체 돌연변이가 다음과 같은 경우를 의미합니다.

 this . rows . push ( { id : 1 , name : 'New item' } )

구성 요소는 변경을 감지하지 않습니다. 대신해야합니다.

 this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ; 

영감을주는

이 구성 요소는 개발자가 사용자 정의 코드를 작성하지 않고도 각도 테이블에 Laravel Paginated Objects의 데이터를보다 쉽게 ​​표시 할 수 있도록 만들어졌습니다. 시간이 지남에 따라 구성 옵션이 추가되어 모든 프레임 워크 또는 사용자 정의 페이지 매김 구조와 함께 사용하기 쉽도록

지원하다

이 라이브러리가 도움이되고 개발을 지원하고 싶다면 커피를 사는 것을 고려하십시오. 지원해 주셔서 감사합니다!

저자에 대해

Carlos Morcillo는 웹 개발자이자 오픈 소스 기고자입니다. 이 웹 사이트에서 그의 작품을 더 찾을 수 있습니다.