Скачать ng paginable - скачивание ng paginable исходного кода.

Пэтчин

Это угловой модуль, который предоставляет таблицу компонент с возможностями сортировки и фильтрации. Интеграция вне коробки с ответами Laravel и другими структурами и макетом Boostrap.

Версии

Угловой	Нг-сжигание
> = 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 >

Параметры таблицы

Компонент на страницах таблицы принимает объект PaginableTableOptions для настройки стиля и поведения с помощью привязки @Input() options .

Доступные варианты:

serverSidePagination - включить серверную страницу. По умолчанию ложь.
cursor - Стиль курсора при парящих рядах. 'pointer' или 'default' .
hoverableRows - включить выделение строки на Hover. По умолчанию 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 на заголовке можно использовать для включения фильтрации для столбца. Есть два типа фильтров:

Входной фильтр

Входной фильтр отображает текстовый ввод в заголовке:

 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 , где отображается интерфейс фильтра - либо встроенный в ячейке заголовка, либо в меню, которое переключается:

Встроенный режим

mode: 'row' отобразит встроенный фильтр, встроенный непосредственно в ячейку заголовка:

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

Это отображает интерфейс фильтра непосредственно в ячейке заголовка для этого столбца.

Режим меню

mode: 'menu' скрыт пользовательский интерфейс фильтра за переключением меню:

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

Это добавляет кнопку переключения меню к заголовку. При нажатии, он открывает панель, которая отображает пользовательский интерфейс фильтра.

Режим меню полезен для скрытия фильтров за переключением и поддержания более компактного заголовка.

Итак, в итоге:

mode: 'row' отображает встроенный фильтр в ячейке заголовка.
mode: 'menu' скрывает пользовательский интерфейс фильтра за переключением меню.

Опция mode дает гибкость в том, как пользовательский интерфейс фильтра представлен в заголовках.

Партийные действия

Вход 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	-	ЛОЖЬ	Объект, представляющий начальное рукоположение.
ряды	Массив <любой>	нулевой	истинный	Массив объектов, каждый объект, представляющий строку в таблице. En este caso la paginación se generará Automáticamente
партии	Массив <paginabletabledropdown \| Paginabletablebutton>	[]	ЛОЖЬ	Массив объектов, каждый объект, представляющий пакетное действие, которое может быть применено к нескольким рядам одновременно.
Perpageoptions	Массив <число>	[10, 20, 50, 100]	ЛОЖЬ	Массив чисел, каждый номер, представляющий опцию для того, сколько строк следует отображать на страницу.
отзывчивый	'xs' \| 'sm' \| 'MD' \| 'lg' \| 'xl'	нулевой	ЛОЖЬ	Логическое значение, которое определяет, будет ли таблица реагировать на разные размеры экрана.
идентификатор	нить	нулевой	ЛОЖЬ	Значение строки, которое используется в качестве идентификатора для экземпляра компонента таблицы.
ShowEarchInput	логический	истинный	ЛОЖЬ	Логическое значение, которое определяет, будет ли вход поиска в верхней части таблицы.
выбираемый	логический	ЛОЖЬ	ЛОЖЬ	Определяет, можно ли выбрать строки, нажав на них.
несколько	логический	ЛОЖЬ	ЛОЖЬ	Определяет, можно ли выбрать несколько строк сразу, нажав на них.
SelectableProperty	нить	нулевой	ЛОЖЬ	Имя свойства на каждом объекте строки, который указывает, выбирается ли оно или нет.
Пареньпозиция	'снизу' \| 'top' \| 'оба'	'нижний'	ЛОЖЬ	Положение, в котором следует отображать элементы управления страницей (например, «верх» или «внизу»).
PaginationInfo	логический	истинный	ЛОЖЬ	Определяет, отображается ли информация о странице.
SearchKeys	Множество	[]	ЛОЖЬ	Определяет, в каких свойствах должен выполняться поиск, когда сама компонент выполняется. Они могут быть свойствами, не включенными в заголовки.

Выходы

