Data table with filtering, pagination, checkbox selection, click event and expandable row.

Table of Contents

• Description
• Features
• Getting Started
• Usage
• API

Description

Data table with support for essential features such as filtering, pagination, row selection, row expansion and checkbox based selection that works based on a class and data source provided. Has high customization and robust built-in validation. Needs a class and its instances as a data source to work with.

Features

• Pagination: The data is paginated based on the quantity per page provided.
• Filtering: Generic or column based filters to specify the displayed data.
• Click: Click event to handle actions based on an element selected by the user.
• Expand: Expandable rows that display a property value and/or ng-template content specified as HTML.
• Checkbox Selection: Emit a list of elements selected by the user.
• Composition of Classes: Display data from composed objects based on a property mapping provided.
• Date Format: Formats dates based on input provided.
• Built-in Validation: Automatically performs multiple validations to ensure proper functionality, providing explanation in the console.
• Robust Customization: Use the PropertyMapping exported class to specify how the table should handle the data provided.

Getting Started

Step 1 - Installing ngx-s-data-table:

NPM

npm install ngx-s-data-table

Step2 - Importing the module:

example.component.ts

import  { Component }  from  '@angular/core';
import  { DataTableModule }  from  'ngx-s-data-table';

@Component({
selector:  'app-example',
imports:  [DataTableModule],
templateUrl:  './example.component.html',
styleUrl:  './example.component.css'
})

export  class  ExampleComponent { }

example.module.ts

import  { NgModule }  from  '@angular/core';
import  { CommonModule }  from  '@angular/common';
import  { ExampleComponent }  from  './example.component';
import  { DataTableModule }  from  'ngx-s-data-table';

@NgModule({

declarations:  [ExampleComponent],
imports:  [
CommonModule,
DataTableModule
],

exports:  [ExampleComponent]
})
export  class  ExampleModule  {  }

Usage

Basic:

Use the ngx-s-data-table component with a data source and corresponding class:

import  { Component }  from  '@angular/core';
import  { users }  from  './sample-data.data';
import  { User }  from  '../classes/user.class';

@Component({
selector:  'app-example',
standalone:  false,
templateUrl:  './example.component.html',
styleUrl:  './example.component.css'

})

export  class  ExampleComponent  {
	// Replace the class and data source with your own.
	dataClass  =  User;
	dataSource  =  users;
}

In template use the ngx-s-data-table providing the source and class

<ngx-s-data-table
	[dataClass]="dataClass"
	[dataSource]="dataSource"
>
</ngx-s-data-table>

The table should be filled with the data provided.

Customization and compositions The library exports a PropertyMapping class that allows you to specify how the table should handle the data. Especially useful when working with complex or nested data structures.

import  { Component }  from  '@angular/core';
import  { orders }  from  './sample-data.data';
import  { Order }  from  '../classes/order.class';
import  { PropertyMapping }  from  'ngx-s-data-table';

@Component({
	selector:  'app-example',
	standalone:  false,
	templateUrl:  './example.component.html',
	styleUrl:  './example.component.css'
})

export  class  ExampleComponent  {
	dataClass  =  Order;
	dataSource  =  orders;

	propertyMappings:  PropertyMapping[]  =  [
		// both are compositions, this is telling the table to display the "name"
		// property for each one of them
		new  PropertyMapping("user")
			.withCompositionProperty("name"),
		new  PropertyMapping("products")
			.withCompositionProperty("name"),
		// this is adding a collumn that will display the price of each product
		new  PropertyMapping("products").namedAs("prices")
			.withCompositionProperty("price"),
		// this tells the table that the id will be unique and is meant to not
		// be displayed
		new  PropertyMapping("id")
			.beingPrimaryKey().beingIgnored()
	];
}

And then input the mappings specified to the component

<ngx-s-data-table
	[dataClass]="dataClass"
	[dataSource]="dataSource"
	[mappingParams]="propertyMappings"
>
</ngx-s-data-table>

To handle compositions with same property meant to be displayed, it's possible to input the component with a default one. Many more default behaviors can be assigned inputing data to the component, see the API for further information.

<ngx-s-data-table
	[dataClass]="dataClass"
	[dataSource]="dataSource"
	[mappingParams]="propertyMappings"
	[defaultCompositionProperty]="'name'"
	[primaryKeyProperty]="'id'"
	[expandableProperty]="'htmlDescription'"
	[headBackgroundColor]="'rgb(150, 150, 150)'"
>
</ngx-s-data-table>

Options The table by default won't have click, expansion, filtering or pagination features enabled, needing you to specify which features to use and, possibly, define a valid primary key to assure proper behavior.

<ngx-s-data-table
	[dataClass]="dataClass"
	[dataSource]="dataSource"
	[primaryKeyProperty]="'id'"

	[expandableProperty]="'htmlDescription'"
	[useExpantion]="true"
	
	[useGeneralFilter]="true"
	[useColumnsFilter]="true"
	
	[usePagination]="true"
	[pageSize]="25"
	
	[useSelection]="true"
	(selectedActionEvent)="handleSelectedItens($event)"
>
</ngx-s-data-table>

Again, look for the API for further information.

API

DataTable component API

| Input | Type| Usage |----------|----------|----------| | [dataClass] | new (...args: any[]) => any | Class of the data source. | | [dataSource] | Record<string, any>[] | Data source, an array of objects to be displayed. | | [mappingParams] | PropertyMapping[] | Specific configuration for the properties to be displayed. |
| [headBackgroundColor] | string | background-color css attribute value for the thead element. |
| [primaryKeyProperty] | string | Name of the property that is unique across the source of data. | | [defaultCompositionProperty] | string | Name of the default property to be displayed whenever there is a composition. | | [expandableProperty] | string | Name of the property which value is to be displayed as HTML whenever a row is expanded. | | [useExpantion] | boolean | Enables the row expantion feature. | | [useGeneralFilter] | boolean | Enables a general filter. | | [useColumnsFilter] | boolean | Enables a column based filter. | | [useSelection] | boolean | Enables a checkbox based selection. | | [usePagination] | boolean | Enables pagination. | | [useClick] | boolean | Enables emitting click events by clicking a row. |
| [pageSize] | number | Number of rows to be displayed by page. Default is 50. | | [dateFormat] | string | Date format. Example: "MM/dd/yyyy". |

| [Output] | Event type | Usage
| -------|-------|------| | (clickEvent) | any | emits the value of the primary key property from the clicked row object | | (selectedActionEvent) | Record<string, any>[] | emits the selected rows objects |

PropertyMapping class API

| Method | Usage | |----------|----------| | new PropertyMapping(propertyName: string, isIgnored: boolean = false)| PropertyMapping class constructor, defines the mapped property name | | namedAs(columnName: string) | Defines the column name for the property specified | | withCompositionProperty(compositionPropertyName: string) | Defines which property within the object should be displayed by the table | | beingPrimaryKey(isPrimaryKey: boolean = true) | Defines the property as a primary key | | beingIgnored(isIgnored: boolean = true) | Defines that the property shouldn't be displayed | | beingExpandableContent(isExpandableContent: boolean = true) | Defines the property as the content to be displayed when the row's object is expanded | | get propertyName() | gets the property name | | get columnName() | gets the column name | | isIgnored() | gets if the property is to be ignored | | isPrimaryKey | gets if the property is a primary key | | isExpandableContent | gets if the property is expandable content | | compositionPropertyName | gets the name of the property whose value is to be displayed | |