How to Filter or Sort All Rows for Paging in Flutter DataTable?

In this article, we will show how to filter or sort all rows available for paging in a Flutter DataTable.

Initialize the SfDataGrid widget with the necessary properties. To filter or sort all rows available for paging, avoid overriding the handlePageChange method in the DataGridSource class. The DataGrid will automatically split the rows for each page based on the SfDataPager.pageCount, which is determined by dividing the total number of DataGridRows by the SfDataPager.pageCount. If you want to control the number of rows per page, you can use the SfDataGrid.rowsPerPage property.

  late EmployeeDataSource employeeDataSource;
  final int _rowsPerPage = 10;
  final double _dataPagerHeight = 60.0;
  List<Employee> employees = <Employee>[];

  @override
  void initState() {
    super.initState();
    employees = getEmployeeData();
    employeeDataSource = EmployeeDataSource(employeeData: employees);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter DataGrid'),
      ),
      body: LayoutBuilder(builder: (context, constraint) {
        return Column(children: [
          SizedBox(
              height: constraint.maxHeight - _dataPagerHeight,
              width: constraint.maxWidth,
              child: _buildDataGrid(constraint)),
          SizedBox(
            height: _dataPagerHeight,
            child: SfDataPager(
              delegate: employeeDataSource,
              pageCount: (employees.length / _rowsPerPage).ceil().toDouble(),
            ),
          )
        ]);
      }),
    );
  }

  Widget _buildDataGrid(BoxConstraints constraint) {
    return SfDataGrid(
      source: employeeDataSource,
      rowsPerPage: _rowsPerPage,
      allowFiltering: true,
      allowSorting: true,
      columnWidthMode: ColumnWidthMode.fill,
      columns: <GridColumn>[
        GridColumn(
            columnName: 'id',
            label: Container(
                padding: const EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: const Text(
                  'ID',
                ))),
        GridColumn(
            columnName: 'name',
            label: Container(
                padding: const EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: const Text('Name'))),
        GridColumn(
            columnName: 'designation',
            label: Container(
                padding: const EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: const Text(
                  'Designation',
                  overflow: TextOverflow.ellipsis,
                ))),
        GridColumn(
            columnName: 'salary',
            label: Container(
                padding: const EdgeInsets.all(8.0),
                alignment: Alignment.center,
                child: const Text('Salary'))),
      ],
    );
  }

You can download the example from GitHub.

Conclusion
I hope you enjoyed learning how to filter or sort all rows for paging in Flutter DataTable.
You can refer to our Flutter DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flatter DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!