Как создать таблицу данных в Angular 10 с помощью Bootstrap и Contrast

Что такое таблица данных?

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

Что такое контраст?

Contrast Design Bootstrap, широко известный как Contrast, был разработан Devwares. Это удивительный набор пользовательского интерфейса, который имеет огромное количество компонентов, которые упрощают процесс разработки. Contrast включил загрузку в свое ядро, сделав его еще более функциональным, отзывчивым и элегантным.

Это само собой разумеется, установив Contrast в свой проект, bootstrap также пометит его. Это как получить два замечательных продукта по цене одного. Какая сделка! Одним из компонентов, которые может предложить Contrast, является компонент таблицы данных, который функционален и прост в использовании.

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

ПРЕДПОСЫЛКИ

Эта таблица данных будет построена с использованием Angular, Bootstrap и Contrast (ng-cdbangular-pro).

Вам не нужно иметь какие-либо предварительные знания о ng-cdbangular-pro, но необходимо следующее:

Базовое понимание Angular Базовое понимание установленного Bootstrap NPM

Давайте начнем.

ШАГ 1

Получите Pro-версию Contrast здесь

ШАГ 2

Добавьте файл ng-cdbangular-pro tgz в корневую папку вашего проекта и выполните эту команду в своем терминале:

npm install ./ng-cdbangular-pro-1.0.0.tgz

ШАГ 3

Добавьте активы Contrast Pro и bootstrap-css-only в angular.json.

"assets": [
{
"glob": "**/*",
"input": "node_modules/ng-cdbangular-pro/assets",
"output": "/assets/"
}
],
"styles": [
"node_modules/bootstrap-css-only/css/bootstrap.min.css"
]

ШАГ 4

import { TableModule } from 'ng-cdbangular-pro';
@NgModule({
  imports: [ TableModule ]
})

NB, для нашего примера нам понадобятся некоторые другие компоненты, поэтому наш окончательный файл app.module.ts будет выглядеть так:

import table module in app.module.ts
import { TableModule, CardModule } from 'ng-cdbangular-pro';
@NgModule({
  imports: [ TableModule, CardModule ]
})

Примечание: вместо того, чтобы импортировать один компонент за раз, в отличие от него есть модуль CDBProModule, который содержит импорт всех пользовательских компонентов, которые может предложить контраст.

import { CDBProModule } from 'ng-cdbangular-pro';
@NgModule({
  imports: [CDBProModule]
})

Легко, верно? Теперь продолжим. Компонент Contrast с данными имеет довольно много шаблонного кода, так что давайте пройдемся по нему. В файл .component.ts вставьте следующие фрагменты кода:

