Problem

We were working on a project and have built its front-end on AngularJS v1.6.6 along with Office UI Fabric, we have used community-driven library ngofficeuifabric when we came across a situation of table sorting and realised that it wasn’t a great fit for our custom sorting and filtering requirements raised during future sprints by our product owners and business in general.

Solution

We have replaced ‘uif-table’ with ‘table’ and added custom events for sorting, the markup  is as follows:

<table class="table ms-Table">
<thead>
<tr>
<th class="col-header col-header-5 pointer">
                ID
                <span>
                    <span>
                        &nbsp;
                        <i class="ms-Icon ms-Icon--caretDown"></i>
                    </span>
                    <span>
                        &nbsp;
                        <i class="ms-Icon ms-Icon--caretUp"></i>
                    </span>
                </span></th>
<th class="col-header col-header-5 pointer">
                Object ID
                <span>
                    <span>
                        &nbsp;
                        <i class="ms-Icon ms-Icon--caretDown"></i>
                    </span>
                    <span>
                        &nbsp;
                        <i class="ms-Icon ms-Icon--caretUp"></i>
                    </span>
                </span></th>
<th class="col-header col-header-5 pointer">
                Object Date Submitted
                <span>
                    <span>
                        &nbsp;
                        <i class="ms-Icon ms-Icon--caretDown"></i>
                    </span>
                    <span>
                        &nbsp;
                        <i class="ms-Icon ms-Icon--caretUp"></i>
                    </span>
                </span></th>
<th class="col-header col-header-10 pointer">
                Object Date
                <span>
                    <span>
                        &nbsp;
                        <i class="ms-Icon ms-Icon--caretDown"></i>
                    </span>
                    <span>
                        &nbsp;
                        <i class="ms-Icon ms-Icon--caretUp"></i>
                    </span>
                </span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-body"><a target="_self">{{item.ID}}</a></td>
<td class="col-body">{{item.ObjectID}}</td>
<td class="col-body">{{item.DateSubmitted | date:'dd MMM yyyy'}}</td>
<td class="col-body">{{item.ObjectDate | date:'dd MMM yyyy'}}</td>
</tr>
</tbody>
</table>

You need to have two variables to store what ‘order’ is required (ascending/descending) and which ‘field’ (column) to sort records on, we have initialised these variables as follows:

//setting sorting variables for the first page load
$scope.sortAsc = false;
$scope.sortField = 'item.ID';

We have attached a function to table header to record a click on a specific column and get the column’s desired sorting order, this will just record at the start of the function to set the direction for sorting.

function headerClick(fieldName, sortType) {
	$scope.sortField = fieldName;
	$scope.sortAsc = sortType;

	var sortedItems = [];

	angular.forEach($scope.items, function (item) {
		sortedItems.push(item);
	});

	$scope.items = [];

	if (fieldName === "item.ObjectDate") {
		// sorting for custom date field as it can include text
		sortedItems.sort(function (a, b) {
			return compareObjectDate(a.Date, b.Date);
		});
	}
	else if (fieldName === "item.DateSubmitted") {
		// sorting for any date field
		sortedItems.sort(function (a, b) {
			return compareDate(a.DateSubmitted, b.DateSubmitted);
		});
	}
	else {
		// sorting for any text field
		sortedItems.sort(function (a, b) {
			return a.fieldName.localeCompare(b.fieldName);
		});
	}

	//check what type of sorting (ascending/descending) is required and then do the needful
	if ($scope.sortAsc) { // ASC
		$scope.items = sortedItems;
	}
	else { // DSC
		$scope.items = sortedItems.reverse();
	}
}

Here is a sample function to sort based on date field. You can create your own sorting function for each column type following the simple logic:

  • if two values are equal, a function should return “0”
  • if the first value is lesser than 2nd value, a function should return “-1”
  • if the first value is greater than 2nd value, a function should return “1”
function compareDate(date1,date2) {
	var dateFirst = new Date(date1);
	var dateSecond = new Date(date2);

	if (dateFirst === dateSecond) {
		return 0;
	}
	else if (dateFirst < dateSecond) {
		return -1;
	}
	else {
		return 1;
	}
}

Pictures below will show custom sorting on the column Object Date as it has got a combination dates and text and client wanted to sort it in a specified order.

Ascending order (custom field)

032018_1123_Creatingsor2.png

Descending order (custom field)

032018_1123_Creatingsor1.png

Another view of looking at the same table but sorting on the column ‘Object Date submitted’ as it contains only dates.

Ascending order (date field)

Capture1

Descending order (date field)

Capture

It’s an easy way to use plain Angular and HTML to order/sort your table as per the needs. This can be enhanced further to cater specific needs or use 3rd party library to deliver rich functionality.

Category:
Application Development and Integration, User Experience
Tags:
,

Join the conversation! 1 Comment

  1. […] post in which we made HTML table sortable if you haven’t read it yet, give it a read first at URL. Next obvious request from end users is to introduce pagination in […]

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: