---
title: "Discussion on \"Beautifully encapsulate table related logic using a custom data source + sorting using directives\" | Hashnode"
description: "Discussion on \"Beautifully encapsulate table related logic using a custom data source + sorting using directives\". We use custom data source and directives to encapsulate the data manipulation logic for a table"
url: "https://hashnode.com/posts/implement-custom-data-source-sorting-angular/609633121ea29f2c341dfbc1"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Beautifully encapsulate table related logic using a custom data source + sorting using directives](https://sreyaj.dev/implement-custom-data-source-sorting-angular?utm_source=hashnode&utm_medium=feed)

We use custom data source and directives to encapsulate the data manipulation logic for a table

May 8, 2021 · 11 min read · sreyaj.dev  
Read the article

-   [#angularjs](https://hashnode.com/tag/angularjs)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#tutorial](https://hashnode.com/tag/tutorial)
-   [#web-development](https://hashnode.com/tag/web-development)

## Written by

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

@adisreyaj · Kerala, IN

  
[View profile](https://hashnode.com/@adisreyaj)

Full stack dev ✨

Full stack web developer with main focus in Angular and NodeJs. Loves creating blogs, a side projects when I can find time.

## Responses 4

Markdown supported · ⌘↵ to post

[Nikita Chechet](https://hashnode.com/@otecValerian)

[Feb 8, 2024](https://hashnode.com/posts/implement-custom-data-source-sorting-angular/609633121ea29f2c341dfbc1/comment/65c4773dd9d91f2a2105be77)

Good job! I've found it really useful and well-structured. Keep going!)

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[Feb 8, 2024](https://hashnode.com/posts/implement-custom-data-source-sorting-angular/609633121ea29f2c341dfbc1/comment/65c4773dd9d91f2a2105be77#reply-65c4f6e2216aefa287598385)

Thanks ✨

[NgocThai](https://hashnode.com/@ngThai)

[Jan 24, 2022](https://hashnode.com/posts/implement-custom-data-source-sorting-angular/609633121ea29f2c341dfbc1/comment/61ee7f6fe247b2151e61bfcc)

I found your article very good, however there is a small problem, when I use method updateData() in ngOnInit(){this.userSource.updateData(\[{name: '1', email: '2', birthday : '3'}\]);} data table won't work

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[Jan 24, 2022](https://hashnode.com/posts/implement-custom-data-source-sorting-angular/609633121ea29f2c341dfbc1/comment/61ee7f6fe247b2151e61bfcc#reply-61eec3fee247b2151e61cae5)

Glad you found it useful. I think the issue is because in the Datasource updateData method, we are not calling: this.inititalDataSubject.next(res); when the data passed is not an observable.

[Mickey D. Luffy](https://hashnode.com/@dluffy)

[Sep 11, 2021](https://hashnode.com/posts/implement-custom-data-source-sorting-angular/609633121ea29f2c341dfbc1/comment/613d31151821961e2551f4a4)

Sweeet!!! How i wish to see the backend **pagination** portion

[Paul Oloyede](https://hashnode.com/@paulayo)

[May 8, 2021](https://hashnode.com/posts/implement-custom-data-source-sorting-angular/609633121ea29f2c341dfbc1/comment/609658f321068818a5c60f45)

Awesome article, thanks for putting it out

Cheers!

[Adithya Sreyaj](https://hashnode.com/@adisreyaj)

[May 8, 2021](https://hashnode.com/posts/implement-custom-data-source-sorting-angular/609633121ea29f2c341dfbc1/comment/609658f321068818a5c60f45#reply-6096592821068818a5c60f55)

Glad you liked it!