import { Component, OnInit, ViewChild } from '@angular/core';
import { CdbTableDirective } from 'ng-cdbangular-pro';
export class ExampleComponent implements OnInit {
@ViewChild(CdbTableDirective, { static: true }) CdbTable: CdbTableDirective;
pages = [];
activePage = 0;
previousData;
entries = [5, 10, 15];
searchText: string = '';
elements: any = [
{
name: 'Tiger Nixon',
position: 'System Architect',
office: 'Edinburgh',
age: '61',
date: '2011/04/25',
salary: '320',
},
{
name: 'Garrett Winters',
position: 'Accountant',
office: 'Tokyo',
age: '63',
date: '2011/07/25',
salary: '170',
},
{
name: 'Ashton Cox',
position: 'Junior Technical Author',
office: 'San Francisco',
age: '66',
date: '2009/01/12',
salary: '86',
},
{
name: 'Cedric Kelly',
position: 'Senior JavaScript Developer',
office: 'Edinburgh',
age: '22',
date: '2012/03/29',
salary: '433',
},
{
name: 'Airi Satou',
position: 'Accountant',
office: 'Tokyo',
age: '33',
date: '2008/11/28',
salary: '162',
},
{
name: 'Brielle Williamson',
position: 'Integration Specialist',
office: 'New York',
age: '61',
date: '2012/12/02',
salary: '372',
},
{
name: 'Herrod Chandler',
position: 'Sales Assistant',
office: 'San Francisco',
age: '59',
date: '2012/08/06',
salary: '137',
},
{
name: 'Rhona Davidson',
position: 'Integration Specialist',
office: 'Tokyo',
age: '55',
date: '2010/10/14',
salary: '327',
},
{
name: 'Colleen Hurst',
position: 'JavaScript Developer',
office: 'San Francisco',
age: '39',
date: '2009/09/15',
salary: '205',
},
{
name: 'Sonya Frost',
position: 'Software Engineer',
office: 'Edinburgh',
age: '23',
date: '2008/12/13',
salary: '103',
},
{
name: 'Jena Gaines',
position: 'Office Manager',
office: 'London',
age: '30',
date: '2008/12/19',
salary: '90',
},
{
name: 'Quinn Flynn',
position: 'Support Lead',
office: 'Edinburgh',
age: '22',
date: '2013/03/03',
salary: '342',
},
{
name: 'Charde Marshall',
position: 'Regional Director',
office: 'San Francisco',
age: '36',
date: '2008/10/16',
salary: '470',
},
{
name: 'Haley Kennedy',
position: 'Senior Marketing Designer',
office: 'London',
age: '43',
date: '2012/12/18',
salary: '313',
},
];
headElements = [
{
label: 'Name',
field: 'name',
enableSort: 'enabled',
},
{
label: 'Position',
field: 'position',
enableSort: 'enabled',
},
{
label: 'Office',
field: 'office',
enableSort: 'enabled',
},
{
label: 'Age',
field: 'age',
enableSort: 'enabled',
},
{
label: 'Date',
field: 'date',
enableSort: 'enabled',
},
{
label: 'Salary',
field: 'salary',
enableSort: 'enabled',
},
];
ngOnInit(): void {
this.CdbTable.\_activePage.subscribe(data => {
this.activePage = data;
});
this.CdbTable.setEntries(this.entries[0]);
this.CdbTable.setDataSource(this.elements);
this.CdbTable.setPages();
this.previousData = this.CdbTable.getDataSource();
this.pages = this.CdbTable.pages;
}
searchItems() {
const prev = this.CdbTable.getDataSource();
if (!this.searchText) {
this.elements = this.CdbTable.getDataSource();
this.CdbTable.setDataSource(this.previousData);
this.CdbTable.setPages();
this.pages = this.CdbTable.pages;
}
if (this.searchText) {
this.CdbTable.setDataSource(this.previousData);
this.elements = this.CdbTable.filterData(this.searchText);
this.CdbTable.setDataSource(this.elements);
this.CdbTable.setPages();
this.pages = this.CdbTable.pages;
}
}
changeEntries(e) {
this.CdbTable.setEntries(e.target.value);
this.CdbTable.setPages();
this.pages = this.CdbTable.pages;
this.CdbTable.\_activePage.next(0);
}
sort() {
this.pages = this.CdbTable.pages;
}
}

Свойство «elements» должно содержать ваши пользовательские данные, а «headElements» должно содержать значения «thead» ваших данных. Передавая «включено» в параметр «enableSort», вы даете заголовку таблицы (thead) возможность сортировать данные по возрастанию и убыванию значения.

Чтобы отключить это, просто передайте «отключено» в параметр «enableSort». Свойство entry должно содержать настраиваемое количество значений данных, отображаемых на странице. P.S. Все, кроме «elements», «headElements» и «entries», следует оставить в покое.

ПРОСМОТР HTML Вставьте следующий фрагмент кода в HTML-представление:

