maxim-saplin / data_table_2

In-place substitute for Flutter's DataTable and PaginatedDataTable with fixed/sticky header and extra features
https://pub.dev/packages/data_table_2
BSD 3-Clause "New" or "Revised" License
204 stars 136 forks source link

Async-table version? and ... another problems #31

Closed ghost closed 2 years ago

ghost commented 3 years ago

Maxim, When do you think the async-table version will be available? I have noticed that I have problems with the implementation simulation that I had done to take the rows by pages from server, sometimes it does not work correctly, in addition, I would like to be able to initially place the PaginatedDataTable2 on the last page and it has not been possible. Thank you very much for all the help you are giving me. Regards, Jose

ghost commented 3 years ago

Hi Maxim, I have been able to reproduce in your example the problem that the refreshDatasource() method does not reposition the page in one that contains some rows after the rows have been filtered. Check out the following video: https://recordit.co/86CX0W3yQ1

I have added a "Filter data" button to your async_paginated_data_table2.dart page.

   ......  
   if (getCurrentRouteOption(context) == custPager)
        Positioned(bottom: 16, child: CustomPager(_controller)),
      ElevatedButton(
        child: Text('Filter data'),
        onPressed: () {
          _dessertsDataSource!.filter = 1;
          _dessertsDataSource!.refreshDatasource();
        },
      ),

To the DessertDataSourceAsync class (data_sources.dart file) I have added a filter property.

class DessertDataSourceAsync extends AsyncDataTableSource {
  int filter = 0; // <<<<<<<<<<<<<<<

  DessertDataSourceAsync();
  DessertDataSourceAsync.empty() {
    _empty = true;
  }
  .....

To the DesertsFakeWebService getData method I have added a filter parameter.

  Future<DesertsFakeWebServiceResponse> getData(int filter, int startingAt,
      int count, String sortedBy, bool sortedAsc) async {

I have modified the getData code in this way:

  Future<DesertsFakeWebServiceResponse> getData(int filter, int startingAt,
      int count, String sortedBy, bool sortedAsc) async {
    return Future.delayed(
        Duration(
            milliseconds: startingAt == 0
                ? 2650
                : startingAt < 20
                    ? 2000
                    : 400), () {
      _dessertsX3.sort(_getComparisonFunction(sortedBy, sortedAsc));
      switch (filter) {
        case 0:
          return DesertsFakeWebServiceResponse(_dessertsX3.length,
              _dessertsX3.skip(startingAt).take(count).toList());
        case 1:
          return DesertsFakeWebServiceResponse(
              3, _dessertsX3.skip(0).take(3).toList());
        //break;
        default:
          return DesertsFakeWebServiceResponse(_dessertsX3.length,
              _dessertsX3.skip(startingAt).take(count).toList());
      }
    });
  }
}

If the filter parameter of the method is 1, it only takes 3 rows from the dataset. The files that I have modified are the following: files.zip

The steps to reproduce it you can see them in the video and are the following: 1) I go to the AsyncPaginatedDataTable2 page of your example. 2) I select "Auto rows" 3) Put yourself on a different page than the first one, for example page 49-64 of 90 4) I click on the "Filter data" button Now, as you can see, it has stayed on page 49-64 of 3 that does not contain any rows, when in fact it should have jumped to page 1-16 of 3 that contains the only 3 rows that the datasource now has.

Regarding the problem of being placed on the last page, a possible solution valid for all cases would be that if a negative value is put to the initialFirstRowIndex parameter, it will be placed on the last page. The PaginatedDataTable2 would automatically calculate how many rows it can hold at that initial moment (autorows) and it might know which initialFirstRowIndex to put automatically.

Thanks.

Regards, Jose.

maxim-saplin commented 3 years ago

Hi Jose, thanks for the repro. It is a good case to give a thought about what extra capabilities should (or should not provide) refreshDatasource() (such as making the data_table navigate to first page).

Though I have a suggestion that IMO is a better way to handle filtering. Assuming that changing the filter typically provides a new data set and 99% of web apps I know reset to item view posotion to the very first upon changin filter... That's how you can achieve the behavior with the sample you provided. Change async_paginated_data_table2.dart in the following way:

  1. Make the controller avaialble all the time in AsyncPaginatedDataTable2 (not just in Controller sub-sample, remove the conditional assignment): controller: _controller,

  2. Change the onPressed handler:

        onPressed: () {
          _dessertsDataSource!.filter = 1;
          //_dessertsDataSource!.refreshDatasource();
          _controller.goToFirstPage();
        },
jamolina2021 commented 3 years ago

It can be a solution. In my case it would be:

        onPressed: () {
          _dessertsDataSource!.filter = 1;
          //_dessertsDataSource!.refreshDatasource();
          _controller.goToLastPage();
        },

to go to the last page. But it doesn't seem to work in my application. I will test it in your example to see if it works.

Have you thought about the other topic that I mentioned to you?

Regarding the problem of being placed on the last page, a possible solution valid for all cases would be that if a negative value is put to the initialFirstRowIndex parameter, it will be placed on the last page. The PaginatedDataTable2 would automatically calculate how many rows it can hold at that initial moment (autorows) and it might know which initialFirstRowIndex to put automatically.

Thanks for your help. Regards,

ghost commented 3 years ago

Indeed, _controller.goToLastPage() does not work in this code in your example:

  ElevatedButton(
        child: Text('Filter data'),
        onPressed: () {
          _dessertsDataSource!.filter = 1;
          _dessertsDataSource!.refreshDatasource();
          _controller.goToLastPage();  // <<<<<<<<<<<<<<<<<<<<
        },
      ),
  ElevatedButton(
        child: Text('Filter data'),
        onPressed: () {
          _dessertsDataSource!.filter = 1;
          //_dessertsDataSource!.refreshDatasource();
          _controller.goToLastPage();  // <<<<<<<<<<<<<<<<<<<<
        },
      ),

None of these codes work, it doesn't jump to the last page with rows.

In order to do the tests correctly, I had to modify the following line of your code (async_paginated_data_table2.dart):

          controller:
              //getCurrentRouteOption(context) == custPager ? _controller : null,
              _controller,

Please also tell me something about the other question.

Thank you Maxim.

Regards, Jose

MalikSamiAwan commented 2 years ago

Sir i would like to ask that have you update pub package with AsyncDataTableSource new code because the pub dev package is not finding this class.

maxim-saplin commented 2 years ago

Hey there, it hasn't been pushed to pub.dev. There had been a significant progress lately, 99% is done and covered by tests, though I haven't had enough time to finish it off yet.

You can still try referencing the async-table branch directly in your pubspec while I'm holding pub.dev publish

MalikSamiAwan commented 2 years ago

Thankyou sir

maxim-saplin commented 2 years ago

A new version with AsyncPaginatedDataTable2 has been published to pud.dev

MalikSamiAwan commented 2 years ago

Thanks sir, much appreciated