ng paginable

Paginable

Ini adalah modul sudut yang menyediakan komponen tabel dengan kemampuan penyortiran dan penyaringan. Integrasi out-of-the-box dengan respons Laravel dan kerangka kerja lainnya dan tata letak boostrap.

Versi

Angular	NG-Paginasi
> = 14.0.0 <15.0.0	v1.x

---

Daftar isi

• Fitur
• Memulai
• Ubah deteksi
• Gaya khusus
• Keadaan validasi
• Berkontribusi
• Perkembangan
• Inspirasi

Fitur

• Objek pagination yang dapat disesuaikan
• opsi server atau pagination lokal
• Penyaringan dan penyortiran
• Kustomisasi header, sel, filter, pesan kesalahan dan tidak ada pesan item melalui template
• Kolom dengan tombol Tindakan
• Pilihan individu dan beberapa baris
• Integrasi seleksi dengan bentuk reaktif
• Tombol aksi batch dan dropdown
• UKURAN KOLOM
• Mesin pencari global dan khusus kolom
• Diadaptasi dengan bootstrap 5,
• Tabel responsif
• Opsi Kustomisasi Pagination
• Aksesibilitas
• Kolom yang dapat diperluas

Memulai

Instalasi

Untuk menginstal komponen ini, jalankan perintah berikut di direktori proyek Anda:

npm install ng-paginable --save 

Penggunaan

Untuk menggunakan komponen ini, impor ke modul Anda:

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

 código del componente 

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

Opsi Tabel

Komponen tabel paginated menerima objek PaginableTableOptions untuk menyesuaikan gaya dan perilaku melalui pengikatan @Input() options .

Opsi yang tersedia adalah:

• serverSidePagination - Mengaktifkan pagination sisi server. Default salah.

• cursor - Gaya kursor saat melayang. 'pointer' atau 'default' .

• hoverableRows - Aktifkan Baris Sorot di Hover. false default.

• striped - Stripe Table 'rows' atau 'columns' .

• variant - Varian warna untuk tabel gaya. Menerima nilai string apa pun.

Misalnya:

 @Component({

  // ...

})
export class TableComponent {

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

}

Ini memungkinkan pagination sisi server, melayang baris, garis-garis kolom, kursor khusus, dan varian tema gelap.

Properti variant memungkinkan menerapkan tema warna khusus ke tabel dengan memberikan nilai string apa pun. Beberapa opsi umum adalah 'primary' , 'secondary' , 'success' , 'danger' dll.

Ini memberikan fleksibilitas untuk menyesuaikan gaya tabel berdasarkan sistem desain atau persyaratan tema Anda.

Membuat header

Header untuk tabel paginated dikonfigurasi dengan melewati array objek PaginableTableHeader .

Setiap header dapat memiliki properti berikut:

• title - Teks yang akan ditampilkan di sel header.

• property - Pemetaan kunci ke properti di data baris.

• icon - Ikon opsional untuk ditampilkan di sebelah teks judul.

• align - Alignment of the Text, Entah 'start' , 'center' , atau 'end' . Default adalah 'start' .

• sortable - apakah kolom dapat diurutkan. Default false .

• wrapping - Apakah teks di kolom dapat membungkus. 'wrap' atau 'nowrap' . Default adalah 'nowrap' .

• sticky - Tempelkan header ke 'start' atau 'end' meja saat menggulir.

• buttons - Array tombol atau dropdown untuk ditampilkan di header.

• filter - Tambahkan pemfilteran untuk kolom. Dapat berupa InputFilter atau DropdownFilter .

• onlyButtons - Sembunyikan judul dan hanya menampilkan tombol yang dikonfigurasi.

Penyaringan

Properti filter pada header dapat digunakan untuk mengaktifkan penyaringan untuk kolom. Ada dua jenis filter:

Filter input

Filter input menampilkan input teks di header:

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

type bisa menjadi 'text' , 'number' , 'date' , dll.

Filter dropdown

Filter dropdown menunjukkan dropdown pilih di header:

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

options dapat berupa array, janji, atau dapat diamati yang menyediakan opsi untuk Select.

Ini memungkinkan penambahan opsi penyaringan yang kaya untuk header meja paginated.

Mode filter

mode mengontrol di mana UI filter ditampilkan - baik inline di sel header atau di menu yang beralih:

Mode inline

mode: 'row' akan menampilkan filter inline, tertanam langsung di sel header:

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

Ini menampilkan UI filter langsung di sel header untuk kolom itu.

Mode Menu

mode: 'menu' akan menyembunyikan filter UI di belakang menu sakelar:

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

Ini menambahkan tombol sakelar menu ke header. Saat diklik, itu membuka panel yang menampilkan UI filter.

Mode menu berguna untuk menyembunyikan filter di belakang sakelar dan menjaga header lebih kompak.

Jadi secara ringkas:

