ng paginable
1.0.0
これは、ソートとフィルタリング機能を備えたテーブルコンポーネントを提供する角度モジュールです。 Laravel Responsesおよびその他のフレームワークおよびブースストラップレイアウトとのすぐに使用できる統合。
| 角度 | ng-pagination |
|---|---|
| > = 14.0.0 <15.0.0 | v1.x |
このコンポーネントをインストールするには、プロジェクトディレクトリで次のコマンドを実行します。
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 >ページングされたテーブルコンポーネントは、 @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'などです。
これにより、設計システムまたはテーマの要件に基づいてテーブルスタイリングをカスタマイズする柔軟性が提供されます。
ページングされたテーブルのヘッダーは、 PaginableTableHeaderオブジェクトの配列を渡すことによって構成されます。
各ヘッダーには、次のプロパティを持つことができます。
title - ヘッダーセルに表示するテキスト。
property - 行データのプロパティへのキーマッピング。
icon - タイトルテキストの横に表示するオプションのアイコン。
align 'start' 、 'center' 、または'end'のいずれかのテキストのアライメント。デフォルトは'start'です。
sortable - 列をソートできるかどうか。デフォルトはfalseです。
wrapping - 列のテキストがラップできるかどうか。 'wrap'または'nowrap'のいずれか。デフォルトは'nowrap'です。
sticky - スクロール時にヘッダーをテーブルの'start'または'end'に貼り付けます。
buttons - ヘッダーに表示するボタンまたはドロップダウンの配列。
filter - 列のフィルタリングを追加します。 InputFilterまたはDropdownFilterのいずれかにすることができます。
onlyButtonsタイトルを非表示にし、構成されたボタンのみを表示します。
ヘッダーのfilterプロパティを使用して、列のフィルタリングを有効にできます。フィルターには2つのタイプがあります。
入力フィルターは、ヘッダーにテキスト入力を表示します。
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 | - | 間違い | 柔軟なプロパティセットを使用して、テーブルのスタイル、行動、およびページネーション戦略をカスタマイズできます。 |
| ヘッダー | PaginableTableHeader | - | 真実 | テーブルが列ヘッダーを表示するかどうかを決定するブール値。 |
| ページネーション | PaginableTablePagination |観察可能<paginabletablepagination> | - | 真実 | テーブルがページネーションコントロールを表示するかどうかを決定するブール値。 |
| 叙階 | PaginableTableordination | - | 間違い | 最初の叙階を表すオブジェクト。 |
| 行 | array <ny> | ヌル | 真実 | テーブル内の行を表す各オブジェクトの配列。エステ・カソ・ラ・パギナシオン・セ・ジェネララ・オートアチャンテ |
| バッチアクション | array <paginabletabledropdown | PaginableTableButton> | [] | 間違い | 一度に複数の行に適用できるバッチアクションを表す各オブジェクトの配列。 |
| perpageoptions | 配列<number> | [10、20、50、100] | 間違い | 1ページごとに表示される行の数のオプションを表す各番号の配列。 |
| 応答性 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | ヌル | 間違い | テーブルが異なる画面サイズに応答するかどうかを決定するブール値。 |
| id | 弦 | ヌル | 間違い | テーブルコンポーネントインスタンスの識別子として使用される文字列値。 |
| shosearchinput | ブール | 真実 | 間違い | 検索入力がテーブルの上部に表示されるかどうかを決定するブール値。 |
| 選択可能 | ブール | 間違い | 間違い | 列をクリックして選択できるかどうかを判断します。 |
| 複数 | ブール | 間違い | 間違い | 複数の行をクリックして一度に選択できるかどうかを判断します。 |
| SelectableProperty | 弦 | ヌル | 間違い | 選択可能かどうかを示す各行オブジェクトのプロパティの名前。 |
| ページネーションポジション | 「ボトム」| 「トップ」| '両方' | '底' | 間違い | ページネーションコントロールを表示する位置（「上」または「下」など）。 |
| PaginationInfo | ブール | 真実 | 間違い | ページネーション情報が表示されるかどうかを判断します。 |
| SearchKeys | 配列 | [] | 間違い | コンポーネント自体によってページネーションが実行されるときに、検索を実行する必要があるプロパティを決定します。それらは、ヘッダーに含まれていないプロパティにすることができます。 |
| 出力 | タイプ | 説明 |
|---|---|---|
| （itemclick） | t | [multiple]="true"が追加された場合に発射されます。追加のアイテムを出力します |
| （onpageclick） | 番号 | 選択したぼかしで発射されます |
| （オンになっています） | t |配列 | 行または倍数の行が選択または選択されていないときにトリガーされます |
| （onparamschange） | PaginationParamschangeEvent | 叙階またはページが変更されたときにトリガーされます |
| （filterchange） | FilterChangeEvent | フィルターが変更されるとトリガーされます |
| 名前 | 説明 |
|---|---|
| 開ける | 選択したドロップダウンパネルを開きます |
| 近い | 選択したドロップダウンパネルを閉じます |
| 集中 | 選択要素に焦点を合わせます |
| ぼやけ | 選択要素を曖昧にします |
次の各テンプレートは、さまざまな目的に使用できます。
データなしのメッセージテンプレートを使用して、結果が見つからない場合にカスタムメッセージを表示できます。
< 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-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'
// ...
} ) ;
}
}これにより、デフォルトのラベルがオーバーライドされます。
NG-PaginableをNGX-Translateなどの翻訳ライブラリと統合するには、言語の変更を購読できます。
@ 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全体で完全な統合された翻訳が可能になります。
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 Changeの検出を実装します。これは、不変のデータ型の汚れたチェックチェックを意味します。つまり、次のようなオブジェクト変異を行う場合を意味します。
this . rows . push ( { id : 1 , name : 'New item' } )コンポーネントは変更を検出しません。代わりに、する必要があります：
this . rows = [ ... this . rows , { id : 1 , name : 'New item' } ] ; このコンポーネントは、開発者がカスタムコードを記述することなく、AngularテーブルにLaravel Paginatedオブジェクトからデータを簡単に表示できるようにするために作成されました。時間が経つにつれて、構成のオプションが追加されて、フレームワークまたはカスタムページネーション構造で使いやすくなります。
このライブラリが役立ち、その開発をサポートしたい場合は、コーヒーを購入することを検討してください。ご支援ありがとうございます！
Carlos Morcilloは、Web開発者であり、オープンソースの貢献者です。このウェブサイトで彼の作品をもっと見つけることができます。
