Requesting documentation on how to use angular-datatables with emphasis on reactive data sources such as observables and/or signals

[joelmuskwe]

🚀 Feature request

Is your feature request related to a problem? Please describe.

Yes, it's related to a common challenge faced by developers working with Angular and angular-datatables. The problem is the lack of comprehensive documentation or best practices on how to efficiently integrate angular-datatables with reactive data sources, particularly when using observables and state management tools like ngrx. I'm always confused on the best way to implement angular-datatables in an Angular application that relies heavily on reactive data patterns. The current documentation and available resources do not sufficiently cover how to handle data updates, state management, or use observables effectively with angular-datatables with emphasis on only the use of ajax.

Describe the solution you'd like

I would like to see detailed documentation or a guide that specifically addresses the integration of angular-datatables with reactive data sources in Angular applications.

[shanmukhateja]

Hi,

First off, I like the idea behind this feature request. It would certainly highlight reactive data sources and can potentially aid in building efficient web apps.

However, the challenge I see here is every project is unique to the design choices made during the development of the app. Do you have a reference documentation for any other library for inspiration that does this well?

During the latest revamp of the documentation, I have added "Deprecated" section as a stepping stone to something similar. You can read more about this in the FAQ page.

This change would really make for a powerful improvement on the library and I can't wait to hear from you.

Cheers :)

[joelmuskwe]

@shanmukhateja so the concept I came up with was to split the data property from the ADTSettings as it was limiting us in terms of change detection in terms of passing data hence causing the need for the dtTrigger so now with 2 Inputs namely the dtOptions and data we can replace the dtTrigger and leverage on the OnChanges life cycle and if it's not the firstChange we then can automattically destroy and empty the datatable. So essentially now I am making changes to then see how to prioritise data sources as we will have three: the zero confing, the one using ajax and finally passing data directly with a config. so the beauty would be the data input is of type any[] meaning you can pass either an array or use an observable with async pipe or use angular signals. hence able to support many design choices made during development.

[joelmuskwe]

@l-lin and @shanmukhateja Please find the changes I did for angular-datatables I haven't updated the documentation. I am not sure if it is something you would consider for v3 for angular data tables. Please find my refactored branch: Angular Datatables V3 Suggestion. I have also added the following use case to the directive:
In .ts

  data$ = of([
    {
      id: 1,
      firstName: 'John',
      lastName: 'Doe',
      age: 30,
      gender: 'Male',
      birthDate: new Date('1990-01-08'),
    },
    {
      id: 2,
      firstName: 'Jane',
      lastName: 'Doe',
      age: 26,
      gender: 'Female',
      birthDate: new Date('1994-06-07'),
    },
    {
      id: 3,
      firstName: 'Janice',
      lastName: 'Doe',
      age: 30,
      gender: 'Female',
      birthDate: new Date('1990-01-16'),
    },
    {
      id: 4,
      firstName: 'John',
      lastName: 'Smith',
      age: 46,
      gender: 'Male',
      birthDate: new Date('1974-03-13'),
    },
    {
      id: 5,
      firstName: 'Jane',
      lastName: 'Smith',
      age: 26,
      gender: 'Female',
      birthDate: new Date('1994-05-21'),
    },
  ]);

dtOptions!: ADTSettings = {
      pageLength: 10,
      columns: [
        {
          title: 'FirstName',
          data: 'firstName',
        },
        {
          title: 'LastName',
          data: 'lastName',
        },
        {
          title: 'Age',
          data: 'age',
        },
        {
          title: 'Gender',
          data: 'gender'
        }
      ]
    };

  <table class="table table-sm table-striped" [dtOptions]="dtOptions" [data]="data$ | async"  datatable></table>

Your suggestions and feedback will be greatly appreciated. And if you are for these changes I can start refactoring the code and documentation for this.

Regards,

[l-lin]

Thanks for your suggestion!
Unfortunately, I'm currently a bit (more like a lot) rusty with front-end stuff. It's been years since I touched any typescript/angular codes.
So I can't provide much help right now. However, @shanmukhateja might be able to better assist you.

[shanmukhateja]

Hey @joelmuskwe

This looks great however I am curious as to how this would affect rendering and manipulating the table when DT extensions are applied.
For ex. the Buttons extension's documentation showcases data export functionality when combined with another DT extension.

The reason we haven't separated data into it's own thing was to ensure 100% compatibility with DT ecosystem. If we wish to sprinkle Angular magic onto this, I believe this should be done behind a flag (@Input() maybe?).

Alternative

We can look into JavaScript Proxy to setup listener on all properties inside dtOptions and micromanage the state accordingly. The idea is to setup Proxy on dtOptions and trigger events within the library. I am not sure how helpful this would be but its something that's been on my mind for a few weeks now.

[joelmuskwe]

thanks let me look into Javascript Proxy was also maybe thinking of adding it as an alternative directive for the different use case. but I do see it needs a bit of more work which I will put and provide feedback. thank you for your suggestions