aps-table
v2.9.12
Published
ApsTable is a component library designed for Angular, delivering a flexible table component capable of showcasing data in a structured table layout.
Downloads
152
Readme
ApsTable Overview
ApsTable is a component library designed for Angular, delivering a flexible table component capable of showcasing data in a structured table layout.
Getting Started
ApsTable is compatible with Angular Material and Tailwind CSS.
Installation Process
To begin, install the component using either npm or yarn:
With npm:
npm install --save aps-table
npm install --save aps-fullname
npm install --save aps-datepicker
Or with yarn:
yarn add aps-table
yarn add aps-fullname
yarn add aps-datepicker
How to Set Up
Initially, incorporate the library into your project:
import { ApsTableModule } from 'aps-table';
import { ApsFullnameModule } from 'aps-fullname';
import { ApsDatepickerModule } from 'aps-datepicker';
@NgModule({
imports: [
// other imports
BrowserAnimationsModule,
ApsTableModule,
ApsFullnameModule,
ApsDatepickerModule
// other imports
],
})
Subsequently, configure the settings in your TypeScript file:
settings = {
mode: "inline",
selectMode: "single",
useTransition: true,
isAllDataFetch: false,
sortDefault: null,
actions: {
columnTitle: "Actions",
add: true,
edit: true,
delete: true,
custom: [],
addButton: {},
editButton: {},
deleteButton: {}
},
attr: {
class: "my-table"
},
noDataMessage: "No data available",
primaryKey: "id",
columns: [],
displayedColumns: ["column1", "column2", "column3"],
pager: {
display: true,
pageIndex: 0,
itemsPerPage: 10,
pageSizeOptions: [10, 20, 50, 100],
}
};
Lastly, include the component in your template:
// ...
@Component({
template: `
<aps-table [source]="datasources" [totalItems]="totalItems" [settings]="settings" (edit)="onEdit($event)" (add)="onAdd()"
(delete)="onDelete($event)" (loadData)="onLoadAll()" #aps_table>
</aps-table>
`
})
// ...
@ViewChild('aps_table') aps_table: ApsTableComponent = {} as ApsTableComponent;
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
private sanitizer: DomSanitizer
) { }
ngOnInit(): void {
setTimeout(() => this.onLoadAll());
}
// Function implementations...
datasources = [
{
"message": "Hello World",
"creationDate": "2023-01-01",
"lastName": "Smith",
"firstName": "John"
},
{
"message": "Good Morning",
"creationDate": "2023-02-12",
"lastName": "Doe",
"firstName": "Jane"
},
{
"message": "Happy Coding",
"creationDate": "2023-03-23",
"lastName": "Johnson",
"firstName": "Alice"
},
{
"message": "Have a nice day",
"creationDate": "2023-04-04",
"lastName": "Brown",
"firstName": "Bob"
},
{
"message": "Stay Safe",
"creationDate": "2023-05-15",
"lastName": "Williams",
"firstName": "Charlie"
},
{
"message": "Keep Going",
"creationDate": "2023-06-26",
"lastName": "Miller",
"firstName": "David"
},
{
"message": "You're doing great",
"creationDate": "2023-07-07",
"lastName": "Davis",
"firstName": "Emily"
},
{
"message": "Believe in yourself",
"creationDate": "2023-08-18",
"lastName": "Garcia",
"firstName": "Frank"
},
{
"message": "Make it happen",
"creationDate": "2023-09-29",
"lastName": "Martinez",
"firstName": "Grace"
},
{
"message": "You're capable",
"creationDate": "2023-10-10",
"lastName": "Rodriguez",
"firstName": "Harry"
},
{
"message": "Stay Focused",
"creationDate": "2023-11-21",
"lastName": "Wilson",
"firstName": "Irene"
},
{
"message": "Just Breathe",
"creationDate": "2023-12-02",
"lastName": "Taylor",
"firstName": "Jack"
},
{
"message": "You are strong",
"creationDate": "2024-01-13",
"lastName": "Moore",
"firstName": "Kathy"
},
{
"message": "Keep pushing",
"creationDate": "2024-02-24",
"lastName": "Anderson",
"firstName": "Larry"
},
{
"message": "Never give up",
"creationDate": "2024-03-06",
"lastName": "Thomas",
"firstName": "Molly"
},
{
"message": "You can do it",
"creationDate": "2024-04-17",
"lastName": "Jackson",
"firstName": "Nathan"
},
{
"message": "Stay Positive",
"creationDate": "2024-05-28",
"lastName": "White",
"firstName": "Olivia"
},
{
"message": "Believe in your dreams",
"creationDate": "2024-07-09",
"lastName": "Harris",
"firstName": "Peter"
},
{
"message": "You are capable",
"creationDate": "2024-08-20",
"lastName": "Martin",
"firstName": "Quincy"
},
{
"message": "Keep going",
"creationDate": "2024-09-01",
"lastName": "Thompson",
"firstName": "Rachel"
}
];
With these steps completed, your Angular application is ready to display data using the ApsTable component.