<CDBCard>
<CDBCardBody>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto pl-0">
<label>
Show Entries
<select
class='custom-select custom-select-sm form-control form-control-sm ml-0'
style="margin-left: .5rem" (change)='changeEntries(\$event)'>
<option *ngFor='let entry of entries' [value]="entry">
{{ entry }}
</option>
</select>
</label>
</div>
<div class="col-md-6 mx-auto pl-0 pr-0 mb-1">
<div class="md-form">
<input
type="text"
placeholder="Search"
class="form-control" [(ngModel)]="searchText"
(keyup)="searchItems()" id="search-input">
</div>
</div>
<table CdbTable CdbTableScroll maxHeight="500"
#tableEl1="CdbTable" stickyHeader="true" hover="true"
striped='true' bordered="true" class="z-depth-1 col-md-12">
<thead class="sticky-top">
<tr>
<th *ngFor="let head of headElements; let i = index" (sortEnd)="sort()"
[CdbTableSort]="elements" [tableEl]='tableEl1'
[enableSort]='headElements[i].enableSort'
[sortBy]="headElements[i].field" scope="col">
{{head.label | titlecase}}
<CDBIcon [fas]=true icon="sort"></CDBIcon>
</th>
</tr>
</thead>
<tbody #row>
<tr *ngFor="let el of pages[activePage]; let i = index">
<th scope="row">{{el.name}}</th>
<td class="red-text">{{el.position}}</td>
<td>{{el.office}}</td>
<td>{{el.age}}</td>
<td>{{el.date}}</td>
<td>{{el.salary | currency:'USD' }}</td>
</tr>
<tr *ngIf="!pages[activePage]">
<td scope="row" colspan="100%">No Matching Records Found</td>
</tr>
</tbody>
<thead class="sticky-top">
<tr>
<th _ngFor="let head of headElements; let i = index"
(sortEnd)="sort()"
[CdbTableSort]="elements" [tableEl]='tableEl1'
[enableSort]='headElements[i].enableSort'
[sortBy]="headElements[i].field"
scope="col">{{head.label | titlecase}}
<CDBIcon [fas]=true icon="sort"></CDBIcon>
</th>
</tr>
</thead>
</table>
<div class="mt-2">
Showing
{{activePage > 0 ? (activePage _ pages[0].length) + 1 : activePage + 1}}
to {{pages.length -
1 > activePage
? pages[activePage].length * (activePage + 1)
: elements.length}} of {{elements.length}} records
</div>
<CDBTable-pagination class="ml-auto pr-0 mt-2" [tableEl]='tableEl1'>
</CDBTable-pagination>
</div>
</div>
</CDBCardBody>
</CDBCard>

В этом примере использовался другой компонент Contrast под названием CDBCard исключительно для визуальных целей. Конечный результат выглядит так: Ура! Мы подошли к концу этой статьи.

Надеюсь, это было так же весело и познавательно, как было для меня для вас. Щелкните эту ссылку и перейдите на страницу таблицы данных, чтобы увидеть демонстрацию в реальном времени. Компонент таблицы данных Contrast поставляется с множеством настраиваемых функций. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документами.

Создавайте потрясающие веб-сайты и веб-приложения

Создание различных пользовательских компонентов в angular для ваших веб-приложений или веб-сайтов может стать очень напряженным. Поэтому мы решили создать контраст. Мы собрали набор пользовательского интерфейса с более чем 10000 компонентов, 5 панелей администратора и 23 дополнительных различных шаблона страниц для создания практически любого типа веб-приложения или веб-страницы в одном продукте под названием Contrast Pro. Попробуй контраст про!

Contrast React Bootstrap PRO — это многоцелевой профессиональный шаблон, набор пользовательского интерфейса для создания вашего следующего лендинга, администрирования, SAAS, предварительного запуска и т. д., проекта с чистым, хорошо документированным, хорошо продуманным шаблоном и компонентами пользовательского интерфейса. Узнать больше о Контраст Про

Ресурсы

Вам могут пригодиться следующие ресурсы:

Первоначально опубликовано на https://www.devwares.com.