• mode: 'row' menampilkan filter inline di sel header.
• mode: 'menu' menyembunyikan UI filter di belakang sakelar menu.

Opsi mode memberikan fleksibilitas dalam bagaimana UI filter disajikan di header.

Tindakan Batch

Input batchActions memungkinkan penentu tombol dan dropdown yang berlaku untuk baris yang saat ini dipilih.

Dibutuhkan array objek PaginableTableDropdown , masing -masing mengkonfigurasi dropdown dengan tombol tindakan:

@ 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 >

Setiap tombol menerima properti untuk icon , title , color , dan handler .

Metode handler akan menerima array baris yang dipilih sebagai argumen.

Ini memungkinkan melakukan tindakan curah pada baris yang saat ini dipilih dalam tabel.

Input

Nama	Jenis	Bawaan	Diperlukan	Keterangan
opsi	PaginablletableOptions	-	PALSU	Memungkinkan menyesuaikan gaya, perilaku, dan strategi pagination tabel melalui serangkaian properti yang fleksibel.
header	PaginableTableHeader	-	BENAR	Nilai boolean yang menentukan apakah tabel akan menampilkan header kolom atau tidak.
pagination	PaginableTablePagination | Diobservasi <PaginableTablePagination>	-	BENAR	Nilai boolean yang menentukan apakah tabel akan menampilkan kontrol pagination atau tidak.
pentahbisan	Paginablletableordinasi	-	PALSU	Objek yang mewakili penahbisan awal.
baris	Array <sif>	batal	BENAR	Array objek, setiap objek yang mewakili baris dalam tabel. En este caso la paginación se generará automáticamente
Batchaksi	Array <paginableTableDropdown | PaginableTableButton>	[]	PALSU	Array objek, setiap objek yang mewakili tindakan batch yang dapat diterapkan ke beberapa baris sekaligus.
PerpageOptions	Array <number>	[10, 20, 50, 100]	PALSU	Array angka, setiap angka yang mewakili opsi untuk berapa banyak baris yang harus ditampilkan per halaman.
responsif	'xs' | 'sm' | 'md' | 'LG' | 'xl'	batal	PALSU	Nilai boolean yang menentukan apakah tabel akan responsif terhadap ukuran layar yang berbeda.
pengenal	rangkaian	batal	PALSU	Nilai string yang digunakan sebagai pengidentifikasi untuk instance komponen tabel.
Menunjukkan Penelitian	Boolean	BENAR	PALSU	Nilai boolean yang menentukan apakah input pencarian akan ditampilkan di bagian atas tabel.
dapat dipilih	Boolean	PALSU	PALSU	Menentukan apakah baris dapat dipilih atau tidak dengan mengkliknya.
banyak	Boolean	PALSU	PALSU	Menentukan apakah beberapa baris dapat dipilih sekaligus dengan mengkliknya.
SelectableProperty	rangkaian	batal	PALSU	Nama properti pada setiap objek baris yang menunjukkan apakah dapat dipilih atau tidak.
PaginationPosisi Pagination	'Bottom' | 'Top' | 'keduanya'	'dasar'	PALSU	Posisi di mana kontrol pagination harus ditampilkan (misalnya, "atas" atau "bawah").
PaginationInfo	Boolean	BENAR	PALSU	Menentukan apakah informasi pagination ditampilkan atau tidak.
carting	Array	[]	PALSU	Menentukan properti yang harus dilakukan pencarian ketika pagination dilakukan oleh komponen itu sendiri. Mereka dapat menjadi properti yang tidak termasuk dalam header.

Output

Keluaran	Jenis	Keterangan
(ItemClick)	T	Dipecat saat item ditambahkan sementara [multiple]="true" . Output ditambahkan item
(Onpageclick)	nomor	Ditembakkan pada blur terpilih
(Terpilih)	T | Array	Dipicu saat baris atau baris kelipatan dipilih atau tidak dipilih
(Onparamschange)	PaginationParamschangeEvent	Dipicu saat penahbisan atau perubahan halaman
(filterchange)	FilterchangeEvent	Dipicu saat filter berubah

Metode

Nama	Keterangan
membuka	Membuka Panel Dropdown Pilih
menutup	Menutup Panel Dropdown Pilih
fokus	Memfokuskan elemen pilih
mengaburkan	Mengaburkan elemen pilih

Template

Masing -masing templat berikut dapat digunakan untuk tujuan yang berbeda:

Tidak ada pesan data

Templat pesan No Data dapat digunakan untuk menampilkan pesan khusus ketika tidak ada hasil yang ditemukan.

 < 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 >

Header

Template sel header dapat digunakan untuk menyesuaikan setiap sel individu di dalam header.

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

Baris

Template baris dapat digunakan untuk menyesuaikan seluruh konten baris.

 < 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 >

Sel