Выход	Тип	Описание
(ItemClick)	Т	Выстрелил, когда добавляется элемент, а `[multiple]="true"` . Выходы добавлены элемент
(OnPageClick)	число	Выстрелил на избранном размывании
(на выборе)	T \| Множество	Запускается, когда выбираются или не выбираются строки или кратные ряды
(OnParamSchange)	PaginationParamSchangeEvent	Запускается при изменении рукоположения или страницы
(Filterchange)	FilterChangeEvent	Запускается при изменении фильтров

Методы

Имя	Описание
открыть	Открывает раскрывающуюся панель Select
закрывать	Закрывает раскрывающуюся панель Select
фокус	Фокусирует элемент Select
размытие	Размывает элемент выбора

Шаблоны

Каждый из следующих шаблонов может использоваться для разных целей:

Нет сообщения данных

Шаблон сообщения без данных можно использовать для отображения пользовательского сообщения, когда результаты не найдены.

 < 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-обработанного списка на английском языке:

ng-paginable-list

Компонент 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 включает предопределенные этикетки на английском и испанском языке, которые используются в пользовательском интерфейсе компонента.

Эти этикетки можно легко заменить, чтобы поддержать другие языки или пользовательские переводы.

Переводы по умолчанию

По умолчанию NG-Paginable использует язык браузера для выбора между английским и испанским. Это отображает метки по умолчанию без необходимости дополнительной конфигурации.

Настройка переводов

Вы можете предоставить пользовательские переводы в PaginableTranslationService :

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

  constructor ( private translationService : PaginableTranslationService ) {

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

  }

}

Это переопределяет метки по умолчанию.

Интеграция с библиотеками перевода

Чтобы интегрировать NG-обработку с библиотеками перевода, такими как 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 ) ;
      } )

    } ) ;

  }

}

Таким образом, когда язык меняется в приложении, этикетки страниц обновляются.

Это позволяет завершить интегрированный перевод через пользовательский интерфейс.

Перевод API

PaginableTranslationService раскрывает следующие методы:

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

Это обеспечивает полный контроль над этикетками и языком, используемыми компонентом.

С помощью этого гибкого API легко интегрировать NG-можно с любой стратегией перевода.

Конфигурация (необязательно)

Вы также можете установить глобальную конфигурацию и сообщения локализации, передавая метод конфигурации NGPAGINABLEMODULE, обычно в вашем корневом компоненте, и настраивать значения его свойств для обеспечения значений по умолчанию.

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

Обнаружение изменений

Компонент, способствующий NG, реализует обнаружение изменений OnPush , что означает, что грязная проверка проверяет для неизменных типов данных. Это означает, что если вы делаете мутации объектов, такие как:

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

Компонент не обнаружит изменения. Вместо этого вам нужно сделать:

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

Вдохновляющий

Этот компонент был создан, чтобы разработчикам было проще отображать данные из Laravel Paginated Objects в угловой таблице без необходимости записать пользовательский код. Со временем были добавлены параметры для конфигурации, чтобы упростить использование с любыми структурами или с пользовательскими структурами страниц.

Поддерживать

Если вы обнаружите эту библиотеку полезной и хотите поддержать ее разработку, подумайте о покупке мне кофе. Спасибо за вашу поддержку!

Об авторе

Carlos Morcillo - веб -разработчик и участник с открытым исходным кодом. Вы можете найти больше его работы на этом сайте.

Расширять

ng paginable

Пэтчин

Версии

Оглавление

Функции

Начиная

Установка

Использование

Параметры таблицы

Генерирующие заголовки

Фильтрация

Входной фильтр

Выпачающийся фильтр

Режимы фильтра

Встроенный режим

Режим меню

Партийные действия

Входные данные

Выходы

Методы

Шаблоны

Нет сообщения данных

Заголовок

Ряд

Клетка

Загрузка

Сообщение об ошибке

Расширяемый ряд

Фильтры

Другой

ng-paginable-list

Основное использование

Параметры

Выходы

Настройка

Интеграция с формами

Доступность

Перевод ярлыков

Переводы по умолчанию

Настройка переводов

Интеграция с библиотеками перевода

Перевод API

Конфигурация (необязательно)

Обнаружение изменений

Вдохновляющий

Поддерживать

Об авторе