'Paginated Data Table not filtering properly

I've created a Paginated Datatable in flutter and using GetX

Obx(() => PaginatedDataTable(
        source: controller.data.value,
        columns: getColumns(rolling_plan_columns),
        columnSpacing: 30.0,
        rowsPerPage: controller.rowsPerPage.value,
        onPageChanged: (page) {
          print("PAGE_CHANGE $page");
          controller.currentPage.value++;
          controller.update();
        },
      ))

I've created a datasource for this widget

class MyData extends DataTableSource {
   List<RollingPlanModel> listData = [];

   @override
   bool get isRowCountApproximate => false;
   @override
   int get rowCount => Get.find<RollingPlanController>().filteredListData.value.length;

   set rowCount(int rowCnt) {
      rowCount = rowCnt;
   }

   @override
   int get selectedRowCount => 0;

   @override
   DataRow? getRow(int index) {
      print("WEEK 1 " + 
      Get.find<RollingPlanController().filteredListData.value[index].week1Plan.toString());
      return DataRow.byIndex(
         index: index,
         cells: [
      DataCell(Text(Get.find<RollingPlanController>().filteredListData.value[index].productName.toString())),
      
      DataCell(Obx(() => TextFormField(
        readOnly: Get.find<RollingPlanController>().isReadOnly.value,
        initialValue: Get.find<RollingPlanController>().filteredListData.value[index].week1Plan.toString(),
        decoration: const InputDecoration(
          hintText: '0',
        ),
        onChanged: (value) {
          Get.find<RollingPlanController>().filteredListData.value[index].week1Plan = double.tryParse(value) ?? 0.0;
          Get.find<RollingPlanController>().setTotals();
        },
      ))),
      //------------More datacells down here------------------
      ]
);
}}

I'm trying to filter rows of paginated datatable, refer below method in the GetX controller class, which I'm calling on dropdown item selected:

void filterDataProductWise () {
filteredListData.clear();

if (selectedProduct.value == 'All') {
  filteredListData.addAll(data.value.listData);
  filteredListData.refresh();
  data.refresh();
  data.value.notifyListeners();
  return;
}

data.value.listData.forEach((element) {
  if (selectedProduct.value == element.productName) {
    filteredListData.add(element);
  }
});

filteredListData.refresh();
data.refresh();
data.value.notifyListeners();
}

Also,

var data = MyData().obs; //the datasource class

But the filter doesn't work as expected. Please refer Image

The data structure used to hold data has correct values but not reflecting in the UI. Please help!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source