Template sel dapat digunakan untuk menyesuaikan setiap sel dalam satu baris.

 < 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 >

Memuat

Template pemuatan dapat digunakan untuk menampilkan animasi pemuatan saat hasilnya diambil.

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

Pesan kesalahan

Template pesan kesalahan dapat digunakan untuk menampilkan pesan kesalahan khusus jika ada masalah yang mengambil hasil.

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

Baris yang bisa diperluas

Template baris yang dapat diperluas dapat digunakan untuk menentukan konten yang muncul ketika baris diperluas.

 < 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 >

Filter

Template filter dapat digunakan untuk menyesuaikan penampilan dan perilaku filter untuk setiap kolom.

 < 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 > 

Lainnya

Berikut adalah dokumentasi untuk daftar Ng-Paginable dalam bahasa Inggris:

NG-Paginable-List

Komponen ng-paginable-list memungkinkan rendering data dalam daftar hierarkis bersarang.

Penggunaan dasar

Untuk menggunakannya, cukup berikan struktur data ke input tree :

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

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

Ini akan menghasilkan daftar dengan item dan subitem.

Opsi

Opsi yang tersedia adalah:

• bindLabel - Properti objek item yang akan digunakan sebagai label
• selectable - Mengaktifkan pilihan tunggal atau berganda. Nilai: 'single' | 'multiple'

Output

Memancarkan acara berikut:

• itemClick - Saat mengklik item. Mengembalikan item dan keadaannya yang runtuh.

Kustomisasi

Anda dapat menggunakan templat untuk menyesuaikan markup untuk setiap item:

 < 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 >

Ini memungkinkan sepenuhnya menyesuaikan item yang diberikan.

Integrasi dengan formulir

Komponen mengimplementasikan ControlValueAccessor untuk berintegrasi dengan bentuk reaktif.

Nilai yang dipilih akan tersedia di formControl .

Aksesibilitas

Komponen dengan benar mengelola navigasi fokus dan keyboard untuk aksesibilitas yang baik.

Menerjemahkan label

NG-Paginable termasuk label yang telah ditentukan dalam bahasa Inggris dan Spanyol yang digunakan dalam UI komponen.

Label ini dapat dengan mudah diganti untuk mendukung bahasa lain atau terjemahan khusus.

Terjemahan default

Secara default, Ng-Paginable menggunakan bahasa browser untuk memilih antara bahasa Inggris dan Spanyol. Ini menampilkan label default tanpa memerlukan konfigurasi tambahan.

Menyesuaikan terjemahan

Anda dapat memberikan terjemahan khusus ke PaginableTranslationService :

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

  constructor ( private translationService : PaginableTranslationService ) {

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

  }

}

Ini mengesampingkan label default.

Integrasi dengan perpustakaan terjemahan

Untuk mengintegrasikan NG-Paginable dengan pustaka terjemahan seperti NGX-Translate, Anda dapat berlangganan perubahan bahasa:

@ 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 ) ;
      } )

    } ) ;

  }

}

Dengan cara ini, ketika bahasa berubah dalam aplikasi, label pagination diperbarui.

Ini memungkinkan terjemahan yang lengkap dan terintegrasi melintasi UI.

API Terjemahan

PaginableTranslationService memperlihatkan metode berikut:

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

Ini memberikan kontrol penuh atas label dan bahasa yang digunakan oleh komponen.

Dengan API fleksibel ini, mudah untuk mengintegrasikan NG-Paginable dengan strategi terjemahan apa pun.

Konfigurasi (opsional)

Anda juga dapat mengatur pesan konfigurasi dan lokalisasi global dengan menyampaikan metode forroot NGPaginableModule, biasanya dalam komponen root Anda, dan menyesuaikan nilai propertinya untuk memberikan nilai default.

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

Ubah deteksi

Komponen NG-Paginable mengimplementasikan deteksi perubahan OnPush yang berarti pemeriksaan pemeriksaan kotor untuk tipe data yang tidak dapat diubah. Itu berarti jika Anda melakukan mutasi objek seperti:

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

Komponen tidak akan mendeteksi perubahan. Sebaliknya Anda perlu melakukannya:

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

Menginspirasi

Komponen ini dibuat untuk memudahkan pengembang untuk menampilkan data dari objek paginated Laravel dalam tabel sudut tanpa harus menulis kode khusus. Seiring waktu, opsi untuk konfigurasi ditambahkan agar lebih mudah digunakan dengan kerangka apa pun atau dengan struktur pagination khusus.

Mendukung

Jika Anda menemukan perpustakaan ini bermanfaat dan ingin mendukung pengembangannya, pertimbangkan untuk membelikan saya kopi. Terima kasih atas dukungan Anda!

Tentang penulis

Carlos Morcillo adalah pengembang web dan kontributor open source. Anda dapat menemukan lebih banyak karyanya di situs web ini.